/* ========================================================================== RTL (Right-to-Left) — Arabic language overrides Loaded only when lang=ar. Relies on .rtl class on and dir="rtl" on . ========================================================================== */ /* -------------------------------------------------------------------------- Typography — Arabic font stack -------------------------------------------------------------------------- */ /* Override design tokens for Arabic/RTL mode */ [dir="rtl"] { --font-display: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; --font-body: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; } .rtl, .rtl body, [dir="rtl"] { font-family: var(--font-body); } [dir="rtl"] .site-logo__name { font-family: var(--font-display); letter-spacing: 0; } /* -------------------------------------------------------------------------- Header — flip layout for RTL -------------------------------------------------------------------------- */ [dir="rtl"] .header-inner { flex-direction: row-reverse; } [dir="rtl"] .site-nav .nav-list { flex-direction: row-reverse; } [dir="rtl"] .lang-switcher { order: -1; } /* -------------------------------------------------------------------------- Mobile nav — flip close button -------------------------------------------------------------------------- */ [dir="rtl"] .mobile-nav { transform: translateX(-100%); } [dir="rtl"] .mobile-nav.open { transform: translateX(0); } [dir="rtl"] .mobile-nav__close { right: auto; left: var(--space-lg); } /* -------------------------------------------------------------------------- Language switcher styles (shared LTR + RTL) -------------------------------------------------------------------------- */ .lang-switcher { display: flex; align-items: center; } .lang-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.85rem; border: 1.5px solid var(--rose-gold); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; color: var(--rose-gold); text-decoration: none; white-space: nowrap; transition: background-color var(--transition-base), color var(--transition-base); } .lang-btn:hover { background-color: var(--rose-gold); color: var(--white); } .lang-switcher--mobile { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(183, 110, 121, 0.2); } /* -------------------------------------------------------------------------- Text alignment -------------------------------------------------------------------------- */ /* Hero and section titles stay centered in RTL */ [dir="rtl"] .hero__content { text-align: center; } [dir="rtl"] .page-hero { text-align: center; } [dir="rtl"] .page-hero__subtitle, [dir="rtl"] .section-subtitle { text-align: center; margin-inline: auto; } [dir="rtl"] .section-title { text-align: center; } /* Content blocks that should align right */ [dir="rtl"] .category-section__header { text-align: right; } [dir="rtl"] .footer-brand { text-align: right; } /* -------------------------------------------------------------------------- Story / About grid -------------------------------------------------------------------------- */ [dir="rtl"] .story-grid { direction: rtl; } /* -------------------------------------------------------------------------- Footer grid -------------------------------------------------------------------------- */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-links { padding-inline-start: 0; } [dir="rtl"] .footer-bottom { flex-direction: row-reverse; text-align: left; } /* -------------------------------------------------------------------------- Service cards -------------------------------------------------------------------------- */ [dir="rtl"] .service-card__body { text-align: right; } [dir="rtl"] .services-grid { direction: rtl; } /* -------------------------------------------------------------------------- Highlights — keep centered -------------------------------------------------------------------------- */ [dir="rtl"] .highlight-item { text-align: center; } /* -------------------------------------------------------------------------- Contact section -------------------------------------------------------------------------- */ [dir="rtl"] .contact-details { text-align: right; } [dir="rtl"] .contact-grid { direction: rtl; } /* -------------------------------------------------------------------------- Hero actions — keep centered -------------------------------------------------------------------------- */ [dir="rtl"] .hero__actions { justify-content: center; } /* -------------------------------------------------------------------------- Team section -------------------------------------------------------------------------- */ [dir="rtl"] .team-card { text-align: right; } /* -------------------------------------------------------------------------- Display font — use Cairo as display font too for Arabic -------------------------------------------------------------------------- */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .hero__title, [dir="rtl"] .section-title, [dir="rtl"] .story-title, [dir="rtl"] .service-card__name, [dir="rtl"] .footer-logo, [dir="rtl"] .site-logo__name { font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight: 700; letter-spacing: 0; } /* -------------------------------------------------------------------------- Ornament — keep centered regardless of direction -------------------------------------------------------------------------- */ [dir="rtl"] .ornament { display: block; text-align: center; } /* -------------------------------------------------------------------------- Category eyebrow labels -------------------------------------------------------------------------- */ [dir="rtl"] .category-section__header { text-align: right; } [dir="rtl"] .subcategory-heading { text-align: right; } /* -------------------------------------------------------------------------- Gallery & error page -------------------------------------------------------------------------- */ [dir="rtl"] .gallery-empty { text-align: right; } [dir="rtl"] .error-page .container { text-align: right; }