/* a11y.css — Sterling's World site-wide accessibility mode.

   Turned on only when a guest chooses the Accessibility Entrance. EVERY rule in
   this file is scoped under html.a11y-on, so a visitor who never opts in sees
   byte-identical styling to before — that opt-out safety is a tested guarantee.

   Two variants:
     html.a11y-on              low-glare dark, high contrast, large type
     html.a11y-on.a11y-light   black-on-white for guests who read better bright

   The root font-size (100–160%) is set by js/a11y.js, so everything sized in
   rem scales with it. Sizes here stay relative for that reason. */

/* ---------- tokens ---------- */
html.a11y-on {
  --a-bg: #12151c; --a-panel: #1a2029; --a-panel-2: #202836; --a-line: #46536b;
  --a-text: #f5f1e8; --a-soft: #d3ccbe; --a-accent: #ffd166; --a-accent-ink: #ffd166;
}
html.a11y-on.a11y-light {
  --a-bg: #ffffff; --a-panel: #f2f2f2; --a-panel-2: #e6e6e6; --a-line: #6b6b6b;
  --a-text: #121212; --a-soft: #444444; --a-accent: #ffd166; --a-accent-ink: #6f5210;
}

/* Re-point site.css's own design tokens. This is the load-bearing part: every
   page has its own inline styles built on these variables (--paper cards,
   --ink-soft captions), so redefining them here makes ALL of that content adapt
   automatically instead of leaving light-on-light or dark-on-dark leaks. The
   energy colours (--rest/--play/--adv) are deliberately left alone — they are
   used as saturated fills behind their own text and already pass. */
html.a11y-on {
  --cream: var(--a-bg); --cream-2: var(--a-panel); --paper: var(--a-panel);
  --ink: var(--a-text); --ink-soft: var(--a-soft);
  --line: var(--a-line); --gold: var(--a-accent); --wood: var(--a-panel-2);
}

/* ---------- page canvas + type ---------- */
html.a11y-on body {
  background: var(--a-bg) !important;
  color: var(--a-text) !important;
  font-size: 1.0625rem;         /* scales with the root size control */
  line-height: 1.65;
}
html.a11y-on h1, html.a11y-on h2, html.a11y-on h3,
html.a11y-on h4, html.a11y-on p, html.a11y-on li,
html.a11y-on span, html.a11y-on strong, html.a11y-on label { color: var(--a-text); }
html.a11y-on a { color: var(--a-accent-ink); }
html.a11y-on a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The floating spoon chip is an <a> that carries its own dark-brown pill, so the
   generic link colour above would leave dark gold on dark brown. Keep its native
   cream-on-brown pairing, which already has strong contrast. */
html.a11y-on .sw-spoon-chip {
  background: #4b2e1d !important;
  color: #ffe9cf !important;
  border-color: #ffe9cf !important;
}

/* Reflow safety at 320px + XL text (learned from the audio-park audit). */
html.a11y-on p, html.a11y-on li, html.a11y-on h1, html.a11y-on h2,
html.a11y-on h3, html.a11y-on .lbl, html.a11y-on .tag { overflow-wrap: break-word; }

/* Visible, generous focus for keyboard and low-vision guests. */
html.a11y-on :focus-visible {
  outline: 4px solid var(--a-accent) !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}

/* ---------- chrome: topbar, menu, footer ---------- */
html.a11y-on .topbar {
  background: var(--a-panel) !important;
  border-bottom: 2px solid var(--a-line) !important;
  box-shadow: none !important;
}
html.a11y-on .brand { color: var(--a-text) !important; }
html.a11y-on .menu-btn { min-width: 48px; min-height: 48px; }
html.a11y-on .menu-btn .bar { background: var(--a-text) !important; }

html.a11y-on .side-menu {
  background: var(--a-panel) !important;
  border-right: 2px solid var(--a-line) !important;
}
html.a11y-on .side-menu a {
  color: var(--a-text) !important;
  min-height: 52px;
  border-bottom: 1px solid var(--a-line);
  font-weight: 800;
}
html.a11y-on .menu-close { color: var(--a-text) !important; min-width: 48px; min-height: 48px; }

html.a11y-on footer {
  background: var(--a-panel) !important;
  color: var(--a-soft) !important;
  border-top: 2px solid var(--a-line) !important;
}
html.a11y-on footer strong { color: var(--a-text) !important; }

html.a11y-on .skip {
  background: var(--a-accent) !important;
  color: #241a10 !important;
  font-weight: 800;
}

/* ---------- hero: drop the photo, keep a readable solid ---------- */
html.a11y-on .hero { background: var(--a-panel) !important; min-height: 0 !important; }
html.a11y-on .hero-bg { display: none !important; }
html.a11y-on .hero-scrim { background: none !important; }
html.a11y-on .hero h1, html.a11y-on .hero p { color: var(--a-text) !important; text-shadow: none !important; }

