/*! a11y-widget v3.0.0 | MIT — page-level rules. Load in <head>.
 * Every feature is a class on <html> (set by a11y-head.js before paint and by the widget later):
 *   a11y-text-{125|150|175|200}   a11y-zoom-{125|150|175|200}   a11y-spacing   a11y-dyslexic
 *   a11y-theme-{dark|light|hc-yellow|hc-white|yellow}   a11y-sat-low   a11y-sat-high   a11y-mono   a11y-invert
 *   a11y-links   a11y-cursor   a11y-guide   a11y-guide-mask   a11y-lens   a11y-focus   a11y-no-motion   a11y-tts
 *   a11y-mode-{universal|tokens}  (how color themes are applied)
 */

/* ======================= 1. TEXT ======================= */

/* Text size: works on rem-based layouts. Theme with the 62.5% trick → html { --a11y-base: 62.5%; } */
html.a11y-text-125 { font-size: calc(var(--a11y-base, 100%) * 1.25) !important; }
html.a11y-text-150 { font-size: calc(var(--a11y-base, 100%) * 1.5)  !important; }
html.a11y-text-175 { font-size: calc(var(--a11y-base, 100%) * 1.75) !important; }
html.a11y-text-200 { font-size: calc(var(--a11y-base, 100%) * 2)    !important; }

/* Spacing — WCAG 1.4.12 values, line height a bit more generous */
html.a11y-spacing body *:not(a11y-widget, i, svg, svg *, [class*="icon"], [class^="fa"], [class*=" fa-"], .material-icons, .dashicons) {
  line-height: 1.8 !important;
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}
html.a11y-spacing body p { margin-bottom: 2em !important; }

