/* Applied automatically once js/i18n.js sets . Add to this file as you notice more mirrored elements needing adjustment. */ html[dir="rtl"] body { font-family: 'Cairo', 'Inter', sans-serif; } /* Flip common directional utility patterns. Adjust/extend these selectors to match your actual style.css class names. */ html[dir="rtl"] .nav-menu { flex-direction: row-reverse; } html[dir="rtl"] .hero-actions, html[dir="rtl"] .nav-actions, html[dir="rtl"] .footer-social, html[dir="rtl"] .role-chips { flex-direction: row-reverse; } html[dir="rtl"] .link-arrow { flex-direction: row-reverse; } html[dir="rtl"] .link-arrow svg { transform: scaleX(-1); /* mirror the arrow icon to point left */ } html[dir="rtl"] .contact-method .icon { margin-left: 12px; margin-right: 0; } /* Text alignment: most sections are already centered, but explicitly left-aligned copy blocks should flip to right-aligned in RTL. */ html[dir="rtl"] .hero-copy, html[dir="rtl"] .section-head, html[dir="rtl"] .footer-col, html[dir="rtl"] .footer-brand { text-align: right; }