/* ============================================================
Arabic (RTL) locale overrides. Loaded ONLY on /ar/ pages (base.njk gates it
on loc.code == 'ar'), so every rule here is AR-only and never touches EN.
The document is already dir="rtl", so flex/grid layout mirrors automatically;
this sheet covers what direction-agnostic CSS does NOT: the Arabic typeface and
the few physical (left/right) properties that don't flip on their own.
NOTE (deferred): a few inline paddings use physical sides (e.g. the location
card meta line) — minor, best tuned once the Arabic copy is finalised.
============================================================ */
/* ---- Arabic typography guard ----------------------------------------------
Two EN-design defaults must never reach an Arabic page:
letter-spacing - tracking disconnects the cursive Arabic script.
text-transform - uppercasing is a no-op on Arabic (no letter case), but it
DOES mangle Latin runs that legitimately sit inside Arabic copy: product
names and acronyms would render FLEETOS instead of FleetOS.
The few Latin runs lose their tracking too, which is the correct trade on an
Arabic-first page.
Selector note: this MUST target descendants, not just . Both properties
are inherited, but inheritance only supplies a value to an element that has no
declaration of its own — and this site sets `text-transform:uppercase` /
`letter-spacing` via INLINE styles on descendants, which are their own
declarations and would beat a value inherited from . An !important on
`html[dir="rtl"]` alone only wins against other rules targeting , so it
would silently do nothing here. Author !important does outrank inline styles,
hence `... .nlm-page *` + !important. Verified: computed text-transform on the
previously-uppercased eyebrows is `none`. */
html[lang="ar"] .nlm-page *,
html[dir="rtl"] .nlm-page * {
text-transform: none !important;
letter-spacing: normal !important;
}
/* ---- Arabic typeface -------------------------------------------------------
SINGLE SOURCE OF TRUTH: --font-ar is the only place the Arabic font is named.
Change it here and every Arabic page restyles — no component, section or page
hardcodes an Arabic font. (One companion edit: the Google Fonts in
base.njk must load whatever family this names. Those two lines are the whole
contract; the comment in base.njk points back here.)
It is slotted INTO the existing stacks AFTER the Latin brand fonts rather than
replacing them. That ordering is load-bearing: Latin runs (the `nehlum`
wordmark, product names like FleetOS, ISO codes, Western digits) keep rendering
in Sora/Poppins, and only glyphs those fonts lack — i.e. Arabic — fall through.
Setting `font-family` on html[lang="ar"] instead would override the whole stack
and render those Latin names in the Arabic face.
Scaling note: no legacy page declares --nlm-font-*; they only reference it. So
this :root override already reaches every migrated page — migrated templates
must never re-declare --nlm-font-* (if a page needs CLS fallback faces, include
var(--font-ar) in the stack, as #nlm-home does below). ------------------- */
:root {
--font-ar: 'IBM Plex Sans Arabic';
--nlm-font-display: 'Sora', var(--font-ar), system-ui, sans-serif;
--nlm-font-body: 'Poppins', var(--font-ar), system-ui, sans-serif;
--nlm-font-mono: 'JetBrains Mono', var(--font-ar), ui-monospace, monospace;
}
/* The homepage is the one page that re-declares these vars — its inline head