/* ============================================================
   STAV — Layout / פריסה: מכל, header, footer, סקשנים, כפתורים
   ============================================================ */

/* ---------- מכל / Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

/* ---------- שלד האתר / Site shell ---------- */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-main { flex: 1 0 auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  box-shadow: 0 4px 31px 0 rgba(9, 29, 44, 0.05);
}
/* רקע מטושטש כשכבת ::before — כך ש-backdrop-filter לא הופך את ה-header ל-containing-block
   של ה-nav ה-fixed (מה שגרם לגלישה אופקית במובייל + drawer מוגבל לגובה ה-header). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.86);  /* glass לבן — שקיפות קטנה */
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-block-end: 1px solid rgba(4, 40, 56, 0.08);   /* קצה glass עדין */
  transform: translateZ(0);               /* שכבת GPU — מונע lag של ה-blur בגלילה */
  will-change: transform;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 99px;
  padding: 16px;             /* navbar p-16, רוחב מלא (ללא container) */
  transition: min-height .5s ease, padding .5s ease;   /* התכווצות ב-0.5s קבוע */
}
/* לוגו חצוי (מונוגרמה זהב + טקסט לבן) — lockup גרפי, נשמר LTR: מונוגרמה משמאל ← טקסט מימין.
   גובה כל חצי = יחס קבוע מתוך --logo-h (גובה הלוקאפ המלא): מונוגרמה 0.555 · טקסט 0.422 · gap 0.088.
   להחלפת גודל הלוגו — שנה רק את --logo-h (59 מובייל / 72 דסקטופ / 92 drawer). */
.site-branding__logo {
  --logo-h: 59px;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.site-branding__logo img { width: auto; display: block; }
.site-branding__logo-mark { height: calc(var(--logo-h) * 0.555); transition: height .5s cubic-bezier(.4, 0, .2, 1); }
/* חצי-הטקסט עטוף ב-wrapper שנאסף בגלילה (overflow:hidden → קליפ נקי, בלי עיוות).
   רוחב טבעי ≈ aspect 6.01 × גובה החצי; ה-margin הוא ה-gap שבין המונוגרמה לטקסט. */
.site-branding__logo-textwrap {
  display: block;
  overflow: hidden;
  max-width: calc(var(--logo-h) * 2.54);
  margin-inline-start: calc(var(--logo-h) * 0.088);
  opacity: 1;
  transition: max-width .5s cubic-bezier(.4, 0, .2, 1),
              margin-inline-start .5s cubic-bezier(.4, 0, .2, 1),
              opacity .35s ease;
}
.site-branding__logo-text { height: calc(var(--logo-h) * 0.422); transition: height .5s cubic-bezier(.4, 0, .2, 1); }

/* גלילה >50px: כל ההאדר מתכווץ — גובה ההאדר קטן, הלוגו קטן, וחצי-הטקסט נאסף → המונוגרמה נצמדת לימין.
   מוגבל ל-.site-branding (האדר עליון) כדי לא להשפיע על הלוגו שבתוך ה-drawer במובייל. */
.site-header.is-scrolled .site-header__inner { min-height: 64px; padding-block: 10px; }
.site-header.is-scrolled .site-branding .site-branding__logo { --logo-h: 40px; }
.site-header.is-scrolled .site-branding .site-branding__logo-textwrap {
  max-width: 0;
  margin-inline-start: 0;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-branding__logo-textwrap { transition: none; }
  .site-header.is-scrolled .site-branding .site-branding__logo-textwrap {
    max-width: calc(var(--logo-h) * 2.54);
    margin-inline-start: calc(var(--logo-h) * 0.088);
    opacity: 1;
  }
}
.site-branding__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
}
.site-branding__title a { color: var(--color-text); }

/* תפריט ראשי / Primary nav */
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 48px;                          /* Figma navbar: gap בין פריטים */
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  color: var(--color-primary);        /* #105e7a (Figma) */
  font-weight: var(--fw-regular);
  font-size: var(--text-xl);          /* 20px (p-XL) */
}
.primary-nav a:hover { color: var(--color-primary-900); }
/* חלקי ה-drawer (לוגו/קשר/סגירה/רקע) — מוסתרים בדסקטופ, מוצגים רק במובייל */
.primary-nav__top, .primary-nav__contact, .primary-nav__close, .nav-backdrop { display: none; }

