/* ============================================================
   ACCESSIBILITY — skip link, focus rings, sr-only, the floating
   accessibility widget, and the toggleable user preferences
   (font size, contrast, link highlight, reduced motion).
   Loaded last so its body[data-a11y-*] rules win.
   ============================================================ */

/* ─── Screen-reader-only (visually hidden, still announced) ─── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ─── Skip-to-content link ─── */
.skip-link {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  z-index: 2000;
  background: var(--yellow); color: var(--black);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 24px; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; }

/* ─── Visible keyboard focus everywhere ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   ACCESSIBILITY WIDGET
   ============================================================ */
/* ── Position rules ──────────────────────────────────────────────
   Both launchers live permanently in the bottom corners — a recognised,
   predictable pattern that never jumps on scroll or by language:
     • Accessibility  → bottom-LEFT
     • WhatsApp       → bottom-RIGHT
   Mobile shrinks them and honours the safe-area insets; the accessibility
   panel opens upward from its button.
   ----------------------------------------------------------------- */
.a11y-fab, .wa-fab {
  position: fixed;
  bottom: 24px; top: auto; transform: none;
  z-index: 1500;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.2s, box-shadow 0.2s, opacity 0.2s;
}

/* Accessibility → bottom-left */
.a11y-fab {
  left: 24px; right: auto;
  background: var(--yellow); color: var(--black);
  font-size: 1.7rem; line-height: 1;
}
.a11y-fab:hover { background: #fff; box-shadow: 0 8px 28px rgba(245,200,0,0.55); transform: translateY(-3px); }

/* WhatsApp → bottom-right */
.wa-fab {
  right: 24px; left: auto;
  background: #25D366; color: #fff; text-decoration: none;
}
.wa-fab svg { width: 30px; height: 30px; display: block; }
.wa-fab:hover { background: #1ebe5d; box-shadow: 0 8px 28px rgba(37,211,102,0.55); transform: translateY(-3px); }

/* Accessibility panel — opens upward from the bottom-left button */
.a11y-panel {
  position: fixed;
  bottom: 92px; top: auto; transform: none;
  left: 24px; right: auto;
  z-index: 1500;
  width: 300px; max-width: calc(100vw - 48px);
  background: var(--dark); color: var(--white);
  border: 1px solid rgba(245,200,0,0.3);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  padding: 20px; max-height: 70vh; overflow-y: auto;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 {
  font-family: 'Barlow', sans-serif; font-size: 1.2rem; color: var(--yellow);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
html[lang="he"] .a11y-panel h2,
html[lang="he"] .a11y-btn { font-family: 'Heebo', sans-serif; }

.a11y-group { display: flex; flex-direction: column; gap: 8px; }
.a11y-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.04em;
  text-align: start;
  background: var(--dark2); color: var(--white);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
  padding: 11px 14px; cursor: pointer; transition: all 0.15s;
}
.a11y-btn:hover { border-color: var(--yellow); }
.a11y-btn[aria-pressed="true"] { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.a11y-btn .a11y-ico { font-size: 1.2rem; flex-shrink: 0; }

.a11y-reset {
  margin-top: 14px; width: 100%;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem;
  background: transparent; color: var(--grey);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
  padding: 10px; cursor: pointer; transition: all 0.15s;
}
.a11y-reset:hover { color: var(--white); border-color: var(--white); }

/* ============================================================
   USER PREFERENCE EFFECTS (toggled via body attributes)
   ============================================================ */

/* Font scaling — scales rem-based + key fixed sizes */
body[data-a11y-font="large"]  { font-size: 112.5%; }
body[data-a11y-font="larger"] { font-size: 125%; }
body[data-a11y-font="large"]  .hero-sub,
body[data-a11y-font="larger"] .hero-sub,
body[data-a11y-font="large"]  .program-desc,
body[data-a11y-font="larger"] .program-desc,
body[data-a11y-font="large"]  .schedule-table td,
body[data-a11y-font="larger"] .schedule-table td,
body[data-a11y-font="large"]  .feature-text,
body[data-a11y-font="larger"] .feature-text { font-size: 1.05rem; }

/* High contrast */
body[data-a11y-contrast="on"] {
  --black: #000; --dark: #000; --dark2: #000; --dark3: #000;
  --white: #fff; --grey: #ddd; --yellow: #ffe600;
}
body[data-a11y-contrast="on"] .program-desc,
body[data-a11y-contrast="on"] .feature-text,
body[data-a11y-contrast="on"] .footer-brand p,
body[data-a11y-contrast="on"] .schedule-table td { color: #fff; }
body[data-a11y-contrast="on"] body::before,
body[data-a11y-contrast="on"] .hero::after,
body[data-a11y-contrast="on"] .hero-glow { display: none; }
body[data-a11y-contrast="on"] .program-card,
body[data-a11y-contrast="on"] .feature-item { border: 1px solid #fff; }

/* Highlight links — make every link unmistakable */
body[data-a11y-links="on"] a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 1px dashed currentColor; outline-offset: 2px;
}

/* Reduced motion — stop marquee, spin, pulse, fade transitions */
body[data-a11y-motion="off"] * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body[data-a11y-motion="off"] .fade-in { opacity: 1 !important; transform: none !important; }

/* Respect the OS-level reduced-motion preference by default */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Mobile (≤760px) ───────────────────────────────────────────────
   Same bottom corners, slightly smaller, honouring the safe-area insets.
   While the mobile nav drawer is open both launchers fade out so they
   never sit over the menu (.menu-open is toggled from JS). ------------ */
@media (max-width: 760px) {
  .a11y-fab, .wa-fab {
    width: 52px; height: 52px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .a11y-fab { left: max(16px, env(safe-area-inset-left)); font-size: 1.5rem; }
  .wa-fab   { right: max(16px, env(safe-area-inset-right)); }
  .wa-fab svg { width: 27px; height: 27px; }

  .a11y-fab.menu-open, .wa-fab.menu-open {
    opacity: 0; pointer-events: none; transform: scale(0.85);
  }

  .a11y-panel {
    left: max(16px, env(safe-area-inset-left)); right: auto;
    bottom: 84px;
    width: calc(100vw - 32px); max-width: 320px;
  }
}