/* ==========================================================================
   ווידג'ט הנגישות — מראה, והתאמות התצוגה שהוא מפעיל
   נטען אחרי style.css כדי שהעקיפות יגברו.
   ========================================================================== */

/* --- 1. הכפתור הצף ------------------------------------------------------- */
.a11y-widget { position: relative; z-index: 200; }

.a11y-fab {
  position: fixed;
  left: 1rem;                     /* פיזי בכוונה — מיקום קבוע בכל שפה */
  bottom: 1rem;
  z-index: 201;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--navy, #1b2840);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.22);
  transition: transform .16s, background-color .16s;
  padding: 0;
}
.a11y-fab svg { width: 30px; height: 30px; }
.a11y-fab:hover { background: #0f1c30; transform: scale(1.06); }
.a11y-fab:focus-visible { outline: 3px solid var(--focus, #0b5fff); outline-offset: 3px; }

/* נקודת חיווי כשיש הגדרות פעילות — צורה, לא רק צבע */
.a11y-fab-dot { display: none; }
.a11y-fab.is-active .a11y-fab-dot {
  display: block;
  position: absolute;
  top: 2px; right: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold-bright, #c79235);
  border: 2px solid #fff;
}
.a11y-fab.is-active::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px dashed var(--gold-bright, #c79235);
  pointer-events: none;
}

/* מעל סרגל הפעולות בנייד */
@media (max-width: 760px) {
  .a11y-fab { width: 48px; height: 48px; bottom: calc(70px + env(safe-area-inset-bottom)); }
  .a11y-fab svg { width: 26px; height: 26px; }
  .a11y-fab-dot { width: 13px; height: 13px; }
}

/* --- 2. החלונית ---------------------------------------------------------- */
.a11y-panel {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + 66px);
  z-index: 202;
  width: min(340px, calc(100vw - 2rem));
  max-height: min(640px, calc(100vh - 7rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: #17222f;
  border: 1px solid #ddd6ca;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.16), 0 24px 54px rgba(0,0,0,.2);
  font-family: var(--font-body, "Assistant", Arial, sans-serif);
  font-size: 15px;
  line-height: 1.55;
}
.a11y-panel[hidden] { display: none; }
@media (max-width: 760px) {
  .a11y-panel { bottom: calc(70px + 58px + env(safe-area-inset-bottom)); }
}

.a11y-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid #ebe6dd;
  position: sticky; top: 0; background: #fff; border-radius: 16px 16px 0 0;
}
.a11y-head h2 {
  margin: 0; font-size: 1.07em; font-weight: 700;
  font-family: var(--font-display, inherit); color: #1b2840;
}
.a11y-close {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  background: transparent; border: 1px solid #ddd6ca; border-radius: 9px;
  color: #1b2840; cursor: pointer;
}
.a11y-close svg { width: 18px; height: 18px; }
.a11y-close:hover { background: #f1ede6; }

/* --- 3. גודל טקסט -------------------------------------------------------- */
.a11y-size { padding: .9rem 1rem; border-bottom: 1px solid #ebe6dd; }
.a11y-legend { margin: 0 0 .5rem; font-weight: 700; color: #1b2840; font-size: .95em; }
.a11y-size-row { display: flex; align-items: center; gap: .5rem; }
.a11y-btn {
  width: 52px; height: 48px;
  font-size: 1.05em; font-weight: 700; line-height: 1;
  background: #f8f6f2; color: #1b2840;
  border: 1.5px solid #8a8171; border-radius: 10px; cursor: pointer;
}
.a11y-btn:hover { background: #f1ede6; border-color: #1b2840; }
.a11y-size-val {
  flex: 1; text-align: center; font-weight: 700; font-size: 1.05em;
  color: #1b2840; font-variant-numeric: tabular-nums;
}

/* --- 4. רשימת ההתאמות ---------------------------------------------------- */
.a11y-list { padding: .6rem; display: grid; gap: .3rem; }
.a11y-item {
  display: block; width: 100%; text-align: start;
  min-height: 48px; padding: .55rem .7rem;
  background: transparent; border: 1.5px solid transparent; border-radius: 10px;
  cursor: pointer; color: #17222f; font: inherit;
}
.a11y-item:hover { background: #f8f6f2; }
.a11y-item-label { display: block; font-weight: 700; color: #1b2840; }
.a11y-item-desc  { display: block; font-size: .84em; color: #435265; }

/* מצב פעיל — מסומן גם בטקסט וגם בצורה, לא רק בצבע */
.a11y-item[aria-pressed="true"] {
  background: #fdf8ef; border-color: #8a6420;
}
.a11y-item[aria-pressed="true"] .a11y-item-label::after {
  content: " ✓ פועל";
  color: #8a6420; font-size: .85em;
}
.a11y-item:focus-visible,
.a11y-btn:focus-visible,
.a11y-close:focus-visible,
.a11y-reset:focus-visible,
.a11y-link:focus-visible { outline: 3px solid #0b5fff; outline-offset: 2px; }

/* --- 5. תחתית ------------------------------------------------------------ */
.a11y-foot { padding: .8rem 1rem 1rem; border-top: 1px solid #ebe6dd; }
.a11y-reset {
  width: 100%; min-height: 46px;
  background: #1b2840; color: #fff; font: inherit; font-weight: 700;
  border: 2px solid #1b2840; border-radius: 10px; cursor: pointer;
}
.a11y-reset:hover { background: #0f1c30; }
.a11y-link {
  display: block; text-align: center; margin-top: .7rem;
  color: #8a6420; font-weight: 600; min-height: 44px; line-height: 44px;
}
.a11y-note { margin: .2rem 0 0; font-size: .8em; color: #435265; text-align: center; }

/* ==========================================================================
   התאמות התצוגה
   ========================================================================== */

/* --- א. גודל טקסט -------------------------------------------------------- */
html.a11y-scaled { font-size: var(--a11y-scale, 100%); }
/* החלונית עצמה נשארת בגודל קבוע, אחרת היא בורחת מהמסך */
html.a11y-scaled .a11y-panel { font-size: 15px; }

/* --- ב. ניגודיות גבוהה: שחור על לבן ------------------------------------- */
html.a11y-contrast {
  --ink: #000; --ink-soft: #000; --navy: #000; --navy-deep: #000;
  --gold: #000; --gold-bright: #000;
  --paper: #fff; --paper-warm: #fff; --paper-warm-2: #fff;
  --line: #000; --line-soft: #000;
  --error: #000; --success: #000;
}
html.a11y-contrast body,
html.a11y-contrast .hero,
html.a11y-contrast .bg-navy,
html.a11y-contrast .cta-band,
html.a11y-contrast .bg-warm,
html.a11y-contrast .trustbar,
html.a11y-contrast .page-head,
html.a11y-contrast .site-header,
html.a11y-contrast .site-footer,
html.a11y-contrast .mobile-bar,
html.a11y-contrast .card,
html.a11y-contrast .form-card,
html.a11y-contrast .callout,
html.a11y-contrast .step,
html.a11y-contrast .faq details,
html.a11y-contrast .prep-item,
html.a11y-contrast .faq summary:hover {
  background: #fff !important;
  background-image: none !important;
  color: #000 !important;
}
html.a11y-contrast .hero::after { display: none !important; }
/* מפריד הרשת של השלבים הוא רקע המכל. בלי הכלל הזה הוא נבלע והשלבים
   מתמזגים לגוש אחד בדיוק במצב שבו ההפרדה נחוצה יותר מכל. */
/* רקע על המכל היה מצייר את התאים הריקים בשורה האחרונה כגוש מלא.
   המפריד יושב על הכרטיסים עצמם. */
html.a11y-contrast .card-grid { background: transparent !important; gap: 2px !important; }
html.a11y-contrast .card-grid > .card { box-shadow: 0 0 0 2px #000 !important; }
html.a11y-contrast .step { border-color: #000 !important; }
html.a11y-contrast .hero-portrait::before { background: #000 !important; }
html.a11y-contrast .hero-portrait::after { background: #000 !important; }
html.a11y-contrast .cta-band .btn-primary { background: #000 !important; color: #fff !important; border-color: #000 !important; }
html.a11y-contrast .cta-band .btn-primary * { color: #fff !important; }
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast h4, html.a11y-contrast p, html.a11y-contrast li,
html.a11y-contrast span, html.a11y-contrast a, html.a11y-contrast strong,
html.a11y-contrast summary, html.a11y-contrast label, html.a11y-contrast td,
html.a11y-contrast th, html.a11y-contrast blockquote, html.a11y-contrast .lead,
html.a11y-contrast .eyebrow, html.a11y-contrast .disclaimer,
html.a11y-contrast .footer-bottom, html.a11y-contrast .steps-note,
html.a11y-contrast .footer-tagline, html.a11y-contrast .hero-lead,
html.a11y-contrast .ci-label, html.a11y-contrast .ci-value,
html.a11y-contrast .hint, html.a11y-contrast .updated {
  color: #000 !important;
}
html.a11y-contrast .pref-opt {
  background: #fff !important; color: #000 !important; border-color: #000 !important;
}
html.a11y-contrast .pref-opt:has(input:checked) {
  background: #000 !important; color: #fff !important;
}
html.a11y-contrast .pref-opt:has(input:checked) span { color: #fff !important; }

html.a11y-contrast .btn,
html.a11y-contrast input,
html.a11y-contrast textarea,
html.a11y-contrast .card,
html.a11y-contrast .form-card,
html.a11y-contrast .faq details,
html.a11y-contrast .step,
html.a11y-contrast .social-row a {
  border: 2px solid #000 !important;
}
html.a11y-contrast .btn-primary,
html.a11y-contrast .btn-dark,
html.a11y-contrast .mb-call {
  background: #000 !important; color: #fff !important;
}
html.a11y-contrast .mb-wa { background: #fff !important; color: #000 !important; }
html.a11y-contrast .mb-wa svg { color: #000 !important; }
html.a11y-contrast .btn-primary *, html.a11y-contrast .btn-dark *,
html.a11y-contrast .mb-call * { color: #fff !important; }
html.a11y-contrast .hero-portrait img,
html.a11y-contrast .brand-mark-img { filter: grayscale(1) contrast(1.25); }

/* --- ג. ניגודיות הפוכה: לבן על שחור ------------------------------------- */
html.a11y-invert {
  --ink: #fff; --ink-soft: #e6e6e6; --navy: #fff; --navy-deep: #fff;
  --gold: #ffd54a; --gold-bright: #ffd54a;
  --paper: #000; --paper-warm: #000; --paper-warm-2: #141414;
  --line: #fff; --line-soft: #5a5a5a;
  --error: #ff9d9d; --success: #7fe0b4; --focus: #7fb2ff;
}
html.a11y-invert body,
html.a11y-invert .hero,
html.a11y-invert .bg-navy,
html.a11y-invert .cta-band,
html.a11y-invert .bg-warm,
html.a11y-invert .trustbar,
html.a11y-invert .page-head,
html.a11y-invert .site-header,
html.a11y-invert .site-footer,
html.a11y-invert .mobile-bar,
html.a11y-invert .card,
html.a11y-invert .form-card,
html.a11y-invert .callout,
html.a11y-invert .step,
html.a11y-invert .faq details {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
}
html.a11y-invert .hero::after { display: none !important; }
/* מפריד הרשת של השלבים הוא רקע המכל. בלי הכלל הזה הוא נבלע והשלבים
   מתמזגים לגוש אחד בדיוק במצב שבו ההפרדה נחוצה יותר מכל. */
/* רקע על המכל היה מצייר את התאים הריקים בשורה האחרונה כגוש מלא.
   המפריד יושב על הכרטיסים עצמם. */
html.a11y-invert .card-grid { background: transparent !important; gap: 2px !important; }
html.a11y-invert .card-grid > .card { box-shadow: 0 0 0 2px #fff !important; }
html.a11y-invert .step { border-color: #fff !important; }
html.a11y-invert .hero-portrait::before { background: #fff !important; }
html.a11y-invert .hero-portrait::after { background: #fff !important; }
html.a11y-invert .cta-band .btn-primary { background: #fff !important; color: #000 !important; border-color: #fff !important; }
html.a11y-invert .cta-band .btn-primary * { color: #000 !important; }
html.a11y-invert .faq summary:hover,
html.a11y-invert .site-nav a:hover,
html.a11y-invert .contact-list a:hover { background: #1e1e1e !important; }
html.a11y-invert h1, html.a11y-invert h2, html.a11y-invert h3, html.a11y-invert h4,
html.a11y-invert p, html.a11y-invert li, html.a11y-invert span, html.a11y-invert strong,
html.a11y-invert summary, html.a11y-invert label, html.a11y-invert td, html.a11y-invert th,
html.a11y-invert blockquote, html.a11y-invert .lead, html.a11y-invert .disclaimer,
html.a11y-invert .footer-bottom, html.a11y-invert .steps-note,
html.a11y-invert .footer-tagline, html.a11y-invert .hero-lead,
html.a11y-invert .ci-label, html.a11y-invert .ci-value, html.a11y-invert .hint,
html.a11y-invert .updated { color: #fff !important; }
html.a11y-invert a, html.a11y-invert .eyebrow { color: #ffd54a !important; }
html.a11y-invert input, html.a11y-invert textarea {
  background: #000 !important; color: #fff !important; border-color: #fff !important;
}
html.a11y-invert .pref-opt {
  background: #000 !important; color: #fff !important; border-color: #fff !important;
}
html.a11y-invert .pref-opt:has(input:checked) {
  background: #ffd54a !important; border-color: #ffd54a !important;
}
html.a11y-invert .pref-opt:has(input:checked),
html.a11y-invert .pref-opt:has(input:checked) span { color: #000 !important; }
html.a11y-invert .prep-item { background: #000 !important; border-color: #fff !important; }
html.a11y-invert .prep-check { color: #ffd54a !important; }

html.a11y-invert .btn { border: 2px solid #fff !important; }
html.a11y-invert .btn-primary, html.a11y-invert .btn-dark, html.a11y-invert .mb-call {
  background: #ffd54a !important; color: #000 !important;
}
html.a11y-invert .mb-wa { background: #000 !important; color: #fff !important; }
html.a11y-invert .mb-wa svg { color: #7fe0a0 !important; }
html.a11y-invert .btn-primary *, html.a11y-invert .btn-dark *,
html.a11y-invert .mb-call * { color: #000 !important; }
html.a11y-invert .card, html.a11y-invert .form-card,
html.a11y-invert .faq details, html.a11y-invert .step { border-color: #fff !important; }
html.a11y-invert .step::before { background: #ffd54a !important; color: #000 !important; }
/* המונוגרמה כהה מטבעה — על רקע שחור היא נעלמת */
html.a11y-invert .brand-mark-img { filter: brightness(0) invert(1); }
html.a11y-contrast .brand-mark-img { filter: grayscale(1) brightness(0); }

/* --- ד. גווני אפור ------------------------------------------------------- */
/* מוחל על ה-body ולא על html, כדי לא לשבור מיקום fixed של הווידג'ט */
html.a11y-grayscale body > *:not(.a11y-widget) { filter: grayscale(1); }

/* --- ה. הדגשת קישורים ---------------------------------------------------- */
html.a11y-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}
html.a11y-links .a11y-panel a { outline-color: #8a6420 !important; }

/* --- ו. גופן קריא -------------------------------------------------------- */
html.a11y-readable body,
html.a11y-readable h1, html.a11y-readable h2,
html.a11y-readable h3, html.a11y-readable h4 {
  font-family: Arial, "Segoe UI", "Noto Sans Hebrew", sans-serif !important;
  letter-spacing: .015em !important;
  font-weight: 500;
}
html.a11y-readable h1, html.a11y-readable h2,
html.a11y-readable h3, html.a11y-readable h4 { font-weight: 700; }

/* --- ז. ריווח מוגדל ------------------------------------------------------ */
html.a11y-spacing body {
  line-height: 2 !important;
  word-spacing: .16em !important;
  letter-spacing: .05em !important;
}
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 1.5em !important; }

/* --- ח. עצירת תנועה ------------------------------------------------------ */
html.a11y-still, html.a11y-still * {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

/* --- ט. סמן גדול --------------------------------------------------------- */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 2v28l7-7 5 11 5-2-5-11h10z' fill='%23fff' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.a11y-cursor a, html.a11y-cursor button,
html.a11y-cursor summary, html.a11y-cursor label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M14 4a3 3 0 0 1 6 0v13m0-4a3 3 0 0 1 6 0v4m0-2a3 3 0 0 1 6 0v9a10 10 0 0 1-10 10h-3a9 9 0 0 1-7-4l-5-7a2.6 2.6 0 0 1 4-3.4l3.5 3.6' fill='%23fff' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 2, pointer !important;
}

/* --- י. הדפסה ------------------------------------------------------------ */
@media print { .a11y-widget { display: none !important; } }

/* ==========================================================================
   הווידג'ט עצמו חייב להישאר קריא בכל מצב תצוגה
   --------------------------------------------------------------------------
   כללי המצבים למעלה משנים צבע וטקסט בכל העמוד. בלי החרגה מפורשת, החלונית
   הופכת ללבן-על-לבן במצב "ניגודיות הפוכה" — כלומר הכלי שנועד לעזור נעלם.
   שני מחלקות בסלקטור מנצחות את `html.a11y-invert p` (מחלקה אחת).
   ========================================================================== */
.a11y-widget .a11y-panel {
  background: #fff !important;
  color: #17222f !important;
  border-color: #ddd6ca !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  filter: none !important;
}
.a11y-widget .a11y-panel * {
  color: #17222f !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}
.a11y-widget .a11y-head,
.a11y-widget .a11y-panel .a11y-close,
.a11y-widget .a11y-panel .a11y-item { background: #fff !important; }
.a11y-widget .a11y-head { border-bottom-color: #ebe6dd !important; }
.a11y-widget .a11y-size { border-bottom-color: #ebe6dd !important; }
.a11y-widget .a11y-foot { border-top-color: #ebe6dd !important; }
.a11y-widget .a11y-head h2,
.a11y-widget .a11y-legend,
.a11y-widget .a11y-item-label,
.a11y-widget .a11y-size-val { color: #1b2840 !important; }
.a11y-widget .a11y-item-desc,
.a11y-widget .a11y-note { color: #435265 !important; }
.a11y-widget .a11y-btn { background: #f8f6f2 !important; border-color: #8a8171 !important; }
.a11y-widget .a11y-item:hover { background: #f8f6f2 !important; }
.a11y-widget .a11y-item[aria-pressed="true"] {
  background: #fdf8ef !important; border-color: #8a6420 !important;
}
.a11y-widget .a11y-item[aria-pressed="true"] .a11y-item-label::after { color: #8a6420 !important; }
.a11y-widget .a11y-reset {
  background: #1b2840 !important; border-color: #1b2840 !important;
}
.a11y-widget .a11y-reset,
.a11y-widget .a11y-reset * { color: #fff !important; }
.a11y-widget .a11y-link { color: #8a6420 !important; }
.a11y-widget .a11y-panel p,
.a11y-widget .a11y-panel span { margin-bottom: 0 !important; }

/* הכפתור הצף — תמיד לבן על נייבי, בכל מצב */
.a11y-widget .a11y-fab {
  background: #1b2840 !important;
  border-color: #fff !important;
  filter: none !important;
}
.a11y-widget .a11y-fab,
.a11y-widget .a11y-fab svg { color: #fff !important; }
.a11y-widget .a11y-fab .a11y-fab-dot {
  background: #c79235 !important; border-color: #fff !important;
}

/* ריווח מוגדל לא חל על החלונית — אחרת היא מתנפחת ובורחת מהמסך */
html.a11y-spacing .a11y-widget .a11y-panel p,
html.a11y-spacing .a11y-widget .a11y-panel span { margin-bottom: 0 !important; }