/* CTA בנאבר — מוסתר במובייל, מוצג בדסקטופ */
.nav-cta { display: none; }

/* כפתור תפריט מובייל / Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px;
  color: var(--color-hero-navy);     /* צבע מותג — ההאדר לבן */
}

/* ---------- Footer (Figma desktop_footer 6034:3858) ---------- */
.site-footer { margin: 0; }
.site-footer a { color: var(--surface-on-action); }
.site-footer a:hover { color: var(--color-white); }
.site-footer .container { max-width: none; }   /* end to end — לא מוגבל ל-1184px כמו שאר האתר, נשאר רק ה-gutter */

/* footer_top — רקע teal, 3 טורים + לוגו */
.site-footer__top { background: var(--surface-section-fill-1); color: var(--surface-on-action); padding-block: 54px; }
.site-footer__top-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2xl); flex-wrap: wrap; }
.site-footer__brand-spacer { display: none; }   /* קיים רק כדי לאזן את רוחב הלוגו בגריד הדסקטופ — ראו מדיה query */
.footer-cols { display: flex; gap: var(--space-m); flex-wrap: wrap; }   /* Figma: gap בין טורים 24 */
.footer-col { width: 216px; display: flex; flex-direction: column; gap: 48px; align-items: flex-start; text-align: right; }   /* RTL: flex-start = ימין. Figma: כותרת → רשימה 48 */
.footer-col__title {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-tracking);
  color: #dac29a; margin: 0;                         /* כותרת זהובה (Figma) */
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }   /* RTL: flex-start = ימין. Figma: בין קישורים 24 (קבוע גם במובייל) */
.footer-links a { font-family: var(--font-body); font-size: var(--p-m); }   /* 14 */
.site-footer__logo { max-height: 177px; max-width: 221px; width: auto; height: auto; }   /* Figma לוגו 221×177 */

/* טור יצירת קשר */
.footer-col--contact .contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }   /* RTL: flex-start = ימין. Figma: בין פריטים 24 (קבוע גם במובייל) */
/* פריט קשר = טקסט + אייקון (Figma: אייקון לצד כל פריט, gap 8) */
.contact-list .contact-item { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.contact-list__icon { flex-shrink: 0; }
.footer-col--contact .contact-list li, .footer-col--contact .contact-list a { font-size: var(--p-l); }   /* 18 */
.social-links { display: flex; flex-direction: row-reverse; gap: var(--space-md); }   /* Figma: פייסבוק משמאל, גוגל מימין */
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--surface-on-action); transition: color var(--transition-fast); }
.social-link:hover { color: var(--color-white); }

