/* ===================================================================== RTL OVERRIDES — loaded AFTER style.css, only on Arabic pages (pages that have ) ===================================================================== This file only contains the differences needed to mirror the layout for right-to-left reading. It does not repeat rules from style.css. ===================================================================== */ /* Arabic-friendly font stack. Uses the same --font-body variable so the "change all fonts" instructions in style.css still apply — this just swaps in an Arabic-capable family first. Load the actual web font (e.g. Tajawal) via a tag in the of the Arabic pages. */ :root { --font-body: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; --font-serif: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; } html[dir="rtl"] body { text-align: right; } /* Eyebrow labels: wide letter-spacing distorts Arabic script */ [dir="rtl"] .eyebrow { letter-spacing: 0; } /* Hero: icon moves to the left, text block reads from the right */ [dir="rtl"] .hero-icon-large { right: auto; left: 6%; } @media (max-width: 767px) { [dir="rtl"] .hero-icon-large { left: 4%; right: auto; } } /* About section decorative motif mirrors to the left */ [dir="rtl"] .about-image::before { right: auto; left: -24px; } /* Advisory Process decorative motif + arrow direction */ [dir="rtl"] .process-section::after { right: auto; left: -90px; } [dir="rtl"] .process-arrow svg { transform: rotate(-90deg); } @media (min-width: 1024px) { [dir="rtl"] .process-arrow svg { transform: rotate(180deg); } } /* Why Pinnacle decorative motif mirrors to the right */ [dir="rtl"] .why-section::after { left: auto; right: -90px; } /* Footer decorative motif mirrors to the left */ [dir="rtl"] .site-footer::after { right: auto; left: -60px; } /* Final CTA decorative shapes swap sides */ [dir="rtl"] .cta-shape.left { left: auto; right: -30px; } [dir="rtl"] .cta-watermark { right: auto; left: -60px; } /* Mobile nav decorative motif mirrors to the left */ [dir="rtl"] .mobile-nav::after { right: auto; left: -70px; } /* Skip link should land on the right in RTL */ [dir="rtl"] .skip-link:focus { left: auto; right: 12px; } /* Legal notice / callout accent bar switches to the right edge */ [dir="rtl"] .legal-notice { border-left: none; border-right: 4px solid var(--emerald-teal); } /* Bullet / checklist icons: no directional change needed (flex handles it), but tighten the icon-to-text gap direction for Arabic reading */ [dir="rtl"] .bullet-item, [dir="rtl"] .form-field { text-align: right; } /* Form placeholder text should also be right-aligned */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; }