/* ATCL — Arabic (dir="rtl") layer.
   ────────────────────────────────────────────────────────────────────────
   This file deliberately contains ONLY what the browser cannot mirror on
   its own. It must never grow back into a mirror of the layout sheets.

   The browser already handles, from dir="rtl" alone:
     · flex row order          → never write flex-direction: row-reverse
     · grid column order       → never write flex-direction on a grid
     · text-align: start/end   → never write blanket text-align: right
     · logical properties      → margin/padding/border/inset-inline-*

   What genuinely belongs here:
     1. Arabic typography (family, weight, leading, tracking)
     2. transform mirroring — transforms are NOT direction-aware
     3. animation-direction — marquees translate on the physical X axis
     4. bidi isolation for Latin runs embedded in Arabic
   ──────────────────────────────────────────────────────────────────────── */


/* ═══ 1 · ARABIC TYPOGRAPHY ═══════════════════════════════════════════ */

/* Two families, two roles — mirroring the EN pairing of a display face
   against a text face. NOTE: the Google family is "IBM Plex Sans Arabic";
   "IBM Plex Arabic" does not exist and silently resolves to nothing. */
[dir="rtl"] {
  --font-ar-display: 'IBM Plex Sans Arabic', 'Almarai', system-ui, sans-serif;
  --font-ar-body:    'Almarai', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* Latin numerals throughout — matches how 99.9%, ISO/IEC 27001 and L1/L2
     already appear in the Arabic copy. */
  font-variant-numeric: lining-nums;
}

[dir="rtl"] body {
  font-family: var(--font-ar-body);
  line-height: 1.8;                 /* Arabic body needs more leading than Latin */
}

/* .mono / .eyebrow are JetBrains Mono, which carries no Arabic glyphs — left
   alone, every Arabic label in the nav, HUD and form falls back to whatever
   generic the OS picks. Section 2 puts the mono face back on the runs that
   really are Latin. */
[dir="rtl"] .mono,
[dir="rtl"] .eyebrow {
  font-family: var(--font-ar-body);
}

/* Arabic is cursive — tracking pulls joined letters apart and is the single
   most visible sign of an unadapted Latin design. Off everywhere by default;
   re-enabled below only for runs that are actually Latin. The html prefix
   raises specificity above Tailwind's tracking-[…] utilities on the division
   pages, whose stylesheet is injected after this one. */
html[dir="rtl"] * {
  /* !important is deliberate, not laziness. This is a categorical rule —
     Arabic is cursive, so tracking always breaks the joins — but any base
     rule with two classes (.who-list .wl-k = 0,2,0) out-ranks every
     reasonable [dir="rtl"] selector (0,1,1), and new ones keep appearing.
     Latin runs get their tracking back in section 2 below. */
  letter-spacing: normal !important;
}

/* A lone Arabic word inside an LTR page — the "عربي" language toggle, the
   voice picker — is still cursive and still must not be tracked. */
[lang="ar"] {
  letter-spacing: normal !important;
}

/* Leading scales DOWN as type scales up. The opposite of the usual instinct,
   and the reason the Arabic hero previously read as three floating lines. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .hero-h1,
[dir="rtl"] .section-title,
[dir="rtl"] .contact-title,
[dir="rtl"] .reactor-title {
  font-family: var(--font-ar-display);
  font-weight: 700;
  line-height: 1.3;
}

[dir="rtl"] .hero-h1 {
  font-size: clamp(32px, 5.2vw, 72px);
  line-height: 1.18;                /* display sizes: clamp(38px … 92px) */
}

[dir="rtl"] .section-title,
[dir="rtl"] .contact-title {
  line-height: 1.25;
}

/* Specifically scale down large display headings (e.g. Overview, Ecosystem) on division pages
   The html[dir="rtl"] prefix ensures this out-specifies Tailwind's responsive text classes */
html[dir="rtl"] h2.display {
  font-size: clamp(24px, 3.2vw, 38px) !important;
  line-height: 1.35 !important;
}

/* Small Arabic UI text: keep the weight up so it holds against dark grounds. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .oss-label,
[dir="rtl"] .dcard-cta,
[dir="rtl"] .wl-k,
[dir="rtl"] .office-tag,
[dir="rtl"] .lead-role {
  font-weight: 700;
}


/* ═══ 2 · LATIN RUNS INSIDE ARABIC ════════════════════════════════════ */

