/* ==========================================================================
   נגישות — עיצוב תפריט הנגישות + מצבי התצוגה
   --------------------------------------------------------------------------
   הקובץ נטען *אחרי* ה-<style> הפנימי של הדף, ולכן הוא יכול לדרוס אותו
   בלי להיזקק ל-!important בכל שורה.

   כלל אצבע לתחזוקה: כל מה שבתוך .a11y-panel נמדד ב-px בלבד,
   כדי שהתפריט עצמו לא ישתנה כשמגדילים את הטקסט של האתר.
   ========================================================================== */

:root{
  --a11y-fs:1;               /* מקדם הגדלת הטקסט (0.9 – 1.5) */
  --a11y-panel-bg:#121215;
  --a11y-panel-surface:#1c1c21;
  --a11y-panel-text:#F5F5F3;
  --a11y-panel-muted:#9a9aa2;
  --a11y-panel-accent:#C6FF3D;
  --a11y-panel-ink:#0A0A0B;
  --a11y-panel-line:rgba(255,255,255,.14);
}

/* ==========================================================================
   1. הגדלת טקסט
   --------------------------------------------------------------------------
   שני מנגנונים משלימים:
   א. שינוי font-size של <html> — מטפל בכל מה שמוגדר ב-rem.
   ב. שכפול ה-clamp() המקוריים כשהם מוכפלים ב---a11y-fs — מטפל במה שמוגדר ב-px.
   אם מוסיפים בעתיד כותרת עם גודל בפיקסלים, יש להוסיף אותה גם לרשימה כאן.
   ========================================================================== */
html{font-size:calc(100% * var(--a11y-fs))}

body           {font-size:calc(clamp(16px,1.05vw,17px) * var(--a11y-fs))}
.h2            {font-size:calc(clamp(30px,4.4vw,52px)  * var(--a11y-fs))}
.h3            {font-size:calc(clamp(20px,2vw,24px)    * var(--a11y-fs))}
.lead          {font-size:calc(clamp(16px,1.35vw,19px) * var(--a11y-fs))}
.hero h1       {font-size:calc(clamp(38px,7.2vw,84px)  * var(--a11y-fs))}
.hero .lead    {font-size:calc(clamp(17px,1.7vw,21px)  * var(--a11y-fs))}
.stat__num     {font-size:calc(clamp(24px,3vw,34px)    * var(--a11y-fs))}
.quote         {font-size:calc(clamp(17px,1.6vw,20px)  * var(--a11y-fs))}
.plan__price b {font-size:calc(clamp(32px,3.6vw,42px)  * var(--a11y-fs))}
.faq summary   {font-size:calc(clamp(16px,1.5vw,19px)  * var(--a11y-fs))}

/* בהגדלה חזקה כפתורי ה-CTA מתחילים לגלוש — מרשים להם לרדת שורה */
.btn{white-space:normal;text-align:center}

/* ==========================================================================
   2. מצב בהיר
   ========================================================================== */
