/* ==========================================================================
   Accessibility menu: the floating button (bottom-left) and its settings panel,
   plus the site-wide adjustments each setting applies.
   Settings are classes on <html>, set by assets/js/a11y.js (and restored early
   by a small inline script in each page's <head> so there is no flash).
   ========================================================================== */

/* Areas that always stay dark (photo hero, plum band) keep their own tokens,
   so the light theme can't put dark text on a dark photo. */
.hero, .section--band {
  --text: #FFFFFF; --text-muted: var(--midnight-200); --accent: var(--plum-300); --link: var(--plum-200);
  --btn-bg: var(--plum-500); --btn-bg-hover: #8A3589; --btn-text: #FFFFFF; --focus: var(--plum-200);
  color: var(--text);
}

/* ---------- Floating button ---------- */
.a11y-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--plum-500); color: #fff;
  border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transition: transform 150ms cubic-bezier(.2,0,0,1), background-color 150ms cubic-bezier(.2,0,0,1);
}
.a11y-fab svg { width: 34px; height: 34px; }
.a11y-fab:hover { transform: scale(1.06); background: var(--plum-600); }
.a11y-fab:focus-visible { outline: 3px solid var(--plum-200); outline-offset: 3px; }
.a11y-fab[aria-expanded="true"] { background: var(--plum-700); }
.a11y-fab .a11y-fab-dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--amber-500); border: 2px solid #fff; display: none; }
.a11y-active .a11y-fab .a11y-fab-dot { display: block; }
@media (max-width: 599px) { .a11y-fab { left: 12px; bottom: 12px; width: 56px; height: 56px; } }

/* ---------- Panel (always light, for maximum legibility) ---------- */
.a11y-panel {
  position: fixed; left: 20px; bottom: 92px; z-index: 950;
  width: min(400px, calc(100vw - 40px)); max-height: calc(100vh - 120px); overflow-y: auto;
  background: #fff; color: var(--midnight-500); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45); border: 1px solid var(--midnight-200);
  font-family: var(--font); font-size: 1rem; line-height: 1.5; letter-spacing: normal; word-spacing: normal;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel :focus-visible { outline: 3px solid var(--plum-600); outline-offset: 2px; }
.a11y-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 20px; background: var(--plum-600); color: #fff; border-radius: 12px 12px 0 0; }
.a11y-head h2 { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.a11y-head p { margin: 2px 0 0; font-size: .8125rem; color: var(--plum-100); }
.a11y-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); border-radius: 8px; cursor: pointer; }
.a11y-close:hover { background: rgba(255,255,255,.12); }
.a11y-head :focus-visible { outline-color: #fff; }
.a11y-close svg { width: 20px; height: 20px; }
.a11y-body { padding: 16px 20px 20px; display: grid; gap: 20px; }
.a11y-group h3 { margin: 0 0 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--plum-600); }

/* Text size stepper */
.a11y-stepper { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; border: 1px solid var(--midnight-300); border-radius: 8px; padding: 6px; }
.a11y-stepper button { width: 48px; height: 44px; border-radius: 6px; border: 0; background: var(--plum-50); color: var(--plum-700); font: 700 1.25rem/1 var(--font); cursor: pointer; }
.a11y-stepper button:hover { background: var(--plum-100); }
.a11y-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.a11y-stepper output { text-align: center; font-weight: 600; font-size: .9375rem; }

/* Segmented radio group (contrast) */
.a11y-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border: 0; margin: 0; padding: 0; }
.a11y-seg legend { margin: 0 0 8px; padding: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--plum-600); }
.a11y-seg label { position: relative; display: grid; place-items: center; gap: 4px; min-height: 72px; padding: 8px 4px; border: 2px solid var(--midnight-200); border-radius: 8px; cursor: pointer; font-size: .8125rem; font-weight: 600; text-align: center; }
.a11y-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.a11y-seg label:has(input:checked) { border-color: var(--plum-600); background: var(--plum-50); color: var(--plum-700); }
.a11y-seg label:has(input:focus-visible) { outline: 3px solid var(--plum-600); outline-offset: 2px; }
.a11y-swatch { width: 28px; height: 20px; border-radius: 4px; border: 1px solid var(--midnight-300); }

