/* RTL Arabic typography — loaded only when is_rtl() (rule 14).
   TWO Arabic families by design (owner-approved): Tajawal for headings,
   El Messiri for body. Rule 8's 2-family cap is respected; the rule-14
   single-family exception is exceeded deliberately and documented here
   (B-15 decision 2026-10-11 — the IBM Plex fallback + Tajawal 800 were
   removed; 4 files, 2 preloads). Self-hosted woff2, font-display: swap. */

/* ============ Tajawal — display/headings ============ */
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============ El Messiri — body (variable) ============ */
@font-face {
  font-family: "El Messiri";
  src: url("../fonts/el-messiri-arabic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ============ Stacks ============ */
body,
button,
input,
select,
textarea {
  font-family: "El Messiri", "Inter", sans-serif;
}

/* Headings — Tajawal (clean geometric, mirrors Space Grotesk). */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: "Tajawal", "Space Grotesk", sans-serif;
}

/* ============ RTL letter-spacing reset ============ */
/* English tracking (0.1em+) breaks Arabic connected script — the letters
   visually detach. Reset it on every element that can carry Arabic text.
   Latin tokens inside (CGP, SYS_*) keep their spacing via <bdi>. */
[dir="rtl"] .cgp-eyebrow,
[dir="rtl"] .cgp-mono-label,
[dir="rtl"] .font-mono,
[dir="rtl"] .cgp-navbar-link,
[dir="rtl"] .cgp-btn-primary,
[dir="rtl"] .cgp-btn-outline,
[dir="rtl"] .cgp-btn-ghost,
[dir="rtl"] .cgp-btn-link,
[dir="rtl"] .cgp-hero-title,
[dir="rtl"] .cgp-glow-text,
[dir="rtl"] .cgp-skip-link,
[dir="rtl"] .cgp-cart-empty-text,
[dir="rtl"] .cgp-footer-link,
[dir="rtl"] .cgp-footer-copy,
[dir="rtl"] .cgp-footer-locale,
[dir="rtl"] .cgp-pill,
[dir="rtl"] .cgp-help-question-text,
[dir="rtl"] .cgp-help-group-title,
[dir="rtl"] .cgp-specs-tab,
[dir="rtl"] .cgp-mega-col-title,
[dir="rtl"] .cgp-mega-link,
[dir="rtl"] .cgp-drawer-link {
  letter-spacing: 0;
}

/* Small screens: long Arabic labels wrap instead of overflowing the
   container (W2-15). [dir="rtl"] raises specificity so this beats the
   per-page nowrap rules without touching desktop or LTR. Scrollable
   chip rails (.cgp-pill, .cgp-stage-item) are excluded by design. */
@media (max-width: 639px) {
  [dir="rtl"] .cgp-dossier-log-date,
  [dir="rtl"] .cgp-spec-table th[scope='row'],
  [dir="rtl"] .cgp-blueprint-price,
  [dir="rtl"] .cgp-specs-table td,
  [dir="rtl"] .cgp-direct-line-label,
  [dir="rtl"] .cgp-direct-line-value {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Catch-all: any element whose text is Arabic gets its tracking reset.
   Tailwind's tracking-* utilities (0.025em–0.1em) all break the
   connected script — this neutralizes them in RTL regardless of class. */
[dir="rtl"] *:lang(ar) {
  letter-spacing: 0 !important;
}