/* ==========================================================================
   Rakaiz Babel — Arabic (RTL) layer
   Load AFTER tokens.css and main.css on Arabic pages only:
     <html lang="ar" dir="rtl">
     <link rel="stylesheet" href="../css/arabic.css">
   It swaps the typefaces, neutralises Latin-only typographic tricks
   (uppercase, negative tracking) and mirrors the few directional rules.
   ========================================================================== */

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

:root {
  --font-display: "Amiri", "Times New Roman", serif;
  --font-sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* Arabic script has no case and no tracking — reset both. --------------- */
[dir="rtl"] .page-title,
[dir="rtl"] .section-title,
[dir="rtl"] .cta-title,
[dir="rtl"] .sub-title,
[dir="rtl"] .card-title,
[dir="rtl"] .brand__name,
[dir="rtl"] .stat__value,
[dir="rtl"] .step__number { letter-spacing: 0; }

[dir="rtl"] .eyebrow,
[dir="rtl"] .micro-label,
[dir="rtl"] .tagline,
[dir="rtl"] .note-pill {
  text-transform: none;
  letter-spacing: 0;
}

/* Amiri runs small and light — nudge display sizes and weight. ---------- */
[dir="rtl"] .page-title { font-weight: 700; line-height: 1.25; }
[dir="rtl"] .section-title,
[dir="rtl"] .cta-title { font-weight: 700; line-height: 1.35; }
[dir="rtl"] .sub-title { font-weight: 700; }
[dir="rtl"] .lead,
[dir="rtl"] .body,
[dir="rtl"] .body-sm { line-height: 1.75; }
[dir="rtl"] .arabic-mark { font-weight: 700; }

/* Mirror the directional rules used in main.css. ------------------------ */
[dir="rtl"] .step {
  border-left: 0;
  border-right: 1px solid var(--color-hairline);
  padding-left: 0;
  padding-right: var(--space-lg);
}

[dir="rtl"] .bordered-column {
  border-left: 0;
  border-right: 1px solid var(--color-hairline);
  padding-left: 0;
  padding-right: var(--space-xl);
}

[dir="rtl"] .quote {
  border-left: 0;
  border-right: 2px solid var(--color-accent);
  padding-left: 0;
  padding-right: var(--space-lg);
}

[dir="rtl"] .nav__link--active { padding-bottom: 2px; }

/* Latin fragments inside Arabic text (numbers, emails, EN switch). ------ */
[dir="rtl"] [lang="en"],
[dir="rtl"] .latin {
  font-family: "Figtree", system-ui, sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Phone numbers read left-to-right inside RTL text; the leading "+" is
   enough to set their direction, so only isolate them from the label. */
[dir="rtl"] a[href^="tel:"] { unicode-bidi: isolate; }

[dir="rtl"] .ltr-num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

@media (max-width: 700px) {
  [dir="rtl"] .bordered-column { border-right: 0; padding-right: 0; }
}