/* ──────────────────────────────────────────────────────────────────────
   RTL overrides — loaded only on /ar/ pages (via <link> in /ar/ HTML
   shells). Pairs with home.css; does not duplicate any non-RTL rule.

   Architecture:
     1. Tajawal font import
     2. dir="rtl" body baseline (font-family + line-height for Arabic)
     3. Common-chrome overrides (navbar, footer, CtaStrip, mobile menu)
     4. Page-specific overrides added incrementally in Track A sessions

   Numerals stay Western — no need to override CSS for digit shaping.
   ────────────────────────────────────────────────────────────────────── */

/* Tajawal font is now self-hosted via /css/tajawal.css (loaded from AR
   HTML shells alongside this file). Eliminates the Google Fonts round-trip
   on every AR page (saved ~200-400ms LCP on mobile). 2026-05-13. */

/* ── Body baseline ── */
[dir="rtl"] body {
  font-family: 'Tajawal', 'Outfit', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
}

/* Latin tokens inside Arabic prose — keep them in Outfit for visual
   consistency with the English version of the brand. Wrap inline in
   <span dir="ltr"> or <bdi>. */
[dir="rtl"] [dir="ltr"],
[dir="rtl"] bdi {
  font-family: 'Outfit', sans-serif;
  font-feature-settings: "ss01" on;
}

/* ── Arabic shaping fix — letter-spacing breaks ligatures ──────────
   Latin headings/eyebrows use positive em-based letter-spacing for
   visual rhythm (0.18em / 0.22em on uppercase eyebrows, -0.025em on
   tight h2 titles). These values are catastrophic for Arabic — they
   literally insert pixels between glyphs and break contextual joining
   because the shaper sees the glyphs as detached.

   `!important` is legitimate here: there is no scenario where Arabic
   text should carry positive letter-spacing, and several standalone
   pages (faq/press/insights) carry inline <style> blocks loaded
   AFTER rtl.css with same specificity as our override. Forcing the
   reset is the only reliable path.

   Latin tokens wrapped in [dir="ltr"]/bdi keep their tight tracking.
   ──────────────────────────────────────────────────────────────── */
[dir="rtl"],
[dir="rtl"] * {
  letter-spacing: normal !important;
}
[dir="rtl"] [dir="ltr"],
[dir="rtl"] bdi {
  letter-spacing: -0.01em !important;
}

/* ── Hero font-family override — .dz-hero forces var(--dz-font)
   which is Outfit. On /ar/ pages that loses Arabic shaping because
   Outfit has no Arabic glyphs and the system fallback (Segoe / SF)
   doesn't match the Tajawal voice. Restore Tajawal for Arabic
   descendants; keep Latin tokens (wrapped in [dir="ltr"]/bdi) in
   Outfit. ─────────────────────────────────────────────────────── */
[dir="rtl"] .dz-hero,
[dir="rtl"] .dz-hero :not([dir="ltr"]):not(bdi) {
  font-family: 'Tajawal', 'Outfit', system-ui, sans-serif;
}

/* ── Common chrome — Navbar ── */
[dir="rtl"] .dz-navbar__cta {
  margin-right: 0;
  margin-left: 16px;
}
[dir="rtl"] .dz-navbar__brand img {
  margin-left: 0;
  margin-right: 0;
}

/* ── Common chrome — Footer ── */
[dir="rtl"] .ftr {
  text-align: right;
}
[dir="rtl"] .ftr-lang {
  /* Toggle reads "EN | العربية" left-to-right even in RTL context */
  direction: ltr;
}

/* ── Common chrome — CtaStrip ── */
[dir="rtl"] .dz-cta__step-num {
  margin-left: 14px;
  margin-right: 0;
}
[dir="rtl"] .dz-cta__submit svg {
  transform: scaleX(-1);  /* arrow points left in RTL */
}

/* ── Common chrome — Hero ── */
[dir="rtl"] .dz-hero__stage-progress {
  /* Progress bar fills right-to-left */
  transform: scaleX(-1);
}

/* ── Brand wordmark always LTR ── */
[dir="rtl"] .dz-hero__wordmark,
[dir="rtl"] .dz-navbar__brand-text {
  direction: ltr;
  unicode-bidi: embed;
}

/* ── Product names — italic + Latin even in Arabic ── */
[dir="rtl"] .dz-product-name {
  direction: ltr;
  font-style: italic;
  font-family: 'Outfit', sans-serif;
}

/* ── Buttons: arrow icons flip ── */
[dir="rtl"] .dz-btn svg.dz-btn__arrow,
[dir="rtl"] .dz-cta__step-arrow {
  transform: scaleX(-1);
}

/* ── Mobile menu drawer slides from right (already does; verify) ── */
/* No override needed — the drawer is already direction-agnostic. */

/* ── Page-specific overrides will be added in Track A sessions ── */

