/*!
 * rtl.css — Arabic / right-to-left layer for salmanalikhan.com
 *
 * Loaded ONLY by pages under /ar/, after style.css. The base stylesheet is
 * almost entirely direction-neutral (no floats, no text-align:left/right), so
 * this file only has to do two jobs:
 *   1. swap the Latin type stack for an Arabic one
 *   2. mirror the handful of absolutely-positioned / directional rules
 *
 * dir="rtl" on <html> already handles text flow, flex order and list markers.
 */

/* ---------- Arabic type ---------- */
/* IBM Plex Sans Arabic is the closest companion to the Latin stack: same
   geometric construction as Sora, same open counters as Inter, and it has a
   genuine 400–700 range rather than faux-bolding. */
html[dir="rtl"] {
  --font-head: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

html[dir="rtl"] body {
  font-family: var(--font-body);
  /* Arabic needs more leading than Latin at the same size — the ascenders and
     descenders are deeper and diacritics sit above the line. */
  line-height: 1.85;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] .display {
  font-family: var(--font-head);
  line-height: 1.45;
  letter-spacing: 0;           /* letter-spacing breaks Arabic joining */
}
/* Arabic has no uppercase; these would otherwise render as no-ops that still
   eat the tracking budget and look spaced-out. */
html[dir="rtl"] .tag, html[dir="rtl"] .eyebrow, html[dir="rtl"] .kf h2,
html[dir="rtl"] thead th, html[dir="rtl"] .pstat, html[dir="rtl"] .stage-pill {
  text-transform: none;
  letter-spacing: 0;
}
/* Latin fragments inside Arabic prose (Odoo, FTA, VAT, version numbers) */
html[dir="rtl"] .ltr,
html[dir="rtl"] code, html[dir="rtl"] kbd, html[dir="rtl"] samp {
  direction: ltr;
  unicode-bidi: isolate;
}
/* Numerals: keep Western digits — UAE business writing uses them, and they
   match the figures in the English source and the source documents. */
html[dir="rtl"] { font-variant-numeric: lining-nums; }

/* ---------- mirrored decoration ---------- */
html[dir="rtl"] .aurora .a1 { left: auto; right: -120px; }
html[dir="rtl"] .aurora .a2 { right: auto; left: -100px; }
html[dir="rtl"] .aurora .a3 { left: auto; right: 40%; }

html[dir="rtl"] .fc-1 { left: auto; right: -4%; }
html[dir="rtl"] .fc-2 { right: auto; left: -6%; }
html[dir="rtl"] .fc-3 { left: auto; right: 6%; }

/* ---------- mirrored chrome ---------- */
html[dir="rtl"] .nav-links { border-left: 0; border-right: 1px solid var(--border); }
html[dir="rtl"] .cursor { margin-left: 0; margin-right: 4px; }

html[dir="rtl"] .about-media .exp-badge { right: auto; left: -16px; }
html[dir="rtl"] .service-card .idx { right: auto; left: 26px; }
html[dir="rtl"] .wa-float { right: auto; left: 24px; }
html[dir="rtl"] .to-top { right: auto; left: 28px; }

/* floating form label sits on the opposite edge */
html[dir="rtl"] .field label { left: auto; right: 14px; }

/* footer link hover nudge travels the other way */
html[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 6px; }

/* ---------- timeline rail flips to the right edge ---------- */
html[dir="rtl"] .timeline { padding-left: 0; padding-right: 8px; }
html[dir="rtl"] .timeline::before { left: auto; right: 18px; }
html[dir="rtl"] .tl-item .node { left: auto; right: 9px; }
html[dir="rtl"] .tl-item { padding-left: 0; padding-right: 46px; }

/* ---------- article furniture ---------- */
html[dir="rtl"] .prose ul, html[dir="rtl"] .prose ol { margin-left: 0; margin-right: 20px; }
html[dir="rtl"] .prose li { padding-left: 0; padding-right: 4px; }
html[dir="rtl"] .note { border-left: 0; border-right: 2px solid var(--border-strong);
  padding-left: 0; padding-right: 16px; }
html[dir="rtl"] .crumbs { direction: rtl; }
html[dir="rtl"] .kf li { padding-left: 0; padding-right: 34px; }
html[dir="rtl"] .kf li::before { left: auto; right: 0; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }

/* arrows in links/buttons point the other way in RTL */
html[dir="rtl"] .read svg, html[dir="rtl"] .arrow-link svg,
html[dir="rtl"] .btn svg:last-child { transform: scaleX(-1); }

/* ---------- charts stay LTR ---------- */
/* The SVG figures are drawn on an LTR axis with baked-in x coordinates;
   mirroring them would reverse the bars against their own labels. */
html[dir="rtl"] .chart-figure svg { direction: ltr; }
html[dir="rtl"] .chart-figure svg text { text-anchor: inherit; }