.a11y-light{
  --bg:#FFFFFF;
  --surface:#F5F5F2;
  --surface-2:#EBEBE6;
  --text:#141416;
  --muted:#4E4E56;          /* יחס ניגודיות ~7.8:1 מול לבן */
  --accent:#3F6212;         /* ליים כהה — ~6.4:1 מול לבן, קריא כטקסט */
  --accent-dim:#334f0e;
  --accent-hover:#4d7717;
  --accent-ink:#FFFFFF;
  --line:rgba(0,0,0,.14);
  --line-strong:rgba(0,0,0,.28);
  color-scheme:light;
}
.a11y-light body{background:#FFFFFF}
.a11y-light .nav.is-stuck{background:rgba(255,255,255,.9);border-bottom-color:var(--line)}
.a11y-light .nav__links a:hover{background:rgba(0,0,0,.06)}
.a11y-light .drawer{background:#FFFFFF}
.a11y-light .hero__bg::after{
  background:
    linear-gradient(to left, rgba(255,255,255,.55) 0%, rgba(255,255,255,.90) 55%, #fff 100%),
    linear-gradient(to top, #fff 2%, transparent 45%);
}
.a11y-light .stat{background:rgba(255,255,255,.86)}
.a11y-light .cta__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.95))}
.a11y-light .plan--featured{background:linear-gradient(180deg,rgba(63,98,18,.08),var(--surface) 42%);border-color:rgba(63,98,18,.4)}
.a11y-light .about__media::after{background:linear-gradient(to top,rgba(255,255,255,.55),transparent 45%)}
.a11y-light .brand__mark{filter:none}
.a11y-light .brand:hover .brand__mark{filter:none}
.a11y-light .burger span,
.a11y-light .burger span::before,
.a11y-light .burger span::after{background:var(--text)}

/* ==========================================================================
   3. ניגודיות גבוהה (שחור/צהוב)
   ========================================================================== */
.a11y-contrast{
  --bg:#000000;
  --surface:#000000;
  --surface-2:#000000;
  --text:#FFFFFF;
  --muted:#FFFFFF;
  --accent:#FFEB00;
  --accent-dim:#FFEB00;
  --accent-hover:#FFF566;
  --accent-ink:#000000;
  --line:#FFFFFF;
  --line-strong:#FFFFFF;
  color-scheme:dark;
}
.a11y-contrast body{background:#000}
/* מסירים תמונות רקע ושכבות הצללה — הן פוגעות בקריאוּת בניגודיות גבוהה.
   ‎!important נדרש כאן: ל-.card__media ול-.avatar יש background-image בתגית style. */
.a11y-contrast .hero__bg,
.a11y-contrast .cta__bg,
.a11y-contrast .about__media{background-image:none}
/* תמונות דקורטיביות בלבד — בניגודיות גבוהה עדיף להסתירן מאשר להשאיר מלבן ריק */
.a11y-contrast .card__media,
.a11y-contrast .avatar{display:none}
.a11y-contrast .hero__bg::after,
.a11y-contrast .cta__bg::after{background:#000}
.a11y-contrast .about__media::after{display:none}
.a11y-contrast .nav.is-stuck{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none}
.a11y-contrast .nav__links a:hover{background:#000;color:var(--accent)}
.a11y-contrast .stat{background:#000;backdrop-filter:none}
.a11y-contrast .drawer{background:#000}
.a11y-contrast .plan--featured{background:#000}
.a11y-contrast .brand__mark{filter:none}
.a11y-contrast .wa-float{background:#FFEB00;color:#000;box-shadow:none;border:2px solid #fff}
.a11y-contrast .btn--ghost{border-color:#fff}
.a11y-contrast .card,
.a11y-contrast .plan,
.a11y-contrast .info,
.a11y-contrast .quote-card,
.a11y-contrast .cta{border-color:#fff}

/* ==========================================================================
   4. גווני אפור
   --------------------------------------------------------------------------
   מוחל על אזורי התוכן בלבד ולא על <body>, כדי שתפריט הנגישות עצמו
   יישאר צבעוני וברור.
   ========================================================================== */
.a11y-mono .nav,
.a11y-mono .drawer,
.a11y-mono main,
.a11y-mono .footer,
.a11y-mono .wa-float{filter:grayscale(100%)}

/* ==========================================================================
   5. הדגשת קישורים
   ========================================================================== */
.a11y-links main a:not(.btn),
.a11y-links .footer a:not(.btn),
.a11y-links .nav__links a,
.a11y-links .drawer a:not(.btn){
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  font-weight:700;
}
.a11y-links .btn,
.a11y-links .faq summary{box-shadow:0 0 0 2px var(--accent) inset;border-radius:8px}
.a11y-links .btn{border-radius:999px}

/* ==========================================================================
   6. פונט קריא
   ========================================================================== */
.a11y-readable body{font-family:Arial,'Segoe UI',Tahoma,sans-serif}
.a11y-readable h1,.a11y-readable h2,.a11y-readable h3,.a11y-readable h4,
.a11y-readable .h2,.a11y-readable .h3,.a11y-readable .hero h1{
  letter-spacing:normal;font-weight:700;
}
.a11y-readable .eyebrow,.a11y-readable .brand small{letter-spacing:.04em;text-transform:none}

/* ==========================================================================
   7. ריווח טקסט מוגדל (בהתאם ל-WCAG 1.4.12)
   ========================================================================== */
.a11y-spacing body{line-height:1.9;letter-spacing:.12em;word-spacing:.16em}
.a11y-spacing p,.a11y-spacing li,.a11y-spacing .lead{line-height:2}
.a11y-spacing p + p{margin-top:2em}
.a11y-spacing h1,.a11y-spacing h2,.a11y-spacing h3,
.a11y-spacing .h2,.a11y-spacing .h3{line-height:1.4;letter-spacing:.02em}
.a11y-spacing .btn{letter-spacing:normal;word-spacing:normal}

/* ==========================================================================
   8. סמן עכבר מוגדל
   ========================================================================== */
.a11y-cursor,
.a11y-cursor *{
  cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5 19 12l-6.4 1.3L9.6 20 5 2.5Z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto;
}
.a11y-cursor a,
.a11y-cursor button,
.a11y-cursor summary,
.a11y-cursor [role="button"]{
  cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.6v9.1L6.9 9.4a1.6 1.6 0 0 0-2.4 2.1l4.2 6.1c.7 1 1.9 1.7 3.2 1.7h3.4a4 4 0 0 0 4-4V9.6a1.5 1.5 0 0 0-3 0V8.4a1.5 1.5 0 0 0-3 0V7.6a1.5 1.5 0 0 0-3 0V2.6a1.5 1.5 0 0 0-3 0Z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 9 2, pointer;
}

/* ==========================================================================
   9. עצירת תנועה
   ========================================================================== */
.a11y-motion{scroll-behavior:auto}
.a11y-motion *,
.a11y-motion *::before,
.a11y-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
.a11y-motion .reveal{opacity:1 !important;transform:none !important}
.a11y-motion .btn:hover,
.a11y-motion .card:hover,
.a11y-motion .plan:hover,
.a11y-motion .wa-float:hover{transform:none}

/* ==========================================================================
   10. הדגשת מיקוד מקלדת
   --------------------------------------------------------------------------
   ברירת המחדל של האתר היא :focus-visible (מוצג רק בניווט מקלדת).
   כאן מכריחים חיווי מיקוד בולט תמיד — כולל בלחיצת עכבר —
   כי יש משתמשים שמסתמכים עליו לאיתור המיקום בדף.
   ========================================================================== */
.a11y-focus a:focus,
.a11y-focus button:focus,
.a11y-focus summary:focus,
.a11y-focus video:focus,
.a11y-focus [tabindex]:focus{
  outline:3px solid #FFEB00;
  outline-offset:3px;
  border-radius:4px;
  box-shadow:0 0 0 6px rgba(0,0,0,.85);
}

/* ==========================================================================
   11. כפתור פתיחת התפריט (FAB)
   --------------------------------------------------------------------------
   מוצג רק כשיש JS — בלי JS הוא לא היה עושה דבר.
   ממוקם בפינה הימנית התחתונה; כפתור הוואטסאפ יושב בשמאלית.
   ========================================================================== */
.a11y-fab{
  position:fixed;inset-block-end:22px;right:22px;z-index:9997;
  width:54px;height:54px;border-radius:50%;
  display:none;place-items:center;
  background:#C6FF3D;color:#0A0A0B;
  border:2px solid rgba(0,0,0,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.js .a11y-fab{display:grid}
.a11y-fab:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.55)}
.a11y-fab svg{width:30px;height:30px;display:block}
.a11y-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (max-width:560px){
  .a11y-fab{width:48px;height:48px;inset-block-end:18px;right:16px}
  .a11y-fab svg{width:27px;height:27px}
}

/* ==========================================================================
   12. שכבת הרקע והתפריט
   ========================================================================== */
.a11y-backdrop{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.a11y-backdrop[hidden]{display:none}

.a11y-panel{
  position:fixed;z-index:9999;
  inset-block-end:88px;right:22px;
  width:340px;max-width:calc(100vw - 32px);
  max-height:min(78vh,620px);
  display:flex;flex-direction:column;
  background:var(--a11y-panel-bg);
  color:var(--a11y-panel-text);
  border:1px solid var(--a11y-panel-line);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  font-family:'Heebo','Segoe UI',Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:normal;
  word-spacing:normal;
  overflow:hidden;
}
.a11y-panel[hidden]{display:none}

/* התפריט חייב להישאר יציב וקריא בכל מצב שהופעל על האתר */
.a11y-panel,
.a11y-panel *{
  letter-spacing:normal !important;
  word-spacing:normal !important;
  font-family:'Heebo','Segoe UI',Arial,sans-serif !important;
}
.a11y-mono .a11y-panel{filter:none}

@media (max-width:560px){
  .a11y-panel{
    inset-block-end:0;right:0;left:0;
    width:auto;max-width:none;
    max-height:86vh;
    border-radius:18px 18px 0 0;
  }
}

.a11y-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--a11y-panel-line);
  background:var(--a11y-panel-surface);
  flex:none;
}
.a11y-panel__head h2{
  margin:0;font-size:17px;font-weight:900;line-height:1.2;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;
}
.a11y-panel__head h2 svg{width:21px;height:21px;color:var(--a11y-panel-accent);flex:none}

.a11y-close{
  width:34px;height:34px;flex:none;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--a11y-panel-line);
  color:var(--a11y-panel-text);
  background:none;cursor:pointer;
}
.a11y-close:hover{background:rgba(255,255,255,.08)}
.a11y-close svg{width:15px;height:15px}

.a11y-panel__body{padding:16px 18px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}

.a11y-group + .a11y-group{margin-top:20px}
.a11y-group > h3{
  margin:0 0 10px;font-size:11px;font-weight:700;
  letter-spacing:.14em !important;text-transform:uppercase;
  color:var(--a11y-panel-muted);
}

/* ---- מד גודל הטקסט ---- */
.a11y-stepper{
  display:flex;align-items:center;gap:10px;
  background:var(--a11y-panel-surface);
  border:1px solid var(--a11y-panel-line);
  border-radius:12px;padding:8px 10px;
}
.a11y-stepper button{
  width:40px;height:40px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  font-weight:900;font-size:16px;
  color:var(--a11y-panel-ink);background:var(--a11y-panel-accent);
  border:0;cursor:pointer;
}
.a11y-stepper button:hover:not(:disabled){background:#d4ff5e}
.a11y-stepper button:disabled{opacity:.35;cursor:not-allowed}
.a11y-stepper output{flex:1;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

/* ---- כפתורי מצב ---- */
.a11y-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0;padding:0;list-style:none}
.a11y-options li{margin:0}
/* מספר אי־זוגי של אפשרויות — האחרונה תופסת את כל הרוחב במקום חצי משבצת ריק */
.a11y-options li:last-child:nth-child(odd){grid-column:1 / -1}
.a11y-options li:last-child:nth-child(odd) .a11y-opt{flex-direction:row;min-height:0;gap:10px;padding:14px 12px}

.a11y-opt{
  width:100%;min-height:78px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;border-radius:12px;
  background:var(--a11y-panel-surface);
  border:1px solid var(--a11y-panel-line);
  color:var(--a11y-panel-text);
  font-size:12.5px;font-weight:500;line-height:1.25;text-align:center;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.a11y-opt svg{width:22px;height:22px;flex:none;color:var(--a11y-panel-accent)}
.a11y-opt:hover{border-color:rgba(198,255,61,.5)}
.a11y-opt[aria-pressed="true"]{
  background:rgba(198,255,61,.14);
  border-color:var(--a11y-panel-accent);
  font-weight:700;
}
.a11y-opt[aria-pressed="true"] .a11y-opt__state{color:var(--a11y-panel-accent)}
.a11y-opt__state{font-size:10.5px;color:var(--a11y-panel-muted);font-weight:700}

/* ---- תחתית התפריט ---- */
.a11y-panel__foot{
  flex:none;padding:14px 18px;
  border-top:1px solid var(--a11y-panel-line);
  background:var(--a11y-panel-surface);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.a11y-reset{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;
  border:1px solid var(--a11y-panel-line);
  color:var(--a11y-panel-text);background:none;
  font-size:13px;font-weight:700;cursor:pointer;
}
.a11y-reset:hover{border-color:var(--a11y-panel-accent);color:var(--a11y-panel-accent)}
.a11y-reset svg{width:14px;height:14px}
.a11y-statement{
  font-size:13px;font-weight:700;
  color:var(--a11y-panel-accent);
  text-decoration:underline;text-underline-offset:3px;
}
.a11y-hint{
  width:100%;margin:0;font-size:11.5px;color:var(--a11y-panel-muted);line-height:1.5;
}

.a11y-panel :focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}

/* אזור הודעות לקורא מסך */
.a11y-sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
