/* ═══════════════════════════════════════════════
   rtl.css — Arabic / RTL overrides
   Loaded only when lang="ar"
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Arabic:wght@300;400;500;600&display=swap');

[dir="rtl"] {
  font-family: 'IBM Plex Arabic', var(--font-sans), sans-serif;
}

/* Nav logo stays LTR (it's a code identifier) */
[dir="rtl"] .nav__logo {
  direction: ltr;
  font-family: var(--font-mono);
}

/* Timeline dot and line flip to right side */
[dir="rtl"] .timeline {
  padding-inline-start: 0;
  padding-inline-end:   var(--space-8);
}
[dir="rtl"] .timeline::before {
  inset-inline-start: auto;
  inset-inline-end:   0;
}
[dir="rtl"] .timeline__item::before {
  inset-inline-start: auto;
  inset-inline-end:   calc(-1 * var(--space-8) - 4px);
}

/* Mono elements (dates, labels, metrics) stay LTR */
[dir="rtl"] .mono,
[dir="rtl"] .label,
[dir="rtl"] .timeline__date,
[dir="rtl"] .talk__year,
[dir="rtl"] .card__metric,
[dir="rtl"] .nav__lang {
  direction:   ltr;
  font-family: var(--font-mono);
}

/* List indentation flips */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-inline-start: 0;
  padding-inline-end:   var(--space-6);
}

/* Talk grid column alignment */
[dir="rtl"] .talk__links {
  justify-content: flex-start;
}

/* Hero tagline max-width stays readable in RTL */
[dir="rtl"] .hero__tagline {
  max-width: 600px;
}

/* Letter spacing on uppercase labels looks wrong in Arabic — reset */
[dir="rtl"] .label {
  letter-spacing: 0;
  text-transform: none;
}