/* ═══════════════════════════════════════════════════════════════
   נץ — Regulation 35 Accessibility Widget
   Per IS 5568 + Takanot Negishut LeSherut 2013.
   Toggles CSS classes on <html>. No DOM mutation = no overlay anti-pattern.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Floating trigger button ───
   מפרט 2.2, 6.4 (נטע 14/10/2026), ערכים מ-netz-fab-reference.html: פינה שמאלית
   (inline-end ב-RTL), עיגול לבן 40px, אזור לחיצה 44 דרך ::after. bottom 32 = 24 + (56−40)/2 —
   מרכז העיגול בגובה מרכז הוואטסאפ. שכבה 90 (היה 9998). */
#a11y-widget-trigger {
  position: fixed;
  bottom: 32px;
  inset-inline-end: 24px;
  width: 40px;
  height: 40px;
  min-height: auto;         /* shared.css נותן לכל button ‏min-height 44 מתחת ל-768 — העיגול נמתח ל-40×44.
                               אזור הלחיצה 44 מגיע מ-::after */
  border-radius: 999px;
  background: #FFFFFF;
  color: #0F2E63;
  border: 1px solid #E4E9F2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 46, 99, .06);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, border-color 150ms ease;
  padding: 0;
  font-family: 'Assistant', -apple-system, sans-serif;
}
#a11y-widget-trigger::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
}
#a11y-widget-trigger:hover {
  background: #F5F7FB;
  border-color: #0F2E63;
}
#a11y-widget-trigger:focus-visible {
  outline: 2px solid #0F2E63;
  outline-offset: 2px;
}
/* shared.css מגדיר `body:not(.using-mouse) :focus { outline: 3px כתום !important }` — אוכפים את ערכי
   המפרט בעמודים שטוענים אותו, כמו בהדר (header.css 2.9) */
html body #a11y-widget-trigger:focus-visible { outline: 2px solid #0F2E63 !important; outline-offset: 2px !important; }
html body #a11y-widget-trigger:focus:not(:focus-visible) { outline: none !important; }
/* 2.3: הכפתור צף, והרקע מתחתיו משתנה (תוכן בהיר, הפוטר הנייבי, עמוד התשלום הכחול) — טבעת כפולה שנראית על כל רקע.
   בכפתור הלבן הזה הסדר הפוך מוואטסאפ (נטע, 20/10/2026): לבן צמוד לכפתור לבן נבלע בו. לכן טבעת נייבי של 2px
   צמודה לכפתור (box-shadow) ו-outline לבן אחריה. על בהיר רואים את הנייבי, על כהה את הלבן. הצל הרגיל נשאר אחרי הטבעת */
html body #a11y-widget-trigger:focus-visible { outline-color: var(--nz-white, #FFFFFF) !important; box-shadow: 0 0 0 2px var(--nz-navy, #0F2E63), 0 1px 2px rgba(15, 46, 99, .06); }
#a11y-widget-trigger svg { width: 22px; height: 22px; }

/* מתחת ל-1024px הסרגל התחתון (64px) מוצג — העיגול יושב מעליו, בצד שמאל.
   (כלל ה-768 הישן — 152px, 48px — הוסר: הכלל הזה מחליף אותו) */
@media (max-width: 1023.98px) {
  #a11y-widget-trigger {
    bottom: 78px;
    inset-inline-end: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #a11y-widget-trigger { transition-duration: .01ms; }
}

/* ─── Panel ─── */
#a11y-widget-panel {
  position: fixed;
  inset: 0;
  background: rgba(15, 31, 61, .55);
  z-index: 1000;            /* מודאל — מפרט 2.2, 0.4 (היה 9999) */
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  font-family: 'Assistant', -apple-system, sans-serif;
}
#a11y-widget-panel.open { display: flex; }

