/* Nabgha accessibility layer (WCAG 2.1 AA helpers). Loaded on any page. */

/* Font scaling — root font-size drives rem-based layouts (page zoom). */
html.a11y-scale-110 { font-size: 110%; }
html.a11y-scale-125 { font-size: 125%; }
html.a11y-scale-140 { font-size: 140%; }
html.a11y-scale-160 { font-size: 160%; }

/* Dyslexia-friendly reading. OpenDyslexic if the school installs it, else a
   high-legibility fallback + generous spacing (WCAG 1.4.8 / 1.4.12). */
html.a11y-dyslexia, html.a11y-dyslexia body {
  font-family: 'OpenDyslexic', 'Tajawal', 'Tahoma', 'Segoe UI', sans-serif !important;
  letter-spacing: .03em;
  word-spacing: .12em;
  line-height: 1.8 !important;
}

/* High contrast — global boost + forced strong link/focus cues. */
html.a11y-contrast body { filter: contrast(1.18) saturate(1.12); }
html.a11y-contrast a { text-decoration: underline; }

/* Reduce motion (WCAG 2.3.3 / respects prefers-reduced-motion too). */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Always-visible keyboard focus (WCAG 2.4.7). */
:focus-visible { outline: 3px solid #2B4CC8 !important; outline-offset: 2px; border-radius: 4px; }

/* When TTS mode is on, hoverable read targets get a subtle affordance. */
html.a11y-tts [data-readable]:hover,
html.a11y-tts p:hover, html.a11y-tts li:hover, html.a11y-tts h1:hover, html.a11y-tts h2:hover, html.a11y-tts h3:hover {
  background: rgba(43,76,200,.08);
  cursor: pointer;
}

/* Widget UI */
#a11y-fab {
  position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 9998;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #2B4CC8, #7A2FB0); color: #fff; font-size: 24px;
  box-shadow: 0 10px 24px -8px rgba(11,21,51,.5);
}
#a11y-fab:focus-visible { outline: 3px solid #F5A623 !important; }
#a11y-panel {
  position: fixed; inset-inline-end: 16px; bottom: 78px; z-index: 9999;
  width: 268px; max-width: calc(100vw - 32px);
  background: #fff; color: #0B1533; border-radius: 16px; padding: 14px;
  box-shadow: 0 30px 60px -24px rgba(11,21,51,.5); border: 1px solid #e6e9f2;
  font-family: 'Tajawal', system-ui, sans-serif; display: none;
}
#a11y-panel.open { display: block; }
#a11y-panel h3 { margin: 0 0 10px; font-size: 15px; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #eef1f8; }
.a11y-row:last-child { border-bottom: none; }
.a11y-row span { font-size: 13.5px; font-weight: 600; }
.a11y-btns { display: flex; gap: 6px; }
.a11y-btn {
  border: 1px solid #e6e9f2; background: #f6f8fe; color: #0B1533; border-radius: 9px;
  min-width: 34px; height: 32px; padding: 0 10px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.a11y-btn[aria-pressed="true"] { background: linear-gradient(135deg, #2B4CC8, #7A2FB0); color: #fff; border-color: transparent; }
@media print { #a11y-fab, #a11y-panel { display: none !important; } }