/* ============================================================
   Arabic (RTL) overrides — /ar/ pages
   Loads after styles.css; flips direction & swaps type system.
   ============================================================ */

:root {
  --font-arabic-display: "Reem Kufi", "Amiri", serif;
  --font-arabic-body: "Tajawal", "Segoe UI", sans-serif;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--font-arabic-body);
  line-height: 1.9; /* Arabic needs taller lines */
}

/* ---- Display headings use Reem Kufi ---- */
html[lang="ar"] .intro-title,
html[lang="ar"] .section-head h2,
html[lang="ar"] .legacy-title,
html[lang="ar"] .profile-bio h3,
html[lang="ar"] .pillar h3 {
  font-family: var(--font-arabic-display);
  letter-spacing: 0; /* Kufi must not be letter-spaced */
}

.intro-title.arabic-display { font-size: clamp(2.6rem, 8vw, 6rem); }

/* ---- Quotes use Amiri ---- */
html[lang="ar"] .vision-quote .vision-statement,
html[lang="ar"] .footer-arabic,
html[lang="ar"] .portrait-caption .arabic-name {
  font-family: var(--font-amiri, "Amiri"), serif;
}

/* ---- Directional fixes (RTL mirrors) ---- */
html[lang="ar"] .nav-brand { flex-direction: row-reverse; }
html[lang="ar"] .fact-list li { grid-template-columns: 1fr 130px; }
html[lang="ar"] .timeline { padding-left: 0; padding-right: 40px; }
html[lang="ar"] .timeline::before { left: auto; right: 8px; }
html[lang="ar"] .timeline li { padding-left: 0; padding-right: 34px; }
html[lang="ar"] .timeline li::before { left: auto; right: -37px; }
html[lang="ar"] .profile-grid { direction: rtl; }
html[lang="ar"] .reveal-left { transform: translateX(56px); }
html[lang="ar"] .reveal-right { transform: translateX(-56px); }
html[lang="ar"] .revealed { transform: none !important; }

/* ---- Latin brand mark stays LTR inside RTL flow ---- */
html[lang="ar"] .brand-mark,
html[lang="ar"] .dob-nums,
html[lang="ar"] .tl-year {
  direction: ltr;
  unicode-bidi: embed;
}

/* ---- Nav links: no uppercase transform for Arabic ---- */
html[lang="ar"] .nav-links a,
html[lang="ar"] .btn,
html[lang="ar"] .eyebrow,
html[lang="ar"] .stat-label,
html[lang="ar"] .tag,
html[lang="ar"] .dob-label,
html[lang="ar"] .scroll-hint {
  text-transform: none;
  letter-spacing: 0.04em;
}

/* ---- Footer disclaimer alignment ---- */
html[lang="ar"] .footer-disclaimer { text-align: right; }
html[lang="ar"] .disclaimer-banner p { text-align: right; }

@media (max-width: 680px) {
  html[lang="ar"] .timeline li::before { right: -25px; }
}