/* Codes, versions, telemetry values and brand strings stay Latin and keep
   their monospace treatment + tracking. `unicode-bidi: isolate` (not the old
   `embed`) is what stops a trailing +, %, / or . from jumping to the far side
   of the string. Apply .ltr / <bdi> to the RUN, never to a layout container —
   putting direction:ltr on a flex parent re-reverses its children. */
html[dir="rtl"] .ltr,
html[dir="rtl"] bdi,
[dir="rtl"] .mile-v,
[dir="rtl"] .dcard-code,
[dir="rtl"] .lead-code,
[dir="rtl"] .gcard-mark,
[dir="rtl"] .pstage-node,
[dir="rtl"] .osb-geo,
[dir="rtl"] .osb-clock,
[dir="rtl"] .eco-chip,
[dir="rtl"] .contact-links a,
[dir="rtl"] .office-phone {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.08em !important;
}

/* Decorative Latin-only chrome keeps the English treatment verbatim. */
[dir="rtl"] .ho-l,
[dir="rtl"] .ho-code,
[dir="rtl"] .ho-core-sub,
[dir="rtl"] .layer .mono,
[dir="rtl"] .osr-label {
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0.16em !important;
}


/* ═══ 3 · TRANSFORM MIRRORING ═════════════════════════════════════════ */
/* CSS transforms operate on the physical X axis and are never flipped by
   `dir`. Every translateX and every directional glyph needs a counterpart. */

/* Arrow glyphs. The hover rules must repeat scaleX(-1), because a bare
   `transform: translateX(4px)` on hover would otherwise cancel the flip. */
[dir="rtl"] .arrow {
  display: inline-block;
  transform: scaleX(-1);
}
[dir="rtl"] .btn:hover .arrow,
[dir="rtl"] .ai-send:hover .arrow,
[dir="rtl"] .ci-cta:hover .arrow {
  transform: scaleX(-1) translateX(4px);
}

/* Section dot-nav label — slides out toward the inline-end. */
[dir="rtl"] .oss-label {
  transform: translateX(6px);
}
[dir="rtl"] .oss-item:hover .oss-label,
[dir="rtl"] .oss-item.is-active .oss-label {
  transform: translateX(0);
}

/* FAB tooltips — .dfab-label / .ai-fab-label now sit on the mirrored side
   via inset-inline-*, so only the slide direction needs inverting. */
[dir="rtl"] .dfab-label {
  transform: translateY(-50%) translateX(6px);
}
[dir="rtl"] .ai-fab-label {
  transform: translateY(-50%) translateX(-6px);
}

/* Mobile drawer — .drawer-panel is pinned with inset-inline-end, so under RTL
   it lives on the left and must travel left to leave the viewport. */
[dir="rtl"] .drawer-panel {
  transform: translateX(-100%);
}
[dir="rtl"] .drawer-panel.open {
  transform: translateX(0);
}

/* Constellation hub micro-slides. */
[dir="rtl"] .ap-go,
[dir="rtl"] .cds-go {
  transform: translateX(6px);
}
[dir="rtl"] .ci-tile:hover {
  transform: translateX(-2px);
}


/* ═══ 4 · MARQUEE DIRECTION ═══════════════════════════════════════════ */
/* In RTL, translating to -50% pushes max-content flex containers massively
   off-screen to the left. We use a dedicated positive translation keyframe
   to move them to the right, which is the natural RTL reading direction. */
[dir="rtl"] .eco-track,
[dir="rtl"] .osb-ticker-track,
[dir="rtl"] .ci-mtrack {
  animation-name: marquee-rtl;
  animation-direction: normal;
}
[dir="rtl"] .eco-rail--rev .eco-track {
  animation-direction: reverse;
}
@keyframes marquee-rtl {
  to {
    transform: translateX(50%);
  }
}


/* ═══ 5 · FORM FIELDS ═════════════════════════════════════════════════ */
/* Inputs need an explicit direction: a lone `dir=rtl` ancestor does not set
   the direction of the value a user types. Email stays LTR by nature. */
[dir="rtl"] .cf-field input[type="text"],
[dir="rtl"] .cf-field textarea,
[dir="rtl"] .cf-field select,
[dir="rtl"] .ai-input {
  direction: rtl;
  text-align: start;
}
[dir="rtl"] .cf-field input[type="email"] {
  direction: ltr;
  text-align: start;
}