/* ==========================================================================
   Accessibility Widget
   A custom, self-hosted a11y control panel (no third-party paid script).
   Controls: text scaling, contrast, links highlight, readable font,
   reduced motion, larger cursor, reading guide. State persisted.
   ========================================================================== */

.a11y-fab {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-a11y);
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.a11y-fab:hover { transform: scale(1.06); background: #064521; }
.a11y-fab svg { width: 30px; height: 30px; }

/* On mobile the nav drawer slides in from the right — move FAB to the left */
@media (max-width: 1499.98px) {
  .a11y-fab {
    inset-inline-end: auto;
    inset-inline-start: clamp(1rem, 3vw, 1.75rem);
  }
}

.a11y-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(92vw, 380px);
  background: #fff;
  z-index: calc(var(--z-a11y) + 1);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.a11y-panel.is-open { transform: translateX(0); }

/* Panel slides from the left on mobile to match the FAB position */
@media (max-width: 1499.98px) {
  .a11y-panel {
    inset-inline-end: auto;
    inset-inline-start: 0;
    transform: translateX(-100%);
  }
  .a11y-panel.is-open { transform: translateX(0); }
}

.a11y-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5);
  background: var(--brand);
  color: #fff;
  position: sticky; top: 0;
}
.a11y-panel__head h2 { color: #fff; font-size: var(--fs-500); }
.a11y-close {
  width: var(--tap-min); height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: #fff;
}
.a11y-close:hover { background: rgba(255,255,255,0.15); }
.a11y-close svg { width: 24px; height: 24px; }

.a11y-panel__body { padding: var(--sp-5); display: grid; gap: var(--sp-5); }

.a11y-group { display: grid; gap: var(--sp-3); }
.a11y-group__title {
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Toggle buttons grid */
.a11y-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.a11y-toggle {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  min-height: var(--tap-min);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.a11y-toggle svg { width: 26px; height: 26px; color: var(--brand); }
.a11y-toggle:hover { border-color: var(--brand); background: var(--green-050); }
.a11y-toggle[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--green-050);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.a11y-toggle[aria-pressed="true"]::after {
  content: "On"; font-size: 0.7rem; color: var(--brand); font-weight: var(--fw-bold);
}
.a11y-toggle[aria-pressed="false"]::after { content: "Off"; font-size: 0.7rem; color: var(--text-muted); }

/* Stepper for text size */
.a11y-stepper { display: flex; align-items: center; gap: var(--sp-3); }
.a11y-stepper button {
  width: var(--tap-min); height: var(--tap-min);
  border: 2px solid var(--brand); border-radius: var(--r-sm);
  color: var(--brand); font-size: 1.5rem; font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
}
.a11y-stepper button:hover { background: var(--brand); color: #fff; }
.a11y-stepper__value { flex: 1; text-align: center; font-weight: var(--fw-medium); }

.a11y-reset {
  width: 100%; min-height: var(--tap-min);
  border: 2px solid var(--border); border-radius: var(--r-md);
  color: var(--ink); font-weight: var(--fw-medium);
}
.a11y-reset:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* ==========================================================================
   Effects applied to <html> when options are active
   ========================================================================== */

/* Text scaling is driven by --a11y-scale on :root, multiplies the type scale */
html[data-a11y-scale] { font-size: calc(100% * var(--a11y-scale, 1)); }

/* High contrast */
html.a11y-contrast {
  --text: #000;
  --text-muted: #1a1a1a;
  --bg: #fff;
  --bg-alt: #fff;
  --border: #000;
  --brand: #003d1f;
}
html.a11y-contrast img { filter: contrast(1.15); }

/* Highlight links */
html.a11y-links a:not(.btn) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  background: var(--orange-050);
  box-shadow: 0 0 0 2px var(--orange-100);
  border-radius: 2px;
}

/* Readable font — swap display font for a high-legibility stack */
html.a11y-readable, html.a11y-readable * {
  font-family: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
  line-height: 1.8 !important;
}

/* Force reduced motion regardless of OS setting */
html.a11y-stop-motion *, html.a11y-stop-motion *::before, html.a11y-stop-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Larger cursor */
html.a11y-big-cursor, html.a11y-big-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M6 4l30 20-13 2 8 14-5 3-8-15-9 8z" fill="%23000" stroke="%23fff" stroke-width="2"/></svg>') 6 4, auto;
}

/* Reading guide — a horizontal bar following the cursor */
.a11y-reading-guide {
  position: fixed; inset-inline: 0; height: 2.4rem;
  background: rgba(7,84,43,0.12);
  border-block: 2px solid var(--brand);
  pointer-events: none;
  z-index: var(--z-a11y);
  display: none;
}
html.a11y-guide .a11y-reading-guide { display: block; }

/* ==========================================================================
   "Listen to this page" — narration control inside the a11y panel
   ========================================================================== */
.a11y-tts {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--brand); border-radius: var(--r-md);
  background: var(--brand); color: #fff;
  font-weight: var(--fw-medium); font-size: var(--fs-400);
  justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.a11y-tts:hover { background: #064521; }
.a11y-tts svg { width: 22px; height: 22px; flex-shrink: 0; }
.a11y-tts[aria-pressed="true"] { background: var(--brand-accent); border-color: var(--brand-accent); }
.a11y-tts[aria-pressed="true"]:hover { background: #e06d10; }

.a11y-tts--stop {
  background: #fff; color: var(--ink); border-color: var(--border);
  margin-top: var(--sp-2);
}
.a11y-tts--stop:hover { background: var(--bg-alt); border-color: var(--ink); }

.a11y-tts-status { font-size: var(--fs-300); color: var(--text-muted); min-height: 1.1em; margin-top: var(--sp-2); text-align: center; }