/* ============================================================
   תפריט נגישות - לורי בר
   מקור אחד לכל העמודים. אל תערוך עותק בתוך עמוד בודד.
   כל מתג כאן עושה משהו אמיתי. אין מתג לקישוט.
   ============================================================ */

/* עמוד הבית הוא היחיד בלי box-sizing גלובלי, ובלי השורה הזו
   הריפוד של הפאנל נוסף לרוחב והוא חרג מהמסך ב-320px. */
.a11y-btn,.a11y-panel,.a11y-panel *{box-sizing:border-box}

.a11y-btn{
  position:fixed; bottom:20px; right:20px; z-index:9000;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#45C1C6; color:#0A0203;
  box-shadow:0 6px 18px rgba(10,2,3,.26);
  transition:transform .2s ease, box-shadow .2s ease;
}
.a11y-btn svg{width:26px;height:26px;display:block;fill:currentColor}
.a11y-btn:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(10,2,3,.3)}
.a11y-btn:focus-visible{outline:3px solid #0A0203;outline-offset:3px}

.a11y-panel{
  direction:rtl;
  position:fixed; bottom:78px; right:20px; z-index:9001;
  width:286px; max-width:calc(100vw - 40px); max-height:calc(100vh - 110px);
  overflow-y:auto; display:none;
  background:#FFFCF8; color:#0A0203;
  border:1px solid rgba(10,2,3,.14); border-radius:14px;
  box-shadow:0 18px 44px rgba(10,2,3,.24);
  padding:16px; text-align:start;
  font-family:"Rubik","Segoe UI",system-ui,-apple-system,"Arial Hebrew",sans-serif;
  font-size:14px; line-height:1.5;
}
.a11y-panel[data-open="1"]{display:block}
.a11y-panel h2{font-size:15px;font-weight:500;margin:0 0 2px;letter-spacing:normal}
.a11y-panel .a11y-sub{font-size:12px;color:#5A4634;margin:0 0 12px}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid rgba(10,2,3,.09)}
.a11y-row:first-of-type{border-top:0}
.a11y-row span{flex:1}
.a11y-sw{
  flex:none; width:44px; height:24px; border-radius:999px; border:1px solid rgba(10,2,3,.3);
  background:#E7DED2; cursor:pointer; position:relative; padding:0;
  transition:background .18s ease, border-color .18s ease;
}
.a11y-sw::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(10,2,3,.3);transition:inset-inline-start .18s ease}
.a11y-sw[aria-pressed="true"]{background:#15803D;border-color:#15803D}
.a11y-sw[aria-pressed="true"]::after{inset-inline-start:22px}
.a11y-sw:focus-visible{outline:3px solid #15803D;outline-offset:2px}

.a11y-steps{display:flex;gap:6px;flex:none}
.a11y-steps button{
  width:34px;height:30px;border-radius:8px;border:1px solid rgba(10,2,3,.25);
  background:#fff;color:#0A0203;cursor:pointer;font:inherit;font-size:15px;line-height:1}
.a11y-steps button:hover{background:#F2EADF}
.a11y-steps button:focus-visible{outline:3px solid #15803D;outline-offset:2px}
.a11y-size-val{font-size:12px;color:#5A4634;min-width:38px;text-align:center}

.a11y-reset{
  width:100%;margin-top:12px;padding:10px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(10,2,3,.25);background:#0A0203;color:#F9F1E8;font:inherit;font-size:14px}
.a11y-reset:hover{background:#231a18}
.a11y-reset:focus-visible{outline:3px solid #15803D;outline-offset:2px}
.a11y-note{font-size:11.5px;color:#5A4634;margin:10px 0 0;line-height:1.5}

@media (max-width:620px){
  .a11y-btn{bottom:16px;right:16px}
  .a11y-panel{bottom:72px;right:16px}
}

/* ============ מה שהמתגים באמת עושים ============ */

/* ההגדלה, האפור והניגודיות חלים על תוכן העמוד בלבד.
   הם מוחלים על כל ילד ישיר של body חוץ מהתפריט עצמו, ולא על body -
   filter ו-zoom על body היו הופכים אותו למסגרת ההתייחסות של כל
   אלמנט fixed בעמוד, והתפריט והכפתור היו קופצים ממקומם. */
html[data-a11y-zoom="1"] body > *:not(.a11y-btn):not(.a11y-panel):not(.totop-btn):not(.wa){zoom:var(--a11y-zoom,1)}
html[data-a11y-gray="1"] body > *:not(.a11y-btn):not(.a11y-panel):not(.totop-btn){filter:grayscale(1)}
html[data-a11y-contrast="1"] body > *:not(.a11y-btn):not(.a11y-panel):not(.totop-btn){filter:contrast(1.4)}
html[data-a11y-gray="1"][data-a11y-contrast="1"] body > *:not(.a11y-btn):not(.a11y-panel):not(.totop-btn){
  filter:grayscale(1) contrast(1.4)}

html[data-a11y-links="1"] a{text-decoration:underline !important;text-underline-offset:3px}

html[data-a11y-font="1"] body *:not(.a11y-panel):not(.a11y-panel *){
  font-family:Arial,"Arial Hebrew","Segoe UI",sans-serif !important;
  letter-spacing:normal !important;
  font-style:normal !important;
}

html[data-a11y-focus="1"] :focus-visible{
  outline:4px solid #15803D !important; outline-offset:3px !important;
}

html[data-a11y-stop="1"] *,
html[data-a11y-stop="1"] *::before,
html[data-a11y-stop="1"] *::after{
  animation:none !important; transition:none !important;
}
html[data-a11y-stop="1"]{scroll-behavior:auto !important}


/* ============================================================
   14.11.2026 - "חזרה למעלה" + יישור עם כפתור הוואטסאפ
   לורי ביקשה: מימין שני כפתורים עגולים, משמאל הכפתור הרחב
   של וואטסאפ - וכולם על אותו קו אופקי.
   המספרים לא נוחשו: בנייד .wa הוא bottom:20px בגובה 52,
   ולכן העיגולים הם 52 ב-bottom:20px. קודם הנגישות היתה
   46 ב-bottom:16px - מרכז נמוך ב-7 פיקסלים. זו היתה הסטייה.
   בעמודי גלריה (body.has-galbar) הוואטסאפ עולה ל-80px -
   והעיגולים עולים איתו, אחרת השורה נשברת.
   ============================================================ */

.totop-btn{
  position:fixed; bottom:20px; right:78px; z-index:9000;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#45C1C6; color:#0A0203;
  box-shadow:0 6px 18px rgba(10,2,3,.26);
  transition:transform .2s ease, box-shadow .2s ease;
}
.totop-btn svg{width:24px;height:24px;display:block;fill:none;
  stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.totop-btn:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(10,2,3,.3)}
.totop-btn:focus-visible{outline:3px solid #0A0203;outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .totop-btn{transition:none} }

/* הנקודה היא 860 ולא 620, כי זו הנקודה שבה .wa עובר לתחתית.
   הבלוק הזה בא אחרי בלוק ה-620 שלמעלה וגובר עליו בכוונה. */
@media (max-width:860px){
  .a11y-btn{bottom:20px;right:16px;width:52px;height:52px}
  .totop-btn{bottom:20px;right:80px;width:52px;height:52px}
  .a11y-panel{bottom:82px;right:16px}
  body.has-galbar .a11y-btn,
  body.has-galbar .totop-btn{bottom:80px}
  body.has-galbar .a11y-panel{bottom:142px}
}