/* FX Runtime — RTL-first base. LOGICAL PROPERTIES ONLY (no left/right, no float, no letter-spacing, no uppercase, no justify). */ :root { --f-dir: 1; /* set to -1 under RTL by functions.php; use in transforms: translateX(calc(20px * var(--f-dir))) */ --f-lh-body: 1.6; --f-lh-heading: 1.25; --f-font-body: "Plex", "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; } /* Direction tokens must win by SPECIFICITY (0,2,0), not by source order. */ :root[dir="rtl"] { --f-dir: -1; --f-lh-body: 1.9; --f-lh-heading: 1.4; } /* Arabic normalisation — applies to the text, not only . */ [dir="rtl"], [dir="rtl"] *, [lang|="ar"], [lang|="ar"] *, :lang(ar), :lang(ar) * { letter-spacing: normal; text-transform: none; font-variant-ligatures: normal; text-rendering: optimizeLegibility; } [dir="rtl"] body, :lang(ar) body { line-height: var(--f-lh-body); } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: var(--f-lh-heading); } /* Bidi isolation is the renderer's job; defend against resets. */ bdi { unicode-bidi: isolate; } .f-ltr { direction: ltr; unicode-bidi: isolate; } /* Mirroring is OPT-IN, only for directional icons (never images or logos). */ [dir="rtl"] .f-mirror { transform: scaleX(-1); } /* Client media slots render as real , never CSS backgrounds. */ .fx-slot-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }