/* ============================================================ RTL overrides for the Arabic pages (loaded via ) ============================================================ */ /* Arabic typography */ html[dir="rtl"] body { font-family: "Cairo", "Manrope", system-ui, sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .brand-name, html[dir="rtl"] .section-title, html[dir="rtl"] .hero h1, html[dir="rtl"] .page-hero h1, html[dir="rtl"] .stat b, html[dir="rtl"] .hero-stats .stat b, html[dir="rtl"] .m-year { font-family: "Amiri", serif; } html[dir="rtl"] .eyebrow, html[dir="rtl"] .breadcrumb { letter-spacing: 0.08em; } /* Timeline — flip to the right */ html[dir="rtl"] .timeline { padding-left: 0; padding-right: 1.6rem; } html[dir="rtl"] .timeline::before { left: auto; right: 6px; } html[dir="rtl"] .timeline li::before { left: auto; right: -1.6rem; } /* Detail table — align right */ html[dir="rtl"] .detail-table th, html[dir="rtl"] .detail-table td { text-align: right; } /* Buttons with arrows — point left in RTL */ html[dir="rtl"] .btn--gold, html[dir="rtl"] .btn--green, html[dir="rtl"] .card a.card-link { letter-spacing: 0; } /* History timeline — mirror the alternating entries */ html[dir="rtl"] .history-timeline::before { left: 50%; transform: translateX(-50%); } html[dir="rtl"] .ht-entry { padding: 0 0 2.8rem 3rem; } html[dir="rtl"] .ht-entry::before { right: auto; left: -11px; } html[dir="rtl"] .ht-entry--alt { margin-left: 0; margin-right: 50%; padding: 0 3rem 2.8rem 0; } html[dir="rtl"] .ht-entry--alt::before { left: auto; right: -11px; } /* History timeline mobile — flip padding to the right in RTL */ @media (max-width: 560px) { html[dir="rtl"] .history-timeline::before { left: auto; right: 8px; } html[dir="rtl"] .ht-entry, html[dir="rtl"] .ht-entry--alt { padding: 0 2.2rem 2rem 0; } html[dir="rtl"] .ht-entry::before, html[dir="rtl"] .ht-entry--alt::before { left: auto; right: -11px; } html[dir="rtl"] .ht-era { justify-content: flex-end; padding-left: 0; padding-right: 2.2rem; } } /* Compare slider — keep labels on their sides */ html[dir="rtl"] .compare .compare-label--left { left: 1rem; right: auto; } html[dir="rtl"] .compare .compare-label--right { right: 1rem; left: auto; } /* Gallery captions — right aligned text reads naturally */ html[dir="rtl"] .gallery-grid figcaption { text-align: right; } /* Arabic block already uses dir="rtl" — ensure it stays so even in Arabic pages */ .arabic-block { direction: rtl; text-align: right; } /* Arabic text inside English-styled quotes */ html[dir="rtl"] .quote, html[dir="rtl"] .notice, html[dir="rtl"] .lede { text-align: right; }