/* RealEstate Hup — Arabic / RTL layer. Loaded ONLY on /ar/ requests (see inc/i18n.php). The base CSS is already logical-property authored, so direction flips natively under . This file adds Arabic typography, bidi isolation, and directional-icon polish. No physical left/right hacks — logical properties only. */ /* ---- Arabic typography: Noto Kufi Arabic (already enqueued) ---- */ html[dir="rtl"] body, html[dir="rtl"] .rh, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button { font-family: "Noto Kufi Arabic", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; /* Latin letter-spacing must never apply to Arabic script. */ letter-spacing: normal; } /* Arabic needs a touch more vertical breathing room for legibility. */ html[dir="rtl"] body { line-height: 1.75; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .rh-h1, html[dir="rtl"] .rh-h2 { line-height: 1.4; letter-spacing: normal; } /* Headings/labels sometimes rely on 600–800 weights; Noto Kufi covers them. */ html[dir="rtl"] b, html[dir="rtl"] strong { font-weight: 700; } /* ---- Bidi isolation for mixed Arabic + Latin (SODIC, VYE, phase numbers) ---- */ html[dir="rtl"] .rh-bidi, html[dir="rtl"] [data-bidi] { unicode-bidi: isolate; } /* Prices / phone / any latin numeric run stays LTR inside RTL flow. */ html[dir="rtl"] .rh-onreq { unicode-bidi: plaintext; } html[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; } /* ---- Phone component (intl-tel-input) must remain LTR ---- */ html[dir="rtl"] .iti, html[dir="rtl"] .iti input, html[dir="rtl"] input[type="tel"] { direction: ltr; text-align: start; /* start = right edge in RTL container, keeps flag+digits natural */ } /* Keep the country dropdown readable: white bg, dark text (do not regress). */ html[dir="rtl"] .iti__country-list { text-align: right; direction: rtl; } html[dir="rtl"] .iti__country-name, html[dir="rtl"] .iti__dial-code { color: #1a1a1a; } /* ---- Directional icons: mirror chevrons/arrows, never mirror brand/photo icons ---- */ html[dir="rtl"] .rh-icn--chevron, html[dir="rtl"] .rh-icn--arrow, html[dir="rtl"] .rh-breadcrumb svg, html[dir="rtl"] .rh-pagination__prev svg, html[dir="rtl"] .rh-pagination__next svg, html[dir="rtl"] .rh-back svg { transform: scaleX(-1); } /* Whatsapp / logo / social / non-directional icons must NOT flip. */ html[dir="rtl"] .rh-logo svg, html[dir="rtl"] .rh-btn--primary svg, html[dir="rtl"] .rh-wa svg { transform: none; } /* ---- Language switcher: keep the Latin label upright ---- */ html[dir="rtl"] .rh-lang { direction: ltr; unicode-bidi: isolate; } /* ---- Media never mirrors (masterplan, gallery, maps, renders) ---- */ html[dir="rtl"] .rh-masterplan img, html[dir="rtl"] .rh-gallery img, html[dir="rtl"] .rh-hero img, html[dir="rtl"] .rh-card__media img, html[dir="rtl"] .rh-dev__logo img { transform: none; } /* ---- Fluid CTA sizing: Arabic labels run wider than English ---- */ html[dir="rtl"] .rh-btn { white-space: nowrap; } html[dir="rtl"] .rh-btn--block { white-space: normal; } /* Horizontal overflow is NOT masked with overflow-x:hidden here — the layout is logical-property safe; any real overflow is found and fixed at source in QA. */