/** * ar.css — Arabic RTL layout overrides for H&H Style * * Loaded only on Arabic pages (injected via {{AR_CSS_LINK}} token). * Assumes is already set on the page. * * The base style.css sets body { direction: ltr } explicitly, so we * override that here and adjust all directional properties for RTL. */ /* ─── Font & Direction ──────────────────────────────────────────── */ html[lang="ar"] body { direction: rtl; font-family: "Tajawal", "Inter", sans-serif; } /* ─── Nav underline / active indicator ─────────────────────────── */ html[lang="ar"] .nav-links a:after { left: auto; right: 0; } /* ─── Lang dropdown placement ──────────────────────────────────── */ html[lang="ar"] .lang-menu { left: 0; right: auto; } /* ─── Navbar: reverse logo / nav / lang-selector order ─────────── */ html[lang="ar"] .navbar { flex-direction: row-reverse; } /* ─── Hero info: text aligns right in RTL ───────────────────────── */ html[lang="ar"] .hero-info { text-align: right; } html[lang="ar"] .hero-progress-ring { left: auto; right: 0; } /* ─── Campaign rows ─────────────────────────────────────────────── */ /* Default row: image left, text right — in RTL flip to image right, text left */ html[lang="ar"] .campaign-row { flex-direction: row-reverse; } /* `is-reversed` was already the mirror of the default; in RTL it becomes the same as default */ html[lang="ar"] .campaign-row.is-reversed { flex-direction: row; } /* ─── Footer: reverse column order for RTL reading ─────────────── */ html[lang="ar"] .footer-content { flex-direction: row-reverse; } html[lang="ar"] .footer-col { text-align: right; } html[lang="ar"] .footer-col ul { padding-right: 0; } html[lang="ar"] .footer-bottom { flex-direction: row-reverse; } /* ─── Contact layout: info section on right in RTL ─────────────── */ html[lang="ar"] .contact-layout { flex-direction: row-reverse; } html[lang="ar"] .contact-item { flex-direction: row-reverse; text-align: right; } html[lang="ar"] .contact-text { text-align: right; } /* ─── Social-connect alignment ──────────────────────────────────── */ html[lang="ar"] .social-connect { text-align: right; } html[lang="ar"] .social-links { justify-content: flex-end; } /* ─── intl-tel-input: keep phone flag dropdown LTR ─────────────── */ html[lang="ar"] .iti { direction: ltr; } html[lang="ar"] .iti input { text-align: left; } /* ─── Form alignment ────────────────────────────────────────────── */ html[lang="ar"] .contact-form h3, html[lang="ar"] .contact-info-section h3, html[lang="ar"] .contact-info-section h4, html[lang="ar"] .contact-info-section p { text-align: right; } /* ─── Section header text ───────────────────────────────────────── */ html[lang="ar"] .section-header { text-align: right; } html[lang="ar"] .section-header h1, html[lang="ar"] .section-header h2, html[lang="ar"] .section-header .section-subhead { text-align: right; } /* ─── Page content / essay ──────────────────────────────────────── */ html[lang="ar"] .essay { text-align: right; } /* ─── FAQ ────────────────────────────────────────────────────────── */ html[lang="ar"] .faq-question { flex-direction: row-reverse; text-align: right; } html[lang="ar"] .faq-answer-inner { text-align: right; } /* ─── Feature cards ─────────────────────────────────────────────── */ html[lang="ar"] .feature-card { text-align: right; } /* ─── Collab slides ─────────────────────────────────────────────── */ html[lang="ar"] .collab-copy { text-align: right; } /* ─── CTA / map section ─────────────────────────────────────────── */ html[lang="ar"] .cta-content { text-align: right; } /* ─── Nav mobile (collapsed state remains usable in RTL) ────────── */ html[lang="ar"] .nav-links { text-align: right; } /* ─── Misc: required asterisk margin ───────────────────────────── */ html[lang="ar"] .required { margin-left: 0; margin-right: 6px; }