/* ============================================================
   Accessibility tools — bigger text, read aloud, and a choice of
   background colour for readers who find white hard work.
   Asked for by get2gether members via Mojca (Zoom, 28 Jul 2026).
   Everything here is member-facing, so: large targets, plain
   labels, visible focus, and no reliance on colour alone.
   ============================================================ */

/* ---------- 1. Bigger text ----------
   Scaling the root font-size scales every rem in the design system,
   which is what "make the text bigger" should actually do. --wrap is
   in px and the grids are fr-based, so the page reflows rather than
   overflowing. */
html[data-a11y-text="large"]  { font-size: 115%; }
html[data-a11y-text="xlarge"] { font-size: 130%; }

/* ---------- 2. Background colour (dyslexia-friendly tints) ----------
   Overriding the ground tokens re-tints every text surface at once —
   page background, cards, bands — without touching the brand colours
   used for the red/blue/yellow feature bands. */
html[data-a11y-theme="blue"] {
  --cream: #E6F0FA;
  --cream-deep: #D5E5F4;
  --white: #F1F8FE;
  --line: #C3D8EA;
}
html[data-a11y-theme="yellow"] {
  --cream: #FDF7DF;
  --cream-deep: #F8EFC7;
  --white: #FFFCEE;
  --line: #E7D9A6;
}
html[data-a11y-theme="purple"] {
  --cream: #F2ECFA;
  --cream-deep: #E7DDF5;
  --white: #F9F5FE;
  --line: #D6C7EC;
}

/* The sticky header colour is hard-coded in styles.css (it needs alpha for the
   blur), so it gets its own tint per theme. */
html[data-a11y-theme="blue"]   .site-header { background: rgba(230, 240, 250, .94); }
html[data-a11y-theme="yellow"] .site-header { background: rgba(253, 247, 223, .94); }
html[data-a11y-theme="purple"] .site-header { background: rgba(242, 236, 250, .94); }

/* ---------- 3. The launcher and panel ----------
   Sized in px on purpose. These are the controls that CHANGE the text size, so
   they must stay a predictable, reachable size at every setting — if they grew
   with the page, "Biggest" would push the colour buttons out of the panel. */
.a11y-launch {
  position: fixed; left: 22px; bottom: 22px; z-index: 95;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blue); color: #fff; border: 0;
  font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.2;
  padding: 13px 21px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 83, 156, .38);
  transition: background-color .18s, transform .18s;
}
.a11y-launch:hover { background: var(--blue-deep); transform: translateY(-2px); }
.a11y-launch[aria-expanded="true"] { background: var(--blue-deep); }

.a11y-panel {
  position: fixed; left: 22px; bottom: 84px; z-index: 96;
  width: min(330px, calc(100vw - 44px));
  background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  border-radius: 18px; box-shadow: 0 22px 60px rgba(23, 24, 28, .3);
  border-top: 5px solid var(--blue);
  padding: 20px 21px 21px;
  max-height: min(80vh, 640px); overflow-y: auto;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 20px; line-height: 1.2; margin: 0 0 3px; }
.a11y-panel .a11y-intro { font-size: 14px; color: var(--ink-soft); margin: 0 0 18px; }
.a11y-close {
  position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--cream-deep); color: var(--ink); cursor: pointer;
  font-size: 17px; line-height: 1; display: grid; place-items: center;
}
.a11y-close:hover { background: var(--red); color: #fff; }

.a11y-group { margin-bottom: 18px; }
.a11y-group > .a11y-label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 16px; margin-bottom: 8px;
}
.a11y-row { display: flex; flex-wrap: wrap; gap: 8px; }

.a11y-btn {
  flex: 1 1 auto; min-width: 62px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--cream); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  cursor: pointer; padding: 8px 10px;
  transition: border-color .16s, background-color .16s, color .16s;
}
.a11y-btn:hover { border-color: var(--blue); }
.a11y-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.a11y-btn .a11y-a-sm { font-size: 14px; }
.a11y-btn .a11y-a-md { font-size: 18px; }
.a11y-btn .a11y-a-lg { font-size: 23px; }

/* Colour swatches — two per row, and each carries its name, so colour is never
   the only way to tell the options apart. */
.a11y-swatch {
  flex: 1 1 calc(50% - 4px); min-height: 52px;
  justify-content: flex-start; gap: 9px; font-size: 14px; font-weight: 600;
}
.a11y-swatch .a11y-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(23, 24, 28, .3);
}
.a11y-swatch[data-theme="none"]   .a11y-dot { background: #FAF6F0; }
.a11y-swatch[data-theme="blue"]   .a11y-dot { background: #E6F0FA; }
.a11y-swatch[data-theme="yellow"] .a11y-dot { background: #FDF7DF; }
.a11y-swatch[data-theme="purple"] .a11y-dot { background: #F2ECFA; }

.a11y-reset {
  width: 100%; min-height: 48px; margin-top: 4px;
  background: none; border: 2px solid var(--line); border-radius: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: var(--ink-soft); cursor: pointer;
}
.a11y-reset:hover { border-color: var(--red); color: var(--red); }

.a11y-note { font-size: 13px; color: var(--ink-soft); margin: 9px 0 0; }

/* ---------- 4. Read aloud ---------- */
/* Hidden until the script confirms the browser can actually speak. */
.a11y-speech { display: none; }
html.a11y-can-speak .a11y-speech { display: block; }

.a11y-reading {
  background: var(--yellow) !important;
  box-shadow: 0 0 0 6px var(--yellow);
  border-radius: 3px;
  color: var(--ink) !important;
}

/* Live status line for screen readers and everyone else */
.a11y-status { font-size: 14px; font-weight: 600; color: var(--blue-deep); margin: 10px 0 0; min-height: 1.2em; }

/* ---------- 5. Small screens ---------- */
@media (max-width: 560px) {
  .a11y-launch {
    left: 14px; bottom: 14px; padding: 0;
    border-radius: 50%; width: 56px; height: 56px; justify-content: center;
  }
  .a11y-launch .a11y-launch-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .a11y-panel { left: 14px; bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-launch { transition: none; }
  .a11y-launch:hover { transform: none; }
}