/* ---------- doors + cards: solid panels, art is decoration only ---------- */
html.a11y-on .sw-door {
  background: var(--a-panel) !important;
  border: 3px solid var(--a-line) !important;
  outline: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 18px !important;
  display: block !important;
}
html.a11y-on .sw-door img { display: none !important; }
html.a11y-on .sw-door .lbl,
html.a11y-on .sw-door .lbl strong {
  position: static !important;
  color: var(--a-text) !important;
  text-shadow: none !important;
  font-size: 1.2rem;
  line-height: 1.25;
}
html.a11y-on .sw-door .tag {
  position: static !important;
  display: inline-block;
  color: var(--a-accent-ink) !important;
  background: none !important;
  border: 0 !important;
  font-size: .9rem;
  margin-bottom: 6px;
}
html.a11y-on .sw-door .acts a {
  display: inline-block;
  background: var(--a-panel-2) !important;
  color: var(--a-text) !important;
  border: 2px solid var(--a-line) !important;
  padding: 12px 16px;
  border-radius: 12px;
  min-height: 48px;
  font-weight: 800;
}
html.a11y-on .sw-door:hover, html.a11y-on .sw-door:focus-visible { border-color: var(--a-accent) !important; }

html.a11y-on .card, html.a11y-on .more-card, html.a11y-on .panel {
  background: var(--a-panel) !important;
  border: 2px solid var(--a-line) !important;
  color: var(--a-text) !important;
  box-shadow: none !important;
}

/* ---------- form controls ----------
   Text fields, selects and textareas often hard-code a white background, which
   would leave the light text of this mode unreadable. Range/radio/checkbox are
   excluded so their accent-colour styling keeps working. */
html.a11y-on input:not([type="range"]):not([type="radio"]):not([type="checkbox"]),
html.a11y-on select,
html.a11y-on textarea {
  background: var(--a-panel) !important;
  color: var(--a-text) !important;
  border: 2px solid var(--a-line) !important;
  min-height: 48px;
}
html.a11y-on ::placeholder { color: var(--a-soft) !important; opacity: 1; }

/* ---------- buttons ---------- */
html.a11y-on button, html.a11y-on .cue, html.a11y-on .lobby-surprise, html.a11y-on .guided-cta {
  min-height: 48px;
}
html.a11y-on .lobby-surprise, html.a11y-on .cue {
  background: var(--a-accent) !important;
  color: #241a10 !important;
  border: 2px solid var(--a-accent) !important;
  font-weight: 800;
  box-shadow: none !important;
}
html.a11y-on .guided-cta {
  background: var(--a-panel) !important;
  border: 3px solid var(--a-accent) !important;
  color: var(--a-text) !important;
  box-shadow: none !important;
}
html.a11y-on .guided-cta-text strong, html.a11y-on .guided-cta-text span { color: var(--a-text) !important; }
html.a11y-on .hero-social { background: var(--a-panel-2) !important; color: var(--a-text) !important; }
/* At large text the hero's pill buttons must be free to wrap and stack rather
   than clip their own labels. */
html.a11y-on .hero-cta-row { flex-direction: column; align-items: flex-start; }
html.a11y-on .hero-social, html.a11y-on .cue {
  max-width: 100%;
  white-space: normal;
  height: auto;
  text-align: left;
}

/* The audio-park entrance bar reads as a plain high-contrast banner here. */
html.a11y-on .audio-gate {
  background: var(--a-panel) !important;
  color: var(--a-text) !important;
  border-bottom: 3px solid var(--a-accent) !important;
}
html.a11y-on .audio-gate strong, html.a11y-on .audio-gate .go { color: var(--a-accent-ink) !important; }

/* ---------- calm motion ---------- */
html.a11y-on { scroll-behavior: auto; }
html.a11y-on *, html.a11y-on *::before, html.a11y-on *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  transition-duration: .001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  html.a11y-on * { animation: none !important; transition: none !important; }
}

/* Splash video and the first-visit tour are visual set-dressing — a guest in
   accessibility mode should land in the park, not sit through them. */
html.a11y-on .splash, html.a11y-on #loader { display: none !important; }

/* A few page components hard-code a near-white background instead of using a
   token, so they can't be reached by the override above. Re-point them here so
   the dark variant never leaves pale panels with pale text on them. */
html.a11y-on .tk-badge, html.a11y-on .tk-redeem, html.a11y-on .tk-badges-box,
html.a11y-on .res-link, html.a11y-on .zone-group, html.a11y-on .gd-card,
html.a11y-on .gd-opt, html.a11y-on .gd-speech, html.a11y-on .gd-resume,
html.a11y-on .vshare-card, html.a11y-on .vshare-body button,
html.a11y-on .sw-pk-card, html.a11y-on .tv-switch a {
  background: var(--a-panel) !important;
  color: var(--a-text) !important;
  border-color: var(--a-line) !important;
}
html.a11y-on .tk-badge strong, html.a11y-on .tk-badge .bh,
html.a11y-on .res-link strong, html.a11y-on .res-link span,
html.a11y-on .gd-opt-label, html.a11y-on .gd-opt-hint,
html.a11y-on .zg-sub, html.a11y-on .sub { color: var(--a-text) !important; }
html.a11y-on .tk-badge .bh, html.a11y-on .zg-sub,
html.a11y-on .sub, html.a11y-on .gd-opt-hint { color: var(--a-soft) !important; }