/* ====================================================================
   תפריט נגישות — ת"י 5568 (WCAG 2.0 AA) · אתר משה נחמני
   ====================================================================

   ‼ **הקובץ עומד בפני עצמו.** הוא נטען בשלושת העמודים — הבית, החקירות
   והטיפולים — ששניים מהם משתמשים ב-pro.css ואחד ב-styles.css. כל תלות
   בקובץ עיצוב אחר הייתה אומרת שהתפריט נראה אחרת בכל עמוד, או נשבר באחד.

   ‼ **כל המשתנים על `html`, לא על `body`.** הגדלת טקסט שמשנה `font-size`
   של `body` לא משפיעה על ערכי `rem`, ולכן חצי מהאתר לא היה גדל.

   ‼ **"עצירת אנימציות" חייבת גם לחשוף את מה שמוסתר.** באתר הזה
   `.reveal` מתחיל ב-opacity:0 ומחכה לאנימציה. ביטול אנימציות בלי לכפות
   `opacity:1` היה מוחק חצי מהתוכן מהמסך — זה בדיוק הבאג שכבר קרה כאן
   פעם אחת עם prefers-reduced-motion, ולכן הכלל למטה מפורש.
   ==================================================================== */

:root{
  --a11y-gold: #c8a15a;
  --a11y-ink: #14110d;
  --a11y-panel: #fffdf8;
  --a11y-line: rgba(20,17,13,.14);
}

/* ---------- 1. הכפתור הצף ---------- */
.a11y-fab{
  position:fixed; inset-inline-start:1rem; bottom:1rem; z-index:9998;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--a11y-ink); color:var(--a11y-gold);
  border:1px solid var(--a11y-gold);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  cursor:pointer; padding:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.a11y-fab:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.34); }
.a11y-fab:focus-visible{ outline:3px solid var(--a11y-gold); outline-offset:3px; }
.a11y-fab svg{ width:27px; height:27px; display:block; }

/* ---------- 2. הפאנל ---------- */
.a11y-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,9,7,.46);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.a11y-overlay[data-open="true"]{ opacity:1; pointer-events:auto; }

.a11y-panel{
  width:min(340px, 100%); max-height:min(82vh, 640px); overflow-y:auto;
  background:var(--a11y-panel); color:var(--a11y-ink);
  border:1px solid var(--a11y-line); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  font-family:"Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  transform:translateY(12px); transition:transform .22s ease;
}
.a11y-overlay[data-open="true"] .a11y-panel{ transform:none; }

.a11y-head{
  display:flex; align-items:center; gap:.6rem;
  padding:.9rem 1rem; border-bottom:1px solid var(--a11y-line);
  position:sticky; top:0; background:var(--a11y-panel); border-radius:14px 14px 0 0;
}
.a11y-head h2{ font-size:1rem; font-weight:700; margin:0; flex:1; }
.a11y-x{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--a11y-line);
  background:transparent; color:inherit; font-size:1.1rem; line-height:1; cursor:pointer;
}
.a11y-x:hover{ background:rgba(20,17,13,.06); }
.a11y-x:focus-visible{ outline:3px solid var(--a11y-gold); outline-offset:2px; }

.a11y-body{ padding:.75rem; display:flex; flex-direction:column; gap:.4rem; }
.a11y-sec{ font-size:.72rem; letter-spacing:.06em; opacity:.6; margin:.5rem .25rem .1rem; }

