/**
 * Weather Graph — shortcode styles.
 *
 * Accessibility-driven: explicit AA-contrast colours (1.4.3 / 1.4.11),
 * visible focus indicator (2.4.7), >=24px pointer targets (2.5.8),
 * reduced-motion support (2.3.3), and single-column reflow (1.4.10).
 * Colours are namespaced custom properties so a theme can override them
 * while keeping the contrast contract.
 */

.wgraph-container {
	--wgraph-fg: #1a1a1a;
	--wgraph-border: #50575e;
	--wgraph-accent: #1d4f91;
	--wgraph-accent-hover: #173f73;
	--wgraph-on-accent: #ffffff;
	--wgraph-error: #b32d2e;
	--wgraph-surface: #ffffff;

	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 2rem;
	box-sizing: border-box;
	color: var(--wgraph-fg);
}

.wgraph-container *,
.wgraph-container *::before,
.wgraph-container *::after {
	box-sizing: border-box;
}

/* Optional chart title */
.wgraph-title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	color: var(--wgraph-fg);
}

/* ---------------------------------------------------------------------------
 * Controls — preset buttons, date range, data toggle
 * Every interactive control is >=24px tall, has AA contrast and a visible
 * focus ring that does not shift layout.
 * ------------------------------------------------------------------------- */

.wgraph-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.wgraph-filter-btn,
.wgraph-date-apply,
.wgraph-data-toggle {
	min-height: 2.5rem; /* >= 24px target (2.5.8) */
	margin: 0; /* neutralize theme button margins */
	padding: 0.4rem 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	border-radius: 3px;
	cursor: pointer;
}

.wgraph-filter-btn {
	border: 1px solid var(--wgraph-border);
	background: var(--wgraph-surface);
	color: var(--wgraph-fg);
}

.wgraph-filter-btn[aria-pressed="true"] {
	background: var(--wgraph-accent);
	border-color: var(--wgraph-accent);
	color: var(--wgraph-on-accent);
	font-weight: 600;
}

.wgraph-date-apply,
.wgraph-data-toggle {
	border: 1px solid var(--wgraph-accent);
	background: var(--wgraph-accent);
	color: var(--wgraph-on-accent);
}

.wgraph-filter-btn:hover,
.wgraph-data-toggle:hover,
.wgraph-date-apply:hover {
	background: var(--wgraph-accent-hover);
	border-color: var(--wgraph-accent-hover);
	color: var(--wgraph-on-accent);
}

/* Visible focus indicator — outline + offset, no layout shift (2.4.7). */
.wgraph-container :focus-visible {
	outline: 3px solid var(--wgraph-accent);
	outline-offset: 2px;
}

/* Date range fields */
.wgraph-daterange {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.wgraph-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.wgraph-field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wgraph-fg);
}

.wgraph-daterange input[type="date"] {
	min-height: 2.5rem;
	margin: 0; /* neutralize theme input margins so Apply stays aligned */
	padding: 0.3rem 0.5rem;
	font-size: 0.9375rem;
	border: 1px solid var(--wgraph-border);
	border-radius: 3px;
	background: var(--wgraph-surface);
	color: var(--wgraph-fg);
}

.wgraph-daterange input[aria-invalid="true"] {
	border-color: var(--wgraph-error);
	border-width: 2px;
}

.wgraph-date-error {
	flex-basis: 100%;
	margin: 0;
	color: var(--wgraph-error);
	font-weight: 600;
	font-size: 0.9375rem;
}

