/* ═══════════════════════════════════════════════════════════════════════════
   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: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Tajawal', '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: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Tajawal', 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: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Tajawal', 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: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Tajawal', 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: 600 !important; }
[dir="rtl"] h2, html[lang="ar"] h2 { font-weight: 600 !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: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Tajawal', 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;
}