/* ============================================================ Al Anbar Plus — RTL overrides Load AFTER base.css (and profiles.css if applicable) on every Arabic page. The page must declare . Strategy: - Re-declare font vars to swap in IBM Plex Sans Arabic. - Flip physical-direction values (left/right, margin-left/right, drawer transform) that browsers do NOT auto-mirror under dir=rtl. - Force inline isolation (direction:ltr/rtl + unicode-bidi:embed) on mixed-script atoms (numbers, ratings) so digits stay LTR inside Arabic prose. ============================================================ */ /* The Arabic font (IBM Plex Sans Arabic) must be loaded from the HTML , not here. See the AR layout snippet in DEV-NOTES.md. This file only re-declares the CSS vars to point at it. */ :root{ --display:"IBM Plex Sans Arabic","Fraunces",serif; --sans:"IBM Plex Sans Arabic",-apple-system,system-ui,sans-serif; } /* prevent off-canvas drawers from inflating document scroll width */ html{overflow-x:hidden} body{font-family:var(--sans)} /* keep the Latin wordmark elegant inside the Arabic brand lockup */ .brand-txt{font-family:"Fraunces",Georgia,serif} /* Arabic doesn't take letter-spacing / uppercase well — normalize eyebrows */ .eyebrow{letter-spacing:.04em;text-transform:none;font-weight:700} /* ---------- mirror physical-direction values ---------- */ .nav-links a::after{left:auto;right:0} .hero-trust .avatars img{margin-left:0;margin-right:-12px} .hero-trust .avatars img:first-child{margin-right:0} .hero-stripes{right:auto;left:-26px;z-index:3} .badge-1{left:auto;right:-34px;z-index:4} .badge-2{right:auto;left:-30px;z-index:4} .svc::before{left:auto;right:0} .mcard .tag{left:auto;right:12px} .mcard .fav{right:auto;left:11px} .vbadge{left:auto;right:12px} .fq{text-align:right} .wa-float{right:auto;left:22px} /* profile-page-specific (harmless on other pages — selectors don't exist there) */ .mhero .deco{right:auto;left:6%} .search-in svg{left:auto;right:13px} .search-in input{padding:11px 38px 11px 14px} .fgroup .lbl{letter-spacing:0} /* ---------- bidi isolation ---------- */ /* numeric / Latin atoms inside Arabic flow stay LTR */ .step .no, .t-txt b, .toolbar .count b, .b-t, .stat .n, .diversity h3, .rate{direction:ltr;unicode-bidi:embed;display:inline-block} /* containers that should remain RTL even if children flip */ .crumb, .hero-cta, .act, .socials, .natchips, .toolbar .right{direction:rtl} /* ---------- mobile drawers: flip slide-in direction ---------- */ @media (max-width:900px){ .nav-links{inset:0 auto 0 0;transform:translateX(-100%)} .nav-links.open{transform:none} } @media (max-width:980px){ .filters{inset:0 0 0 auto;transform:translateX(105%)} .filters.open{transform:none} }