/* ==========================================================================
   CBA / WEB-002 — ACCESSIBILITY ADDITIONS
   --------------------------------------------------------------------------
   Append to the end of the deployed styles.css. Nothing above it changes.

   These rules are additive only. They introduce no new colours beyond the
   deployed site's own tokens, no new layout, no new components, and they do
   not alter the four-page architecture.

   Each block is numbered to match 04-ACCESSIBILITY/RECOMMENDATIONS.md.
   ========================================================================== */


/* --- A1 · Skip link ------------------------------------------------------
   Off-screen until focused, then lands as a plain slab at top-left. The
   deployed markup has no skip link and the header nav is four items deep on
   every route. Requires id="main" on <main> — see A2.                       */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.15rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: .5rem;
  top: .5rem;
}


/* --- A3 · Visible focus --------------------------------------------------
   styles.css currently contains no :focus or :focus-visible rule at all, so
   keyboard users get only the browser default — which several of the site's
   own resets suppress. This restores a focus ring that reads on both the
   paper ground and the .dark surface.                                       */

:where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.dark :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
main.dark :where(a, button):focus-visible {
  outline-color: var(--paper);
}

/* Do not remove the ring for mouse users by adding :focus { outline: none }.
   :focus-visible already limits it to keyboard and programmatic focus.      */


/* --- A4 · Current page, not by colour alone ------------------------------
   The deployed nav marks the current route with class="active" only. Pair it
   with aria-current="page" in the markup (see RECOMMENDATIONS § A4) and give
   it a non-colour affordance here.                                          */

.site-header nav a[aria-current="page"]::after,
.site-header nav a.active::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: .35em;
  background: currentColor;
}


/* --- A6 · The system voice, at a contrast that can be read ---------------
   --fog #99988e on --paper #e8e5dd measures 2.31:1. WCAG AA requires 4.5:1
   for normal text. This variable lets the small mono voice darken without
   disturbing --fog anywhere it is used as a non-text tone.

   PENDING A FOUNDER DECISION — see 02-STANDARDS/DEVIATIONS.md § D4.
   The value below is the deployed --ink at 62% over --paper, which measures
   approximately 6.3:1. It is a placeholder for whichever named value the
   standard eventually adopts, not a new house colour.                       */

.eyebrow,
.status-tag,
.rail,
.footer-meta,
.copyright,
small {
  color: var(--system-voice);
}


/* --- A7 · Reduced motion, completed --------------------------------------
   styles.css already honours prefers-reduced-motion. This widens it to catch
   smooth scrolling, which the existing block does not cover and which the
   index route triggers through its "Enter the institution ↓" anchor.        */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- A8 · Target size on the numbered nav --------------------------------
   The header nav items are small on narrow viewports. This raises the hit
   area to the 24x24 CSS-px minimum without changing type size or spacing as
   it appears.                                                               */

.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}