/* ──────────────────────────────────────────────────────────────────────
   HERO — RTL overrides (Session 3, /ar/index.html)
   ──────────────────────────────────────────────────────────────────────
   The English hero has the 3D model + StageBracket on the RIGHT and
   the copy column on the LEFT. css/hero.css positions them with
   physical left/right values, so RTL doesn't auto-mirror. Here we
   flip the scene, the bracket, the vignette gradient, and the
   content padding so the Arabic hero reads naturally right-to-left:
     · Copy column → RIGHT (already happens via natural text-align in
       a max-width container; just need to flip its padding so the
       breathing-space sits against the left edge instead of right).
     · 3D scene  → LEFT
     · Bracket   → LEFT (anchored against the model on the inside)
     · Vignette  → RIGHT (tints the column where the text sits)
   ────────────────────────────────────────────────────────────────────── */

/* Scene: flip the inset box. Original: right:8%; left:32%
   (scene covers the right two-thirds). Mirrored: right:32%; left:8%. */
[dir="rtl"] .dz-hero__scene {
  right: 32%;
  left: 8%;
}

/* Bracket: anchor to the LEFT edge instead of right; mirror the
   transform-origin so the 0.78 scale doesn't drift the card. */
[dir="rtl"] .dz-bracket {
  right: auto;
  left: 56px;
  transform-origin: top left;
}

/* Vignette: mirror the dark-gradient strip to the RIGHT side so it
   sits behind the Arabic copy column. The gradient direction also
   flips (90deg → 270deg) so navy starts at the right edge. */
[dir="rtl"] .dz-hero__vignette {
  left: auto;
  right: 0;
  background: linear-gradient(
    270deg,
    var(--dz-navy-deep) 0%,
    rgba(26,45,62,0.7) 50%,
    rgba(26,45,62,0.1) 85%,
    transparent 100%
  );
}

/* Content column padding: flip so the larger inset sits on the LEFT
   (away from the right viewport edge in RTL). Original (LTR):
     padding: clamp(120-180) 48px clamp(180-260) clamp(72-140)
                 top         right    bottom         left
   Mirrored (RTL):
     padding: clamp(120-180) clamp(72-140) clamp(180-260) 48px
                 top         right          bottom         left

   max-width is left at the English clamp(620, 38vw, 820) — widening
   it pushes content into the scene area; the font-size reduction
   below handles the wrap density instead. */
[dir="rtl"] .dz-hero__content {
  padding: clamp(120px, 12vh, 180px) clamp(72px, 5vw, 140px) clamp(180px, 18vh, 260px) 48px;
}

/* Stage Explorer + StageServices pills — allow wrapping in RTL so
   longer Arabic service names don't overflow their fixed-width
   pill containers. The EN names are typically 18-25 chars and fit
   neatly with `white-space: nowrap`; some Arabic equivalents are
   longer (Latin acronyms like MEP get expanded contextually) and
   need to wrap onto 2 lines rather than burst the pill border. */
[dir="rtl"] .dz-bracket__pill,
[dir="rtl"] .dz-bracket__pill-link {
  white-space: normal;
  line-height: 1.35;
  text-align: right;
}
[dir="rtl"] .dz-svc-explorer__service-name {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Clients marquee — force LTR on the track in RTL pages.
   ---------------------------------------------------------------
   The marquee animation in home.css uses `translateX(0) → (-50%)`
   which works in LTR because the track's left edge aligns with
   the viewport's left edge (set 1 visible, set 2 to the right;
   sliding left brings set 2 into set 1's place — seamless loop).

   In RTL the track's right edge aligns to the viewport's right
   edge instead, so animating left exposes empty space on the
   right (only ~3 of 8 logos visible at any frame).

   Logo images carry no reading direction, so forcing the track
   to behave like LTR is the cleanest fix — same animation, same
   loop math, no keyframe duplication. Children below stay in
   the natural LTR flex order (logo 0 leftmost, logo 15 rightmost).
   ---------------------------------------------------------------- */
[dir="rtl"] .dz-clients-marquee__track,
[dir="rtl"] .dz-clients-marquee__viewport {
  direction: ltr;
}

/* Hero title — soften font-size and loosen the 18ch ceiling for AR.
   The English headline is ~4 short words at 88px; the AR equivalent
   is ~10 words at the same size, which wraps too aggressively. The
   override drops the font ceiling ~18% and lets each line run wider. */
[dir="rtl"] .dz-hero__title {
  font-size: clamp(34px, 3.6vw, 72px);
  max-width: 28ch;
  line-height: 1.18;
}

/* Mobile (≤776px) — vertical stack, scene below copy. The English
   rule sets `padding: 120px 24px 24px 32px` (asymmetric left padding).
   Mirror the asymmetry. */
@media (max-width: 776px) {
  [dir="rtl"] .dz-hero__content {
    padding: 120px 32px 24px 24px;
    margin-right: 0;
  }
}