/* ========================================================= RTL + Arabic typography overrides — loaded AFTER styles.css on /ar/ pages () Body: Tajawal · Headings: Noto Kufi Arabic ========================================================= */ body{ font-family:"Tajawal", "Segoe UI", Tahoma, sans-serif; letter-spacing:normal; line-height:1.85; } h1,h2,h3,h4,.brand .name,.card .num,.timeline .when, .faq summary,.related a,.cta-band h2,.contacts b{ font-family:"Noto Kufi Arabic","Tajawal",sans-serif; line-height:1.4; } h1{line-height:1.3} /* Arabic ignores letter-spacing/uppercase — neutralise on UI text */ .eyebrow,.navlinks a,.btn,.foot-grid h4,.brand .sub,th,.lang-switch, .byline,.hero .crumbs,.disclaimer p,.license{ letter-spacing:normal; text-transform:none; } .eyebrow{font-weight:700} /* ---- directional flips ---- */ /* callout accent bar: left -> right */ .callout{border-left:1px solid var(--line);border-right:3px solid var(--gold)} /* checklist: bullet on the right */ .checklist li{padding:10px 38px 10px 0} .checklist li::before{left:auto;right:6px} /* timeline: rail and nodes on the right */ .timeline{padding-left:0;padding-right:30px} .timeline::before{left:auto;right:6px} .timeline .step{padding:0 22px 26px 0} .timeline .step::before{left:auto;right:-29px} /* card "read more" arrow points left in RTL */ .card-link::after{content:" ←"} .card:hover .card-link::after{margin-left:0;margin-right:6px} /* tables align right */ th,td{text-align:right} /* footer membership links keep inline */ .foot-grid p a{display:inline} /* hero: on desktop, copy sits on the right, media on the left (natural mirror). The order rules from styles.css already produce this under dir:rtl. On mobile the image still stacks on top (media order:0). No change needed. */ /* FAQ accordion: '+' marker naturally moves to the left via flex; fine. */ /* breadcrumb separators read correctly under RTL; keep as-is. */ /* numerals: keep Western digits LTR-clean inside RTL flow */ .card .num,.timeline .when{direction:ltr;unicode-bidi:isolate;display:inline-block} /* Latin acronyms (SKMC, EPSS, Piezo, Crisalix...) render LTR automatically via the Unicode bidi algorithm — no override required. */