/* ============================================================ Dr. Sarah AlHumoud — RTL (Arabic) layout overrides ============================================================ Loaded on every page after style.css. Everything in here is scoped under html[dir="rtl"], so it only takes effect when js/i18n.js switches the site to Arabic — English/LTR pages are unaffected. Most of the layout (nav bar, grids, flex rows, buttons) mirrors automatically once the browser sees dir="rtl" on , because CSS flexbox/grid follow text direction for their main axis. The rules below only handle the pieces that don't mirror on their own: absolutely-positioned decorations, fixed left/right borders, and directional arrow icons. ============================================================ */ html[dir="rtl"] body { font-family: 'Cairo', 'Newsreader', 'Inter', sans-serif; } /* ---------- Header logo: pin its size explicitly in RTL too, so it can never render at its native (much larger) pixel size regardless of load order or flexbox quirks ---------- */ html[dir="rtl"] .brand img { height: 46px; max-height: 46px; width: auto; max-width: 140px; } /* Headings/serif text also switch to Cairo so Arabic renders correctly wherever the site uses the Newsreader serif font */ html[dir="rtl"] .hero-name, html[dir="rtl"] .page-hero-title, html[dir="rtl"] .section-title { font-family: 'Cairo', 'Newsreader', serif; } /* ---------- Nav underline (active/hover indicator under nav links) ---------- */ html[dir="rtl"] .nav-menu a::after { left: auto; right: 0; } /* ---------- Hero portrait decorative shapes ---------- */ html[dir="rtl"] .hero-portrait::before { right: auto; left: -20px; } html[dir="rtl"] .hero-portrait::after { left: auto; right: 0; } /* ---------- Executive Profile: sticky table-of-contents accent border ---------- */ html[dir="rtl"] .profile-toc a { border-left: none; border-right: 2px solid transparent; } html[dir="rtl"] .profile-toc a:hover, html[dir="rtl"] .profile-toc a.is-active { border-left-color: transparent; border-right-color: var(--blue); } /* ---------- Executive Profile: leadership timeline rail ---------- */ html[dir="rtl"] .timeline-item { padding-left: 0; padding-right: 32px; border-left: none; border-right: 1.5px solid var(--border); } html[dir="rtl"] .timeline-item::before { left: auto; right: -6.5px; } /* ---------- Executive Profile: achievement bullets ---------- */ html[dir="rtl"] .timeline-achievements li { padding-left: 0; padding-right: 18px; } html[dir="rtl"] .timeline-achievements li::before { left: auto; right: 0; } /* ---------- Blog search box icon + input padding ---------- */ html[dir="rtl"] .search-box svg { left: auto; right: 20px; } html[dir="rtl"] .search-box input { padding: 16px 50px 16px 20px; } /* ---------- Public Speaking event photo gallery arrows ---------- */ html[dir="rtl"] .event-gallery-arrow--prev { left: auto; right: 10px; } html[dir="rtl"] .event-gallery-arrow--next { right: auto; left: 10px; } /* ---------- Directional arrow icons (flip so "forward" still points toward reading-start, i.e. left, in Arabic) ---------- */ html[dir="rtl"] .link-arrow svg, html[dir="rtl"] .event-gallery-arrow svg { transform: scaleX(-1); } html[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); } /* ---------- Form fields: numeric/date inputs stay LTR for legibility ---------- */ html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="date"] { direction: ltr; text-align: right; }