/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — ADA / WCAG 2.1 Level AA
   ───────────────────────────────────────────────────────────────────────
   Load this stylesheet LAST so its focus and motion rules always win.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Skip to content (WCAG 2.4.1 Bypass Blocks) ────────────────────────
   Visually hidden until focused, then pinned top-left over everything. */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--sp-4);
  transform: translateY(-120%);
  z-index: var(--z-skip);
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: var(--fs-base);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ── Screen-reader-only text (WCAG 1.3.1, 2.4.6) ───────────────────────*/
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Becomes visible when focused — for in-page shortcut links */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  white-space: normal;
}

/* ── Focus visibility (WCAG 2.4.7 Focus Visible, 2.4.11 Focus Appearance)
   Gold ring passes 3:1 against navy, white, and cream. Mouse users do not
   see it (:focus-visible), keyboard users always do. ──────────────────*/
:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* On NAVY surfaces, upgrade to bright gold — 7.01:1, highly visible */
.section-navy :focus-visible,
.section-navy-deep :focus-visible,
.on-navy :focus-visible,
#utility-bar :focus-visible,
#site-footer :focus-visible,
#mobile-nav :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.division-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: var(--focus-offset);
}

/* On GOLD surfaces a gold ring would vanish — switch to navy (7.01:1) */
.btn-gold:focus-visible,
.enroll-strip :focus-visible,
.on-gold :focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: var(--focus-offset);
}

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
  :focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
}

/* ── Touch targets (WCAG 2.5.5 — minimum 44×44 CSS px) ─────────────────*/
a.btn, button, .nav-link, .utility-link,
.drop-link, .tab-btn, input[type="submit"] {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
/* Inline text links inside paragraphs are exempt (WCAG 2.5.5 exception) */
p a, li a, td a { min-height: 0; display: inline; }

/* ── Reduced motion (WCAG 2.3.3 Animation from Interactions) ───────────
   Respected sitewide: animations collapse, video pauses, scroll jumps. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }

  /* Hero video is hidden; the poster image shows in its place */
  .hero-video { display: none !important; }
  .hero-poster-fallback { display: block !important; }
}

