/* ============================================================
   rtl.css — Arabic / right-to-left overrides
   Most spacing uses logical properties, so RTL mostly "just works".
   These handle font swaps and a few directional details.
   ============================================================ */

[dir="rtl"] body { font-family: var(--font-ar); }

/* Mono elements lack Arabic glyphs — use the Arabic face so AR copy renders,
   while keeping the small-caps/tracking feel. Pure-Latin tokens still read fine. */
[dir="rtl"] .mono,
[dir="rtl"] .fig-label,
[dir="rtl"] .site-nav a,
[dir="rtl"] .btn,
[dir="rtl"] .ctrl-btn,
[dir="rtl"] .exp-meta,
[dir="rtl"] .proj-meta,
[dir="rtl"] .skill-group-title,
[dir="rtl"] .contact-link .lbl {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

/* Keep figure codes (FIG_000) and the brand in Latin/mono regardless of language */
[dir="rtl"] #hero-fig,
[dir="rtl"] [data-fig],
[dir="rtl"] .brand { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .brand { font-family: var(--font-accent); }

/* Scroll cue arrow points the same way; flip the glyph for RTL reading */
[dir="rtl"] .scroll-cue { align-self: flex-end; }

/* Bullet markers use logical props already; ensure the ">" reads naturally in RTL */
[dir="rtl"] .exp-bullets li::before { content: "‹"; }

/* Hero hook / paragraphs read right-aligned naturally via dir; nudge max widths */
[dir="rtl"] .hero-hook,
[dir="rtl"] .about-body,
[dir="rtl"] .contact-body { text-align: right; }

/* Latin tech tokens inside Arabic text stay LTR-isolated for correct rendering */
[dir="rtl"] .skill-list li,
[dir="rtl"] .proj-desc,
[dir="rtl"] .exp-bullets li { text-align: right; }