/* ============================================================
   RTL + Arabic typography overrides for East River Digital
   Loaded AFTER style.css on every page in /ar/
   - Switches the type system to IBM Plex Sans Arabic
   - Tweaks RTL-specific spacing / arrow direction
   - Forces dashboards & numeric blocks to stay LTR (they're
     universally read left-to-right, even in Arabic UIs)
   ============================================================ */

/* ---- Arabic web font ---- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ---- Type system swap ---- */
html[lang="ar"] {
  --font-sans: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'IBM Plex Sans Arabic', 'DM Serif Display', Georgia, serif;
  --font-mono: 'IBM Plex Sans Arabic', 'Inter', ui-monospace, monospace;
}
html[dir="rtl"] body,
html[dir="rtl"] {
  font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
  text-align: right;
}

/* Headings — heavier weight stands in for the serif emphasis we get in English */
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"] .hero__title,
html[dir="rtl"] .platform__title,
html[dir="rtl"] .clients__title,
html[dir="rtl"] .tabs-section__title,
html[dir="rtl"] .globe__title,
html[dir="rtl"] .final-cta__title,
html[dir="rtl"] .stage-card__title {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}

/* Italic isn't a natural Arabic convention — emphasize via color instead */
html[dir="rtl"] em,
html[dir="rtl"] i.em {
  font-style: normal;
  color: var(--emerald-deep, #00935A);
  font-weight: 600;
}

/* Numbers / tabular figures — Hindu-Arabic digits read LTR even in RTL */
html[dir="rtl"] [data-count-to],
html[dir="rtl"] .hc-card__num,
html[dir="rtl"] .pillar__stat-num,
html[dir="rtl"] .hc-card__delta,
html[dir="rtl"] .hc-badge__val {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* Dashboard / collage cards — stay LTR (data layouts read LTR universally) */
html[dir="rtl"] .hc-card,
html[dir="rtl"] .hc-card__head,
html[dir="rtl"] .hc-card__sub,
html[dir="rtl"] .hc-card__chips,
html[dir="rtl"] .hc-chip {
  direction: ltr;
  text-align: left;
}
/* But labels INSIDE the card chip can still be Arabic if we set them so */
html[dir="rtl"] .hc-card__chip,
html[dir="rtl"] .hc-card__period,
html[dir="rtl"] .hc-card__sub-text {
  direction: rtl;
  text-align: right;
}

/* Hero collage floating badges — Arabic labels read RTL */
html[dir="rtl"] .hc-bubble,
html[dir="rtl"] .hc-badge {
  direction: rtl;
  text-align: right;
}

/* Right-pointing arrows in CTA buttons (→) — flip to ← in RTL so they
   still mean "forward / next" for an Arabic reader */
html[dir="rtl"] .btn--primary,
html[dir="rtl"] .btn--outline-dark,
html[dir="rtl"] .link-arrow,
html[dir="rtl"] .duo__cta,
html[dir="rtl"] .pillar__cta {
  direction: rtl;
}
/* Generic "next" SVG icons inside buttons — flip */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .pillar__cta svg,
html[dir="rtl"] .duo__cta svg,
html[dir="rtl"] .stage-card__hint svg,
html[dir="rtl"] .link-arrow svg {
  transform: scaleX(-1);
}

/* Nav layout — flips automatically with dir=rtl, but the actions sit on
   the right in LTR (so logo is left); in RTL we want the inverse */
html[dir="rtl"] .nav__container {
  direction: rtl;
}
html[dir="rtl"] .nav__logo img {
  /* Logo art is direction-agnostic — leave as-is */
}

/* Mobile nav menu — RTL spacing/alignment */
html[dir="rtl"] .nav__mobile-menu {
  direction: rtl;
  text-align: right;
}

/* Footer columns + offices — Arabic flows RTL naturally */
html[dir="rtl"] .footer__container,
html[dir="rtl"] .footer__columns,
html[dir="rtl"] .footer__col,
html[dir="rtl"] .footer__brand,
html[dir="rtl"] .dc-office,
html[dir="rtl"] .footer__offices,
html[dir="rtl"] .footer__bottom,
html[dir="rtl"] .footer__legal {
  direction: rtl;
  text-align: right;
}
/* Address blocks frequently include Latin street names — let them flow LTR
   while sitting inside a RTL container */
html[dir="rtl"] .dc-office__addr,
html[dir="rtl"] .dc-office__phone,
html[dir="rtl"] .footer__bottom p {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

/* ===== Clients marquee — force ENTIRE section to LTR =====
   The marquee is a flex row with width:max-content that animates via
   translateX(-50%). When the parent inherits dir=rtl, the flex row
   reverses, the translateX flips its visual meaning, and the whole
   wall collapses into a broken layout. Fix: pin the marquee wrappers
   AND the tracks to dir=ltr. Only the Arabic title/subtitle inside
   the header is reset back to rtl for correct text shaping. */
html[dir="rtl"] .clients,
html[dir="rtl"] .clients__container,
html[dir="rtl"] .clients__marquee,
html[dir="rtl"] .clients__rows,
html[dir="rtl"] .clients__track,
html[dir="rtl"] .clients__track--left,
html[dir="rtl"] .clients__track--right,
html[dir="rtl"] .clients__track--slow {
  direction: ltr;
}
/* Header text inside the section stays RTL so the Arabic reads correctly */
html[dir="rtl"] .clients__header,
html[dir="rtl"] .clients__title,
html[dir="rtl"] .clients__sub {
  direction: rtl;
  text-align: center;
}

/* Stage cards — content reads RTL but the corner number watermark
   (::after pseudo) is decorative and we want it on the left in RTL */
html[dir="rtl"] .stage-card::after {
  right: auto;
  left: -10px;
}
html[dir="rtl"] .stage-card::before {
  left: auto;
  right: 0;
}
/* Stage-card hover hint sits in the corner — flip its position */
html[dir="rtl"] .stage-card__hint {
  right: auto;
  left: 18px;
}

/* Flip-rail (stage navigator) — connector arrows should point left in RTL
   so "next stage" still feels like the right direction */
html[dir="rtl"] .flip-link__arrow {
  right: auto;
  left: -2px;
  transform: translate(0,-50%) rotate(225deg);
}

/* Globe tooltip — its little caret should still hang below the box */
html[dir="rtl"] .globe__tooltip {
  direction: rtl;
  text-align: center;
}
html[dir="rtl"] .globe__close {
  right: auto;
  left: 18px;
}

/* Form labels / fields on diagnostic / contact pages (used later) —
   ensure form inputs accept Arabic text natively */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  direction: rtl;
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
}
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: left;
}

/* Stat numbers inside pillars — wrapper Arabic, inner number LTR */
html[dir="rtl"] .pillar__stat {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] .pillar__stat-num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Subtle: increase line-height for Arabic body text (Arabic glyphs sit lower) */
html[dir="rtl"] p,
html[dir="rtl"] .hero__subtitle,
html[dir="rtl"] .platform__desc,
html[dir="rtl"] .stage-card__desc,
html[dir="rtl"] .globe__subtitle,
html[dir="rtl"] .globe__desc,
html[dir="rtl"] .final-cta__desc,
html[dir="rtl"] .footer__tagline {
  line-height: 1.7;
}

/* Mobile-specific RTL refinements */
@media (max-width: 760px) {
  html[dir="rtl"] .flip-rail {
    direction: ltr; /* keep numeric rail 01 → 02 → 03 → 04 reading left-to-right */
  }
  html[dir="rtl"] .stage-card__hint {
    display: none; /* already hidden on mobile, but ensure */
  }
}

/* ============================================================
   LANGUAGE SWITCHER (Arabic → English)
   Sits in the top-bar .nav__actions on every /ar/ page, links to
   the English twin in root (../<page>.html). Visible on desktop
   AND mobile. Globe + autonym "English" (best practice: text in
   the destination language, never a flag). Collapses to "EN" on
   the smallest screens so it never crowds the CTA.
   ============================================================ */
html[dir="rtl"] .nav__actions { gap: 10px; }
html[dir="rtl"] .nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border, rgba(10,14,20,0.12));
  border-radius: 999px;
  font-family: 'Inter', sans-serif;   /* Latin label → Inter, not the Arabic face */
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary, #4A5260);
  background: transparent;
  direction: ltr;                       /* "🌐 English" reads left-to-right */
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
html[dir="rtl"] .nav__lang:hover {
  color: var(--ink, #0A0E14);
  border-color: var(--ink, #0A0E14);
  background: rgba(10,14,20,0.03);
}
html[dir="rtl"] .nav__lang__icon { width: 16px; height: 16px; flex-shrink: 0; }
html[dir="rtl"] .nav__lang__abbr { display: none; }   /* full word by default */

/* Tight phones: swap "English" → "EN" so the top bar never overflows */
@media (max-width: 480px) {
  html[dir="rtl"] .nav__lang { padding: 7px 10px; font-size: 0.74rem; gap: 5px; }
  html[dir="rtl"] .nav__lang__full { display: none; }
  html[dir="rtl"] .nav__lang__abbr { display: inline; }
  html[dir="rtl"] .nav__lang__icon { width: 14px; height: 14px; }
}