/* ==========================================================================
   MSL Elementor Bridge · v1.0 · 2026-05-25
   ─────────────────────────────────────────────────────────────────────────
   מטרה: לגרום לכל widget של Elementor לדבר בשפת MSL Design Kit.
   הקובץ נטען אחרי kit.css ולפני post-XXXX.css של Elementor.

   כללים:
   • tokens בלבד — var(--msl-...) — אסור צבע/font hardcoded
   • !important מינימלי — מוסבר בהערה לכל שימוש חריג
   • אין מגע ב-kit.css / base.css / components.css / tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY — elementor-widget-heading
   מפה את כל רמות ה-heading לסקאלת MSL Kit.
   -------------------------------------------------------------------------- */

/* H1 — hero/display */
.elementor-widget-heading h1,
.elementor-widget-heading .elementor-heading-title[tag="h1"] {
  font-family: var(--msl-font);
  font-size: var(--msl-size-h1);
  font-weight: var(--msl-w-heavy);
  line-height: var(--msl-lh-tight);
  letter-spacing: var(--msl-ls-heading);
  color: var(--msl-ink-strong);
  margin: 0;
}

/* H2 — section title */
.elementor-widget-heading h2,
.elementor-widget-heading .elementor-heading-title[tag="h2"] {
  font-family: var(--msl-font);
  font-size: var(--msl-size-h2);
  font-weight: var(--msl-w-heavy);
  line-height: var(--msl-lh-snug);
  letter-spacing: var(--msl-ls-heading);
  color: var(--msl-ink-strong);
  margin: 0;
}

/* H3 — sub-section */
.elementor-widget-heading h3,
.elementor-widget-heading .elementor-heading-title[tag="h3"] {
  font-family: var(--msl-font);
  font-size: var(--msl-size-h3);
  font-weight: var(--msl-w-bold);
  line-height: var(--msl-lh-snug);
  letter-spacing: var(--msl-ls-tight);
  color: var(--msl-ink-strong);
  margin: 0;
}

/* H4 — card title */
.elementor-widget-heading h4,
.elementor-widget-heading .elementor-heading-title[tag="h4"] {
  font-family: var(--msl-font);
  font-size: var(--msl-size-h4);
  font-weight: var(--msl-w-bold);
  line-height: var(--msl-lh-snug);
  color: var(--msl-ink-strong);
  margin: 0;
}

/* H5, H6 — label level */
.elementor-widget-heading h5,
.elementor-widget-heading .elementor-heading-title[tag="h5"],
.elementor-widget-heading h6,
.elementor-widget-heading .elementor-heading-title[tag="h6"] {
  font-family: var(--msl-font);
  font-size: var(--msl-size-small);
  font-weight: var(--msl-w-bold);
  letter-spacing: var(--msl-ls-label);
  text-transform: uppercase;
  color: var(--msl-muted);
  margin: 0;
}

/* Heading בתוך dark section — הפוך לbody לבן */
.msl-on-dark .elementor-widget-heading h1,
.msl-on-dark .elementor-widget-heading h2,
.msl-on-dark .elementor-widget-heading h3,
.msl-on-dark .elementor-widget-heading h4,
.elementor-section.elementor-section-height-min-height[data-settings*="navy"] .elementor-widget-heading h1,
.elementor-section.elementor-section-height-min-height[data-settings*="navy"] .elementor-widget-heading h2 {
  color: #fff; /* !NOTE: white בלבד על dark bg — token אין ל-pure-white */
}

/* --------------------------------------------------------------------------
   2. TEXT EDITOR — elementor-widget-text-editor
   מפה לסגנון msl-body
   -------------------------------------------------------------------------- */

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--msl-font);
  font-size: var(--msl-size-body);
  font-weight: var(--msl-w-reg);
  line-height: var(--msl-lh-relaxed);
  color: var(--msl-ink);
}

.elementor-widget-text-editor p {
  margin: 0 0 var(--msl-sp-4);
  max-width: 64ch;
}

.elementor-widget-text-editor b,
.elementor-widget-text-editor strong {
  font-weight: var(--msl-w-bold);
  color: var(--msl-ink-strong);
}

.elementor-widget-text-editor a {
  color: var(--msl-amber-deep);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. BUTTON — elementor-widget-button
   מפה ל-msl-btn (navy bg, amber arrow, hover lift)
   -------------------------------------------------------------------------- */

.elementor-widget-button .elementor-button {
  font-family: var(--msl-font);
  font-weight: var(--msl-w-heavy);
  letter-spacing: var(--msl-ls-tight);
  border-radius: var(--msl-r);
  border: 0;
  background: var(--msl-ink-strong);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  gap: var(--msl-sp-2);
}

.elementor-widget-button .elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--msl-shadow-1);
}

