/* ============================================ styles-rtl.css Loaded ONLY on Arabic (-ar.html) pages, after styles.css. Most layout mirroring (nav, hero grid, footer columns) happens automatically from dir="rtl" on since flexbox/grid respect the `direction` property. This file covers what that doesn't fix: Arabic font rendering, and a handful of spacing/alignment details. ============================================ */ /* Arabic-capable fonts. Source Serif 4 / Inter have no Arabic glyphs, so Arabic text was silently falling back to a generic system font without this. Noto Kufi Arabic pairs well with Inter's geometry for body/UI text; Noto Naskh Arabic gives headings a comparable serif weight to Source Serif 4. */ @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@500;600;700&display=swap'); html[dir="rtl"] body { font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; } html[dir="rtl"] h1.serif, html[dir="rtl"] h2.serif, html[dir="rtl"] h3.serif, html[dir="rtl"] .footer-brand, html[dir="rtl"] .post-article h1, html[dir="rtl"] .post-article h2, html[dir="rtl"] .cert-title { font-family: 'Noto Naskh Arabic', 'Source Serif 4', serif; } /* Call numbers, prices, and dates stay in Latin numerals/mono font deliberately — this is a librarian convention that reads fine regardless of language, and mixing an Arabic font into short numeric codes tends to look broken rather than authentic. */ html[dir="rtl"] .mono, html[dir="rtl"] .call-no, html[dir="rtl"] .price { font-family: 'IBM Plex Mono', monospace; direction: ltr; unicode-bidi: embed; } /* Text alignment: styles.css sets some elements to text-align:left explicitly rather than using logical (start/end) values, which doesn't flip automatically with dir="rtl". */ html[dir="rtl"] .hero-sub, html[dir="rtl"] .page-sub, html[dir="rtl"] .post-article p, html[dir="rtl"] .course-desc, html[dir="rtl"] .form-note { text-align: right; } /* Language switcher and eyebrow chips: tighten the flipped gap so punctuation/slashes don't look mismatched in RTL flow */ html[dir="rtl"] .lang-switch { direction: ltr; unicode-bidi: embed; } /* Form inputs: keep placeholder/cursor behavior natural for RTL typing */ html[dir="rtl"] .form-row input, html[dir="rtl"] .form-row textarea, html[dir="rtl"] .form-row select { text-align: right; } /* Icon-adjacent spacing that was set with margin-right assuming LTR reading order — flip to margin-left under RTL */ html[dir="rtl"] .eyebrow .chip { margin-left: 8px; margin-right: 0; } /* Buttons with trailing arrows (→) in the English/French copy should use ← in Arabic source text directly rather than being flipped by CSS — arrows are handled as real characters in the Arabic HTML files, not mirrored via transform, since transform: scaleX(-1) would also flip the text baseline oddly for mixed Arabic/Latin button labels. */