/* Dyslexia-friendly font (OpenDyslexic, SIL OFL). Downloaded only when this class is on. */
@font-face { font-family: "OpenDyslexic"; src: url("fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("fonts/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
html.a11y-dyslexic body *:not(a11y-widget, i, svg, svg *, code, pre, kbd, samp, [class*="icon"], [class^="fa"], [class*=" fa-"], .material-icons, .dashicons) {
  font-family: "OpenDyslexic", Verdana, Tahoma, sans-serif !important;
}

/* ======================= 2. COLOR ======================= */

/* Palettes. In TOKENS mode your CSS consumes them:
   body { background: var(--a11y-bg, #fff); color: var(--a11y-text, #222); } a { color: var(--a11y-link, #1a5fb4); } */
html.a11y-theme-dark      { color-scheme: dark;  --a11y-bg: #121212; --a11y-surface: #1e1e1e; --a11y-text: #e8e8e8; --a11y-link: #8ab4f8; --a11y-border: #6b6b6b; --a11y-focus: #8ab4f8; --a11y-accent: #8ab4f8; --a11y-on-accent: #000; }
html.a11y-theme-light     { color-scheme: light; --a11y-bg: #fff;    --a11y-surface: #fff;    --a11y-text: #111;    --a11y-link: #0645ad; --a11y-border: #767676; --a11y-focus: #0645ad; --a11y-accent: #0645ad; --a11y-on-accent: #fff; }
html.a11y-theme-hc-yellow { color-scheme: dark;  --a11y-bg: #000;    --a11y-surface: #000;    --a11y-text: #fff000; --a11y-link: #fff;    --a11y-border: #fff000; --a11y-focus: #fff;  --a11y-accent: #fff000; --a11y-on-accent: #000; }
html.a11y-theme-hc-white  { color-scheme: dark;  --a11y-bg: #000;    --a11y-surface: #000;    --a11y-text: #fff;    --a11y-link: #fff000; --a11y-border: #fff;    --a11y-focus: #fff000; --a11y-accent: #fff000; --a11y-on-accent: #000; }
html.a11y-theme-yellow    { color-scheme: light; --a11y-bg: #ff0;    --a11y-surface: #ff0;    --a11y-text: #000;    --a11y-link: #000;    --a11y-border: #000;    --a11y-focus: #000;  --a11y-accent: #000;    --a11y-on-accent: #ff0; }

/* UNIVERSAL mode: force the palette onto any markup */
html.a11y-mode-universal[class*="a11y-theme-"],
html.a11y-mode-universal[class*="a11y-theme-"] body,
html.a11y-mode-universal[class*="a11y-theme-"] body *:not(a11y-widget, img, video, picture, canvas, iframe, svg, svg *) {
  background-color: var(--a11y-bg) !important;
  color: var(--a11y-text) !important;
  border-color: var(--a11y-border) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-mode-universal[class*="a11y-theme-"] body a,
html.a11y-mode-universal[class*="a11y-theme-"] body a * { color: var(--a11y-link) !important; }
html.a11y-mode-universal[class*="a11y-theme-"] body a { text-decoration: underline !important; }
html.a11y-mode-universal[class*="a11y-theme-"] ::placeholder { color: var(--a11y-text) !important; opacity: .75; }
html[class*="a11y-theme-"] :focus-visible { outline: 3px solid var(--a11y-focus) !important; outline-offset: 2px !important; }

/* Saturation (low / high / monochrome) + inversion.
   Filters sit on <html>: on <body> they would break every position:fixed element. */
html.a11y-sat-low  { --a11y-f-sat: saturate(.35); }
html.a11y-sat-high { --a11y-f-sat: saturate(1.9); }
html.a11y-mono     { --a11y-f-sat: grayscale(1); }
html.a11y-invert   { --a11y-f-inv: invert(1) hue-rotate(180deg); }
html.a11y-sat-low, html.a11y-sat-high, html.a11y-mono, html.a11y-invert { filter: var(--a11y-f-sat,) var(--a11y-f-inv,); }
/* Keep photos and video natural when inverted (double inversion) */
html.a11y-invert body :is(img, video, canvas, iframe, object, embed) { filter: invert(1) hue-rotate(180deg) !important; }

/* ======================= 3. NAVIGATION ======================= */

/* Zoom the whole page (layouts in px included). The widget is excluded. */
html.a11y-zoom-125 body > *:not(a11y-widget, script, style) { zoom: 1.25; }
html.a11y-zoom-150 body > *:not(a11y-widget, script, style) { zoom: 1.5; }
html.a11y-zoom-175 body > *:not(a11y-widget, script, style) { zoom: 1.75; }
html.a11y-zoom-200 body > *:not(a11y-widget, script, style) { zoom: 2; }

/* Highlight everything clickable: two-tone ring works on any background */
html.a11y-links body :is(a[href], button, [role="button"], [role="link"], [role="tab"], [role="menuitem"], input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"]), select, summary) {
  outline: 3px solid #ffd400 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #000 !important;
}
html.a11y-links body a[href] { text-decoration: underline !important; text-decoration-thickness: 2px !important; }

/* Strong focus indicator for keyboard users */
html.a11y-focus :focus-visible {
  outline: 4px solid #ffd400 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 8px #000 !important;
  border-radius: 4px;
}

/* Big cursor: black arrow, yellow over interactive elements */
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 24 24'%3E%3Cpath d='M3 2l15 11.5-6.6.9 3.9 7.3-2.8 1.5-3.9-7.4L3 20z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; }
html.a11y-cursor :is(a[href], button, [role="button"], [role="link"], label, select, summary, input:is([type="submit"], [type="button"], [type="checkbox"], [type="radio"])),
html.a11y-cursor :is(a[href], button, [role="button"], [role="link"], label, select, summary) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l15 11.5-6.6.9 3.9 7.3-2.8 1.5-3.9-7.4L3 20z' fill='%23ffd400' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, pointer !important; }

/* ======================= 4. EXTRA ======================= */

/* Stop motion. Near-zero duration (not "animation: none") so fade-in elements land in their final visible state. */
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Text-to-speech: block being read */
html.a11y-tts .a11y-tts-reading { outline: 3px dashed #ffd400 !important; outline-offset: 4px !important; background-color: rgba(255, 212, 0, .18) !important; }

@media print {
  a11y-widget { display: none !important; }
  html.a11y-sat-low, html.a11y-sat-high, html.a11y-mono, html.a11y-invert { filter: none !important; }
}