/* ── Forced colors / Windows High Contrast Mode ────────────────────────*/
@media (forced-colors: active) {
  .btn, .card, .doc-row, .nav-drop {
    border: 1px solid ButtonBorder;
  }
  :focus-visible { outline: 3px solid Highlight; }
  /* Decorative gradients carry no information — drop them */
  .page-hero::after, .hero-overlay { background: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   CONTRAST POLICY  (audited — every pair verified numerically)
   ──────────────────────────────────────────────────────────────────────
   WCAG 1.4.11 requires 3:1 for non-text content that CONVEYS MEANING.
   Purely decorative graphics are explicitly exempt. This project applies
   that distinction deliberately:

   FUNCTIONAL (must pass 3:1) — uses --line-input #8C8478 or a gold ≥ --gold-dk
     · form control borders (input, select, textarea, .tab-btn)
     · focus indicators               → --gold-dk / --gold / --navy per surface
     · the nav current-page underline → --gold-dk, plus a bold-weight cue
     · error states                   → --crimson (11.37:1)

   DECORATIVE (exempt, intentionally subtle) — uses --line / --line-2
     · card and panel hairlines — the card is identified by its content,
       heading, and shadow; the border adds polish, not information
     · section dividers, <hr>, table row rules
     · the gold top-rule on .stat-card and left-rule on .doc-row — these
       are brand ornament beside text that already states the meaning

   Rule of thumb: if removing the line would make the UI harder to OPERATE
   or UNDERSTAND, it is functional → use --line-input. If it would only
   look plainer, it is decorative → --line is fine.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Gold text safeguards ──────────────────────────────────────────────
   Gold NEVER carries small body text on a light background. These rules
   are guardrails: if gold is applied to text on cream/white, it is
   swapped for the AA-passing deep gold automatically. */
.section-cream .text-gold,
.section-white .text-gold,
body > .text-gold { color: var(--gold-deep); }

/* Gold on navy is the approved pairing — 7.4:1 */
.section-navy .text-gold,
.on-navy .text-gold { color: var(--gold); }

/* ── Link underlines in body copy (WCAG 1.4.1 Use of Color) ────────────
   Color is never the only way a link is distinguished. */
main p a, main li a, main td a { text-decoration: underline; }

/* ── Visible required-field marker ─────────────────────────────────────*/
.required-marker { color: var(--crimson); font-weight: 700; }
.on-navy .required-marker { color: var(--gold-lt); }

/* ── Floating accessibility widget ─────────────────────────────────── */
.a11y-panel {
  position: fixed;
  left: var(--sp-4);
  bottom: calc(var(--sp-4) + 62px);
  width: min(320px, calc(100vw - 2rem));
  z-index: 901;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.97);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur);
  visibility: hidden;
}
.a11y-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}
.a11y-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--navy);
  color: var(--white);
}
.a11y-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
}
.a11y-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: var(--white);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.a11y-close:hover,
.a11y-close:focus-visible {
  background: rgba(255,255,255,.24);
}
.a11y-section {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.a11y-label {
  margin-bottom: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.a11y-font-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.a11y-btn,
.a11y-reset {
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
}
.a11y-btn {
  min-height: 2.15rem;
  padding: .35rem .7rem;
  font-size: var(--fs-sm);
}
.a11y-btn--sm {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.a11y-btn:hover,
.a11y-btn:focus-visible,
.a11y-reset:hover,
.a11y-reset:focus-visible {
  border-color: var(--gold-dk);
  background: var(--gold-a15);
}
.a11y-font-val {
  min-width: 3rem;
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 900;
  text-align: center;
}
.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 2.55rem;
  padding: .45rem 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 800;
  text-align: left;
}
.a11y-option:hover,
.a11y-option:focus-visible {
  color: var(--gold-deep);
}
.a11y-switch {
  position: relative;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 1.3rem;
  border-radius: 999px;
  background: #d8dee8;
  transition: background var(--dur-fast) var(--ease);
}
.a11y-switch-dot {
  position: absolute;
  top: .18rem;
  left: .18rem;
  width: .94rem;
  height: .94rem;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.24);
  transition: transform var(--dur-fast) var(--ease);
}
.a11y-option.active .a11y-switch {
  background: var(--gold);
}
.a11y-option.active .a11y-switch-dot {
  transform: translateX(1.05rem);
}
.a11y-reset {
  display: block;
  width: calc(100% - var(--sp-10));
  min-height: 2.4rem;
  margin: 0 var(--sp-5) var(--sp-4);
  padding: .45rem .75rem;
  font-size: var(--fs-sm);
}

/* Accessibility setting effects */
.a11y-contrast {
  filter: contrast(1.25);
}
.a11y-contrast body {
  background: #000 !important;
  color: #fff !important;
}
.a11y-contrast main,
.a11y-contrast section,
.a11y-contrast .section-cream,
.a11y-contrast .section-white {
  background: #111 !important;
  color: #fff !important;
}
.a11y-contrast a {
  color: #ffdd57 !important;
}
.a11y-dyslexia * {
  font-family: "Comic Sans MS", "OpenDyslexic", Arial, sans-serif !important;
}
.a11y-links a {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
}
.a11y-spacing body {
  letter-spacing: .08em !important;
  word-spacing: .16em !important;
  line-height: 2 !important;
}
.a11y-cursor,
.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 2l18 14-10 2 4 10-4 2-4-10-6 8z' fill='%230D1F3B' stroke='%23C6A646' stroke-width='1.5'/%3E%3C/svg%3E") 5 2, auto !important;
}
.a11y-no-motion *,
.a11y-no-motion *::before,
.a11y-no-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

@media (max-width: 760px) {
  .a11y-panel {
    left: 1rem;
    bottom: 5rem;
  }
}

/* ── Error / status messaging (WCAG 3.3.1) ─────────────────────────────*/
/* The [hidden] attribute MUST win over any display value, or an error
   marked hidden still paints — and screen readers announce errors the
   visitor has not yet triggered. This one line is load-bearing. */
[hidden] { display: none !important; }

.field-error {
  color: var(--crimson);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-top: var(--sp-2);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
/* Warning glyph so the error is not signalled by colour alone (WCAG 1.4.1) */
.field-error::before {
  content: "!";
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 2px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--white);
  background: var(--crimson);
  border-radius: 50%;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(107,30,44,.15);
}

/* ── Print ─────────────────────────────────────────────────────────────*/
@media print {
  .skip-link, #utility-bar, #site-header, #mobile-nav,
  #site-footer .footer-social, .no-print { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
  .page-hero { background: #fff; color: #000; }
  .page-hero h1 { color: #000; }
}