/** * RTL layout foundation for the Arabic site (/ar/). * Ported architecture from websites/ccl/css/rtl.css (WP-HEYGO-MASTER-001 * §6A/U — proven pattern, HeyGo-specific overrides only). Uses logical * properties where practical rather than a fully mirrored stylesheet. * Selectors are scoped from html[dir="rtl"]/html[lang="ar"] — CCL's own * lesson learned (2026-07-24): a bare form[lang="ar"] selector never * matches, since CSS attribute selectors don't check ancestor elements; * lang/dir are set on only, so every rule here is a descendant * selector from there. */ html[dir="rtl"], html[lang="ar"] { direction: rtl; text-align: right; /* Phase 10 performance/correctness: Raleway/Lato (the Latin-only fonts set by --heygo-font-display/--heygo-font-body) have no Arabic glyph coverage — the Noto Kufi Arabic import already added to ar/index.php's Google Fonts request (Phase 6) was otherwise unused. Overriding the two custom properties here means every existing rule that already references var(--heygo-font-display)/var(--heygo-font-body) picks up the Arabic font automatically — no rule-by-rule change needed. */ --heygo-font-display: 'Noto Kufi Arabic', 'Raleway', ui-sans-serif, system-ui, sans-serif; --heygo-font-body: 'Noto Kufi Arabic', 'Lato', ui-sans-serif, system-ui, sans-serif; } html[lang="ar"] body { /* body's own rule in style.css hardcodes Arial/Helvetica rather than using --heygo-font-body — the one place the variable swap above doesn't reach, so it needs its own explicit override. */ font-family: 'Noto Kufi Arabic', Arial, Helvetica, sans-serif; } html[dir="rtl"] form label, html[lang="ar"] form label { text-align: right; } html[dir="rtl"] form .form-control, html[lang="ar"] form .form-control, html[dir="rtl"] form input, html[lang="ar"] form input, html[dir="rtl"] form textarea, html[lang="ar"] form textarea { direction: rtl; text-align: right; } html[dir="rtl"] ul, html[dir="rtl"] ol, html[lang="ar"] ul, html[lang="ar"] ol { padding-inline-start: 2rem; padding-inline-end: 0; } /* .footer-hrg-line's accent border sits on the start edge (left in LTR) — mirror it to the RTL start edge (right) rather than leaving a physically left-side border on a right-aligned paragraph. */ html[dir="rtl"] .footer-hrg-line, html[lang="ar"] .footer-hrg-line { padding-left: 0; padding-right: 16px; border-left: none; border-right: 4px solid var(--heygo-brand); } /* .image-transition-cell's divider border sits on the physical right in the LTR source (both cells get it today — a pre-existing, unfixed minor cosmetic quirk, not something introduced here). Mirrored to the left for RTL rather than "fixed" only in one direction, so RTL matches LTR's actual behaviour rather than a behaviour LTR doesn't have. */ html[dir="rtl"] .image-transition-cell, html[lang="ar"] .image-transition-cell { border-right: 0; border-left: 1px solid var(--heygo-white); } /* Honeypot fields must stay visually hidden the same way in RTL as LTR — the inline left:-9999px offset already works regardless of direction since it's an absolute pixel offset, not a logical property; no override needed here (mirrors the CCL original's own note on this exact point). */ /* Phase 13 correction (Section 15): Arabic hero headline was inheriting the exact same font-size/line-height/max-width as the English h1. Arabic script (particularly a Kufi-style display face) reads visually heavier at an identical pixel size than the Latin headline it was tuned against, and the reported effect ("occupies substantially more visual area") is consistent with that, not a bug in the shared rule itself — English isn't wrong, Arabic just needs its own tuning rather than mathematically duplicating English's numbers (explicitly not required per this instruction). Sized down proportionally at each of the three breakpoints the base rule defines, same reading order/RTL behaviour untouched. */ html[lang="ar"] .heygo-hero h1 { max-width: 620px; line-height: 1.25; } @media (min-width: 768px) { html[lang="ar"] .heygo-hero h1 { font-size: 56px; line-height: 1.2; } } @media (min-width: 992px) { html[lang="ar"] .heygo-hero h1 { font-size: 68px; letter-spacing: 0; line-height: 1.2; } }