/* Toggle tiles */
.a11y-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-tile {
  position: relative; display: grid; justify-items: start; align-content: start; gap: 6px; min-height: 88px; padding: 12px;
  background: #fff; color: var(--midnight-500); border: 2px solid var(--midnight-200); border-radius: 8px;
  font: 600 .875rem/1.3 var(--font); text-align: left; cursor: pointer;
  transition: border-color 100ms, background-color 100ms;
}
.a11y-tile svg { width: 24px; height: 24px; color: var(--plum-600); }
.a11y-tile small { font-weight: 400; font-size: .75rem; color: #4A5068; }
.a11y-tile:hover { border-color: var(--plum-400); }
.a11y-tile[aria-pressed="true"] { background: var(--plum-600); border-color: var(--plum-600); color: #fff; }
.a11y-tile[aria-pressed="true"] svg, .a11y-tile[aria-pressed="true"] small { color: var(--plum-100); }
.a11y-tile[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 8px; right: 10px; font-weight: 700; color: #fff; }

.a11y-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--midnight-200); }
.a11y-reset { min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 2px solid var(--plum-600); background: #fff; color: var(--plum-700); font: 700 .875rem var(--font); cursor: pointer; margin-top: 12px; }
.a11y-reset:hover { background: var(--plum-50); }
.a11y-foot a { color: var(--plum-700); font-size: .875rem; font-weight: 600; margin-top: 12px; }
.a11y-status { font-size: .8125rem; color: #4A5068; margin: 0; }

@media (max-width: 599px) {
  .a11y-panel { left: 8px; right: 8px; bottom: 80px; width: auto; max-height: calc(100vh - 100px); }
}

/* Reading guide bar */
.a11y-guide { position: fixed; left: 0; right: 0; height: 14px; margin-top: -7px; z-index: 890; pointer-events: none; background: rgba(230,169,226,.35); border-top: 2px solid var(--plum-300); border-bottom: 2px solid var(--plum-300); display: none; }
.a11y-guide-on .a11y-guide { display: block; }

/* ==========================================================================
   Site-wide adjustments
   ========================================================================== */

/* Text size */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 150%; }

/* Light theme */
html.a11y-light {
  --header-bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: var(--midnight-50);
  --card: #FFFFFF; --card-border: var(--midnight-200);
  --text: var(--midnight-500); --text-muted: #4A5068;
  --accent: var(--plum-600); --accent-strong: var(--plum-700); --link: var(--plum-600);
  --field-bg: #FFFFFF; --field-border: #6B7288;
  --btn-bg: var(--plum-500); --btn-bg-hover: var(--plum-700); --btn-text: #FFFFFF;
  --focus: var(--plum-600); --error: var(--crimson-700); --success: var(--evergreen-700);
  --shadow: 0 1px 2px rgba(17,23,41,.06), 0 4px 16px rgba(17,23,41,.08);
}
.logo-on-light { display: none !important; }
html.a11y-light .logo-on-dark { display: none !important; }
html.a11y-light .logo-on-light { display: block !important; }
html.a11y-light .site-header, html.a11y-light .site-footer { border-color: var(--midnight-200); }
html.a11y-light .primary-nav a:not(.btn) { color: var(--midnight-500); }
html.a11y-light .primary-nav a[aria-current="page"] { color: var(--plum-600); }
html.a11y-light .footer-grid li a, html.a11y-light .footer-bottom a { color: var(--midnight-500); }
html.a11y-light .chips li { color: var(--midnight-500); }
html.a11y-light select option { background: #fff; color: var(--midnight-500); }

html.a11y-light .list-x li::before { background: var(--midnight-100); color: var(--midnight-500); }
html.a11y-light .quote { background: var(--plum-50); }
html.a11y-light .btn-ghost:hover { background: var(--plum-50); }
html.a11y-light .notice strong { color: var(--amber-800); }
html.a11y-light .error-msg::before { color: #fff; }

/* High contrast (black, white, yellow) */
html.a11y-contrast {
  --header-bg: #000; --surface: #000; --surface-alt: #000; --card: #000; --card-border: #FFF;
  --text: #FFF; --text-muted: #FFF; --accent: #FFEB3B; --accent-strong: #FFEB3B; --link: #FFEB3B;
  --field-bg: #000; --field-border: #FFF; --btn-bg: #FFEB3B; --btn-bg-hover: #FFF; --btn-text: #000;
  --focus: #00E5FF; --error: #FF8A80; --success: #B9F6CA; --shadow: none;
}
html.a11y-contrast .hero, html.a11y-contrast .section--band { --accent: #FFEB3B; --link: #FFEB3B; --btn-bg: #FFEB3B; --btn-bg-hover: #FFF; --btn-text: #000; --text-muted: #FFF; --focus: #00E5FF; }
html.a11y-contrast .section--band { background: #000; border-block: 2px solid #FFF; }
html.a11y-contrast .section--band .btn-primary { --btn-bg: #FFEB3B; --btn-text: #000; }
html.a11y-contrast .btn-primary { border-color: #FFF; }
html.a11y-contrast .hero::before { background: rgba(0,0,0,.88); }
html.a11y-contrast .hero-content .lead, html.a11y-contrast .muted, html.a11y-contrast .lead { color: #FFF; }
html.a11y-contrast a { text-decoration: underline !important; }
html.a11y-contrast .btn { border-color: #FFF; }
html.a11y-contrast .card, html.a11y-contrast .tabpanel, html.a11y-contrast .tab, html.a11y-contrast .orbit-node, html.a11y-contrast .form-card, html.a11y-contrast .values li { border: 2px solid #FFF; }
html.a11y-contrast [data-ic] { --ic: #FFEB3B; --ic-on: #000; }
html.a11y-contrast .orbit-core { background: #000; border: 2px solid #FFF; box-shadow: none; }
html.a11y-contrast .orbit-node[aria-pressed="true"] { color: #000; }
html.a11y-contrast .list-check li::before { background: #FFEB3B; color: #000; }
html.a11y-contrast .footer-grid li a, html.a11y-contrast .footer-bottom a, html.a11y-contrast .chips li { color: #FFF; }

/* Grayscale (applied to page regions, not the menu itself) */
html.a11y-gray .site-header, html.a11y-gray main, html.a11y-gray .site-footer { filter: grayscale(1); }

/* Highlight links */
html.a11y-links main a, html.a11y-links .site-footer a, html.a11y-links .primary-nav a:not(.btn) {
  text-decoration: underline !important; text-decoration-thickness: 2px !important;
  outline: 2px dashed var(--accent); outline-offset: 2px;
}
html.a11y-links .btn { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Readable font */
html.a11y-font body, html.a11y-font .btn, html.a11y-font input, html.a11y-font select, html.a11y-font textarea, html.a11y-font button { font-family: "Atkinson Hyperlegible", Verdana, Arial, sans-serif !important; }

/* Text spacing (WCAG 1.4.12 values) */
html.a11y-spacing main *, html.a11y-spacing .site-footer * { line-height: 1.5 !important; letter-spacing: .12em !important; word-spacing: .16em !important; }
html.a11y-spacing main p { margin-bottom: 2em !important; }

/* Left-align text */
html.a11y-align main *, html.a11y-align .site-footer * { text-align: left !important; }

/* Large cursor */
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 20-13 2 8 16-6 3-8-16-11 9z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor label, html.a11y-cursor select, html.a11y-cursor [role="tab"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 20-13 2 8 16-6 3-8-16-11 9z' fill='%236D256C' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important;
}

/* Stop motion */
html.a11y-motion { scroll-behavior: auto !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; }
html.a11y-motion .reveal { opacity: 1 !important; transform: none !important; }

/* Hide images (logos stay so people know where they are) */
html.a11y-noimg main img, html.a11y-noimg .hero-media { visibility: hidden !important; }
html.a11y-noimg .photo { background: var(--card); min-height: 80px; }
html.a11y-noimg .hero::before { background: var(--midnight-700); }
html.a11y-contrast .hero-media::after { background: rgba(0,0,0,.85); }

/* Rings diagram in high contrast: black panel, white labels */
html.a11y-contrast .rings { --rings-bg: #000; }
html.a11y-contrast .rings-panel { border: 2px solid #FFF; }
html.a11y-contrast .rings-svg .ring-label { fill: #FFF; }
html.a11y-contrast .rings-hint { color: #FFF; }
html.a11y-contrast .ring-spot:focus-visible { outline-color: #00E5FF; }
html.a11y-contrast .ring-pop { background: #000; border: 2px solid #FFF; border-top: 6px solid #FFEB3B; }
html.a11y-contrast .ring-pop-desc { color: #FFF; }
html.a11y-contrast .ring-pop-link { color: #FFEB3B; }
html.a11y-light .ring-pop { background: var(--midnight-500); }

html.a11y-light .motion-toggle--inline:hover { background: var(--plum-50); }
html.a11y-contrast .roll-word { background-image: linear-gradient(#FFEB3B,#FFEB3B); }
html.a11y-motion .motion-toggle { display: none; }
html.a11y-light .social a { color: var(--midnight-500); }
html.a11y-light .social a:hover { color: #fff; }
html.a11y-contrast .social a { color: #FFF; border-color: #FFF; }
html.a11y-contrast .social a:hover { background: #FFEB3B; color: #000; border-color: #FFEB3B; }