/* =========================================
   RTL overrides for Hebrew (/he/)
   - Fixes: text alignment + logo carousel loop
   ========================================= */

html[dir="rtl"]{
  --serif: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sans:  "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html[dir="rtl"] body{
  direction: rtl;
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  text-align: right; /* default for Hebrew */
}

/* Keep the language pill readable (EN / עברית / FR) */
html[dir="rtl"] .lang-switcher{
  direction: ltr;
}

/* Dropdown alignment */
html[dir="rtl"] .nav-sub{
  left: auto;
  right: 0;
}

/* HERO: right-align copy + buttons */
html[dir="rtl"] .hero-copy{
  text-align: right;
}

html[dir="rtl"] .hairline{
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] .hero-actions{
  justify-content: flex-end;
}

/* When the hero is a flex column on desktop, keep the CTA anchored to the right */
@media (min-width: 980px){
  html[dir="rtl"] .cta{
    align-self: flex-end;
  }
}

/* Fix desktop rules in main CSS that force LEFT alignment */
@media (min-width: 900px){
  html[dir="rtl"] .section-selective h3,
  html[dir="rtl"] .section-selective .intro{
    text-align: right !important;
  }

  html[dir="rtl"] .manifesto h3{
    text-align: right !important;
  }

  html[dir="rtl"] .principles{
    justify-content: flex-end !important;
  }

  html[dir="rtl"] .section-disappoint h3{
    text-align: right !important;
  }

  html[dir="rtl"] .section-approach h3,
  html[dir="rtl"] .section-approach .intro{
    text-align: right !important;
  }

  html[dir="rtl"] .approach-note{
    text-align: right !important;
  }

  html[dir="rtl"] .section-tools h3,
  html[dir="rtl"] .section-tools .intro{
    text-align: right !important;
  }

  html[dir="rtl"] .logo-note{
    text-align: right !important;
  }

  html[dir="rtl"] .section-secondary h3,
  html[dir="rtl"] .section-secondary .intro{
    text-align: right !important;
  }

  html[dir="rtl"] .section-investment h3,
  html[dir="rtl"] .section-investment .intro{
    text-align: right !important;
  }

  html[dir="rtl"] .investment-note{
    text-align: right !important;
  }

  html[dir="rtl"] .section-consult h3,
  html[dir="rtl"] .section-consult .intro{
    text-align: right !important;
  }
}


/* Caption under the skin structure figure */
html[dir="rtl"] .disappoint-caption{
  text-align: right !important;
}

/* Lists: move bullets/icons to the RIGHT */
html[dir="rtl"] .arrive-list li{
  padding-left: 0;
  padding-right: 22px;
}
html[dir="rtl"] .arrive-list li::before{
  left: auto;
  right: 0;
}

html[dir="rtl"] .consult-list li{
  padding-left: 0;
  padding-right: 22px;
}
html[dir="rtl"] .consult-list li::before{
  left: auto;
  right: 0;
}

/* Filter icons (✓ / –) */
html[dir="rtl"] .filter.filter--good li,
html[dir="rtl"] .filter.filter--bad li{
  padding-left: 0;
  padding-right: 34px;
}
html[dir="rtl"] .filter.filter--good li::before,
html[dir="rtl"] .filter.filter--bad li::before{
  left: auto;
  right: 0;
}

/* Pillars icons (Our philosophy is different) */
html[dir="rtl"] .pillars li{
  padding-left: 0;
  padding-right: 44px;
}
html[dir="rtl"] .pillars li::before{
  left: auto;
  right: 14px;
}

/* Section heading underline alignment (arrive section uses a short underline) */
html[dir="rtl"] .section-arrive h3::after{
  margin-left: auto;
  margin-right: 0;
}



/* Floating WhatsApp: left side (all Hebrew pages, desktop + mobile) */
html[dir="rtl"] .whatsapp-sticky{
  right: auto !important;
  left: 22px !important;
}

@media (max-width: 820px){
  html[dir="rtl"] .pricing-card .investment-list li,
  html[dir="rtl"] .program-body .investment-list li,
  html[dir="rtl"] .investment-list li{
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-direction: row !important;   /* force NOT reversed */
    direction: rtl !important;
  }

  html[dir="rtl"] .investment-list .label{
    order: 1 !important;
    text-align: right !important;
  }

  html[dir="rtl"] .investment-list .value{
    order: 2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    margin-inline-start: auto !important;
  }
}