/* ============================================================================
   Just Another Day in CA — accessibility floor
   ----------------------------------------------------------------------------
   The WCAG 2.1 AA behaviors that must be true on every surface regardless of
   how the design-system and hosting questions resolve. Ships alongside
   tokens.css and, like it, is plain CSS so it survives every substrate fork.

   Load order: tokens.css, then this file.

   Per the creative brief section 10, accessibility is unconditional from
   Sprint 1 and maintained through all sprints. That makes this file a gate,
   not a nicety: it should get stricter over time, never looser.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   FOCUS VISIBILITY — WCAG 2.4.7 (Focus Visible) + 1.4.11 (Non-text Contrast)

   The dual ring. See the FOCUS block in tokens.css for the measured contrast
   ratios and why a single-color ring cannot work on this palette.

   `:focus-visible` rather than `:focus` so pointer users do not see rings on
   click, while keyboard and assistive-tech users always do.
   ------------------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--jad-focus-width) solid var(--jad-focus-color);
  outline-offset: var(--jad-focus-offset);
  /* Halo fills the offset gap so one of the two rings always contrasts with
     whatever sits behind the element. */
  box-shadow: 0 0 0 var(--jad-focus-offset) var(--jad-focus-halo);
  border-radius: var(--jad-radius-sm);
}

/* Never remove the ring without replacing it. Kept as an explicit statement
   so a future `outline: none` reads as the regression it would be. */

/* ---------------------------------------------------------------------------
   SKIP LINK — WCAG 2.4.1 (Bypass Blocks)
   Visually hidden until focused, then pinned top-left over everything.
   ------------------------------------------------------------------------ */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--jad-color-navy);
  color: var(--jad-color-cream);
  padding: var(--jad-space-3) var(--jad-space-4);
  font-family: var(--jad-font-body);
  text-decoration: none;
}
/* `:focus-within` is load-bearing, not belt-and-braces. `.skip` is the <p>
   wrapper the paragraph block emits; the focusable element is the <a> INSIDE
   it. So `.skip:focus` never matches, and this link stayed at left:-999px
   through every keyboard traversal — WCAG 2.4.1 failing on the live site, not
   only in a render. Found 2026-08-15 by measuring the focused element's box
   rather than by reading the rule. `RA15` and `A2.2` were both asserting a
   behaviour nothing delivered.

   Do not "simplify" this back to `:focus` unless the markup moves the class
   onto the <a>. */
.skip:focus,
.skip:focus-visible,
.skip:focus-within {
  left: var(--jad-space-3);
  top: var(--jad-space-3);
}

/* The <a> does not inherit the wrapper's colour, so it rendered at the browser
   default #0000EE against the navy ground — roughly 1.3:1, unreadable at the
   exact moment a keyboard user needs it. Same class of defect as the
   TRANSFER-CENSUS D1/M2-5 finding, where green checks missed browser-default
   blue links; the chrome outside `.site-main` had no colour rule at all. */
.skip a {
  color: var(--jad-color-cream);
  text-decoration: underline;
}

/* The wordmark link had no colour rule either — the same gap, one element over.
   Scoped deliberately rather than fixed with a blanket `a { color: inherit }`,
   which would silently flatten link colours the design does intend. */
.wordmark__link a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION — WCAG 2.3.3 (Animation from Interactions)
   Honors the OS-level preference. The site has no essential motion, so this
   can be a blanket suppression rather than a per-animation carve-out.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--jad-duration-none) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--jad-duration-none) !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   TARGET SIZE — WCAG 2.5.8 (Target Size Minimum, AA in 2.2; good practice
   at 2.1). Interactive controls get a 24px minimum hit area. The campaign
   button is already 36px tall; this catches inline links in dense clusters
   and anything added later.
   ------------------------------------------------------------------------ */
:where(button, [role="button"], input[type="submit"], input[type="button"]) {
  min-height: var(--jad-target-min);
  min-width: var(--jad-target-min);
}

