/* ===== נגישות — שורשים וזיכרון =====
   שני חלקים: עיצוב תפריט הנגישות עצמו, והמצבים שהוא מפעיל על הדף. */

/* ---------- דילוג לתוכן ---------- */
.a11y-skip {
    position: fixed; top: -100px; inset-inline-start: 12px; z-index: 2147483647;
    background: #241b0d; color: #fff; font-weight: 700; font-size: .95rem;
    padding: .7rem 1.3rem; border-radius: 0 0 12px 12px; text-decoration: none;
    transition: top .18s ease-out;
}
.a11y-skip:focus { top: 0; outline: 3px solid #e3c377; outline-offset: 2px; }

/* ---------- הכפתור הצף ---------- */
.a11y { position: fixed; bottom: 100px; inset-inline-start: 24px; z-index: 2147483000; }
.a11y__btn {
    width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
    border: 2px solid #fff; background: #1a56c4; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 5px 18px rgba(16,40,96,.4);
    transition: scale .12s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.a11y__btn:active { scale: .93; transition-duration: .09s; }
@media (hover: hover) and (pointer: fine) {
    .a11y__btn:hover { box-shadow: 0 8px 26px rgba(16,40,96,.52); }
}
.a11y__btn:focus-visible { outline: 3px solid #e3c377; outline-offset: 3px; }

/* ---------- הפאנל ---------- */
.a11y__panel {
    position: absolute; bottom: 66px; inset-inline-start: 0;
    width: min(310px, calc(100vw - 48px));
    background: #fff; color: #241b0d; border: 1px solid #e7d7b4;
    border-radius: 18px; padding: 14px; text-align: start;
    box-shadow: 0 16px 42px rgba(40,28,10,.26);
    font-family: 'Assistant', system-ui, sans-serif;
}
.a11y__panel[hidden] { display: none; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.a11y__head strong { font-size: 1.05rem; }
.a11y__x {
    width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
    background: #f4ecdb; color: #53411e; font-size: 1.3rem; line-height: 1;
}
.a11y__x:focus-visible { outline: 2px solid #c69a3c; outline-offset: 2px; }

.a11y__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.a11y__grid button {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 9px 10px; border-radius: 11px; text-align: start;
    border: 1.5px solid #e7d7b4; background: #fff; color: #3a2d15;
    font-family: inherit; font-size: .78rem; font-weight: 600; line-height: 1.3;
    transition: scale .12s cubic-bezier(.22,1,.36,1), background-color .18s ease, border-color .18s ease;
}
.a11y__grid button:active { scale: .96; transition-duration: .09s; }
.a11y__grid button[aria-pressed="true"] { background: #1a56c4; border-color: #1a56c4; color: #fff; }
.a11y__grid button:focus-visible { outline: 2px solid #1a56c4; outline-offset: 2px; }
.a11y__ico { flex: none; width: 20px; text-align: center; font-weight: 800; }

.a11y__reset {
    width: 100%; margin-top: 9px; padding: 9px; cursor: pointer;
    border: 1.5px solid #e7d7b4; border-radius: 11px; background: #fbf8f1;
    font-family: inherit; font-size: .8rem; font-weight: 700; color: #53411e;
}
.a11y__reset:active { scale: .97; }
.a11y__dec {
    display: block; margin-top: 8px; text-align: center;
    font-size: .78rem; font-weight: 700; color: #1a56c4;
}

/* ===================================================================
   המצבים שהתפריט מפעיל. !important כי הם צריכים לגבור על עיצוב הדף.
   =================================================================== */

html.a11y-font-lg  { font-size: 120% !important; }
html.a11y-font-sm  { font-size: 88% !important; }

html.a11y-spacing body *:not(.a11y):not(.a11y *) {
    line-height: 2 !important; letter-spacing: .04em !important;
}

html.a11y-readable body *:not(.a11y):not(.a11y *) {
    font-family: Arial, 'Assistant', sans-serif !important;
}

/* הדגשת קישורים — קו תחתון ורקע, כדי שלא יזוהו רק לפי צבע */
html.a11y-links a:not(.a11y *) {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    background: #fff6d6 !important; color: #10307a !important;
    outline: 1px solid #10307a !important;
}

html.a11y-contrast body :not(.a11y):not(.a11y *) {
    background-color: #000 !important; color: #fff !important; border-color: #fff !important;
}
html.a11y-contrast a:not(.a11y *) { color: #ffe680 !important; }
html.a11y-contrast img:not(.a11y *), html.a11y-contrast video:not(.a11y *) { filter: contrast(1.15); }

html.a11y-invert { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.a11y-invert img, html.a11y-invert video { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert .a11y { filter: invert(1) hue-rotate(180deg); }

html.a11y-gray { filter: grayscale(1); }
html.a11y-gray .a11y { filter: grayscale(0); }

html.a11y-cursor, html.a11y-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M6 2l28 15-12 3-5 12z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* עצירת אנימציות — גם למי שלא הגדיר זאת במערכת ההפעלה.
   חובה לכפות גם גלוי ובלי הזזה: ספריות כמו AOS מסתירות תוכן
   (opacity:0) ומגלות אותו רק דרך האנימציה. בלי השורות האלה
   עצירת האנימציות מוחקת בפועל את כל התוכן מהעמוד. */
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}
html.a11y-nomotion [data-aos],
html.a11y-nomotion .reveal,
html.a11y-nomotion .hero-in {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ---------- מיקוד גלוי בכל האתר ----------
   בלי זה אי אפשר לדעת איפה נמצאים כשמנווטים ב-Tab. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #1a56c4;
    outline-offset: 2px;
    border-radius: 4px;
}

/* הכפתור הצף של וואטסאפ יושב באותו צד — מרווחים שלא ידרסו זה את זה */
@media (max-width: 520px) {
    .a11y { bottom: 92px; inset-inline-start: 16px; }
    .a11y__btn { width: 48px; height: 48px; }
}