/* =============================================================================
   rtl-ar.css — Arabic locale layout only (html[dir=rtl] / lang=ar)
   Pins hero/title/CTA/dock RTL. Does not change glass, chrome, or LTR locales.
   v=20260906rtlar2
   ============================================================================= */

html[dir="rtl"],
html[lang="ar"] {
  direction: rtl;
  overflow-x: clip;
}

/* Critical: chrome-lock hides the sprite with left:-100vw. Under RTL that
   expands scrollWidth to ~2× viewport; mobile browsers start at scrollX=-100vw
   and show a blank half — Arabic content looks “not seen”. Keep it clipped
   at the origin instead (sprite stays unpainted via clip/opacity). */
html[dir="rtl"] body svg.icon-sprite,
html[dir="rtl"] svg.icon-sprite,
html[lang="ar"] body svg.icon-sprite,
html[lang="ar"] svg.icon-sprite {
  left: 0 !important;
  right: auto !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
}

/* Prefer Arabic-capable faces; keep brand stack as fallback */
html[dir="rtl"] body {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
}

html[dir="rtl"] body h1,
html[dir="rtl"] body h2,
html[dir="rtl"] body h3,
html[dir="rtl"] body .it-kicker,
html[dir="rtl"] body .eyebrow,
html[dir="rtl"] body .btn,
html[dir="rtl"] body .hero-h1-line,
html[dir="rtl"] body #hero-title,
html[dir="rtl"] body #pricing-page-title,
html[dir="rtl"] body #page-intro-title {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Montserrat, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

html[dir="rtl"] .zatra-lang-switcher {
  justify-content: flex-start;
}

html[dir="rtl"] main {
  direction: rtl;
  unicode-bidi: embed;
}

html[dir="rtl"] main input,
html[dir="rtl"] main textarea,
html[dir="rtl"] main select {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .zatra-breadcrumbs .zatra-breadcrumb-list {
  padding-inline-start: 0;
}

/* --------------------------------------------------------------------------
   Split / home heroes — keep copy in its column; never paint over the photo
   -------------------------------------------------------------------------- */
html[dir="rtl"] body .it-split-hero,
html[dir="rtl"] body #page-overview.it-split-hero,
html[dir="rtl"] body.home-page.home-page--prune #main .it-split-hero,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero {
  overflow: hidden !important;
  isolation: isolate !important;
}

html[dir="rtl"] body .it-split-hero-copy,
html[dir="rtl"] body.home-page.home-page--prune #main .it-split-hero-copy,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero .it-split-hero-copy,
html[dir="rtl"] body .hero-copy,
html[dir="rtl"] body.pricing-page .pricing-hero .hero-copy {
  align-items: flex-start !important;
  text-align: right !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  z-index: 2 !important;
  position: relative !important;
}

html[dir="rtl"] body .it-split-hero-media,
html[dir="rtl"] body.home-page.home-page--prune #main .it-split-hero-media,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero .it-split-hero-media {
  z-index: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[dir="rtl"] body #hero-title,
html[dir="rtl"] body.home-page #hero-title,
html[dir="rtl"] body.home-page.home-page--prune #main #hero-title,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero #hero-title,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero #hero-title.hero-h1-five,
html[dir="rtl"] body #pricing-page-title,
html[dir="rtl"] body #page-intro-title,
html[dir="rtl"] body .it-split-hero h1,
html[dir="rtl"] body .page-h1-stack {
  text-align: right !important;
  align-self: flex-start !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

/* Critical: EN hero lines use nowrap; Arabic must wrap or it floods the photo */
html[dir="rtl"] body #hero-title .hero-h1-line,
html[dir="rtl"] body.home-page #hero-title .hero-h1-line,
html[dir="rtl"] body.home-page.home-page--prune #main #hero-title .hero-h1-line,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero #hero-title .hero-h1-line,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero #hero-title .hero-h1-line--lead,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero #hero-title .hero-h1-line--accent,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero #hero-title.hero-h1-five .hero-h1-line,
html[dir="rtl"] body #pricing-page-title .hero-h1-line,
html[dir="rtl"] body #page-intro-title .hero-h1-line,
html[dir="rtl"] body .page-h1-stack .hero-h1-line {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: right !important;
}

html[dir="rtl"] body .it-kicker,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero .it-kicker,
html[dir="rtl"] body .it-split-hero-lede,
html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero .it-split-hero-lede,
html[dir="rtl"] body .it-split-hero-actions,
html[dir="rtl"] body .it-split-hero-contact,
html[dir="rtl"] body .hero-cta-micro,
html[dir="rtl"] body .hero-support,
html[dir="rtl"] body .hero-ctas,
html[dir="rtl"] body .section-head,
html[dir="rtl"] body.home-page.home-page--prune #main .section-head {
  text-align: right !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  white-space: normal !important;
  max-width: 100% !important;
}