/* ---------------------------------------------------------------------------
   MEDIA DEFAULTS
   Images stay inside their container regardless of intrinsic size, so a
   large asset cannot force horizontal page scroll (WCAG 1.4.10 Reflow).
   ------------------------------------------------------------------------ */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   FORCED COLORS / HIGH CONTRAST
   In forced-colors mode the browser replaces the palette, which would drop
   the dual focus ring's colors. Re-assert a system-colored ring so focus
   survives there too.
   ------------------------------------------------------------------------ */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--jad-focus-width) solid CanvasText;
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------------------
   GLOBAL CHROME — header, nav, footer, placeholders.

   Structure only. Every value here reaches for a token name; the token values
   themselves are pitch-era and belong to the retune (`4a7e21`). That split is
   what tools/raw-dimension-check.py enforces, and it is the reason this file
   could be written before the retune landed rather than after it.

   Consumes: wireframes/global-chrome.md (composition + RA13-RA16),
             strings.md § Global chrome (copy).
   ------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--jad-color-cream);
  border-bottom: var(--jad-hairline) solid var(--jad-scrim-navy-13);
}

.site-header__bar {
  min-height: var(--jad-header-h);
  padding-inline: var(--jad-gutter);
  gap: var(--jad-space-6);
}

/* RA15 — the skip link precedes everything and is not merely offscreen: it
   returns to the flow on focus. `.skip` itself is styled in the focus section
   above; this only guarantees it cannot be covered by the sticky header. */
.site-header .skip a:focus-visible { z-index: 20; }

/* ---- Wordmark -------------------------------------------------------------
   RA13/RA14. One DOM, two bands. The variant is swapped by CSS rather than by
   emitting different markup per breakpoint, so the two variants cannot
   disagree about which one is current — a swap in markup would need the
   emitter, the template, and the assertion to stay in step, and they would
   not.

   The lockup carries no intrinsic colour (tools/accent-slot-check.py proves
   it), so it inherits, and the accent slot fills it at the surface.

   TWO SLOTS, NOT ONE, and the fallback is the design. The production mark is
   genuinely two-colour: the 18 type paths take `currentColor`, and the single
   CA-bracket path takes `var(--jad-mark-bracket, currentColor)`. Set the
   variable and you get the two-colour production lockup; leave it unset and
   the whole mark collapses to one ink, which is the knockout-on-photography
   case. One asset, both usages, no variant file to keep in step.

   So a DARK surface does not need a different asset — it needs the bracket
   slot returned to inheritance:

       .some-dark-ground .wordmark__art { --jad-mark-bracket: currentColor; }

   No such surface exists yet (the header ground is light and the footer
   carries no mark), so no selector is written for one. Inventing an unused
   class here would be a promise nothing keeps.

   The mark is INLINE in theme/parts/header.html rather than referenced with
   `<img>`, and it has to be: an SVG behind `<img>` is an independent document
   that inherits neither `currentColor` nor a custom property, so both slots
   above would resolve to black. tools/wordmark-inline-check.py holds that. */
.wordmark__art {
  display: block;
  height: var(--jad-wordmark-h);
  width: auto;
  color: var(--jad-color-navy);
  --jad-mark-bracket: var(--jad-color-tan);
}

@media (max-width: 900px) {
  .site-header__bar { min-height: var(--jad-header-h-compact); padding-inline: var(--jad-space-5); }
  .wordmark__art    { height: var(--jad-wordmark-h-floor); }
}

@media (max-width: 600px) {
  .wordmark__art { height: var(--jad-wordmark-h-compact); }
}

/* ---- Placeholders ---------------------------------------------------------
   The visible half of the SC-B8 launch gate. A good placeholder looks right,
   which is exactly why a staging review cannot catch a traced comp standing in
   for the production mark — so the stand-in announces itself rather than
   relying on anyone remembering.

   Removing `is-placeholder` is the deliberate act of saying an asset is real.
   tools/placeholder-check.py --launch fails while any survive. */
