/* ============================================================
   a11y.css — accessibility layer (loaded LAST on every layout)
   Israeli Standard 5568 / WCAG 2.1 AA
   Additive only: does not restyle existing components except
   where required for contrast, focus visibility and motion.
   ============================================================ */

/* ---------- 1. Skip link + screen-reader-only ---------- */
.skip-link {
  position: absolute;
  top: -200px;
  right: 16px;
  z-index: 100000;
  background: var(--ak-obsidian, #191210);
  color: #ffffff;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  border: 2px solid var(--ak-gold-light, #BC9679);
  transition: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Programmatic focus target for the skip link — no ring on the region itself */
#main-content:focus { outline: none; }

/* ---------- 2. Visible keyboard focus (2.4.7) ----------
   Two-tone ring: dark outline + light halo, visible on both
   dark and light backgrounds. Only for keyboard focus
   (:focus-visible), so mouse clicks stay clean. */
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ak-obsidian, #191210) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #F7F0E8 !important;
}
/* Form fields: existing CSS sets outline:none on :focus — restore for keyboard */
html body :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--ak-obsidian, #191210) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 5px #F7F0E8 !important;
}
/* Custom radio/checkbox tiles where the native input is visually hidden */
.choice:focus-within,
.quiz-opt:focus-within,
.quiz-scale__opt:focus-within,
label.consent:focus-within,
label.remember:focus-within {
  outline: 3px solid var(--ak-obsidian, #191210);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #F7F0E8;
}
/* On dark sections the halo is what you see — make it stronger */
.section--dark :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.site-header :is(a, button):focus-visible,
.site-footer :is(a, button):focus-visible,
.mobile-menu :is(a, button):focus-visible,
.member-header :is(a, button):focus-visible,
.dashboard-body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px var(--ak-obsidian, #191210) !important;
}

/* ---------- 3. Colour contrast (1.4.3) ----------
   Only text on LIGHT backgrounds is changed. Dark sections keep
   the original palette (they already pass). */
:root {
  --ak-gold-on-light: #7A5A3C;   /* 6.0:1 on cream  — replaces #A07E61 (3.3:1) for small text */
  --ak-muted-on-light: #6E5544;  /* 6.6:1 on cream  — replaces #A89080 (2.8:1) */
}

/* 3a. Muted text token inside light containers */
.section--cream,
.section--white,
.bg-white,
.bg-cream-dark,
.page-header-simple,
.legal-doc,
.checkout-section,
.auth-form,
.founder {
  --ak-text-light: var(--ak-muted-on-light);
}

/* 3b. Eyebrow labels (12px) — the most frequent failure across the site */
.eyebrow { color: var(--ak-gold-on-light); }
.section--dark .eyebrow,
.bg-dark .eyebrow,
.site-footer .eyebrow,
.quiz-result .eyebrow,
.dashboard-body .eyebrow { color: var(--ak-gold-mid, #A07E61); }

/* 3c. Small gold text on light backgrounds (specific selectors only) */
.section--cream .prog-card__tag,
.section--cream .prog-card__cta,
.section--white .prog-card__tag,
.section--white .prog-card__cta,
.compare__hint,
.compare__note a,
.article-card__tag,
.prog-chapter__sub,
.prog-visual__quote footer,
.faq__intro a,
.contact-form__fineprint a,
.contact-faq .faq-item a,
.method-pillar__items li span,
.quiz-q__num {
  color: var(--ak-gold-on-light);
}
/* "קרא/י עוד" in the knowledge library — inline style="color:var(--ak-gold-mid)" at 13px */
.article-card__body span[style*="gold-mid"] { color: var(--ak-gold-on-light) !important; }

/* 3d. Gold CTA buttons: gradient dark end (#916D4C) vs obsidian text = 3.96:1.
   Pure black lifts the darkest point to 4.5:1 (AA). Visually indistinguishable. */
.btn--gold { color: #000000; }

/* 3e. Cookie banner buttons on dark background */
.cookie-banner .btn--ghost { color: #F7F0E8; border-color: #BC9679; }

/* 3f. Footer column headings were <h4> (skipped h3); now <h3> — reuse the h4 styling */
.site-footer h3 { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ak-gold-light); margin-bottom: 20px; letter-spacing: 0.06em; }
.site-footer li > span { color: rgba(245, 237, 224, 0.72); font-size: var(--text-sm); }

/* ---------- 4. Motion (2.2.2 / 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-animate] { opacity: 1 !important; animation: none !important; transform: none !important; }
  .hero__bg-video { display: none; }
}

/* Hero video pause/play control (2.2.2 — moving content longer than 5s must be pausable) */
.hero__video-toggle {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(25, 18, 16, 0.85);
  color: #F7F0E8;
  border: 1px solid rgba(188, 150, 121, 0.6);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.hero__video-toggle:hover { background: rgba(25, 18, 16, 1); border-color: #BC9679; }
.hero__video-toggle svg { width: 14px; height: 14px; }
.hero__video-toggle .ico-play { display: none; }
.hero__video-toggle[aria-pressed="true"] .ico-pause { display: none; }
.hero__video-toggle[aria-pressed="true"] .ico-play  { display: block; }
@media (max-width: 820px) {
  .hero__video-toggle { bottom: 16px; left: 16px; padding: 9px 12px; font-size: 13px; }
}

/* ---------- 5. Cookie consent banner (was unstyled — style.css is not loaded) ---------- */
.cookie-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 9000;
  max-width: 720px;
  margin: 0 auto;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ak-obsidian, #191210);
  color: #F7F0E8;
  border: 1px solid rgba(188, 150, 121, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-size: 14px;
}
.cookie-banner p { margin: 0; flex: 1 1 320px; }
.cookie-banner a { color: #D8BBA0; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner .btn--sm { padding: 10px 16px; font-size: 14px; }

/* ---------- 6. Accessibility widget (self-hosted, see a11y-widget.js) ---------- */
.a11y-widget-btn {
  position: fixed;
  left: 18px;
  bottom: 90px;
  z-index: 9500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ak-obsidian, #191210);
  color: #F7F0E8;
  border: 2px solid #BC9679;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.a11y-widget-btn svg { width: 28px; height: 28px; }
.a11y-widget-btn:hover { background: #241813; }

.a11y-panel {
  position: fixed;
  left: 18px;
  bottom: 150px;
  z-index: 9600;
  width: min(320px, calc(100vw - 36px));
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  background: #FBF6EF;
  color: #191210;
  border: 1px solid #A07E61;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  padding: 18px;
  font-family: 'Heebo', system-ui, sans-serif;
  font-size: 15px;
  direction: rtl;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.a11y-panel__title { font-size: 17px; font-weight: 500; margin: 0; }
.a11y-panel__close { background: none; border: 1px solid #A07E61; width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer; color: #191210; }
.a11y-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.a11y-panel__list button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: #ffffff;
  border: 1px solid #D8BBA0;
  color: #191210;
  font: inherit;
  text-align: right;
  cursor: pointer;
}
.a11y-panel__list button[aria-checked="true"],
.a11y-panel__list button[aria-pressed="true"] { background: #191210; color: #F7F0E8; border-color: #191210; }
.a11y-panel__list button .a11y-state { font-size: 12px; opacity: .8; }
.a11y-panel__foot { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.a11y-panel__foot a { color: #7A5A3C; text-decoration: underline; }
.a11y-panel__reset { background: none; border: 0; color: #7A5A3C; text-decoration: underline; font: inherit; cursor: pointer; }

/* Widget states applied on <html> */
html.a11y-font-1 body { zoom: 1.12; }
html.a11y-font-2 body { zoom: 1.25; }
html.a11y-font-3 body { zoom: 1.45; }

html.a11y-links a:not(.btn):not(.a11y-widget-btn) { text-decoration: underline !important; text-underline-offset: 3px; }

html.a11y-readable body,
html.a11y-readable body * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em; }

/* Grayscale: never put `filter` on <body> — a filter turns the element into the containing block for
   position:fixed descendants, so the widget button/panel drop to the bottom of the document and the
   user cannot switch back. Filter each top-level block instead, and leave the widget itself alone. */
html.a11y-grayscale body > *:not(.a11y-widget-btn):not(.a11y-panel):not(.skip-link) { filter: grayscale(1); }

html.a11y-contrast body,
html.a11y-contrast body *:not(img):not(video):not(svg):not(path):not(.a11y-panel):not(.a11y-panel *) {
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast body a:not(.btn) { color: #FFFF00 !important; text-decoration: underline !important; }
html.a11y-contrast body .btn,
html.a11y-contrast body button:not(.a11y-panel button):not(.a11y-widget-btn) { color: #000000 !important; background-color: #FFFF00 !important; border-color: #FFFF00 !important; }
html.a11y-contrast .gold-text { background: none !important; -webkit-text-fill-color: #ffffff; color: #ffffff !important; }

html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-no-motion [data-animate] { opacity: 1 !important; transform: none !important; }
html.a11y-no-motion .hero__bg-video { display: none !important; }

html.a11y-cursor,
html.a11y-cursor body,
html.a11y-cursor a,
html.a11y-cursor button {
  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 2l14 12h-7l4 8-3 1-4-8-4 4z' fill='%23000' stroke='%23fff' stroke-width='1.2'/></svg>") 4 2, auto !important;
}

@media print {
  .a11y-widget-btn, .a11y-panel, .skip-link, .cookie-banner, .hero__video-toggle { display: none !important; }
}