/**
 * MWD Weather Widget.
 *
 * No animation, no transitions, no spinner. Every colour pair below is checked
 * against WCAG 2.2 1.4.3 Contrast (Minimum, AA) and no state is signalled by
 * colour alone (1.4.1) — the staleness and unavailability states each carry
 * their own words.
 */

/*
 * The card the client drew: a generous corner radius and one firm dark rule,
 * replacing the hairline grey box of the first draft.
 */
/*
 * A DIMINUTIVE CARD. The first pass at the client's drawing measured 368x313px in
 * the hero and they asked for "close to half the height". Most of that height was
 * padding and gaps rather than text, so those were cut hardest; the type came down
 * with them. Two floors were NOT negotiable and set the lower bound on how small
 * this can go: the link keeps min-height:24px for 2.5.8 Target Size (AA), and no
 * colour changed, so every 1.4.3 ratio measured for the translucent overlay still
 * holds.
 */
.mwdww {
	background: #fff;
	border: 2px solid #1a1a1a;
	border-radius: 14px;
	padding: 0.75rem 1rem;
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * TWO CLASSES DELIBERATELY.
 *
 * The theme styles headings globally, and it is the theme — not this file — that
 * made the first draft's heading bold. A single-class selector loses to
 * `.fl-module h2`, so the weight the client asked for would silently not apply.
 */
.mwdww .mwdww-heading {
	margin: 0 0 0.125rem;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.2;
	color: #1a1a1a; /* 16.9:1 on #fff */
}

/*
 * The status line is a live region. It is NEVER display:none — a live region
 * hidden at the moment its text changes may never be announced at all. When
 * there is nothing to say it simply holds no text, and an empty block box has
 * no height, so it takes no space.
 */
.mwdww-status {
	margin: 0 0 0.5rem;
	padding: 0.375rem 0.5rem;
	border-left: 4px solid #8a6d00;
	background: #fff4d6;
	color: #574000; /* 8.6:1 on #fff4d6 */
	font-size: 0.75rem;
	line-height: 1.35;
}

.mwdww-status--empty {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.mwdww-is-error .mwdww-status {
	border-left-color: #a4291c;
	background: #fdecea;
	color: #7a1c12; /* 7.4:1 on #fdecea */
}

/*
 * THE hidden ATTRIBUTE IS NOT SELF-ENFORCING.
 *
 * `hidden` works only through the UA stylesheet's `[hidden] { display: none }`,
 * and AUTHOR styles beat the UA stylesheet no matter the specificity. So the
 * `display: grid` below would silently defeat `<dl hidden>` — the empty list
 * would render and be exposed to assistive tech before any data arrived, and
 * would stay exposed forever if the fetch failed. Re-assert it explicitly.
 */
.mwdww-readings[hidden],
.mwdww-source[hidden] {
	display: none;
}

.mwdww-readings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
	gap: 0.25rem 0.75rem;
	margin: 0;
}

/*
 * The grid is applied to WRAPPER DIVS, not to the <dt>/<dd> elements themselves.
 * A <div> is legal inside a <dl> precisely to group a term with its definition,
 * and gridding a <dl>'s children directly is a known way to sever the term/value
 * association in some screen-reader and browser pairings. The layout is identical
 * and the semantics survive.
 */
.mwdww-reading {
	margin: 0;
	min-width: 0;
}

/*
 * Label and value share one colour and one weight, separated only by size — the
 * flat treatment the client's redraw uses. It also buys contrast headroom for the
 * hero overlay, where the card sits on a photograph rather than on white.
 */
.mwdww-term {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #1a1a1a; /* 16.9:1 on #fff */
}

.mwdww-value {
	margin: 0.0625rem 0 0;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.2;
	color: #1a1a1a;

	/*
	 * 1.4.10 Reflow (AA). A real NWS summary — "Chance Showers And Thunderstorms"
	 * — holds words that are wider at 1.5rem than a 7.5rem grid column. Without a
	 * break opportunity the column blows out and the whole page scrolls sideways
	 * at 320px, which is the exact failure 1.4.10 exists to prevent.
	 */
	overflow-wrap: anywhere;
}

/*
 * The forecast summary is prose, not a measurement — setting it at the same
 * 1.5rem as a temperature both reads oddly and is what makes the reflow problem
 * above so easy to hit.
 */
.mwdww-value--text {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * An unavailable or partly-observed reading. The muting is a SECONDARY cue: the
 * text itself already says "Unavailable" or carries its qualifier, so a reader
 * who cannot perceive the colour loses nothing (1.4.1 Use of Colour).
 */
.mwdww-value--muted {
	font-size: 0.875rem;
	font-weight: 400;

	/*
	 * DARKENED FOR THE OVERLAY. #6b6b6b cleared 1.4.3 AA on white at 5.33:1, but
	 * the hero card is translucent: 0.92 white over a dark slide leaves an
	 * effective #ebebeb, where #6b6b6b measures 4.47:1 against a 4.5:1
	 * requirement. This text is 1rem, so it gets no large-text allowance. The
	 * failure only appeared with a sensor down AND a dark slide behind, which is
	 * exactly the combination nobody photographs. #595959 is 7.00:1 on white and
	 * 5.88:1 on #ebebeb.
	 */
	color: #595959;
}

/*
 * The attribution now sits BETWEEN the heading and the readings, so its margin
 * runs downward. It is body copy, not fine print: the client promoted it out of
 * footnote size, and it is the only thing on the card that says how old the
 * numbers are and whose instrument took them.
 */
.mwdww-source {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	line-height: 1.35;
	color: #1a1a1a;

	/*
	 * Shrinking the card left this sentence breaking with "am." alone on the second
	 * line. Handled in CSS rather than by welding a non-breaking space into the time
	 * string, because the string is the JS contract and a browser hint is not.
	 * Unsupported browsers simply ignore it.
	 */
	text-wrap: pretty;
}

.mwdww-link {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
}

/*
 * 2.5.8 Target Size (Minimum), AA — 24x24 CSS px.
 *
 * This link is NOT covered by the "inline in a sentence" exception: it stands
 * alone in its own paragraph, so its target is its own box. At 0.875rem that box
 * is about 21px tall, which fails. inline-block + padding lifts it clear of 24px
 * without moving anything else.
 *
 * scroll-margin-top is for 2.4.11 Focus Not Obscured (Minimum), AA: the theme
 * runs a STICKY HEADER, and without this a keyboard user tabbing to this link
 * near the top of the homepage can have the browser scroll it directly underneath
 * that header — focused, but invisible.
 */
.mwdww-link a {
	display: inline-block;
	box-sizing: border-box;
	min-height: 24px;
	padding: 4px 2px;
	color: #0b5c8a; /* 7.2:1 on #fff */
	text-decoration: underline;
	scroll-margin-top: 8rem;
}

.mwdww-link a:hover {
	color: #08405f;
}

/*
 * 2.4.7 Focus Visible + 2.4.11 Focus Not Obscured (Minimum). Outline plus offset
 * rather than a border swap, so focusing never reflows the layout.
 */
.mwdww-link a:focus-visible {
	outline: 3px solid #0b5c8a;
	outline-offset: 2px;
	border-radius: 2px;
}

.mwdww-noscript p,
.mwdww-noscript {
	margin: 0;
	font-size: 0.875rem;
	color: #595959;
}

/*
 * Windows High Contrast Mode: the tinted status backgrounds are dropped by the
 * OS, so re-assert a real border to keep the notice distinguishable from body
 * text.
 */
@media (forced-colors: active) {
	.mwdww {
		border: 1px solid CanvasText;
	}

	.mwdww-status {
		border: 1px solid CanvasText;
		border-left-width: 4px;
	}

	/*
	 * High Contrast Mode drops the semi-transparent overlay background, which would
	 * leave the card's text sitting straight on the slide photograph. Re-assert an
	 * opaque system background so it stays a card.
	 */
	.mwdww-overlay-row .mwdww {
		background: Canvas;
	}
}

/*
 * Visually hidden, still announced. The clip-rect pattern, NOT display:none or
 * visibility:hidden — those remove the text from the accessibility tree along
 * with the screen, which would defeat the whole point of carrying a spoken unit.
 */
.mwdww-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * ---------------------------------------------------------------------------
 * HOMEPAGE HERO OVERLAY
 * ---------------------------------------------------------------------------
 *
 * The client asked whether the card could float over the homepage slider. Three
 * things make that safe rather than merely possible:
 *
 * 1. EVERY SELECTOR IS GATED BEHIND :has(). A browser without support discards
 *    the whole block as invalid, and the widget stays exactly where it sits in
 *    the document flow — the layout it already shipped with. The fallback is a
 *    working layout, not a broken overlay.
 *
 * 2. THE BREAKPOINT IS THE SLIDER'S OWN. Beaver Builder hides the hero row below
 *    768px, its responsive breakpoint, so below that there is nothing to overlay:
 *    the card returns to the flow and lands at the top of the page, where the
 *    hero would have been.
 *
 * 3. IT KEEPS CLEAR OF THE SLIDER'S NEXT ARROW. That control sits at right:5px,
 *    vertically centred, at z-index 1 — underneath this card. An overlay resting
 *    on top of it would swallow the clicks that advance the slider, so the card is
 *    inset past it, with enough room that a staleness notice making the card
 *    taller still cannot reach it.
 */
@media (min-width: 768px) {
	.fl-builder-content:has( > .mwdww-overlay-row ) {
		position: relative;
	}

	.fl-builder-content:has( > .mwdww-overlay-row ) > .mwdww-overlay-row {
		position: absolute;
		top: 2rem;
		right: 0;
		left: 0;

		/*
		 * 3 IS A CEILING, NOT A GUESS. It must beat the slider (z-index 1) and stay
		 * UNDER the theme's sticky header, which is `position:fixed; z-index:5` once
		 * stuck (themes/mwd/assets/css/theme.css:3143). Raise this above 4 and the
		 * card slides over the site navigation as the visitor scrolls.
		 */
		z-index: 3;
		margin: 0;
		padding: 0;

		/*
		 * THE ROW IS CLICK-TRANSPARENT, AND THIS IS NOT OPTIONAL.
		 *
		 * The row is FULL WIDTH — measured 1440x373 on a 1440 viewport — even though
		 * the card inside it is only ~320px wide. As an invisible box at z-index 3 it
		 * swallowed every click that landed anywhere in that band, including BOTH of
		 * the slider's nav arrows at y=400. Insetting the card away from the arrows
		 * did nothing, because it was never the card doing the covering: it was the
		 * row. Verified with elementFromPoint, which returned this row's
		 * .fl-row-content-wrap at both arrow centres.
		 *
		 * pointer-events:none lets everything outside the card fall through to the
		 * slider; the card re-enables it for itself so its link still works.
		 */
		pointer-events: none;
	}

	/*
	 * The row's own chrome is zeroed so these rules alone place the card, and the
	 * content box is pinned to the slider's own 1200px maximum so the card aligns
	 * with the slide behind it rather than with the viewport edge.
	 */
	.fl-builder-content:has( > .mwdww-overlay-row ) > .mwdww-overlay-row .fl-row-content {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0;
	}

	.fl-builder-content:has( > .mwdww-overlay-row ) > .mwdww-overlay-row .fl-col-group,
	.fl-builder-content:has( > .mwdww-overlay-row ) > .mwdww-overlay-row .fl-col,
	.fl-builder-content:has( > .mwdww-overlay-row ) > .mwdww-overlay-row .fl-module,
	.fl-builder-content:has( > .mwdww-overlay-row ) > .mwdww-overlay-row .fl-module-content {
		margin: 0;
		padding: 0;
	}

	.fl-builder-content:has( > .mwdww-overlay-row ) > .mwdww-overlay-row .mwdww {
		width: min(20rem, 40vw);
		margin-left: auto;
		margin-right: 3.5rem;

		/* Re-enables clicks the row switched off, for the card only. */
		pointer-events: auto;

		/*
		 * 0.82 (was 0.92 — stakeholder asked for a more transparent card, 2026-08-03).
		 *
		 * *** 0.82 IS THE FLOOR, NOT A PREFERENCE. DO NOT NUDGE IT DOWN. ***
		 * Worst case the slide behind is black, leaving an effective #d1d1d1, and the
		 * two colours that fail first land at:
		 *     #595959 muted / noscript ... 4.59:1
		 *     #0b5c8a link ............... 4.72:1
		 * against a 1.4.3 AA floor of 4.5:1 for normal text. One more step to 0.80
		 * puts BOTH under it (4.36:1 and 4.49:1). Everything else has room —
		 * #1a1a1a is 11.40:1 and the hover #08405f is 7.20:1 — which is why the
		 * labels and values here are full-strength #1a1a1a.
		 *
		 * Going lower is possible ONLY by darkening those two colours (0.75 needs the
		 * grey at #4e4e4e and the link at #094e73), which flattens the hierarchy the
		 * client approved. That trade was offered and declined.
		 *
		 * The two status notices keep OPAQUE backgrounds, so this alpha cannot reach
		 * them. Recompute this block if any colour on the card changes.
		 */
		background: rgba(255, 255, 255, 0.82);
	}

	/*
	 * BEAVER BUILDER'S EDITOR MUST NEVER SEE THE OVERLAY.
	 *
	 * Inside the builder an absolutely positioned row sits on top of the slider,
	 * where it cannot be selected, dragged or deleted — the next editor to open the
	 * homepage would find a card they cannot get hold of and a slider they cannot
	 * reach past it. The selectors below carry one extra element to outrank the
	 * overlay rules above rather than relying on source order.
	 */
	body.fl-builder-edit .fl-builder-content > .mwdww-overlay-row {
		position: static;

		/*
		 * pointer-events MUST come back here too. The overlay switches it off on the
		 * row so clicks reach the slider, and children inherit that — which in the
		 * builder would mean the row, its column and the module could not be clicked
		 * at all. Restoring it on the row restores the whole subtree.
		 */
		pointer-events: auto;
	}

	body.fl-builder-edit .fl-builder-content > .mwdww-overlay-row .mwdww {
		width: auto;
		margin-right: 0;
		background: #fff;
	}
}

/*
 * A viewer who has asked the OS to reduce transparency gets none of it. The card
 * is legible either way — this is preference rather than contrast, and it costs
 * a single rule.
 */
@media (prefers-reduced-transparency: reduce) {
	.mwdww-overlay-row .mwdww {
		background: #fff;
	}
}