.a11y-panel-card {
  background: #fff;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 22px 28px;
  direction: rtl;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  animation: a11ySlide .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes a11ySlide {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 769px) {
  #a11y-widget-panel { align-items: center; }
  .a11y-panel-card { border-radius: var(--radius-lg, 12px); max-height: 80vh; }
  @keyframes a11ySlide {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: none; }
  }
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}
.a11y-panel-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.a11y-panel-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #5A6472;
  padding: 6px;
  border-radius: var(--radius, 8px);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.a11y-panel-close:hover { color: #ef4444; background: #fef2f2; }
.a11y-panel-close:focus-visible { outline: var(--nz-focus-width, 2px) solid var(--nz-focus-color, #0F2E63); outline-offset: var(--nz-focus-offset, 2px); } /* חוק 11 (היה 3px) */

.a11y-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .a11y-toggle-grid { grid-template-columns: 1fr; }
}

.a11y-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.92rem;
  transition: all .2s ease;
  min-height: 56px;
}
.a11y-toggle:hover {
  border-color: #1A57C2;
  background: #DCE7FA;
}
.a11y-toggle:focus-visible {
  outline: var(--nz-focus-width, 2px) solid var(--nz-focus-color, #0F2E63); /* חוק 11 (היה 3px) */
  outline-offset: var(--nz-focus-offset, 2px);
  border-radius: var(--radius, 8px); /* 2.3: הצורה לא משתנה בפוקוס. כלל הפוקוס הכללי החזיר 6px */
}
.a11y-toggle[aria-pressed="true"] {
  background: linear-gradient(135deg, #DCE7FA, #dceefb);
  border-color: #0F2E63;
}
.a11y-toggle[aria-pressed="true"]::after {
  content: '✓';
  margin-inline-start: auto;
  background: #0F2E63;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.a11y-toggle-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: #0F2E63;
}
.a11y-toggle-label { line-height: 1.2; }
.a11y-toggle-value {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5A6472;
  margin-top: 2px;
}

.a11y-panel-footer {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.a11y-panel-reset {
  flex: 1;
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #b91c1c;
  padding: 10px 16px;
  border-radius: var(--nz-radius-btn, 999px);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
}
.a11y-panel-reset:hover { background: #fee2e2; }
.a11y-statement-link {
  flex: 1;
  background: #DCE7FA;
  border: 1.5px solid #c4dffb;
  color: #0F2E63;
  padding: 10px 16px;
  border-radius: var(--nz-radius-btn, 999px);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.a11y-keyboard-hint {
  font-size: 0.78rem;
  color: #5A6472;
  text-align: center;
  margin-top: 8px;
}
.a11y-keyboard-hint kbd {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm, 6px);
  padding: 1px 6px;
  font-family: monospace;
  font-size: 0.85em;
}

/* ════════════════════════════════════════════════════════
   CSS toggles applied to <html> when preferences are set.
   These are the actual accessibility effects. NO DOM CHANGES.
   ════════════════════════════════════════════════════════ */

/* Highlight links */
html.a11y-links a,
html.a11y-links button,
html.a11y-links [role="button"] {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px dashed currentColor !important;
  outline-offset: 2px !important;
}

/* High contrast */
html.a11y-contrast-high {
  filter: contrast(1.4);
}
html.a11y-contrast-high body { background: #000 !important; color: #fff !important; }
html.a11y-contrast-high a { color: #ffe000 !important; }

/* Invert colors */
html.a11y-contrast-invert {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}
/* Don't invert images/videos/iframes/google maps */
html.a11y-contrast-invert img,
html.a11y-contrast-invert video,
html.a11y-contrast-invert iframe,
html.a11y-contrast-invert svg image {
  filter: invert(1) hue-rotate(180deg);
}

/* Monochrome (grayscale) */
html.a11y-contrast-mono {
  filter: grayscale(1) contrast(1.1);
}

/* Counter-invert/unfilter the widget itself so user can still read it
   to turn the setting off. Critical UX safety. */
html.a11y-contrast-invert #a11y-widget-panel,
html.a11y-contrast-invert #a11y-widget-trigger,
html.a11y-contrast-mono #a11y-widget-panel,
html.a11y-contrast-mono #a11y-widget-trigger,
html.a11y-contrast-high #a11y-widget-panel,
html.a11y-contrast-high #a11y-widget-trigger {
  filter: invert(1) hue-rotate(180deg);
}

/* Text size */
html.a11y-text-115 body { font-size: 115% !important; }
html.a11y-text-130 body { font-size: 130% !important; }
html.a11y-text-150 body { font-size: 150% !important; }

/* Line spacing */
html.a11y-lines-16 p,
html.a11y-lines-16 li,
html.a11y-lines-16 div { line-height: 1.6 !important; }
html.a11y-lines-20 p,
html.a11y-lines-20 li,
html.a11y-lines-20 div { line-height: 2 !important; }

/* Readable font — OS stack only, no webfont injection */
html.a11y-readable-font,
html.a11y-readable-font body,
html.a11y-readable-font input,
html.a11y-readable-font button,
html.a11y-readable-font textarea {
  font-family: -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0.02em !important;
}

/* Highlight headings */
html.a11y-headings h1,
html.a11y-headings h2,
html.a11y-headings h3,
html.a11y-headings h4,
html.a11y-headings h5,
html.a11y-headings h6 {
  background: #FFE000 !important;
  color: #000 !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm, 6px) !important;
  border-inline-start: 4px solid #FF8334 !important;
}

/* Black cursor */
html.a11y-cursor-black,
html.a11y-cursor-black * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M2 2 L22 12 L13 14 L11 22 Z' fill='black' stroke='white' stroke-width='1.5'/></svg>") 2 2, auto !important;
}

/* Large cursor */
html.a11y-cursor-large,
html.a11y-cursor-large * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M4 4 L44 24 L26 28 L22 44 Z' fill='black' stroke='white' stroke-width='2'/></svg>") 4 4, auto !important;
}

/* Stop animations (no motion) */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Print rule — reset everything for paper */
@media print {
  html[class*="a11y-"] { filter: none !important; }
  html[class*="a11y-text-"] body { font-size: 100% !important; }
  html[class*="a11y-lines-"] * { line-height: normal !important; }
  #a11y-widget-trigger, #a11y-widget-panel { display: none !important; }
}

/* Live region (sr-only announcement) */
.a11y-sr-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 2.3: הכפתור נשאר עגול גם בפוקוס. כלל הפוקוס הכללי (a/button:focus-visible) מחזיר 6px */
.a11y-panel-reset:focus-visible,
.a11y-statement-link:focus-visible { border-radius: var(--nz-radius-btn, 999px); }
/* 2.3, חוק 11: טבעת 2px נייבי, מרחק 2px. html body + !important: shared.css כופה `body:not(.using-mouse) *:focus { outline: 3px כתום !important }` */
html body .a11y-panel-reset:focus-visible,
html body .a11y-statement-link:focus-visible { outline: var(--nz-focus-width) solid var(--nz-focus-color) !important; outline-offset: var(--nz-focus-offset) !important; }