html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero .it-kicker {
  white-space: normal !important;
}

html[dir="rtl"] body .it-split-hero-actions,
html[dir="rtl"] body .hero-ctas,
html[dir="rtl"] body.home-page.home-page--prune #main .it-split-hero-actions {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

/* Flip LTR chevrons / arrows inside CTAs */
html[dir="rtl"] body .btn svg,
html[dir="rtl"] body .hero-path-arrow,
html[dir="rtl"] body .it-split-hero-actions .btn svg {
  transform: scaleX(-1);
}

/* Asymmetric LTR rail padding → logical start */
html[dir="rtl"] body.home-page.home-page--prune #main .it-split-hero-copy {
  padding-inline: max(var(--container-x, clamp(18px, 4vw, 34px)), calc((100vw - var(--max, 1200px)) / 2)) clamp(1.15rem, 3vw, 2.25rem) !important;
  padding-block: clamp(1.65rem, 3.8vw, 2.85rem) !important;
}

/* Direct-answer / pathway cards */
html[dir="rtl"] body .da-split,
html[dir="rtl"] body .da-copy,
html[dir="rtl"] body .da-after,
html[dir="rtl"] body .pathway-card,
html[dir="rtl"] body .section-head p,
html[dir="rtl"] body .da-route,
html[dir="rtl"] body .da-legal,
html[dir="rtl"] body .da-more {
  text-align: right !important;
}

html[dir="rtl"] body .da-route-cards,
html[dir="rtl"] body .pathway-grid {
  direction: rtl;
}

/* Trust row / cards */
html[dir="rtl"] body .hero-trust-row,
html[dir="rtl"] body .hero-trust-item .meta {
  text-align: right !important;
}

/* Pricing path chooser arrows */
html[dir="rtl"] body .hero-path {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] body .hero-path-copy {
  text-align: right !important;
}

/* Tables keep readable RTL */
html[dir="rtl"] body table {
  direction: rtl;
}

html[dir="rtl"] body th,
html[dir="rtl"] body td {
  text-align: right !important;
}

/* Logo object-position stays brand-left in chrome; do not flip header chrome */

/* WhatsApp / Maureen docks — mirror to inline-start (already partially in site-wa / viola) */
html[dir="rtl"] body .pricing-wa-dock,
html[dir="rtl"] body .viola-desk-panel {
  right: auto !important;
  left: max(16px, env(safe-area-inset-left, 0px)) !important;
}

html[dir="rtl"] body .viola-desk-live {
  right: auto !important;
  left: -2px !important;
}

/* Mobile: keep centred stack, but allow wrap + Arabic metrics */
@media (max-width: 980px) {
  html[dir="rtl"] body .it-split-hero-copy,
  html[dir="rtl"] body.home-page.home-page--prune #main .it-split-hero-copy,
  html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero .it-split-hero-copy,
  html[dir="rtl"] body .hero-copy {
    align-items: center !important;
    text-align: center !important;
    overflow: visible !important;
    padding-inline: var(--zatra-mobile-gutter, clamp(18px, 4vw, 34px)) !important;
  }

  html[dir="rtl"] body #hero-title,
  html[dir="rtl"] body.home-page #hero-title,
  html[dir="rtl"] body.home-page.home-page--prune #main #hero-title,
  html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero #hero-title,
  html[dir="rtl"] body #pricing-page-title,
  html[dir="rtl"] body #page-intro-title,
  html[dir="rtl"] body #hero-title .hero-h1-line,
  html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero #hero-title .hero-h1-line,
  html[dir="rtl"] body #pricing-page-title .hero-h1-line,
  html[dir="rtl"] body #page-intro-title .hero-h1-line,
  html[dir="rtl"] body .page-h1-stack .hero-h1-line {
    text-align: center !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    display: block !important;
    width: 100% !important;
  }

  html[dir="rtl"] body .it-kicker,
  html[dir="rtl"] body.home-page.home-page--prune #main #page-overview.it-split-hero .it-kicker,
  html[dir="rtl"] body .it-split-hero-lede,
  html[dir="rtl"] body .it-split-hero-actions,
  html[dir="rtl"] body .hero-cta-micro,
  html[dir="rtl"] body .hero-support,
  html[dir="rtl"] body .hero-ctas {
    text-align: center !important;
    align-self: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
}