/* * Arabic / RTL overrides. Loaded ONLY on /ar/ pages (injected by i18n.php). * The dir="rtl" on already mirrors normal flow; this file fixes the * few things that don't flip automatically and gives Arabic a readable font. * * ponytail: intentionally minimal. Uses a system Arabic font stack (no webfont * = no extra network request). Swap in Cairo/Tajawal via @font-face and add * per-component mirroring here if the brand wants pixel-perfect RTL polish. */ :root { --font-heading-ar: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, 'Geeza Pro', 'Arial', sans-serif; --font-body-ar: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, 'Geeza Pro', 'Arial', sans-serif; } html[dir="rtl"] body { font-family: var(--font-body-ar); text-align: right; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .hero-title, html[dir="rtl"] .section-title { font-family: var(--font-heading-ar); letter-spacing: 0; /* Arabic must not be letter-spaced */ } /* Latin bits that should stay LTR inside an RTL page (phones, emails, brand). */ html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] .nav-phone, html[dir="rtl"] .footer-copyright, html[dir="rtl"] .footer-developer { direction: ltr; unicode-bidi: embed; } /* Keep number/phone spans reading left-to-right even when nested in RTL text. */ html[dir="rtl"] .nav-phone span, html[dir="rtl"] .footer-contact-item span { direction: ltr; unicode-bidi: plaintext; } /* Lists and form fields align to the start (right) edge. */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.25rem; padding-left: 0; } html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* Language toggle chip. */ .lang-toggle { font-weight: 700; letter-spacing: .02em; } html[dir="rtl"] .lang-toggle { letter-spacing: 0; } /* ============================================================ * Component RTL fixes — flip the physical-direction properties * (text-align, left/right positioning, asymmetric padding/margin) * that don't mirror automatically under dir="rtl". * ============================================================ */ /* --- Header / navigation --- */ /* The fixed "Call Us" pill is pinned to the right edge; mirror it to the left. */ html[dir="rtl"] .nav-cta-fixed { right: auto !important; left: 1.5rem; } /* The desktop CTA cluster used a right margin to clear that pill. */ html[dir="rtl"] .nav-cta { margin-right: 0; margin-left: 8rem; } /* Scrolled "capsule" nav: the base rule (.nav.scrolled .nav-cta{margin-right}) out-specifies the one above, so its PHYSICAL right margin shoves the CTA cluster off the left edge in RTL. The capsule is narrow here and sits away from the fixed pill, so no big margin is needed — zero it out. */ html[dir="rtl"] .nav.scrolled .nav-cta { margin-right: 0 !important; margin-left: 0 !important; } /* Mirror the capsule's asymmetric inner padding (right/left are swapped in RTL). */ html[dir="rtl"] .nav-capsule-inner, html[dir="rtl"] .nav.scrolled .nav-capsule-inner { padding-right: 1.5rem; padding-left: 1rem; } /* Arabic nav labels ("الأسئلة الشائعة" vs "FAQ") are wider than English, so the row overflowed the scrolled capsule and the CTA cluster spilled out the left. Keep the capsule the same width as English (so the floating call pill never overlaps it) and shrink the Arabic nav to fit: tighter gaps, slightly smaller labels, and an icon-only phone in the compact scrolled state. */ html[dir="rtl"] .nav-links { gap: .5rem; } /* Scrolled capsule is 900px; Arabic content ran ~120px over, so shrink the labels and spacing enough to fit (needs !important to beat the base nav-link sizing) and drop the long phone number to just its icon when compact. */ html[dir="rtl"] .nav.scrolled .nav-links { gap: .35rem !important; } html[dir="rtl"] .nav.scrolled .nav-links .nav-link { font-size: .8rem !important; } html[dir="rtl"] .nav.scrolled .nav-cta { gap: .45rem; } html[dir="rtl"] .nav.scrolled .nav-phone span { display: none; /* keep the phone icon, drop the long number when compact */ } /* Dropdown panels + mobile menu read from the right. */ html[dir="rtl"] .nav-dropdown-menu, html[dir="rtl"] .dropdown-group, html[dir="rtl"] .dropdown-header, html[dir="rtl"] .dropdown-link { text-align: right; } html[dir="rtl"] .mobile-menu-content, html[dir="rtl"] .mobile-nav-link, html[dir="rtl"] .mobile-dropdown-toggle, html[dir="rtl"] .mobile-dropdown-link { text-align: right; } /* The mobile "Back" button icon/label group starts from the right. */ html[dir="rtl"] .mobile-menu-back-btn { flex-direction: row-reverse; } /* --- FAQ --- */ html[dir="rtl"] .faq-question { text-align: right; } /* Space between the question text and the chevron sits on the opposite side. */ html[dir="rtl"] .faq-question-content { padding-right: 0; padding-left: var(--space-4); } html[dir="rtl"] .faq-answer, html[dir="rtl"] .faq-answer-content { text-align: right; } /* Bulleted answers use an inline padding-left — flip it (needs !important to beat the element's inline style). */ html[dir="rtl"] .faq-answer-content ul, html[dir="rtl"] .faq-answer-content ol { padding-left: 0 !important; padding-right: 1.5rem !important; } /* --- Icon chips / trust badges (asymmetric padding around the leading icon) --- */ html[dir="rtl"] .hero-trust-chip { padding: .6rem .6rem .6rem 1rem; } /* Generic badge/pill: keep icon+label centred, just don't letter-space Arabic. */ html[dir="rtl"] .badge, html[dir="rtl"] .services-hero-badge { letter-spacing: 0; } /* --- Footer --- */ html[dir="rtl"] .footer-contact-item, html[dir="rtl"] .footer-brand-text, html[dir="rtl"] .footer-links, html[dir="rtl"] .footer-heading { text-align: right; } /* --- Section headers stay centred (already are), but drop Latin letter-spacing --- */ html[dir="rtl"] .section-subtitle, html[dir="rtl"] .hero-body { letter-spacing: 0; } /* --- Client logo marquee: keep it LTR so the translateX animation stays continuous. Under dir=rtl the reversed flex axis makes it jump/break. --- */ html[dir="rtl"] .marquee-section, html[dir="rtl"] .marquee-track, html[dir="rtl"] .marquee-item { direction: ltr; } /* --- Hero "Featured" slide-info card is pinned to the right; in RTL the hero text is on the right too, so mirror the card to the left to stop the overlap. --- */ html[dir="rtl"] .hero-slide-info { right: auto !important; left: 3rem; } /* Hero bullet list uses an inline margin-left; flip it. */ html[dir="rtl"] .hero-content ul[style*="margin-left"] { margin-left: 0 !important; margin-right: 1.5rem !important; }