/* ============================================================================ RTL overrides — applied ONLY on dir="rtl" pages (ar, he). Loaded conditionally from head.php so the 28 LTR locales never fetch it. First pass (2026-06-17): browser already flows TEXT right-to-left from ; this file mirrors the PHYSICAL direction props that do NOT auto-flip (margins/paddings/text-align on global chrome) + flips directional icons. Per-page component mirroring is iterated separately. All selectors verified present in home.css before adding. ============================================================================ */ /* --- FIX (owner-reported 2026-06-17): skip-link hidden via left:-9999px. Harmless in LTR, but in RTL the scroll origin flips -> ~9999px horizontal scrollbar across the page. Hide it off the TOP instead (no horizontal overflow either direction), still revealed on focus. --- */ [dir="rtl"] .xh-skip-link { left: 0 !important; right: auto !important; top: -9999px !important; } [dir="rtl"] .xh-skip-link:focus { left: auto !important; right: 16px !important; top: 16px !important; } /* --- Global text direction default for prose/content --- */ [dir="rtl"] .xh-prose, [dir="rtl"] .xa-prose, [dir="rtl"] .xh-play-section, [dir="rtl"] .xh-page-content { text-align: right; } /* --- Header: logo spacing + right-cluster push --- */ [dir="rtl"] .xh-logo { margin-right: 0; margin-left: 16px; } [dir="rtl"] .xh-header-right { margin-left: 0; margin-right: auto; } /* --- Breadcrumbs: indent is on the start side --- */ [dir="rtl"] .xh-breadcrumbs { padding-left: 16px; padding-right: calc(16px + var(--xh-bc-indent, 14px)); } /* --- Store-badge stack text alignment --- */ [dir="rtl"] .xh-store-badge-stack { text-align: right; } /* --- Stat separators: border + padding move to the start side --- */ [dir="rtl"] .xh-stat { border-left: 0; border-right: 1px solid var(--xh-border); padding-left: 0; padding-right: 24px; } /* --- Mirror directional icons (breadcrumb chevrons, "more →" arrows) --- */ [dir="rtl"] .xh-breadcrumbs svg, [dir="rtl"] .xh-bc-sep svg, [dir="rtl"] .xh-arrow svg { transform: scaleX(-1); }