/* גדלים */
.elementor-widget-button .elementor-button.elementor-size-xs {
  font-size: var(--msl-size-meta);
  padding: 10px 18px;
}

.elementor-widget-button .elementor-button.elementor-size-sm {
  font-size: var(--msl-size-meta);
  padding: 10px 18px;
}

.elementor-widget-button .elementor-button.elementor-size-md,
.elementor-widget-button .elementor-button.elementor-size-default {
  font-size: var(--msl-size-small);
  padding: 14px 28px;
}

.elementor-widget-button .elementor-button.elementor-size-lg {
  font-size: var(--msl-size-body);
  padding: 18px 36px;
}

.elementor-widget-button .elementor-button.elementor-size-xl {
  font-size: var(--msl-size-lead);
  padding: 22px 44px;
}

/* Amber variant — כשהכפתור צבעוני מ-Elementor color picker */
.elementor-widget-button .elementor-button[style*="background-color: rgb(212, 160, 74)"],
.elementor-widget-button .elementor-button[style*="background-color:#d4a04a"] {
  /* !important: Elementor כותב inline style, חייבים לדרוס */
  color: var(--msl-ink-strong) !important;
}

/* --------------------------------------------------------------------------
   4. DIVIDER — elementor-widget-divider
   מפה לצבע amber וגובה לפי tokens
   -------------------------------------------------------------------------- */

.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--msl-amber);
  border-top-width: 2px;
}

.elementor-widget-divider .elementor-divider {
  padding: var(--msl-sp-3) 0;
}

/* --------------------------------------------------------------------------
   5. ICON BOX — elementor-widget-icon-box
   מפה כותרת ל-msl-h4, תיאור ל-msl-body
   -------------------------------------------------------------------------- */

.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
  font-family: var(--msl-font);
  font-size: var(--msl-size-h4);
  font-weight: var(--msl-w-bold);
  line-height: var(--msl-lh-snug);
  color: var(--msl-ink-strong);
}

.elementor-widget-icon-box .elementor-icon-box-description {
  font-family: var(--msl-font);
  font-size: var(--msl-size-body);
  font-weight: var(--msl-w-reg);
  line-height: var(--msl-lh-relaxed);
  color: var(--msl-ink);
}

/* --------------------------------------------------------------------------
   6. HERO SECTIONS — elementor-section עם min-height (heuristic)
   מפה background ל-navy + padding מהקיט
   -------------------------------------------------------------------------- */

/* Section עם min-height שיש לו dark background ב-Elementor settings */
.elementor-section.elementor-section-height-min-height {
  padding-top: var(--msl-sp-8);     /* 64px */
  padding-bottom: var(--msl-sp-9);  /* 80px */
}

/* כשה-section עצמו dark (Elementor background color = navy) */
.elementor-section.elementor-section-height-min-height[data-settings*='"background_color":"#06142b"'],
.elementor-section.elementor-section-height-min-height[data-settings*='"background_color":"#0b1e3f"'] {
  background-color: var(--msl-navy);
}

/* --------------------------------------------------------------------------
   7. NAV MENU — elementor-widget-nav-menu
   מפה font ל-Heebo, weights כקיט
   -------------------------------------------------------------------------- */

.elementor-widget-nav-menu .elementor-nav-menu a.elementor-item {
  font-family: var(--msl-font);
  font-size: var(--msl-size-small);
  font-weight: var(--msl-w-bold);
  letter-spacing: var(--msl-ls-tight);
  color: var(--msl-ink-strong);
}

.elementor-widget-nav-menu .elementor-nav-menu a.elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu a.elementor-item.elementor-item-active {
  color: var(--msl-amber);
}

/* --------------------------------------------------------------------------
   8. IMAGE — elementor-widget-image
   border-radius עקבי לפי tokens
   -------------------------------------------------------------------------- */

.elementor-widget-image img {
  border-radius: var(--msl-r);
}

/* --------------------------------------------------------------------------
   9. POSTS WIDGET — elementor-widget-posts
   כותרות בסקאלת הקיט
   -------------------------------------------------------------------------- */

.elementor-widget-posts .elementor-post__title a {
  font-family: var(--msl-font);
  font-weight: var(--msl-w-bold);
  color: var(--msl-ink-strong);
  text-decoration: none;
}

.elementor-widget-posts .elementor-post__title a:hover {
  color: var(--msl-amber-deep);
}

.elementor-widget-posts .elementor-post__excerpt p {
  font-family: var(--msl-font);
  font-size: var(--msl-size-small);
  color: var(--msl-muted);
  line-height: var(--msl-lh-normal);
}

/* --------------------------------------------------------------------------
   10. GLOBAL ELEMENTOR FONT OVERRIDE
   כל טקסט שעדיין לא מוגדר — Heebo כ-fallback
   -------------------------------------------------------------------------- */

.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget {
  font-family: var(--msl-font);
}