/* =========================================================
   Arabic (RTL) overrides — loaded after style.css on /ar/
   Most layout uses logical properties (inline-start/end),
   so only a few tweaks are needed here.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap');

:root {
  --font-body: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

html[dir="rtl"] body {
  font-family: var(--font-body);
  letter-spacing: 0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5 {
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: 1.3;
}

html[dir="rtl"] .eyebrow {
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Slightly bigger body size improves Arabic legibility */
html[dir="rtl"] body { font-size: 16.5px; }

/* Feature alternation works naturally under RTL — source order flows right-to-left,
   and the base .feature:nth-child(even) .feature-media { order: 2 } from style.css
   still pushes media to the end (= left in RTL), producing the correct mirror pattern. */

/* Mirror the phone tilt so RTL leans opposite to LTR (keeps the phone
   tilting away from the text on both sides). */
html[dir="rtl"] .feature-media .phone { --feat-tilt: 4deg; }
html[dir="rtl"] .feature:nth-child(even) .feature-media .phone { --feat-tilt: -4deg; }

/* Numeric values (phone, stats) keep Latin digits but respect direction.
   Force a Latin font so the '+' glyph looks standard (Tajawal's version
   is visually thinner / off-baseline next to the bold digits). */
html[dir="rtl"] .num,
html[dir="rtl"] .stat-value,
html[dir="rtl"] .contact-card .value[data-numeric="true"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}