/* ============================================================================
 *  nahash.co.il  |  public/css/a11y.css
 *  ♿ תפריט הנגישות + העדפות התצוגה של הגולש.
 *
 *  התחילית `a11y-` בלבד — אפס דריסה של מחלקות קיימות.
 *  ההעדפות מוחלות כ-data-attributes על <html> (ראה js/a11y.js → applyPrefs).
 *
 *  ⚠️ זהו כלי עזר ויזואלי. ההנגשה האמיתית (מבנה, מקלדת, ARIA, קונטרסט)
 *     נמצאת ב-styles.css / design-2026.css וברכיבי views.js.
 * ========================================================================== */

/* ------------------------------ כפתור צף ------------------------------ */

.a11y-fab {
  position: fixed;
  z-index: 97;
  inset-inline-start: 1rem;
  inset-block-end: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  min-height: 48px;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 20px -6px rgba(11, 15, 12, 0.35);
  transition: transform 0.15s var(--ease, ease), background 0.2s, color 0.2s;
}
.a11y-fab:hover { transform: translateY(-2px); }
.a11y-fab:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.a11y-fab.is-active {
  background: var(--brand);
  color: var(--on-primary, #fff);
}
.a11y-fab__ico {
  width: 1.4em; height: 1.4em;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.a11y-fab__txt { line-height: 1; }

/* כשסרגל החיוג התחתון פעיל — הכפתור יושב מעליו ולא מסתיר אותו */
body.has-callbar .a11y-fab {
  inset-block-end: calc(var(--callbar-h, 132px) + 1rem);
}

/*
 * כשהתפריט פתוח — הכפתור הצף מוסתר (הוא יושב באותו מקום בדיוק).
 * הפוקוס חוזר אליו בסגירה *אחרי* הסרת ה-attribute, ולכן הוא שוב נגיש.
 */
html[data-a11y-panel-open="1"] .a11y-fab { visibility: hidden; }

@media (max-width: 520px) {
  .a11y-fab { padding: 0.6rem; }
  .a11y-fab__txt { display: none; }
}

/* ------------------------------ הפאנל ------------------------------ */

.a11y-panel {
  position: fixed;
  z-index: 98;
  inset-inline-start: 1rem;
  inset-block-end: 1.25rem;
  width: min(370px, calc(100vw - 2rem));
  max-height: min(80vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--modal-bg, #fff);
  color: var(--text, #0b0f0c);
  border: 1px solid var(--line, #e3e7e0);
  border-radius: var(--r-lg, 20px);
  box-shadow: 0 24px 60px -18px rgba(11, 15, 12, 0.45);
  padding: 1rem;
}
body.has-callbar .a11y-panel {
  inset-block-end: calc(var(--callbar-h, 132px) + 1rem);
}

/*
 * 📱 מובייל וטאבלט — עד 1080px, הרוחב שבו תפריט ההמבורגר קיים:
 * הכפתור והפאנל עוברים לצד שמאל. ב-RTL טקסט פריטי התפריט הנפתח מיושר
 * לימין, ולכן כפתור בצד ימין ישב בדיוק על הפריטים התחתונים ("בלוג",
 * "בטיחות", "שאלות") והסתיר אותם. הפאנל נשאר באותו צד של הכפתור.
 * ⚠️ חייב להופיע **אחרי** כללי המיקום שמעל, כי ל-media query אין ספציפיות.
 */
@media (max-width: 1080px) {
  .a11y-fab,
  .a11y-panel {
    inset-inline-start: auto;
    inset-inline-end: 1rem;
  }
}

.a11y-panel[hidden] { display: none; }
.a11y-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.a11y-panel__title { font-size: 1.1rem; margin: 0; }
.a11y-panel__close {
  width: 40px; height: 40px;
  min-width: 40px;
  border: 1px solid var(--line, #e3e7e0);
  border-radius: 10px;
  background: var(--surface-2, #f4f5f1);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.a11y-panel__close:hover { border-color: var(--brand); color: var(--brand); }
.a11y-panel__close:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.a11y-group { margin-bottom: 1rem; }
.a11y-group__title {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-dim, #4a564d);
  margin: 0 0 0.5rem;
}
.a11y-font {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.a11y-font .btn { min-width: 56px; }
.a11y-font__value {
  min-width: 62px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.a11y-opts { display: grid; gap: 0.4rem; }
.a11y-opt {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label state" "hint state";
  gap: 0 0.6rem;
  text-align: start;
  width: 100%;
  padding: 0.6rem 0.7rem;
  min-height: 48px;
  border: 1px solid var(--line, #e3e7e0);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.a11y-opt:hover { border-color: var(--brand); }
.a11y-opt:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.a11y-opt.is-on {
  border-color: var(--brand);
  background: var(--brand-soft, #e8f1ea);
}
.a11y-opt__label { grid-area: label; font-weight: 600; font-size: 0.95rem; }
.a11y-opt__hint { grid-area: hint; font-size: 0.78rem; color: var(--text-dim, #4a564d); }
.a11y-opt__state {
  grid-area: state;
  align-self: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-mute, #66706a);
  white-space: nowrap;
}
.a11y-opt.is-on .a11y-opt__state { color: var(--brand); }
.a11y-note {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-dim, #4a564d);
  margin: 0.6rem 0 0;
}

/* ✍️ קישורי "תקשורת בכתב" בתוך התפריט — כפתורים ברוחב מלא, כמו שאר השורות */
.a11y-group .a11y-opts .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: start;
}
.a11y-note.small { font-size: 0.72rem; }
.a11y-note b { color: var(--text); }

/* ------------------------------ העדפות הגולש ------------------------------ */

/*
 *  ניגודיות גבוהה — מחליף את ה-tokens של הנושא כדי להשיג יחס של 21:1.
 *  הכתיבה על <html> נדרשת כדי לגבור על `:root` ב-styles.css.
 */
html[data-a11y-contrast="1"] {
  color-scheme: dark;

  --ink: #000000;
  --ink-2: #000000;
  --ink-3: #0d0d0d;
  --surface: #000000;
  --surface-2: #0d0d0d;
  --card-bg: #000000;
  --field-bg: #000000;
  --modal-bg: #000000;
  --row-hover: #1a1a00;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-2: rgba(255, 255, 255, 0.16);
  --nav-bg: #000000;
  --footer-bg: #000000;
  --track-bg: #333300;
  --overlay: rgba(0, 0, 0, 0.85);

  --line: #ffff00;
  --line-soft: #b3b300;
  --line-2: #ffff00;

  --text: #ffff00;
  --text-dim: #ffffb3;
  --text-mute: #ffe066;

  --brand: #ffff00;
  --brand-2: #ffd400;
  --brand-soft: #333300;
  --neon: #ffff00;
  --gold: #ffff00;
  --olive: #ffff00;
  --on-primary: #000000;
  --venom: #ffff00;
  --danger: #ff6b6b;
  --warn: #ffb000;
  --info: #7fd4ff;
}

html[data-a11y-contrast="1"] body {
  background: #000000;
  color: #ffff00;
}
html[data-a11y-contrast="1"] a,
html[data-a11y-contrast="1"] a:visited {
  color: #ffff00;
  text-decoration: underline;
}
html[data-a11y-contrast="1"] .btn,
html[data-a11y-contrast="1"] .chip,
html[data-a11y-contrast="1"] input,
html[data-a11y-contrast="1"] select,
html[data-a11y-contrast="1"] textarea {
  border: 2px solid #ffff00 !important;
  background: #000000;
  color: #ffff00;
}
html[data-a11y-contrast="1"] .btn--primary,
html[data-a11y-contrast="1"] .btn--call,
html[data-a11y-contrast="1"] .btn--wa {
  background: #ffff00;
  color: #000000;
  font-weight: 800;
}
html[data-a11y-contrast="1"] .card,
html[data-a11y-contrast="1"] .glass,
html[data-a11y-contrast="1"] .article__body,
html[data-a11y-contrast="1"] .a11y-panel {
  border: 2px solid #ffff00 !important;
}

/* גווני אפור — מסייע להפרעות קשב, רגישות צבע ועומס חזותי */
html[data-a11y-gray="1"] { filter: grayscale(1); }

/* הדגשת קישורים */
html[data-a11y-links="1"] a[href],
html[data-a11y-links="1"] [role="link"] {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 2px solid currentColor;
  outline-offset: 1px;
  border-radius: 3px;
}

/* עצירת אנימציות ומעברים — לפי בקשת הגולש */
html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ריווח טקסט — דרישת WCAG 1.4.12 (Text Spacing) */
html[data-a11y-spacing="1"] :is(
  p, li, div, span, a, td, th, h1, h2, h3, h4, h5, h6,
  label, strong, em, small, button, input, textarea, select
) {
  line-height: 1.8 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html[data-a11y-spacing="1"] :is(p, li) { margin-block-end: 1.6em !important; }

/* ------------------------------ התאמות מערכת ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .a11y-fab,
  .a11y-panel,
  .a11y-opt { transition: none !important; }
  .a11y-fab:hover { transform: none; }
}

/* מעדיף ניגודיות גבוהה ברמת מערכת ההפעלה */
@media (prefers-contrast: more) {
  .a11y-fab,
  .a11y-opt,
  .a11y-panel,
  .a11y-panel__close { border-width: 2px; }
  .a11y-opt__hint,
  .a11y-note,
  .a11y-group__title { color: var(--text, #0b0f0c); }
  .a11y-fab { box-shadow: none; }
}

/* מצב ניגודיות כפוי (Windows High Contrast) */
@media (forced-colors: active) {
  .a11y-fab,
  .a11y-panel,
  .a11y-opt,
  .a11y-panel__close { border: 1px solid CanvasText; }
  .a11y-opt.is-on { outline: 2px solid Highlight; outline-offset: -2px; }
  .a11y-fab.is-active { border-width: 2px; }
}

/* בהדפסה אין תפריט נגישות */
@media print {
  .a11y-host { display: none !important; }
}