/* =======================================================================
   _a11y.css — WCAG 2.1 AA accessibility layer
   The Tennis & Pickleball Club (public site + sister clubs)
   Loaded on every public page. Covers requirements common to
   federal ADA / Section 508 and California Unruh Act:
   keyboard focus, reduced motion, respectful zoom, screen-reader helpers.
   Contrast fixes for brand-gold-on-light are handled per page (see --gold-text).
   ======================================================================= */

/* -----------------------------------------------------------------------
   SC 2.4.7 Focus Visible (AA)
   Every interactive control shows a clear keyboard-focus ring.
   :focus-visible keeps rings off for mouse users, on for keyboard users.
   !important guarantees this beats per-page `outline:none` overrides.
   ----------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[contenteditable]:focus-visible {
  outline: 3px solid #1B5FBF !important;   /* --blue, 4.7:1 on white */
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Older engines without :focus-visible still get a visible ring on :focus */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus,
  textarea:focus, summary:focus, [tabindex]:focus {
    outline: 3px solid #1B5FBF !important;
    outline-offset: 2px !important;
  }
}

/* Focus rings on dark/navy chrome read better in warm gold */
header a:focus-visible,
nav a:focus-visible,
footer a:focus-visible,
.nav a:focus-visible,
.on-dark a:focus-visible,
.on-dark button:focus-visible {
  outline-color: #E0B96A !important;   /* --gold-lt, high contrast on navy */
}

/* Never let a control lose its focus ring silently */
:focus-visible { outline-offset: 2px; }

/* -----------------------------------------------------------------------
   SC 2.3.3 Animation from Interactions / respects OS "Reduce Motion"
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------
   Skip link — visible only when focused (belt-and-suspenders for any
   page whose inline .skip-link style is missing).
   ----------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
}
.skip-link:focus {
  left: 0;
  padding: 10px 16px;
  background: #0B1F3A;
  color: #fff;
  text-decoration: none;
  border: 2px solid #C4973A;
}

/* -----------------------------------------------------------------------
   Screen-reader-only utility for visually hidden labels
   ----------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------
   SC 1.4.4 Resize Text / 1.4.10 Reflow
   Don't let iOS auto-inflate text; allow the page to reflow on zoom.
   ----------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

/* -----------------------------------------------------------------------
   SC 1.4.3 Contrast (Minimum, AA) — targeted fixes verified with axe-core
   against the rendered pages. Footer, hero and stat bands are navy sitewide,
   so muted grey supporting text fails 4.5:1 there; lift it to a passing tone.
   ----------------------------------------------------------------------- */
footer a,
.m-footer a {
  color: #c7d0dc !important;        /* passes 4.5:1 on navy */
  text-decoration: underline !important;   /* SC 1.4.1: not colour alone */
}
footer p,
footer .footer-copy,
.m-footer p {
  color: #aab4c2 !important;        /* passes on navy */
}
.hero-body,
.hero-meta,
.hero-sub,
.hero-tag,
.stat-label {
  color: #b4bdca !important;        /* muted-on-navy, passes 4.5:1 */
}

/* Eyebrow labels that sit on navy sections need a lighter gold (base #7d611c
   is tuned for light backgrounds). These classes only appear on navy sections. */
.lineage-head .section-eyebrow,
.timeline-intro .section-eyebrow,
.terms-section .section-eyebrow {
  color: #e0b96a !important;        /* gold-lt, high contrast on navy */
}

/* Gold tag + headings on the cream waiver card fail 4.5:1 — antique gold that passes */
.waiver-tag { color: #6f5410 !important; }
.waiver-body h3 { color: #6f5410 !important; }

/* Emphasis inside titles on NAVY sections must stay LIGHT gold — the global
   base was darkened for light backgrounds, which broke these dark contexts. */
.lineage-head .section-title em,
.timeline-intro .section-title em,
.terms-section .section-title em {
  color: #e0b96a !important;        /* light gold, high contrast on navy */
}

/* "Open" status flag: cream on standard green misses 4.5:1; darken the green.
   Leave .warn (gold) and .alert (red) variants untouched. */
.tile-flag:not(.warn):not(.alert) { background: #35702b !important; }

/* Navy text on GOLD panels/forms uses reduced opacity that fails 4.5:1 on gold.
   Full-strength navy passes ~5.5:1. */
.tour-address, .tf-field label, .tf-disclaimer,
.inquiry-form-note, .form-disclaimer,
#tour p, #tour > p {
  color: #0b1f3a !important;
}

/* Muted navy body copy on LIGHT (cream/white) sections sits just under 4.5:1.
   Lift opacity so it passes while keeping the soft hierarchy. */
.mem-desc, .tennis-body, .venue-card-desc,
#membership > p, #venues > p {
  color: rgba(11, 31, 58, 0.82) !important;
}

/* Decorative sequence numbers (timeline / process steps) are faint watermarks.
   They are redundant with the visible headings; give them enough contrast to
   clear the large-text 3:1 threshold while staying subdued. */
.tl-num, .step-num { color: #6b7b93 !important; }

/* Deep-red sections: raise near-white text to full strength for 4.5:1 on #b3271f */
.courts-text .section-eyebrow,
.utr-text .section-eyebrow,
.clients-text .section-eyebrow { color: #ffffff !important; }
.courts-body, .utr-body, .clients-body { color: rgba(255,255,255,0.95) !important; }

/* FAQ is a cream section — gold emphasis must be the dark gold */
#faq .section-title em { color: #6f5410 !important; }

/* Waiver white sign-card: gold eyebrow -> dark gold; the lede used an
   undefined --charcoal var (rendered invisible cream-on-white) -> charcoal. */
.sign-card .sign-eyebrow { color: #6f5410 !important; }
.sign-card .sign-lede,
#waiver-form > p { color: #33404f !important; }

/* Honor forced-colors / Windows High Contrast mode */
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid CanvasText !important;
  }
}