/* footer_bottom — רקע נייבי, legal */
.site-footer__bottom { background: var(--color-primary-900); color: var(--surface-on-action); }
.site-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: 16px; border-block-end: 1px solid var(--color-primary-700); }   /* Figma: קו מפריד #105e7a */
.footer-legal__copy { margin: 0; font-size: var(--p-m); line-height: var(--p-m-lh); }   /* הוגדל מ-p-s (10px) לקריאות */
.footer-legal__links { display: flex; align-items: center; gap: var(--space-xs); }
.footer-legal__links a { font-size: var(--p-m); padding-block: 8px; }
.footer-legal__links a + a { padding-inline-start: var(--space-xs); border-inline-start: 1px solid #e2e8f0; }   /* מפריד | בין הקישורים (Figma stroke-disabled) */
/* שורת קרדיט (Figma: ממורכזת, py-32, טקסט #c5e0f2) */
.footer-credit { display: flex; align-items: center; justify-content: center; gap: 8px; padding-block: 32px; }   /* Figma: gap 8 */
.footer-credit span { font-size: var(--p-m); color: var(--color-primary-200); }
.footer-credit__logo { display: block; line-height: 0; }
.footer-credit__img { height: 20px; width: auto; display: block; }   /* Figma: לוגו ronen ~20px */

/* ---------- Preloader (Lottie · כניסה ראשונה לסשן) ---------- */
html.is-preloading, html.is-preloading body { overflow: hidden; }
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-900);          /* navy */
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;
}
.site-preloader.is-hiding { opacity: 0; visibility: hidden; }
.site-preloader__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 260px;
}
.site-preloader__lottie { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-preloader__logo {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 120px;
  max-height: 120px;
  height: auto;
  animation: stav-pre-logo 1.1s ease both;
}
@keyframes stav-pre-logo {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- כפתור וואטסאפ צף ---------- */
.wa-float {
  position: fixed;
  inset-block-end: 20px;
  right: 20px;                       /* פינה ימנית-תחתונה (בקשת המשתמש) */
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;               /* WhatsApp brand */
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.wa-float:hover { background: #1da851; color: #fff; transform: scale(1.06); box-shadow: 0 8px 26px rgba(0, 0, 0, .28); }   /* ירוק כהה יותר — משוב ריחוף ברור */
.wa-float:focus-visible { outline: 3px solid var(--color-primary-500); outline-offset: 3px; }
.wa-float__icon { display: block; }
@media (max-width: 1023px) {
  .wa-float { inset-block-end: 16px; right: 16px; width: 52px; height: 52px; }
}

/* ---------- סקשנים / Sections ---------- */
.section { padding-block: var(--space-4xl); }
.section--alt { background: var(--color-bg-alt); }

/* ---------- כפתורים / Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn:hover { background: var(--color-primary-hover); color: var(--color-white); }
.btn:active { transform: translateY(1px); }
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--outline:hover { background: var(--color-bg-alt); color: var(--color-primary); }

/* ============================================================
   רספונסיביות / Responsive
   ============================================================ */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; order: 1; }   /* RTL: order נמוך יותר → קרוב יותר לימין (start) */
  .site-branding { order: 2; }                      /* לוגו צמוד לשמאל (end) */
  .btn.nav-cta { display: none; }   /* CTA נאבר מוסתר במובייל (עוקף את display:inline-flex של .btn) */

  /* ---------- תפריט מובייל (drawer מימין · Figma mobile_menu 6043:9357) ---------- */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(4, 40, 56, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .primary-nav {
    position: fixed;
    inset-block: 0;
    right: 0;                                  /* drawer בצד ימין (Figma) */
    z-index: 100;
    width: min(86vw, 330px);   /* Figma: 330px */
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--color-white);                /* רקע לבן (בקשת המשתמש) */
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;              /* מונע "גלישת" הגלילה לעמוד שמאחור */
    transform: translateX(100%);
    transition: transform var(--transition-base);
  }
  .primary-nav.is-open { transform: translateX(0); }
  body.nav-open { overflow: hidden; }          /* תפריט פתוח → העמוד נעול, רק התפריט נגלל */

  .primary-nav__top {
    display: flex;
    align-items: center;
    justify-content: center;                  /* לוגו ממורכז (כפתור הסגירה יצא מהזרימה) */
    gap: 16px;
    padding: 20px 24px 24px;
  }
  .primary-nav__top .site-branding__logo { --logo-h: 46px; }   /* היה 92 — התנגש עם כפתור הסגירה (X) */
  .primary-nav__close {
    position: absolute;                        /* לא תופס מקום בזרימה */
    top: 16px;
    left: 16px;                                /* פינה שמאלית-עליונה של התפריט */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-primary);       /* צבע מותג — ה-drawer לבן */
    cursor: pointer;
  }

  .primary-nav__list {
    /* flex: 1 0 auto; */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
  }
  .primary-nav__list > li { border-block-end: 1px solid rgba(16, 94, 122, .22); }
  .primary-nav__list > li:last-child { border-block-end: 0; }
  .primary-nav__list a {
    display: block;
    padding: 36px 8px;   /* Figma: py-36 px-8 */
    text-align: right;
    font-family: var(--font-display);
    font-size: var(--h3-size);
    line-height: var(--h3-lh);
    color: var(--surface-action-primary);      /* #105e7a */
  }
  .primary-nav .current-menu-item > a { color: var(--color-secondary-500); }   /* פריט פעיל = זהב */

  .primary-nav__contact {
    display: block;
    flex: 1 0 auto;   /* תופס את שאר הגובה של הדראוור (עד ל-100vh, לפי גובה .primary-nav) */
    background: var(--surface-section-fill-1);   /* #124e67 — Figma (היה navy #042838) */
    color: var(--surface-on-action);
    padding: 64px 24px;   /* Figma: py-64 px-24 (היה 28/32) */
  }
  .primary-nav__contact-title {
    margin: 0 0 48px;   /* Figma: footer_menu gap-48 בין הכותרת לרשימה (היה 16) */
    font-family: var(--font-body);   /* Figma: Google Sans Regular (היה font-display/medium) */
    font-weight: var(--fw-regular);
    font-size: 18px; line-height: 28px;   /* Figma paragraph/L המדויק לפריים הזה (היה h6, זהב) */
    color: var(--surface-on-action);      /* #f2f8fd (היה זהב #dac29a) */
    text-align: right;
  }
  .primary-nav__contact .contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }   /* בלי נקודות; RTL: flex-start = ימין */
  .primary-nav__contact .contact-list a, .primary-nav__contact .contact-list li { font-size: 18px; line-height: 28px; }   /* Figma paragraph/L המדויק (לא היה מוגדר בכלל) */
  .primary-nav__contact a { color: var(--surface-on-action); }
  .primary-nav__contact a:hover { color: var(--color-white); }   /* תיקון היעלמות בריחוף (היה primary-900 על רקע navy) */
  /* גדלי הכותרות במובייל מנוהלים דרך הטוקנים ב-tokens.css (@media ≤768px) */

  /* ---------- Footer מובייל (Figma mobile_footer 6043:8710) ----------
     לוגו למעלה → טורים מוערמים צמודים לימין (gap 64) → legal מוערם (gap 32).
     RTL: align-items: flex-start = ימין. */
  .site-footer__top-inner { flex-direction: column; align-items: flex-start; gap: 64px; }
  .site-footer__brand { order: -1; }                                              /* לוגו ראשון (למעלה) */
  .footer-cols { flex-direction: column; gap: 64px; align-items: flex-start; }     /* טורים מוערמים צמודים לימין */
  .footer-col__title { font-size: calc(var(--h6-size) * 1.25); line-height: calc(var(--h6-lh) * 1.25); }   /* הוגדל ב-25% — מובייל בלבד */
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 32px; padding-block: 24px; }   /* Figma מובייל: legal py-24, gap-32 */
  .footer-legal__links { flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer-legal__links a { padding-block: 0; }
  .footer-legal__links a + a { padding-inline-start: 0; border-inline-start: 0; }  /* מוערם — בלי מפריד אנכי */
}

