/* ========================================================================== RTL / Arabic overrides — loaded only on ar/ pages, after style.css. Most layout (flex rows, grid tracks, centered elements) mirrors automatically once is set; this file only overrides the handful of components that use physical left/right values instead of logical ones, plus swaps in Arabic-appropriate typefaces. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); /* One legible sans-serif throughout — an Arabic serif at display sizes reads as unfamiliar/harder to parse for most readers, unlike Latin serif headlines. Hierarchy comes from weight and size instead. */ :root { --font-display-ar: 'IBM Plex Sans Arabic', 'Inter', sans-serif; --font-body-ar: 'IBM Plex Sans Arabic', 'Inter', sans-serif; } body { font-family: var(--font-body-ar); text-align: right; } h1, h2, h3, h4 { font-family: var(--font-display-ar); font-weight: 700; } /* Process timeline — the connecting line and number circle are absolutely positioned with `left`, which does not auto-mirror. */ .process::before { left: auto; right: 23px; } .process-item { padding-left: 0; padding-right: 76px; } .process-num { left: auto; right: 0; } /* Spec grid — the hairline dividers are drawn with border-right/bottom on cells and border-top/left on the container; flip both. */ .spec-grid { border-left: none; border-right: 1px solid var(--line); } .spec-item { border-right: none; border-left: 1px solid var(--line); } /* Mobile "Solutions" submenu indent reads as a start-edge accent. */ .mobile-solutions-list a { border-left: none; border-right: 2px solid var(--line); padding-left: 0; padding-right: 1rem; } /* Card-link / link-tile arrows already use the correct glyph (←) in the Arabic content itself, so no mirroring needed here. */