/* =========================================================================
   Helmara - RTL / Arabic localization overrides
   Loaded only on Arabic pages. Does NOT duplicate landing.css.
   Scoped to html[dir="rtl"].
   ========================================================================= */

html[dir="rtl"] {
  /* Tajawal: geometric modern Arabic that pairs with League Spartan.
     Stronger SaaS/marketing character than the previous Noto Sans Arabic default. */
  --pp-font-arabic: "Tajawal", "League Spartan", system-ui, sans-serif;
}

/*
  Many component styles hardcode League Spartan (no Arabic glyphs), which
  forced system Arabic fallbacks for body copy. Apply Tajawal broadly on
  Arabic pages, then carve out Latin-only brand/numeral exceptions.
*/
html[dir="rtl"] body,
html[dir="rtl"] body *:not(script):not(style):not(svg):not(path):not(circle):not(ellipse):not(line):not(polyline):not(polygon):not(rect):not(g):not(defs):not(filter):not(feGaussianBlur):not(feMerge):not(feMergeNode):not(feFlood):not(feComposite):not(feOffset):not(feColorMatrix):not(stop):not(linearGradient):not(radialGradient):not(clipPath):not(mask):not(use):not(image) {
  font-family: var(--pp-font-arabic) !important;
  letter-spacing: 0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .pp-display {
  letter-spacing: 0;
}

/* Latin brand wordmark + numerals stay League Spartan */
html[dir="rtl"] .brand-logo,
html[dir="rtl"] .brand-logo *,
html[dir="rtl"] .lang-switch,
html[dir="rtl"] .lang-switch *,
html[dir="rtl"] .lang-switch__latin,
html[dir="rtl"] .pricing-select__num,
html[dir="rtl"] .pricing-cell__price,
html[dir="rtl"] .whatsapp__stat-number,
html[dir="rtl"] .how-step__number {
  font-family: "League Spartan", system-ui, sans-serif !important;
}

/* Eyebrows / uppercase labels: Arabic must not letter-space or uppercase */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .module-card__cues span,
html[dir="rtl"] .module-card__badge,
html[dir="rtl"] .pricing-select__menu-title,
html[dir="rtl"] .pricing-cell__badge,
html[dir="rtl"] .pricing-select__label,
html[dir="rtl"] .whatsapp__workflow-label,
html[dir="rtl"] .site-footer__col h3,
html[dir="rtl"] .hero__eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .pp-display,
html[dir="rtl"] .hero__heading,
html[dir="rtl"] .hero__body,
html[dir="rtl"] .problem__header h2,
html[dir="rtl"] .how-it-works__heading,
html[dir="rtl"] .modules-section__header h2,
html[dir="rtl"] .module-card h3,
html[dir="rtl"] .connected-automation__heading,
html[dir="rtl"] .whatsapp__heading,
html[dir="rtl"] .pricing__header h2,
html[dir="rtl"] .faq__header h2,
html[dir="rtl"] .final-cta__heading {
  letter-spacing: 0;
}

/* Arabic display needs a touch more line-height than Latin League Spartan.
   Tajawal has no 600 weight — use 700 for display so glyphs stay crisp. */
html[dir="rtl"] .pp-display,
html[dir="rtl"] .hero__heading,
html[dir="rtl"] h1.pp-display {
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

html[dir="rtl"] .hero__body {
  line-height: 1.75;
  max-width: 42ch;
}

/* Language switcher (crawlable anchor; replaces temporary locale-toggle) */
html[dir="rtl"] .lang-switch,
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--pp-border);
  background: var(--pp-elevated);
  color: var(--pp-text-3);
  font-family: "League Spartan", "Tajawal", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

html[dir="rtl"] .lang-switch {
  font-family: "League Spartan", system-ui, sans-serif;
  letter-spacing: 0.04em;
}

.lang-switch:hover {
  border-color: var(--pp-border-s);
  background: rgba(148, 163, 184, 0.12);
  color: var(--pp-text);
}

/* Directional CTA / link arrows */
html[dir="rtl"] .btn-cta-icon,
html[dir="rtl"] .whatsapp__workflow-arrow,
html[dir="rtl"] .connected-automation__link span[aria-hidden="true"] {
  transform: scaleX(-1);
}

html[dir="rtl"] .btn-cta {
  flex-direction: row;
}

/* How-it-works step borders: prefer logical sides under RTL */
@media (min-width: 1024px) {
  html[dir="rtl"] .how-step:not(:first-child) {
    border-left: 0;
    border-right: 1px solid #e5ddd0;
    padding-left: 0;
    padding-right: 2.5rem;
  }

  html.dark[dir="rtl"] .how-step:not(:first-child) {
    border-right-color: var(--pp-border);
  }

  html[dir="rtl"] .how-step:not(:last-child) {
    padding-right: 0;
    padding-left: 2.5rem;
  }
}

@media (min-width: 1280px) {
  html[dir="rtl"] .how-step:not(:first-child) {
    padding-right: 3rem;
  }
}

/* Connected automation copy alignment */
@media (min-width: 1024px) {
  html[dir="rtl"] .connected-automation__copy {
    margin-left: 0;
    margin-right: auto;
  }
}

/* FAQ / pricing list markers that used physical padding */
html[dir="rtl"] .faq-item__answer,
html[dir="rtl"] .pricing-cell__features li,
html[dir="rtl"] .module-card__caps li,
html[dir="rtl"] .problem-card ul li,
html[dir="rtl"] .whatsapp__benefits li {
  /* Rely on existing flex layouts; zero any LTR-only letter spacing */
  letter-spacing: 0;
}

/* Do NOT mirror logos or product screenshots */
html[dir="rtl"] .brand-logo img,
html[dir="rtl"] .hero__dashboard img,
html[dir="rtl"] .hero__tiles img,
html[dir="rtl"] .hero__mobile-tiles img,
html[dir="rtl"] .hero__phone-badge img,
html[dir="rtl"] .module-visual img,
html[dir="rtl"] .connected-automation__visual img,
html[dir="rtl"] .whatsapp__mocks img,
html[dir="rtl"] .problem-aside img {
  transform: none;
}

/* Pricing select check stays LTR-safe; numbers stay latin */
html[dir="rtl"] .pricing-select__num,
html[dir="rtl"] .pricing-cell__price,
html[dir="rtl"] .whatsapp__stat-number,
html[dir="rtl"] .how-step__number {
  font-family: "League Spartan", system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Mobile menu explore chevron stays geometric (non-directional) */

/* Skip link readable in RTL */
html[dir="rtl"] .skip-link {
  letter-spacing: 0;
}

/* Legal draft callout labels (privacy / terms / cookies) */
html[dir="rtl"] .pv-todo::before,
html[dir="rtl"] .tm-todo::before,
html[dir="rtl"] .ck-todo::before {
  content: "مطلوب مراجعة قانونية";
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--pp-font-arabic);
}

html[dir="rtl"] .pv-todo,
html[dir="rtl"] .tm-todo,
html[dir="rtl"] .ck-todo {
  font-family: var(--pp-font-arabic);
}

/* -------------------------------------------------------------------------
   Navbar — Arabic labels are wider than English. Compact capsule was
   collapsing side columns so logo/nav/login/CTA crushed together.
   Keep the EN 1fr-auto-1fr model, widen the capsule slightly, enforce
   gutters toward the nav, and open internal gaps for Tajawal.
   ------------------------------------------------------------------------- */
html[dir="rtl"] .header-login-link,
html[dir="rtl"] .header-signup-link,
html[dir="rtl"] .primary-nav__link {
  white-space: nowrap;
}

html[dir="rtl"] .site-header__brand,
html[dir="rtl"] .brand-logo,
html[dir="rtl"] .site-header__actions,
html[dir="rtl"] .header-auth-links {
  min-width: max-content;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  html[dir="rtl"] .site-header__row {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 1.25rem;
  }

  /* Guaranteed breathing room between clusters even when 1fr shrinks */
  html[dir="rtl"] .site-header__brand {
    padding-inline-end: 0.85rem;
  }

  html[dir="rtl"] .site-header__actions {
    gap: 1rem;
    padding-inline-start: 0.85rem;
  }

  html[dir="rtl"] .primary-nav {
    gap: 1.9rem;
  }

  html[dir="rtl"] .header-auth-links {
    gap: 1.25rem;
  }

  html[dir="rtl"] .header-login-link {
    padding-inline: 0.9rem;
  }

  html[dir="rtl"] .header-signup-link {
    padding-inline: 1.25rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact {
    /* EN uses ~1120px; Arabic needs more room for longer labels */
    max-width: min(1240px, calc(100% - 1.5rem));
  }

  html[dir="rtl"] .site-header__bar.is-compact .site-header__inner {
    padding-inline: 1.35rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .site-header__row {
    column-gap: 1.1rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .site-header__brand {
    padding-inline-end: 0.75rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .site-header__actions {
    gap: 1rem;
    padding-inline-start: 0.75rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .primary-nav {
    gap: 1.7rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .primary-nav__link {
    font-size: 14px;
  }

  html[dir="rtl"] .site-header__bar.is-compact .header-auth-links {
    gap: 1.35rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .header-login-link {
    padding-inline: 0.85rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .header-signup-link {
    padding-inline: 1.2rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .lang-switch {
    padding-inline: 0.7rem;
  }
}

@media (min-width: 1280px) {
  html[dir="rtl"] .primary-nav {
    gap: 2rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact {
    max-width: min(1280px, calc(100% - 1.5rem));
  }

  html[dir="rtl"] .site-header__bar.is-compact .primary-nav {
    gap: 1.85rem;
  }

  html[dir="rtl"] .site-header__bar.is-compact .header-auth-links {
    gap: 1.4rem;
  }
}