/* [hidden] must stay hidden even with display:flex containers. */
.wgraph-container [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Chart (supplementary visual) + live status
 * ------------------------------------------------------------------------- */

/* The chart area is a layout-driven, definite-size box (width from the
 * column, height from aspect-ratio). The canvas is absolutely positioned
 * so it fills the box but never feeds its own size back into flex/grid
 * ancestors — this is what lets Chart.js resize DOWN and back UP reliably
 * (with maintainAspectRatio:false). */
.wgraph-chart-area {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	min-height: 240px;
}

.wgraph-chart-area canvas {
	position: absolute;
	inset: 0;
	display: block;
}

/* The inset is reserved HERE, in the base rule, with a transparent border, so
 * that entering the loading state below never moves the text. Reserving it in
 * the loading rule instead would jerk the status text sideways by ~13.6px on
 * EVERY fetch, including 0.13s cache hits.
 * (The loading rule does also bold the text, and bold changes glyph advance
 * widths — so it is not literally geometry-free. But the bold only ever applies
 * to the SHORT "Loading rainfall data…" string: setLoading(false) runs before
 * the status is rewritten to the long summary or error sentence, so the bold can
 * never re-wrap those. And nothing here can reach the chart — see below.)
 * Logical properties, not left/right: every string in this plugin is
 * translatable, and in an RTL locale the accent bar must sit on the leading
 * edge. */
.wgraph-status {
	margin: 0.75rem 0;
	font-size: 0.9375rem;
	color: var(--wgraph-fg);
	border-inline-start: 4px solid transparent;
	padding-inline-start: 0.6rem;
}

/* Loading affordance — text emphasis only. NO spinner, NO dimming, NO motion.
 * A spinner was designed and rejected: it fails 2.2.2 (Level A), because the
 * motion auto-starts and a 365-day fetch measures ~13.8s, and the "essential"
 * exception does not apply (the visible role="status" text already reports
 * progress). Dimming the stale chart fails 1.4.3 and 1.4.11 (AA), because
 * Chart.js paints its axis text INTO the canvas and no conformant dim level
 * exists. The status text IS the affordance; this only emphasizes it.
 * Safe for the chart: .wgraph-status is a SIBLING BELOW .wgraph-chart-area,
 * whose height is width-driven (aspect-ratio), so nothing here can feed back
 * into the box that Chart.js's ResizeObserver watches. */
.wgraph-container.wgraph-is-loading .wgraph-status {
	font-weight: 600;
	border-inline-start-color: var(--wgraph-accent);
}

/* ---------------------------------------------------------------------------
 * Accessible data alternative — disclosure + table + summary
 * ------------------------------------------------------------------------- */

.wgraph-data {
	margin-top: 1rem;
}

.wgraph-data-panel {
	margin-top: 0.75rem;
	overflow-x: auto; /* safety net for very narrow viewports */
}

.wgraph-data-summary {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--wgraph-fg);
}

/* Light emphasis on the period total only. Same --wgraph-fg colour, so AA
   contrast is unchanged; bold is a redundant (not sole) cue — the word
   "total" and the table carry the meaning for non-visual users. */
.wgraph-data-summary .wgraph-total {
	font-weight: 700;
	font-size: 1.05em;
}

.wgraph-data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	color: var(--wgraph-fg);
}

.wgraph-data-caption {
	text-align: start;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.wgraph-data-table th,
.wgraph-data-table td {
	border: 1px solid var(--wgraph-border);
	padding: 0.4rem 0.6rem;
	text-align: start;
}

.wgraph-data-table thead th {
	background: #f0f0f1;
	color: var(--wgraph-fg);
}

.wgraph-data-table tbody th[scope="row"] {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Reflow — single column / no horizontal scroll at 320px & 400% zoom (1.4.10)
 * ------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.wgraph-field {
		flex: 1 1 100%;
	}

	.wgraph-daterange input[type="date"] {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion (2.3.3 / 2.2.2) — Chart.js animation is also disabled in JS.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wgraph-container *,
	.wgraph-container *::before,
	.wgraph-container *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Archive gap cell. The cell text ("No data recorded") already conveys the
 * meaning non-visually; italic is supplementary emphasis only — the default
 * text colour is kept so contrast is unchanged (no colour-only meaning,
 * WCAG 1.4.1).
 * ------------------------------------------------------------------------- */

.wgraph-data-table td.wgraph-data-gap {
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Partially-observed bucket. The cell TEXT ("0 (incomplete — some readings
 * missing)") already carries the whole meaning non-visually; the italic is
 * supplementary emphasis only, and the default text colour is kept, so nothing
 * here is conveyed by colour or styling alone (WCAG 1.4.1) and contrast is
 * unchanged (1.4.3).
 * ------------------------------------------------------------------------- */

.wgraph-data-table td.wgraph-data-partial {
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Not-live data notice. The sentence itself carries the whole meaning — the
 * bold is supplementary emphasis only, and the colour is unchanged, so nothing
 * here is conveyed by styling alone (WCAG 1.4.1) and contrast is untouched
 * (1.4.3). It is deliberately part of the summary paragraph rather than a
 * separate banner, so the polite live region announces it with the data.
 * ------------------------------------------------------------------------- */

.wgraph-data-summary .wgraph-stale {
	font-weight: 700;
}