/* =============================================================================
   arabic.css — loaded only when the culture is Arabic.

   Arabic is not Latin re-pointed. It needs roughly 10-15% more line-height at equal
   optical size and SMALLER headline steps, so the display scale steps DOWN here
   rather than up. Two token sets, ~1.4x design QA, and it is the difference between
   an Arabic page that was designed and one that was translated.

   TYPEFACE DECISION, made by setting the real headline in eight candidates:
     IBM Plex Sans Arabic (SIL OFL) is the estate face. Against Tajawal it carries
     real stroke modulation, more open counters and better-resolved terminals — it
     reads considered at 68px and stays legible at 15px, which Reem Kufi does not.
     Tajawal remains the fallback: it is metrically close and already on the estate.

     Aref Ruqaa (SIL OFL) is a calligraphic ruqaa reserved for ONE job — the corporate
     heritage line. It is unusable as body copy and must never be set below ~32px.
     Rejected: Reem Kufi (body cramps), Almarai / Readex / Alexandria (clean but no
     more distinctive than Tajawal), Noto Kufi (elegant but 124 KB per weight).

   UPGRADE PATH: a licensed 29LT Zarid or TPTQ face drops in by changing
   --brand-font-ar alone; nothing else in the system names a family.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/plex-arabic/IBMPlexSansArabic-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/plex-arabic/IBMPlexSansArabic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/plex-arabic/IBMPlexSansArabic-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/plex-arabic/IBMPlexSansArabic-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Heritage display only. One line, one page. */
@font-face {
  font-family: "Aref Ruqaa";
  src: url("/assets/fonts/aref-ruqaa/ArefRuqaa-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aref Ruqaa";
  src: url("/assets/fonts/aref-ruqaa/ArefRuqaa-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Tajawal stays as the guaranteed fallback — already shipping across the estate. */
@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/tajawal/Tajawal-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/tajawal/Tajawal-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --brand-font-ar: "IBM Plex Sans Arabic", "Tajawal", "Noto Sans Arabic", "Geeza Pro", sans-serif;
  --brand-font-heritage: "Aref Ruqaa", "IBM Plex Sans Arabic", serif;

  --brand-font: var(--brand-font-ar);
  --brand-font-display: var(--brand-font-ar);

  /* Arabic needs the air. Latin sits at 1.55. */
  --brand-lh-body: 1.75;
  --brand-lh-display: 1.32;   /* Plex Arabic has taller ascenders than Tajawal */
}

/* The Arabic display step-down, per brand. Aston Martin's Latin display is 88px;
   in Arabic it is 68px, because Arabic letterforms carry far more optical weight
   at the same nominal size. */
.brand-am    { --brand-display: clamp(2.1rem, 6vw, 4.25rem); }   /* 88px Latin -> 68px Arabic */
.brand-hha   { --brand-display: clamp(1.9rem, 5.2vw, 3.25rem); } /* 64px Latin -> 52px Arabic */
.brand-man   { --brand-display: clamp(1.5rem, 3.6vw, 2.15rem); } /* 40px Latin -> 34px Arabic */
.brand-mazda { --brand-display: clamp(1.8rem, 4.6vw, 2.75rem); } /* 56px Latin -> 44px Arabic */

body { letter-spacing: 0; }        /* Arabic must never be letter-spaced: it breaks the joins */

/* Plex Arabic holds its colour better than Tajawal did, so display sits at 400-500,
   not 500-600. Never bold, and never synthetic bold — it smears the joins. */
h1, h2, .opening__title, .display, .index__name, .hero__title { font-weight: 400; }
.sec-head__t, .model__name { font-weight: 500; }

/* Heritage line — corporate only, never below 32px, never as body copy. */
.heritage {
  font-family: var(--brand-font-heritage);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Latin (Western) digits in Arabic pages for prices, specs, VIN, plate and phone.
   ar-SA defaults to Arabic-Indic, which then renders inconsistently against a Latin
   model name in the same sentence. Eastern digits stay available, off by default. */
.num, [dir="rtl"] .lat, time, .spec-value {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

/* Arabic headings sit tighter to their following paragraph than Latin ones do. */
h1 + p, h2 + p, h3 + p { margin-block-start: var(--hha-3); }

/* -----------------------------------------------------------------------------
   Letter-spacing guard.

   app.css tracks its micro-labels out at .06–.18em, which is correct for a Latin
   uppercase eyebrow and wrong for Arabic: the script joins, and tracking pulls the
   joins apart into disconnected letterforms. body{letter-spacing:0} above cannot
   reach these because a class selector outranks it — so each one is named here.
   arabic.css loads after app.css, so equal specificity is enough.

   Latin runs inside an Arabic page keep their tracking: a .rangecard__n holding
   "TGX" is still Latin and still wants it. Only the Arabic-bearing labels are reset.
   -------------------------------------------------------------------------- */
.wordmark, .wordmark__est, .site-nav, .lang-switch,
.eyebrow, .sec-head__n, .index__n, .cred__k, .btn,
.finding__n, .model__specs dt, .field label, .uptime dt,
.rangecard__u, .rangecard__d, .viewer__hint, .cities__b, .foot__h {
  letter-spacing: 0;
}

/* text-transform: uppercase is a no-op on Arabic, but it also uppercases any Latin
   run inside an Arabic label — "MAN" is fine, a model name in mixed case is not. */
.uptime dt, .model__specs dt, .rangecard__u { text-transform: none; }