/* ==========================================================================
   Accessibility module — public site only (not loaded by the CMS).
   Part 1: baseline WCAG 2.2 AA fixes that apply to everyone.
   Part 2: user-selectable options driven by classes on <html>.
   Part 3: the accessibility panel UI.
   ========================================================================== */

/* ── Part 1: baseline ─────────────────────────────────────────────────── */

/* Skip link (2.4.1) */
.a11y-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 12px 20px;
  background: #fff;
  color: #4e165d;
  font-weight: 700;
  border-radius: 8px;
  border: 3px solid #4e165d;
  text-decoration: none;
  transform: translateY(-200%);
}
.a11y-skip:focus { transform: translateY(0); }

main:focus { outline: none; }

/* Visible focus on every background (2.4.7, 2.4.11, 1.4.11):
   blue ring + white halo reads on both light and dark surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Target size (2.5.8): small controls get at least 24x24 */
button, [role="button"], .hamburger, .iir-bubble-close {
  min-width: 24px;
  min-height: 24px;
}
.hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* Respect the OS motion preference (2.3.3, 2.2.2) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Respect the OS contrast preference */
@media (prefers-contrast: more) {
  :root { --gray-400: #475569; --gray-500: #334155; --gray-600: #1e293b; }
  a { text-decoration: underline; }
}

/* Links inside running text must not rely on colour alone (1.4.1) */
p a:not(.btn):not([class*="button"]):not([class*="cta"]),
li a:not(.nav-link):not(.btn):not([class*="button"]):not([class*="cta"]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Part 2: user options ─────────────────────────────────────────────── */

/* Text spacing — WCAG 1.4.12 values */
html.a11y-spacing body *:not(#a11y-root):not(#a11y-root *):not(i):not(svg *) {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html.a11y-spacing body p { margin-bottom: 2em !important; }

/* Dyslexia-friendly font (Atkinson Hyperlegible, loaded on demand) */
html.a11y-dyslexia body,
html.a11y-dyslexia body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
  font-family: "Atkinson Hyperlegible", "Verdana", "Arial", sans-serif !important;
}

/* Left-aligned text */
html.a11y-align body *:not(#a11y-root):not(#a11y-root *) { text-align: left !important; }

/* Stop motion */
html.a11y-motion { scroll-behavior: auto !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Highlight links */
html.a11y-links a:not(#a11y-root a) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  background: #fff3a3 !important;
  color: #1a0a52 !important;
  outline: 2px solid #1a0a52;
  outline-offset: 1px;
}

/* Stronger focus */
html.a11y-focus :focus {
  outline: 4px solid #0b57d0 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px #000 !important;
}

/* Large cursor */
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M4 2l16 9-7 2-3 7z' fill='black' stroke='white' stroke-width='1.5'/></svg>") 4 2, auto !important;
}
html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor [role="button"], html.a11y-cursor input, html.a11y-cursor label {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M4 2l16 9-7 2-3 7z' fill='%23702283' stroke='white' stroke-width='1.5'/></svg>") 4 2, pointer !important;
}

/* Hide images (all pictures on the site are <img>; gradients and colours are left alone
   so buttons and cards stay readable) */
html.a11y-noimg img, html.a11y-noimg picture, html.a11y-noimg video { display: none !important; }

/* Dark theme: inverted page, images/video flipped back so they look normal */
html.a11y-contrast-dark img,
html.a11y-contrast-dark video,
html.a11y-contrast-dark picture,
html.a11y-contrast-dark iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* High contrast — dark (white on black, yellow links) */
html.a11y-contrast-hc-dark body *:not(#a11y-root):not(#a11y-root *) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.a11y-contrast-hc-dark body { background: #000 !important; }
html.a11y-contrast-hc-dark a:not(#a11y-root a), html.a11y-contrast-hc-dark a * { color: #ffff00 !important; text-decoration: underline !important; }
html.a11y-contrast-hc-dark .btn, html.a11y-contrast-hc-dark button:not(#a11y-root button) {
  border: 2px solid #ffff00 !important;
}
html.a11y-contrast-hc-dark svg:not(#a11y-root svg), html.a11y-contrast-hc-dark i { color: #fff !important; fill: currentColor; }

/* High contrast — light (black on white, blue links) */
html.a11y-contrast-hc-light body *:not(#a11y-root):not(#a11y-root *) {
  background-color: #fff !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.a11y-contrast-hc-light body { background: #fff !important; }
html.a11y-contrast-hc-light a:not(#a11y-root a), html.a11y-contrast-hc-light a * { color: #0000cc !important; text-decoration: underline !important; }
html.a11y-contrast-hc-light .btn, html.a11y-contrast-hc-light button:not(#a11y-root button) {
  border: 2px solid #000 !important;
}

/* Reading ruler */
#a11y-ruler {
  position: fixed;
  left: 0;
  width: 100%;
  height: 3.2rem;
  top: 40%;
  z-index: 99990;
  pointer-events: none;
  border-top: 3px solid #ffd400;
  border-bottom: 3px solid #ffd400;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}
#a11y-ruler[hidden] { display: none; }

/* ── Part 3: panel UI (self-contained styling) ────────────────────────── */

#a11y-root, #a11y-root * { box-sizing: border-box; }
#a11y-root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#a11y-root {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: normal;
  word-spacing: normal;
}

.a11y-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9990;            /* below the cookie dialog (9998/9999) */
  width: 52px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #4e165d;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.a11y-fab:hover { transform: scale(1.06); background: #702283; }
.a11y-fab svg { width: 30px; height: 30px; fill: currentColor; }

.a11y-panel {
  position: fixed;
  left: 20px;
  bottom: 84px;
  z-index: 9991;
  width: 400px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1e293b;
  border-radius: 18px;
  border: 1px solid #d9cce2;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  overflow: clip;   /* the box itself must never scroll; only .a11y-body does */
}
.a11y-panel[hidden] { display: none; }

.a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #4a0f6a, #702283);
  color: #fff;
}
.a11y-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.a11y-close {
  width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.a11y-close:hover { background: rgba(255, 255, 255, 0.3); }

.a11y-body {
  padding: 8px 18px 6px; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain;
  /* scroll shadows: a soft edge appears only where more content is hidden */
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) top / 100% 24px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(74,15,106,.28), rgba(74,15,106,0)) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(74,15,106,.28), rgba(74,15,106,0)) bottom / 100% 10px no-repeat scroll;
}
.a11y-head, .a11y-note, .a11y-foot { flex-shrink: 0; touch-action: none; }
.a11y-panel { overscroll-behavior: contain; }
.a11y-group { border: 0; padding: 14px 0; margin: 0; border-bottom: 1px solid #ece4f1; }
.a11y-group:last-of-type { border-bottom: 0; }
.a11y-group legend { float: left; width: 100%; }
.a11y-group legend + * { clear: both; }
.a11y-group legend, .a11y-group-title {
  padding: 0; margin: 0 0 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #702283;
}

.a11y-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.a11y-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a11y-seg label { position: relative; display: block; min-width: 0; }
.a11y-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.a11y-seg span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 8px 6px;
  border: 2px solid #d9cce2; border-radius: 10px;
  font-size: 14px; font-weight: 600; background: #fff; color: #1e293b;
}
.a11y-seg input:checked + span { border-color: #702283; background: #f3e8ff; color: #4a0f6a; }
.a11y-seg span { position: relative; }
.a11y-seg-4 span { padding-left: 2px; padding-right: 2px; font-size: 13px; }
.a11y-seg input:checked + span::after { content: "\2713"; position: absolute; top: 1px; right: 4px; font-size: 11px; font-weight: 800; color: #702283; }
.a11y-seg input:focus-visible + span { outline: 3px solid #0b57d0; outline-offset: 2px; }

.a11y-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: relative; min-height: 44px; padding: 6px 0; cursor: pointer; font-size: 15px; font-weight: 500;
}
.a11y-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.a11y-track {
  position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 99px;
  background: #6b7280; transition: background 0.15s;
}
.a11y-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.15s;
}
.a11y-switch input:checked + .a11y-track { background: #702283; }
.a11y-switch input:checked + .a11y-track::after { transform: translateX(20px); }
.a11y-switch input:focus-visible + .a11y-track { outline: 3px solid #0b57d0; outline-offset: 2px; }

.a11y-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid #ece4f1; background: #faf7fc; }
.a11y-btn {
  flex: 1; min-height: 44px; padding: 10px 14px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer;
  border: 2px solid #702283; background: #fff; color: #4a0f6a;
}
.a11y-btn:hover { background: #f3e8ff; }
.a11y-note { margin: 0; padding: 0 18px 12px; font-size: 12px; color: #475569; background: #faf7fc; }

/* Mobile / tablet-portrait: the cookie dialog is a full-width bottom sheet and the IIR bubble
   spans the width, so the button moves into the header next to the menu button, where it
   covers no content. The panel itself opens as a bottom sheet. */
@media (max-width: 768px) {
  .a11y-fab {
    left: auto;
    bottom: auto;
    top: 12px;
    right: 68px;
    width: 44px;
    height: 44px;
    border-width: 2px;
  }
  .a11y-fab svg { width: 26px; height: 26px; }
  body.nav-open .a11y-fab { display: none; }
  .a11y-panel {
    left: 8px; right: 8px; bottom: 8px;
    width: auto; max-width: none;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-track, .a11y-track::after { transition: none; } }

/* ── Contrast fixes (1.4.3) — status badges with white text ───────────── */
.project-status.active { background: #047857; }
.project-status.beta { color: #1f2937; }
.project-status.coming-soon { background: #0369a1; }

/* ── Target size (2.5.8) for small text links ─────────────────────────── */
.nav-link, .btn-text { display: inline-flex; align-items: center; min-height: 24px; }
.nav-menu-mobile .nav-link { display: block; }

/* ── Reflow (1.4.10): no horizontal scrolling at 320px, also at large text ── */
@media (max-width: 900px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .footer-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .footer-brand { max-width: none; }
}
.footer-content, .footer-brand p, .link-group a { overflow-wrap: anywhere; }
.surveys-banner-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.surveys-banner-options-single { grid-template-columns: minmax(0, 560px); }
.survey-option, .survey-option * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .nav-container { gap: var(--space-2); }
  .nav-logo { min-width: 0; }
  .logo-text { min-width: 0; }
}
@media (max-width: 768px) {
  .help-grid, .featured-post { grid-template-columns: minmax(0, 1fr); }
  .featured-visual { min-width: 0; }
  .cookie-table { display: block; overflow-x: auto; min-width: 0; max-width: 100%; }
}
.projects-compact, .project-item { min-width: 0; }
.project-item { flex-wrap: wrap; }
.btn { max-width: 100%; white-space: normal; text-align: center; }
.btn { min-height: 24px; }
.blog-block-text a, .blog-post-content a, .blog-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Long words must wrap rather than force sideways scrolling */
main h1, main h2, main h3, main h4 { overflow-wrap: break-word; }
main p, main li, main a, main span, main td, main th { overflow-wrap: anywhere; }

/* The home hero was a fixed two-column grid with no mobile layout */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .hero { min-height: auto; }
  .hero-title { font-size: clamp(2rem, 9vw, 3.5rem); }
}

/* Large text acts like browser zoom: switch to the compact (mobile) layout so nothing is cut off.
   Media queries only see the viewport, so the same rules are repeated behind a class. */
html.a11y-bigtext .nav-menu, html.a11y-bigtext .nav-cta { display: none; }
html.a11y-bigtext .hamburger { display: flex; }
html.a11y-bigtext .hero .container,
html.a11y-bigtext .what-we-do-content,
html.a11y-bigtext .approach-content,
html.a11y-bigtext .help-grid,
html.a11y-bigtext .featured-post,
html.a11y-bigtext .footer-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
html.a11y-bigtext .hero { min-height: auto; }
html.a11y-bigtext .hero-title { font-size: clamp(2rem, 4vw, 3.5rem); }
html.a11y-bigtext .footer-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
html.a11y-bigtext .nav-menu-mobile { width: 100%; }
html.a11y-bigtext .iir-bubble { width: min(290px, calc(100vw - 32px)); }