/* ========================================================================== RTL (Right-to-Left) support for Arabic pages Loaded ONLY on /ar/ pages, in addition to style.css Works together with on the page element ========================================================================== */ html[dir="rtl"] body { direction: rtl; text-align: right; } /* Navigation */ html[dir="rtl"] .nav { flex-direction: row-reverse; } html[dir="rtl"] .nav-links { flex-direction: row-reverse; } html[dir="rtl"] .nav-toggle { right: auto; left: 20px; } /* Hero / sections that were centered stay centered - text-align:center is direction-agnostic */ html[dir="rtl"] .hero, html[dir="rtl"] .section-head { text-align: center; } /* Grids and flex rows - mirror horizontal order */ html[dir="rtl"] .grid-3, html[dir="rtl"] .grid-2 { direction: rtl; } /* Icons/bullets that sit to the left of text in LTR should sit to the right in RTL */ html[dir="rtl"] .icon-dot { margin-left: 0; margin-right: auto; } /* Buttons with icons */ html[dir="rtl"] .btn svg, html[dir="rtl"] .btn img { margin-right: 0; margin-left: 8px; } /* Floating WhatsApp button: mirror from bottom-right to bottom-left so it doesn't collide with RTL scroll/reading gestures */ html[dir="rtl"] .whatsapp-float { right: auto; left: 24px; } html[dir="rtl"] .whatsapp-float-link { flex-direction: row-reverse; } /* Footer columns */ html[dir="rtl"] .site-footer { text-align: right; } /* Blockquotes / pull quotes - keep the accent border on the right in RTL */ html[dir="rtl"] blockquote { border-left: none; border-right: 3px solid var(--gold); padding-left: 0; padding-right: 1.2em; } /* Numbered/ordered lists in FAQ and blog articles */ html[dir="rtl"] ol, html[dir="rtl"] ul { padding-right: 1.4em; padding-left: 0; } /* Form fields (contact page) */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* Breadcrumbs / step indicators if arrows are used, flip them */ html[dir="rtl"] .step-arrow { transform: scaleX(-1); } /* Keep numerals, brand name, and email/phone left-to-right even inside RTL flow */ html[dir="rtl"] .ltr-inline, html[dir="rtl"] .brand-name, html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: embed; display: inline-block; } /* Arabic typography: use a font stack that renders Arabic script cleanly while keeping Montserrat/Inter for any Latin fragments (brand name, numerals) */ html[dir="rtl"] body { font-family: 'Tahoma', 'Segoe UI', 'Noto Sans Arabic', Inter, sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-family: 'Tahoma', 'Segoe UI', 'Noto Sans Arabic', Montserrat, sans-serif; letter-spacing: 0; /* wide letter-spacing breaks Arabic ligatures */ } /* Language switcher: mirror dropdown to open leftward, flip internal alignment */ html[dir="rtl"] .lang-item { margin-left: 0; margin-right: 4px; } html[dir="rtl"] .lang-current { flex-direction: row-reverse; } html[dir="rtl"] .lang-current .lang-caret { margin-left: 0; margin-right: 1px; } html[dir="rtl"] .lang-dropdown { right: auto; left: 0; text-align: right; } html[dir="rtl"] .lang-dropdown a { flex-direction: row-reverse; } @media (max-width: 780px) { html[dir="rtl"] .lang-dropdown { left: auto; right: auto; } }