.is-placeholder {
  position: relative;
  outline: var(--jad-hairline) dashed var(--jad-color-crimson);
  outline-offset: var(--jad-space-1);
}

.is-placeholder::after {
  content: "placeholder";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  font-family: var(--jad-font-body);
  font-size: var(--jad-text-eyebrow);
  letter-spacing: var(--jad-tracking-wider);
  text-transform: uppercase;
  color: var(--jad-color-crimson);
  background: var(--jad-color-cream);
  padding-inline: var(--jad-space-1);
  pointer-events: none;
}

@media print { .is-placeholder::after { content: "placeholder — not the production asset"; } }

/* ---- Primary nav ----------------------------------------------------------
   RA4 — no nav item is distinguished by hue alone. The current item carries a
   weight change AND a rule beneath it, so the state survives greyscale,
   low-vision use, and the several forms of colour blindness the campaign's
   rotating accent makes unpredictable. */
.primary-nav {
  font-family: var(--jad-font-display);
  font-size: var(--jad-text-nav);
  gap: var(--jad-space-6);
}

.primary-nav .wp-block-navigation-item__content {
  color: var(--jad-color-ink);
  text-decoration: none;
  padding-block: var(--jad-space-2);
  border-bottom: var(--jad-rule) solid transparent;
}

.primary-nav .current-menu-item > .wp-block-navigation-item__content,
.primary-nav [aria-current="page"] {
  color: var(--jad-color-navy);
  font-weight: 600;
  border-bottom-color: var(--jad-color-crimson);
}

.primary-nav .wp-block-navigation-item__content:hover {
  border-bottom-color: var(--jad-scrim-navy-28);
}

/* ---- Anchor offset --------------------------------------------------------
   The sticky header would otherwise cover a fragment target, which would break
   the single most load-bearing URL contract on the site: /data/#{claim-id} is
   how a champion links to ONE figure rather than to a page and a scroll
   instruction. Offset equals the header height by token, not by a copied
   number. RA5 checks the targeted claim actually intersects the viewport. */
:where(h1, h2, h3, h4, [id]) { scroll-margin-top: calc(var(--jad-header-h) + var(--jad-space-4)); }

@media (max-width: 900px) {
  :where(h1, h2, h3, h4, [id]) { scroll-margin-top: calc(var(--jad-header-h-compact) + var(--jad-space-4)); }
}

/* ---- Footer ---------------------------------------------------------------
   RA8 — the date stamp is present, visible and non-empty on every page. It is
   a client-facing commitment from the 8/11 weekly, which is why it sits first
   in the footer rather than in fine print at the bottom of it. */
.site-footer {
  background: var(--jad-color-navy);
  color: var(--jad-color-cream);
  padding-block: var(--jad-space-section);
  padding-inline: var(--jad-gutter);
  font-size: var(--jad-text-xs);
}

.site-footer a { color: var(--jad-color-cream); text-decoration: underline; }

.site-footer__datestamp {
  font-size: var(--jad-text-sm);
  padding-block-end: var(--jad-space-6);
  margin-block-end: var(--jad-space-6);
  border-bottom: var(--jad-hairline) solid var(--jad-scrim-white-24);
}

.site-footer__cols { gap: var(--jad-space-12); align-items: flex-start; }
.site-footer__col  { max-width: var(--jad-measure-footer); }

.site-footer__head {
  font-family: var(--jad-font-display);
  font-size: var(--jad-text-sm);
  letter-spacing: var(--jad-tracking-wider);
  text-transform: uppercase;
  margin-block-end: var(--jad-space-3);
}

.site-footer__attribution {
  margin-block-start: var(--jad-space-12);
  max-width: var(--jad-measure-footer);
  color: var(--jad-color-cream);
}