/* כפתור-אפשרות: יעד מגע 44px, מצב "דלוק" ברור גם בלי צבע (מסגרת + וי) */
.a11y-opt{
  display:flex; align-items:center; gap:.6rem; width:100%;
  min-height:44px; padding:.55rem .7rem;
  background:transparent; border:1px solid var(--a11y-line); border-radius:10px;
  color:inherit; font:inherit; font-size:.88rem; text-align:start; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.a11y-opt:hover{ background:rgba(20,17,13,.05); }
.a11y-opt:focus-visible{ outline:3px solid var(--a11y-gold); outline-offset:2px; }
.a11y-opt[aria-pressed="true"]{ border-color:var(--a11y-ink); background:rgba(200,161,90,.16); font-weight:600; }
.a11y-opt__ico{ width:22px; text-align:center; flex:none; font-size:1rem; }
.a11y-opt__txt{ flex:1; min-width:0; }
/* ‼ הסימון אינו צבע-בלבד — נדרש כשקריאת הצבע אינה אפשרית */
.a11y-opt__on{ flex:none; font-weight:700; opacity:0; }
.a11y-opt[aria-pressed="true"] .a11y-opt__on{ opacity:1; }

.a11y-step{ display:flex; align-items:center; gap:.5rem; }
.a11y-step b{ flex:1; font-size:.88rem; font-weight:500; }
.a11y-step button{
  width:44px; height:44px; flex:none; border-radius:10px;
  border:1px solid var(--a11y-line); background:transparent; color:inherit;
  font-size:1.05rem; cursor:pointer;
}
.a11y-step button:hover{ background:rgba(20,17,13,.05); }
.a11y-step button:focus-visible{ outline:3px solid var(--a11y-gold); outline-offset:2px; }
.a11y-step output{ min-width:3.2rem; text-align:center; font-variant-numeric:tabular-nums; font-size:.85rem; }

.a11y-foot{ padding:.5rem .75rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.a11y-reset{
  min-height:44px; border-radius:10px; border:1px solid var(--a11y-ink);
  background:var(--a11y-ink); color:var(--a11y-panel); font:inherit; font-weight:600; cursor:pointer;
}
.a11y-reset:focus-visible{ outline:3px solid var(--a11y-gold); outline-offset:2px; }
.a11y-link{
  background:none; border:none; color:inherit; text-decoration:underline;
  font:inherit; font-size:.82rem; cursor:pointer; padding:.35rem; min-height:44px;
}
.a11y-link:focus-visible{ outline:3px solid var(--a11y-gold); outline-offset:2px; }

/* ההצהרה */
.a11y-state{ padding:0 1rem 1rem; font-size:.84rem; line-height:1.75; }
.a11y-state h3{ font-size:.95rem; margin:1rem 0 .35rem; }
.a11y-state ul{ margin:.3rem 0; padding-inline-start:1.1rem; }
.a11y-state a{ color:inherit; }

/* ====================================================================
   3. המצבים עצמם — כולם נתלים על <html data-a11y-*>
   ==================================================================== */

/* 3.1 גודל טקסט — על html, כדי שגם rem יגדל */
html[data-a11y-font]{ font-size:calc(100% * var(--a11y-font-scale, 1)); }

/* 3.2 ניגודיות גבוהה
   ‼ **הרקע השחור יושב על `html`, ובכוונה.** הניסיון הראשון צבע את `body`,
   והכלל האוניברסלי שמיד אחריו (`html[...] *`) דרס אותו בחזרה לשקוף — כי
   `*` בעל ספציפיות גבוהה יותר, ושניהם `!important`. `html` אינו צאצא של
   עצמו, ולכן הכלל האוניברסלי לא נוגע בו והרקע מחזיק.
   ‼ **חייבים לכבות גם background-image וגם פסאודו-אלמנטים.** הרקע של
   האתר הזה (קיר השיש) מצויר ב-`::before` של החדרים, לא על האלמנט עצמו —
   בלי השורות האלה המסך נשאר שיש בהיר עם טקסט לבן, כלומר בלתי קריא.
   נתפס בצילום מסך; בקוד זה נראה תקין לגמרי. */
html[data-a11y-contrast="high"]{ background:#000 !important; }
html[data-a11y-contrast="high"] *:not(svg):not(path):not(circle):not(img):not(video){
  background-color:transparent !important;
  background-image:none !important;
  color:#fff !important;
  border-color:#fff !important;
  text-shadow:none !important; box-shadow:none !important;
  filter:none !important;
}
html[data-a11y-contrast="high"] *::before,
html[data-a11y-contrast="high"] *::after{
  background-image:none !important; background-color:transparent !important;
  opacity:.001 !important;
}
/* קישורים בצהוב — ניגודיות גבוהה מול שחור, ונבדלים מטקסט רגיל */
html[data-a11y-contrast="high"] a,
html[data-a11y-contrast="high"] a *{ color:#ffe680 !important; }
html[data-a11y-contrast="high"] a{ text-decoration:underline !important; }
/* התמונות נשארות — הן התוכן עצמו באתר של צייר */
html[data-a11y-contrast="high"] img,
html[data-a11y-contrast="high"] video{ filter:contrast(1.12) !important; }
/* הפאנל עצמו חייב להישאר קריא גם במצב הזה */
html[data-a11y-contrast="high"] .a11y-panel,
html[data-a11y-contrast="high"] .a11y-head{ background:#000 !important; border-color:#fff !important; }
html[data-a11y-contrast="high"] .a11y-opt[aria-pressed="true"]{ border-color:#ffe680 !important; }
html[data-a11y-contrast="high"] .a11y-reset{ background:#ffe680 !important; color:#000 !important; }
html[data-a11y-contrast="high"] .a11y-reset,
html[data-a11y-contrast="high"] .a11y-reset *{ color:#000 !important; }

/* 3.3 מונוכרום */
html[data-a11y-mono="on"] body{ filter:grayscale(1); }

/* 3.4 הדגשת קישורים — קו תחתון עבה, לא צבע בלבד */
html[data-a11y-links="on"] a{
  text-decoration:underline !important; text-underline-offset:3px !important;
  text-decoration-thickness:2px !important; font-weight:600 !important;
}

/* 3.5 גופן קריא */
html[data-a11y-readable="on"] *:not(.a11y-fab):not(.a11y-fab *){
  font-family:"Heebo", Arial, system-ui, sans-serif !important;
  letter-spacing:.01em !important; font-style:normal !important;
}

/* 3.6 ריווח טקסט */
html[data-a11y-spacing="on"] p,
html[data-a11y-spacing="on"] li,
html[data-a11y-spacing="on"] figcaption{
  line-height:2 !important; letter-spacing:.06em !important; word-spacing:.14em !important;
}

/* 3.7 עצירת אנימציות.
   ‼ שלושת הכללים הולכים יחד: לבטל תנועה, *ולחשוף* את מה שמחכה לתנועה.
   בלי השורה השנייה כל אלמנט `.reveal` היה נשאר שקוף לנצח. */
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}
html[data-a11y-motion="off"] .reveal,
html[data-a11y-motion="off"] .js-ready .reveal{ opacity:1 !important; transform:none !important; }
html[data-a11y-motion="off"] video{ display:none; }

/* 3.8 סמן גדול */
html[data-a11y-cursor="on"], html[data-a11y-cursor="on"] *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l26 16-11 2 6 12-5 2-6-12-8 7z' fill='%23fff' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* 3.9 מיקוד מוגבר — תמיד פעיל, לא אופציה. ניווט מקלדת הוא דרישת תקן. */
.a11y-focus :focus-visible{ outline:3px solid var(--a11y-gold) !important; outline-offset:3px !important; }

/* דילוג לתוכן — נוסף בקוד לעמודים שאין בהם */
.a11y-skip{
  position:fixed; inset-inline-start:1rem; top:-100px; z-index:10000;
  background:var(--a11y-ink); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 8px;
  text-decoration:none; transition:top .18s ease;
}
.a11y-skip:focus{ top:0; }

@media (max-width:520px){
  .a11y-fab{ width:48px; height:48px; bottom:.75rem; inset-inline-start:.75rem; }
  .a11y-overlay{ padding:.5rem; }
  .a11y-panel{ width:100%; max-height:86vh; }
}

@media print{ .a11y-fab, .a11y-overlay{ display:none !important; } }