/* =============================================================================
   ar.css — Arabic (right-to-left) layer, loaded only by /ar/ pages, after
   tokens.css + style.css + effects.css. (v3.8, 2026-11-14)

   Same identity as the English site: the thmanyah serif display + thmanyah
   sans families already carry Arabic glyphs and joining (init/medi/fina), so
   the Arabic pages use the very same fonts, colours and components.

   Rules of thumb used below:
   - Flex/grid layouts mirror by themselves under dir="rtl".
   - Pictures and charts are not language: their geometry stays LTR
     (direction: ltr), except the hero bar chart, which is mirrored so the
     tall bars sit away from the right-aligned headline.
   - Arabic letters connect, so text styles get no letter-spacing, and the
     display sizes get a little more line height for Arabic ascenders/dots.
   ========================================================================== */

html[lang="ar"] {
  /* Latin-only families fall back to thmanyah sans for Arabic text */
  --font-flex:  var(--font-sans-regular);
  --font-inter: var(--font-sans-regular);
}

/* ---- Type -------------------------------------------------------------- */
html[lang="ar"] [class*="t-"] { letter-spacing: 0; }
html[lang="ar"] .t-display,
html[lang="ar"] .t-hero         { line-height: 1.45em; }
html[lang="ar"] .t-heading      { line-height: 1.5em; }
html[lang="ar"] .t-card-heading { line-height: 1.55em; }
html[lang="ar"] .t-body,
html[lang="ar"] .t-title,
html[lang="ar"] .t-title-tight  { line-height: 1.75em; }
/* Latin words inside Arabic copy (SAIS, PDPL, Google Meet) keep their shape */
html[lang="ar"] .latin { font-family: inherit; unicode-bidi: isolate; direction: ltr; }

/* ---- Text alignment that style.css sets to physical "left" -------------- */
html[dir="rtl"] .info-card__title,
html[dir="rtl"] .info-card__body > p,
html[dir="rtl"] .offer-card__text > *,
html[dir="rtl"] .point > span,
html[dir="rtl"] .acc-q,
html[dir="rtl"] .acc-a-inner > p,
html[dir="rtl"] .solution__prose > p,
html[dir="rtl"] .timeline__card > p,
html[dir="rtl"] .sources > p { text-align: right; }

/* ---- Nav ------------------------------------------------------------------ */
html[dir="rtl"] .nav__lang { left: auto; right: 28px; }
html[dir="rtl"] .nav__lang-face { text-decoration: none; }

/* ---- Hero: mirror the bar chart (tall bars move to the left), keep the
        "we are here." label readable -------------------------------------- */
html[dir="rtl"] .hero__fx[data-mirror] { transform: scaleX(-1); }
html[dir="rtl"] .hero__fx[data-mirror] .hero__callout { transform: scaleX(-1); }
@media (max-width: 809.98px) {
  html[dir="rtl"] .hero__fx { margin-right: 0; margin-left: -28px; }
}

/* ---- Pictures keep their composition ------------------------------------ */
html[dir="rtl"] .ticker,
html[dir="rtl"] .solution__art { direction: ltr; }
html[dir="rtl"] .solution__art .ai-tag__label { direction: rtl; }

/* ---- How we work: the step timeline keeps its drawn connector lines;
        the cards and chips themselves read right-to-left ------------------- */
html[dir="rtl"] .tiers__steps { direction: ltr; }
html[dir="rtl"] .tiers__steps .offer-card,
html[dir="rtl"] .tiers__steps .tag { direction: rtl; }

/* ---- FAQ: the +/- icon moves to the left edge ---------------------------- */
html[dir="rtl"] .acc-icon { right: auto; left: 0; }

/* ---- Small physical margins --------------------------------------------- */
html[dir="rtl"] sup.fn { margin-left: 0; margin-right: 1px; }
html[dir="rtl"] .tiers__guide { margin-left: 0; margin-right: 6px; }
@media (max-width: 809.98px) {
  html[dir="rtl"] .tiers__guide { margin-right: 0; }
}

/* ---- "[link]" brackets: single "[" / "]" glyphs would be bidi-mirrored in
        RTL text (showing "]link["); keep them as drawn ---------------------- */
html[dir="rtl"] .nav-link__bracket,
html[dir="rtl"] .footer-link__bracket { direction: ltr; unicode-bidi: isolate; }

/* ---- Language menu: options slide out to the left of the globe ----------- */
html[dir="rtl"] .lang-menu__opts { translate: 6px 0; }
html[dir="rtl"] .lang-menu.is-open .lang-menu__opts { translate: 0 0; }
@media (hover: hover) and (pointer: fine) {
  html[dir="rtl"] .lang-menu:hover .lang-menu__opts { translate: 0 0; }
}
html[lang="ar"] .lang-menu__opt { letter-spacing: 0.06em; }   /* EN / AR are Latin labels */
@media (max-width: 809.98px) {
  html[dir="rtl"] .nav__lang.lang-menu { right: auto; left: 64px; }
  html[dir="rtl"] .lang-menu__opts { translate: -6px 0; }
}