/* Sitewide announcement bar. Ships with the plugin because the markup does —
   the theme is not guaranteed to be active. Values reference theme.json presets
   with literal fallbacks, matching how the region-map block is written, so the
   bar degrades to readable rather than unstyled if the theme is swapped. */

.fdc-announce {
	position: relative;
	z-index: 20; /* Above core's is-position-sticky header (z-index 10). */
}
.fdc-announce[hidden] {
	display: none;
}

.fdc-announce__inner {
	max-width: 1120px; /* theme.json contentSize */
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.fdc-announce__msg {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
	line-height: 1.4;
}

.fdc-announce__cta {
	display: inline-flex;
	align-items: center;
	flex: none;
	padding: 6px 18px;
	border-radius: var(--wp--custom--radius--pill, 99px);
	font-size: var(--wp--preset--font-size--caption, 0.84rem);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.18s ease;
}
.fdc-announce__cta:hover,
.fdc-announce__cta:focus-visible {
	filter: brightness(1.08);
}

.fdc-announce__x {
	flex: none;
	background: none;
	border: none;
	/* Buttons do NOT inherit colour — the UA sheet sets `color: buttontext`. The
	   icon is stroked with currentColor, so without this it paints near-black on
	   every ground and fails non-text contrast. */
	color: inherit;
	cursor: pointer;
	padding: 6px;
	display: inline-flex;
	/* 0.65 is the floor here: white at this opacity over sky-deep composites to
	   3.09:1, just past the 3:1 WCAG 1.4.11 requirement for a control. Hover and
	   focus take it to full. Do not lower it. */
	opacity: 0.65;
	transition: opacity 0.15s ease;
}
.fdc-announce__x:hover,
.fdc-announce__x:focus-visible {
	opacity: 1;
}

/* Focus rings must be visible on all three grounds, so they are set per mode
   below rather than inheriting a single colour that would vanish on one.
   THAT COMMENT DESCRIBED AN INTENT THAT WAS NEVER IMPLEMENTED — there were no
   per-mode rules, only this one, and `currentColor` did exactly what the comment
   warned against. On the urgent bar the CTA is a white pill with red text, so its
   ring resolved to the same red as the bar behind it: 1:1, invisible, on the most
   prominent call to action on the site. The dismiss button was fine only because
   its text happens to be white. Measured 2026-08-26. */
.fdc-announce :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The CTA is the one control whose text colour inverts against its own bar, so
   it gets an explicit ring rather than inheriting one. Snow reads on all three
   grounds: 4.76:1 on urgent red, and higher on the sky and gala grounds. */
.fdc-announce__cta:focus-visible {
	outline-color: var(--wp--preset--color--snow, #fff);
}

/* --- Standard: sky ground, gold action. The Gold-on-Navy-Only rule in
   DESIGN.md permits gold as a fill here because the label on it is navy. --- */
.fdc-announce--standard {
	background: var(--wp--preset--color--sky-deep, #1672b8);
	color: var(--wp--preset--color--snow, #fff);
}
.fdc-announce--standard .fdc-announce__cta {
	background: var(--wp--preset--color--gold, #f1e819);
	color: var(--wp--preset--color--navy, #162939);
}

/* --- Urgent: Alert Red ground. Reserved for real deadlines.

   DELIBERATE DEVIATION FROM THE MOCKUP, on two grounds. The mockup puts white
   on coral, which measures 3.34:1 — a straight AA failure for body text, so it
   could not ship as drawn. And DESIGN.md classes coral as the explainer frame
   while red is Alert Red, so a deadline bar was reaching for the wrong token
   anyway. White on red is 4.76:1 and the white pill with a red label is the
   same 4.76:1. Both pass; neither has much headroom, so do not tint either. */
.fdc-announce--urgent {
	background: var(--wp--preset--color--red, #de2625);
	color: var(--wp--preset--color--snow, #fff);
}
.fdc-announce--urgent .fdc-announce__cta {
	background: var(--wp--preset--color--snow, #fff);
	color: var(--wp--preset--color--red, #de2625);
}

/* --- Gala: the black-tie register, documented in DESIGN.md. Serif leads, gold
   goes metallic, the ground drops to near-black navy.

   The CTA is square. That is the register's signature — the formal mode breaks
   the pill language deliberately — and it is now a recorded exception to the
   4-step radius scale rather than an undocumented fifth value.

   Foil on the gala ground measures 7.32:1 and champagne 12.61:1. Do NOT use
   --gala--foil-low as text: it is 4.44:1, which is large-text-only. */
.fdc-announce--gala {
	background: var(--wp--custom--gala--bg, #0c1a26);
	color: var(--wp--custom--gala--champagne, #ebd9a8);
	border-top: 1px solid var(--wp--custom--gala--line, rgba(200, 162, 74, 0.55));
	border-bottom: 1px solid var(--wp--custom--gala--line, rgba(200, 162, 74, 0.55));
}
.fdc-announce--gala .fdc-announce__msg {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--custom--gala--foil, #c8a24a);
}
.fdc-announce--gala .fdc-announce__cta {
	background: var(--wp--custom--gala--foil, #c8a24a);
	color: var(--wp--custom--gala--bg, #0c1a26);
	border-radius: 0;
}

/* --- Small screens: move to the thumb zone. ---------------------------------
   600px, not the mockup's 640px, to stay inside the breakpoint vocabulary the
   theme already uses (430 / 600 / 782).

   The mockup pins this to the bottom with no compensating body padding, so it
   sits on top of the last ~100px of the footer. announcement.js measures the
   bar and publishes --fdc-announce-h; the fallback covers the pre-JS frame and
   the two-line case. */
@media (max-width: 600px) {
	.fdc-announce {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		box-shadow: 0 -6px 20px rgba(14, 28, 40, 0.35);
	}
	.fdc-announce__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 10px;
		padding: 14px 16px;
	}
	.fdc-announce__cta {
		justify-content: center;
	}
	.fdc-announce__x {
		position: absolute;
		top: 6px;
		right: 8px;
		padding: 8px;
	}
	/* The close button leaves the flow at this width, so nothing reserves space
	   for it and a message long enough to fill the first line runs underneath it
	   — measured at 584px as a 22px overlap, with nothing clipped, so it read as
	   text sitting under a button rather than as truncation (P2-16).

	   Padding on the MESSAGE rather than the inner, and symmetric rather than
	   right-only. The inner would narrow the CTA too, which does not need to
	   dodge anything — the button is pinned to the top corner. Right-only would
	   clear the button but shift this centred text off centre by half the pad.

	   32px against the button's 38px footprint (8px offset + 30px box) leaves
	   ~10px of daylight at the tightest line. */
	.fdc-announce__msg {
		padding-inline: 32px;
	}
	body.fdc-has-announcement {
		padding-bottom: var(--fdc-announce-h, 96px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fdc-announce__cta,
	.fdc-announce__x {
		transition: none;
	}
}