/* ===================================================================
   Accessibility widget — page-level adjustments.
   Each rule hangs off an html.a11y-<feature>-<level> class set by
   /assets/js/a11y.js (and re-applied before first paint in head.ejs).
   The menu itself lives in a shadow root, so none of this restyles it.
   =================================================================== */

/* ---------- contrast (level 1 = invert, done with a backdrop filter in JS) ---------- */
html.a11y-contrast-2 body,
html.a11y-contrast-2 body * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast-2 body a,
html.a11y-contrast-2 body a * { color: #FFE14D !important; }
html.a11y-contrast-2 body :is(h1, h2, h3, h4, h5, h6),
html.a11y-contrast-2 body :is(h1, h2, h3, h4, h5, h6) * { color: #7FE3FF !important; }
html.a11y-contrast-2 body :is(button, .btn, input, select, textarea) { border: 2px solid #fff !important; }

html.a11y-contrast-3 body,
html.a11y-contrast-3 body * {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast-3 body a,
html.a11y-contrast-3 body a * { color: #0B3D91 !important; }
html.a11y-contrast-3 body a { text-decoration: underline !important; }
html.a11y-contrast-3 body :is(button, .btn, input, select, textarea) { border: 2px solid #000 !important; }
/* photo scrims would turn solid white over hidden-behind images: drop them */
html.a11y-contrast-3 body :is(.hero__scrim, .page-hero__scrim) { display: none !important; }

/* ---------- highlight links ---------- */
html.a11y-links-1 body :is(a, button, [role="link"], [role="button"]) {
  outline: 3px solid #173A52 !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
html.a11y-links-1 body a,
html.a11y-links-1 body a * {
  background-color: #FFF176 !important;
  color: #000 !important;
}

/* ---------- text spacing ---------- */
html.a11y-spacing-1 body * { letter-spacing: .06em !important; word-spacing: .12em !important; }
html.a11y-spacing-2 body * { letter-spacing: .12em !important; word-spacing: .24em !important; }
html.a11y-spacing-3 body * { letter-spacing: .18em !important; word-spacing: .36em !important; }

/* ---------- line height ---------- */
html.a11y-lineheight-1 body * { line-height: 2 !important; }
html.a11y-lineheight-2 body * { line-height: 2.5 !important; }
html.a11y-lineheight-3 body * { line-height: 3 !important; }

/* ---------- text align ---------- */
html.a11y-align-1 body * { text-align: left !important; }
html.a11y-align-2 body * { text-align: right !important; }
html.a11y-align-3 body * { text-align: center !important; }
html.a11y-align-4 body :is(p, li, dd, blockquote, td) { text-align: justify !important; }

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

/* ---------- hide images (layout kept so pages don't jump) ---------- */
html.a11y-images-1 body :is(img, picture, video, svg[role="img"]) { visibility: hidden !important; }

/* ---------- dyslexia friendly / legible fonts (fonts loaded on demand by JS) ---------- */
html.a11y-dyslexia-1 body :not(svg, svg *) {
  font-family: 'Lexend', 'Noto Sans Arabic', Arial, sans-serif !important;
  letter-spacing: .03em;
  word-spacing: .08em;
}
html.a11y-dyslexia-2 body :not(svg, svg *) {
  font-family: 'Atkinson Hyperlegible', 'Noto Sans Arabic', Arial, sans-serif !important;
}

/* ---------- big cursor ---------- */
html.a11y-cursor-1,
html.a11y-cursor-1 body * {
  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 3v36l9-9 6 14 7-3-6-14h13z' fill='black' stroke='white' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor-1 body :is(a, button, label, select, summary, [role="button"], [role="link"], [role="switch"], [tabindex]:not([tabindex="-1"])),
html.a11y-cursor-1 body :is(a, button, label, summary, [role="button"], [role="link"]) * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg stroke='white' stroke-width='4' stroke-linejoin='round'%3E%3Crect x='15' y='2' width='9' height='26' rx='4.5'/%3E%3Crect x='10' y='20' width='28' height='25' rx='8'/%3E%3Crect x='4' y='24' width='12' height='12' rx='6'/%3E%3C/g%3E%3Cg fill='black'%3E%3Crect x='15' y='2' width='9' height='26' rx='4.5'/%3E%3Crect x='10' y='20' width='28' height='25' rx='8'/%3E%3Crect x='4' y='24' width='12' height='12' rx='6'/%3E%3C/g%3E%3C/svg%3E") 19 2, pointer !important;
}