/* ============================================================ LAGHBANI CONSULTING — Arabic / right-to-left layer Loaded on every bilingual page. Only takes effect once the i18n engine sets , so it is inert for English visitors. ============================================================ */ /* ---- Arabic typography ---- */ html.lang-ar, html.lang-ar body { font-family: "Outfit", "Alexandria", ui-sans-serif, system-ui, sans-serif; } /* Latin letter-spacing tuned for Outfit reads wrong on Arabic glyphs */ html.lang-ar :is(h1, h2, h3, h4, h5, .lc-display, .lc-h1, .lc-h2, .lc-h3, .lc-h4, .eyebrow, .wise-display, .wise-h2, .wise-h3, .fun-h) { letter-spacing: 0; } /* Alexandria's Arabic glyphs sit taller than the Latin display faces these ultra-tight line-heights (some as low as .98) were tuned for, so Arabic headings collide line-to-line. Give every heading generous leading in Arabic. */ html.lang-ar :is(h1, h2, h3, h4, .lc-display, .lc-h1, .lc-h2, .lc-h3, .lc-h4, .wise-display, .wise-h2, .wise-h3, .fun-h) { line-height: 1.4; } html.lang-ar body { line-height: 1.75; } /* keep Latin proper nouns (TestDaF, FSP, € figures, codes) upright/LTR */ html.lang-ar .ltr, html.lang-ar .fee, html.lang-ar .codechip, html.lang-ar .kcode { direction: ltr; unicode-bidi: isolate; } /* ---- directional icon flip (arrows, chevrons that imply motion) ---- */ [dir="rtl"] .flip-rtl { transform: scaleX(-1); } /* Horizontal arrows/chevrons mirror automatically in RTL so a "next / forward" arrow always points left and "back" points right, without needing a per-element class (Lucide keeps its lucide- class on the rendered ). Vertical chevrons and diagonal/external (arrow-up-right) icons are intentionally left alone. Same scaleX value as .flip-rtl, so an icon carrying both is flipped once, never twice. */ [dir="rtl"] .lucide-arrow-right, [dir="rtl"] .lucide-arrow-left, [dir="rtl"] .lucide-chevron-right, [dir="rtl"] .lucide-chevron-left, [dir="rtl"] .lucide-chevrons-right, [dir="rtl"] .lucide-chevrons-left, [dir="rtl"] .lucide-move-right, [dir="rtl"] .lucide-move-left, [dir="rtl"] .lucide-corner-down-right, [dir="rtl"] .lucide-corner-down-left { transform: scaleX(-1); } /* ---- nav shell ---- */ [dir="rtl"] .nav-links { margin-left: 0; margin-right: 6px; } [dir="rtl"] .nav-link::after { left: auto; right: 0; } [dir="rtl"] .nav-link:hover::after, [dir="rtl"] .nav-link[aria-current="page"]::after { right: 0; left: 0; } /* mega dropdown text reads from the right */ [dir="rtl"] .nav-dd a { text-align: right; } /* ---- mobile drawer slides in from the left in RTL ---- */ [dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-100%); } [dir="rtl"] .drawer.open { transform: translateX(0); } [dir="rtl"] .drawer nav a { text-align: right; } /* ---- section headers / gold rule sit on the right ---- */ [dir="rtl"] .sec-head:not(.center) .rule-gold { margin-left: auto; margin-right: 0; } /* ---- prose lists ---- */ [dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 22px; } [dir="rtl"] .prose li { padding-left: 0; padding-right: 4px; } [dir="rtl"] .prose a { text-underline-offset: 2px; } /* ---- table of contents (legal pages) ---- */ [dir="rtl"] .toc ol { padding-left: 0; padding-right: 20px; } /* ---- footer ---- */ [dir="rtl"] .footer .blurb, [dir="rtl"] .footer address { text-align: right; } /* ---- language toggle keeps Latin "EN" upright ---- */ [dir="rtl"] .lang-toggle { direction: rtl; }