/* ═══════════════════════════════════════════════════════════════════════════
arabic-font.css — S45.85
Unified Arabic typography across the entire platform.
Problem: pages inconsistently apply Arabic fonts. Some use Noto Kufi Arabic,
some fall back to system fonts (Tahoma, Arial), and inline-styled elements
sometimes override with Orbitron/Outfit which doesn't render Arabic well.
Fix: when the document is in Arabic (lang="ar" or dir="rtl"), force every
text element to use Noto Kufi Arabic with a clean fallback stack.
Load order: must load LAST so its !important rules win the cascade.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Root font stack when Arabic ── */
html[lang="ar"],
html[lang="ar"] body,
[dir="rtl"],
[dir="rtl"] body {
font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'Cairo',
-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
letter-spacing: 0;
}
/* ── 2. Override common decorative-font selectors that don't render Arabic well ── */
/* The platform uses Orbitron + Outfit for headings in English context — those fonts
don't have Arabic glyphs, so browsers fall back to the system font (often Tahoma).
This rule forces Noto Kufi Arabic everywhere in Arabic context. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif !important;
letter-spacing: 0 !important;
line-height: 1.5;
}
/* ── 3. Body text + paragraphs ── */
[dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] div, [dir="rtl"] a,
[dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th,
[dir="rtl"] label, [dir="rtl"] button,
html[lang="ar"] p, html[lang="ar"] span, html[lang="ar"] div, html[lang="ar"] a,
html[lang="ar"] li, html[lang="ar"] td, html[lang="ar"] th,
html[lang="ar"] label, html[lang="ar"] button {
font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif !important;
}
/* ── 4. Form inputs ── */
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select,
html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select {
font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif !important;
}
/* ── 5. Refined line-height for Arabic — characters benefit from more breathing room ── */
[dir="rtl"] body,
html[lang="ar"] body {
line-height: 1.7;
}
/* ── 6. Preserve monospace + code blocks (these should stay LTR with mono font) ── */
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] kbd, [dir="rtl"] samp,
html[lang="ar"] code, html[lang="ar"] pre, html[lang="ar"] kbd, html[lang="ar"] samp,
[dir="rtl"] .font-mono, [dir="rtl"] .lib-formula,
[dir="rtl"] [class*="mono"], [dir="rtl"] [style*="JetBrains"],
[dir="rtl"] [style*="font-mono"] {
font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace !important;
direction: ltr;
unicode-bidi: embed;
}
/* ── 7. Preserve LTR-only sections (e.g. URLs, code snippets, English-only labels) ── */
[dir="rtl"] [dir="ltr"] {
direction: ltr;
unicode-bidi: embed;
}
/* ── 8. Tighter font-weight scale for Arabic (Kufi looks too heavy at 700+) ── */
[dir="rtl"] h1, html[lang="ar"] h1 { font-weight: 700 !important; }
[dir="rtl"] h2, html[lang="ar"] h2 { font-weight: 700 !important; }
[dir="rtl"] h3, html[lang="ar"] h3 { font-weight: 500 !important; }
[dir="rtl"] strong, [dir="rtl"] b,
html[lang="ar"] strong, html[lang="ar"] b { font-weight: 600 !important; }
/* ── 9. Reset Orbitron/Rajdhani/decorative-font holdouts inside Arabic context ── */
[dir="rtl"] [style*="Orbitron"],
[dir="rtl"] [style*="Rajdhani"],
[dir="rtl"] [style*="font-display"],
[dir="rtl"] [class*="orbitron"],
[dir="rtl"] [class*="rajdhani"],
html[lang="ar"] [style*="Orbitron"],
html[lang="ar"] [style*="Rajdhani"],
html[lang="ar"] [style*="font-display"] {
font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', sans-serif !important;
letter-spacing: 0 !important;
}
/* ── 10. Smoother text rendering for Arabic ── */
[dir="rtl"] body, html[lang="ar"] body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ── 11. Breadcrumb separator direction (RTL) ──────────────────────────────
Many pages hardcode a right-pointing "›" breadcrumb separator. In Arabic
(RTL) that should point left. Every breadcrumb separator now carries the
.bc-sep class; this one rule mirrors the glyph in RTL so it points the
correct way, without editing each page's markup further. */
[dir="rtl"] .bc-sep,
html[lang="ar"] .bc-sep {
display: inline-block;
transform: scaleX(-1);
}
/* ── 12. Dropdown (select/option) styling + Arabic font ────────────────────
Native