/* ============================================================
   RTL OVERRIDES — loaded only by ar/index.html, after the base
   LTR stylesheets. Flexbox/Grid auto-mirror under dir="rtl";
   these rules fix the handful of literal left/right, margin-left/
   right, and text-align: left/right declarations that don't.
   ============================================================ */

html, body { direction: rtl; }

/* Arabic-appropriate type: IBM Plex Sans Arabic for body/UI text,
   Cairo (Black/ExtraBold) for display headlines — Cairo has real
   900-weight glyphs, matching the bold geometric look of the brand's
   Latin display type (Archivo at wght 900) instead of looking thin.
   Archivo/Instrument Serif have no Arabic glyphs, so they only
   apply now to Latin fragments (numbers, brand/software names,
   the ESAILAN logo mark) inside otherwise-Arabic copy. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&family=Cairo:wght@700;800;900&display=swap');

body {
  font-family: 'IBM Plex Sans Arabic', 'Archivo', Arial, sans-serif;
}

.hero-title, .sec-title, .name-block h1 {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Archivo', Arial, sans-serif;
  /* font-stretch/variation-settings below only exist on Archivo's
     variable-font axes — meaningless (and occasionally distorting)
     on a static Arabic face, so reset them. */
  font-stretch: 100% !important;
  font-variation-settings: normal !important;
  font-weight: 900 !important;
  /* Arabic diacritics/descenders need more vertical room than the
     0.93-0.95 leading tuned for Archivo's Latin metrics — a tight
     line-height here clips or overlaps them (confirmed on live site:
     tanween marks and wrapped second lines were being cut). */
  line-height: 1.35 !important;
  text-transform: none;
}

/* The hero/section title reveal-mask animation clips to a box sized
   for ONE short Latin line. Arabic translations are longer and can
   wrap to 2 lines on narrower screens, so the fixed-height overflow
   clip was cutting off wrapped text and diacritics (confirmed bug:
   a stray "." rendered alone on mobile, and the contact headline's
   two words visually overlapped). Let Arabic headlines size naturally.
   The slide-up reveal still shows via `.hmask`'s own transform. */
.hline, .reveal-line {
  overflow: visible;
  padding-bottom: 0.12em;
}

/* `.serif` (accent words like "unreal.") forces Latin Instrument-Serif
   italic — Cairo has no italic face, so the browser was applying a
   synthetic/faux-italic skew to Arabic glyphs, which visually collided
   with the preceding word (confirmed bug on the contact headline:
   "شيئًا" and "استثنائيًا." overlapped). Arabic has no equivalent
   convention for an italic accent word, so just keep it bold and let
   `.acc`'s orange color carry the emphasis instead. */
.serif {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Archivo', Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

/* `.mono` (eyebrow lines, section kickers, status lines, footer credits)
   forces JetBrains Mono + 0.14em letter-spacing — Mono has no Arabic
   glyphs AND the wide letter-spacing forces gaps between letters even
   where a fallback font does have glyphs, so Arabic text inside any
   `.mono` element rendered as disconnected, broken-looking letters
   (confirmed via a real screenshot, not a caching issue). Numbers/Latin
   labels (SEC.01, timecodes) still use the mono font; only the spacing
   is reset globally since it's what breaks Arabic joining regardless of
   font, and IBM Plex Sans Arabic is added as the fallback for glyphs
   Mono can't render. */
.mono {
  font-family: 'JetBrains Mono', 'IBM Plex Sans Arabic', monospace;
  letter-spacing: 0;
}

/* The `.mono` fix above only wins the cascade where specificity ties —
   several components apply their OWN font-family:var(--font-mono) +
   letter-spacing on top of (and more specific than, or declared after)
   `.mono`, so they kept breaking Arabic letter-joining independently:
   nav links, buttons (confirmed via a real screenshot — "إظهار الإيميل..."
   rendered as disconnected letters), hero stat labels, the vertical
   scroll cue, the credential "شوف الشهادة" link, the lab infra caption,
   and the agent status badge ("نشط" — confirmed via a real screenshot,
   missed in the first pass because `.agent-status` wasn't grepped for
   `font-family: var(--font-mono)` specifically). Also swept the rest of
   the CSS for the same `var(--font-mono)` pattern proactively (not yet
   reported broken, but the font stack — JetBrains Mono, Consolas,
   monospace — has zero Arabic coverage regardless of letter-spacing) and
   found two more real offenders with actual Arabic words in their
   content: `.work-meta` ("وكالة: Sliders", "عميل: ...") and `.tl-years`
   ("2025 — الآن"). `!important` guarantees these win regardless of
   specificity — deliberately NOT applied to `.cursor span`, `.work-idx`,
   or the SVG `.fnode text`, which only ever hold pure Latin/numeric
   technical labels in both language versions and are meant to keep
   their wide HUD-style tracking. */
.nav-links a,
.btn,
.stat span,
.scroll-cue,
.cred a,
.flow figcaption,
.agent-status,
.work-meta,
.tl-years {
  font-family: 'JetBrains Mono', 'IBM Plex Sans Arabic', monospace !important;
  letter-spacing: 0 !important;
}

/* The automation-flow SVG diagram (TELEGRAM → N8N → LLM → outputs) is a
   fixed-width, direction-agnostic technical diagram (English node labels in
   both language versions) inside a horizontally-scrollable `.flow` box. Under
   `direction: rtl` the browser's default scroll-start position is the RIGHT
   edge, so on load the diagram opened mid-way through (LLM DECISION onward),
   hiding TELEGRAM/N8N off-screen to the left and looking like cut-off text
   (confirmed via a real screenshot). Force this one box back to ltr scrolling
   so it always opens at the diagram's actual start, same as the English site. */
.flow { direction: ltr; }

/* status dot precedes text in source order; in RTL it renders on
   the text's right, so the gap needs to be on its LEFT instead. */
.dot { margin-right: 0; margin-left: 0.5em; }

/* ---- Two Pipelines thesis blockquote: accent rule flips side ---- */
.pipes-thesis {
  border-left: none;
  border-right: 2px solid var(--acc);
  padding: 0.6rem var(--space-3) 0.6rem 0;
}

/* ---- Work list rows: reading direction + hover nudge flip ---- */
.work-row { text-align: right; }
.work-row:hover { padding-left: 0; padding-right: 0.8rem; }
.work-meta { text-align: left; }

/* ---- Career timeline rail: mirror to the right edge ---- */
.tl {
  margin-left: 0;
  margin-right: 8px;
  padding-left: 0;
  padding-right: clamp(1.6rem, 4vw, 3rem);
}
.tl::before { left: auto; right: 0; }
.tl::after { left: auto; right: -0.5px; }
.tl-item::before {
  left: auto;
  right: calc(-1 * clamp(1.6rem, 4vw, 3rem) - 4.5px);
}

/* ---- Contact reveal: keep mailto/wa.me/CV links LTR-isolated
   (already handled inline via dir="ltr" spans in main.js output,
   this just guards the surrounding button row alignment) ---- */
.contact-actions { justify-content: flex-start; }

/* ---- Footer: mirror the three-part row order ---- */
.footer-row { flex-direction: row; }
@media (max-width: 640px) {
  .footer-row { align-items: flex-end; }
}

/* ---- Bidi fix: any string with multiple number-groups separated by a
   dash/slash (years ranges, "24/7") gets visually reordered by the
   browser's bidi algorithm when embedded in RTL text — same bug class
   as the phone-number fix in the email signature. Isolate them. ---- */
.tl-years, .hero-stats b, .work-idx {
  direction: ltr;
  unicode-bidi: isolate;
}