/* ---------- Navbar דסקטופ (Figma 6057:2574): לוגו ימין · תפריט מרכז · CTA שמאל ---------- */
@media (min-width: 1024px) {
  .site-header__inner { min-height: 98px; padding: 13px 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }   /* תפריט ממורכז לאמצע המסך (1fr|auto|1fr) */
  .site-header.is-scrolled .site-header__inner { min-height: 62px; padding-block: 8px; }   /* התכווצות בגלילה */
  .site-branding { justify-self: start; }        /* RTL: start = ימין */
  .site-branding__logo { --logo-h: 72px; }       /* Figma navbar logo 72 */
  .site-header.is-scrolled .site-branding .site-branding__logo { --logo-h: 44px; }   /* לוגו מתכווץ */
  .primary-nav { justify-self: center; display: flex; justify-content: center; }
  .nav-cta {
    display: inline-flex;
    justify-self: end;                           /* RTL: end = שמאל */
    height: 42px;
    padding: 12px 24px;
    border-radius: 8px;
    background: transparent;
    color: var(--color-primary);                 /* צבע מותג — ההאדר לבן */
    border: 1px solid var(--color-primary-500);  /* #328cc5 */
    font-weight: var(--fw-regular);
    font-size: var(--text-base);                 /* 16px */
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  }
  .nav-cta:hover { background: var(--color-surface-on-action); color: var(--color-primary-hover); border-color: var(--color-primary-hover); }

  /* Footer דסקטופ: לוגו בצד ימין, הטורים באמצע, ו-spacer ריק בצד שמאל באותו רוחב
     בדיוק כמו הלוגו — כך שהטורים ממורכזים בפועל בתוך השטח שנשאר (grid, לא flex).
     סדר ה-DOM (brand · footer-cols · spacer) הופך בעצמו ל-ימין·אמצע·שמאל ב-RTL,
     בלי row-reverse. row-reverse על footer-cols עצמו נשאר כדי לשמר סדר טורים
     פנימי: שירותים (צמוד ללוגו) · מפת האתר · יצירת קשר. */
  .site-footer__top-inner { display: grid; grid-template-columns: 221px 1fr 221px; align-items: start; }
  .site-footer__brand-spacer { display: block; }
  .footer-cols { flex-direction: row-reverse; width: 100%; }
  .footer-col { width: auto; flex: 1 1 0; }   /* כל טור = 33% מהשטח שנשאר בין הלוגו ל-spacer */
}