/* ========================================================================== EIA-Solution — right-to-left overrides (Arabic) Loaded only when . Kept separate from the main stylesheet so the LTR site is untouched and this file can be reasoned about alone. Two things matter more than mirroring the layout: 1. Arabic has no letter case, so uppercase transforms must be removed — text-transform does nothing useful and the styling intent is lost. 2. letter-spacing BREAKS Arabic. It forces apart letters that are meant to join, which makes words look misspelled. It must be reset to normal everywhere, not merely reduced. ========================================================================== */ :root{ --ff-display-ar:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif; --ff-body-ar:"IBM Plex Sans Arabic","Noto Sans Arabic",sans-serif; } /* --- Typography --------------------------------------------------------- */ body{ font-family:var(--ff-body-ar); letter-spacing:normal; line-height:1.85; /* Arabic needs more leading than Latin */ } h1,h2,h3,.h-display,.btn,.nav__link,.arrow-link,.footer h4,legend{ font-family:var(--ff-display-ar); text-transform:none; /* no case in Arabic */ letter-spacing:normal; /* never letter-space Arabic */ } h1,h2{line-height:1.3} h3{line-height:1.4} /* The mono font has no Arabic coverage — only keep it for actual Latin data. */ .eyebrow,.mono,.card__meta,.stat__l,.crumbs,.pillar__no,.topbar__tag,.timeline time{ font-family:var(--ff-body-ar); letter-spacing:normal; text-transform:none; } /* Standards, protocol names and figures stay Latin and stay left-to-right. */ .spec,.stat__n,.mono[dir="ltr"],[dir="ltr"]{ font-family:"IBM Plex Mono",monospace; direction:ltr; unicode-bidi:isolate; letter-spacing:.04em; } .stat__n{font-family:var(--ff-display-ar)} /* --- Directional flips -------------------------------------------------- */ .eyebrow::before{transform:scaleX(-1)} .arrow-link::after{content:"←"} .arrow-link:hover::after{transform:translateX(-4px)} .nav__sub{left:auto;right:0} .nav-actions{margin-left:0;margin-right:auto} @media(min-width:1000px){.nav-actions{margin-right:1rem;margin-left:0}} .nav{margin-left:0;margin-right:auto} .drawer{inset:0 auto 0 0;transform:translateX(-100%)} .drawer.is-open{transform:none} .drawer__close{right:auto;left:1rem} .drawer .drawer__sub a{padding-left:0;padding-right:1rem} .brand__txt{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:.85rem} .crumbs span{margin:0 .45rem} /* Pillar bullets */ .pillar li{padding-left:0;padding-right:1.4rem} .pillar li::before{left:auto;right:0} /* Timeline */ .timeline::before{left:auto;right:7px} .timeline li{padding:0 2.15rem 1.6rem 0} .timeline li::before{left:auto;right:2px} /* Prose */ .prose{max-width:70ch} .prose blockquote{border-left:0;border-right:3px solid var(--signal);padding:.35rem 1.35rem .35rem 0} .prose th,.prose td{text-align:right} .prose ul,.prose ol{padding-left:0;padding-right:1.15em} ul,ol{padding-left:0;padding-right:1.15em} /* Forms */ select.input{ background-position:left .85rem center; padding-right:.85rem; padding-left:2.2rem; } .consent input{margin-left:0} .field-error,.hint{text-align:right} /* Email, phone and URL fields hold Latin data — keep them LTR. */ input[type="email"],input[type="tel"],input[type="url"],input[name="website"]{ direction:ltr;text-align:right; } /* Footer */ .footer address strong{font-family:var(--ff-body-ar);letter-spacing:normal} .colophon ul{padding-right:0} /* Cookie bar */ .cookie{border-top-color:var(--signal)} .skip{left:auto;right:-9999px} .skip:focus{right:0} /* Admin edit pin sits on the other side */ .edit-pin{right:auto;left:8px} /* Section heads and hero read better slightly narrower in Arabic */ .hero__sub,.lead{max-width:58ch} /* Buttons: Arabic labels run longer, so let them breathe */ .btn{letter-spacing:normal;font-size:1.02rem} .btn--sm{font-size:.9rem} /* Numbers inside Arabic sentences should not reorder */ time,.card__meta time{direction:ltr;unicode-bidi:isolate} /* News detail */ .arrow-link--ext{margin-left:0;margin-right:1.25rem} .news-item.is-focus{scroll-margin-top:110px}