/* * Kulud Academy — RTL / Arabic layer for the .kla- components * Phase 2. run_id KACAD_DS_20260805_200229_54ad1e44 * * ── WHY THIS IS NOT WIRED THROUGH WordPress's RTL MECHANISM ────────── * The usual pattern is wp_style_add_data($handle,'rtl',…), which makes * WordPress swap in a -rtl stylesheet when is_rtl() is true. That is wrong * here for two reasons found during the Phase 1 audit: * * 1. is_rtl() is NEVER true on this site. There is no multilingual plugin * (no WPML / Polylang / TranslatePress), WPLANG is empty and the locale * is en-US. A stylesheet gated on is_rtl() is a stylesheet that never * loads — which is exactly the state the theme's existing root rtl.css * is in today. * * 2. How Arabic gets selected at all is still an open decision (D7). It may * end up per-locale, per-page or per-user. Anything gated on the site * locale would have to be rewritten under two of those three outcomes. * * So this file is ALWAYS loaded and scopes itself to [dir="rtl"] instead. * It then works whether direction is set on , on a wrapper div, or on * a single Arabic block inside an otherwise English page — no PHP required. * * ── HOW LITTLE IS HERE, AND WHY THAT IS THE POINT ──────────────────── * components.css is written with LOGICAL properties throughout — * inline-size, margin-block, padding-inline, border-inline-end, * text-align:start. Those flip on their own. Only the handful of things * logical properties cannot express need a rule here. * * ⚠ DO NOT extend the theme's existing root rtl.css instead of this file. * That file is registered with wp_style_add_data('manara-child','rtl', * 'replace'), and 'replace' makes WordPress look for assets/manara-rtl.css * — which does not exist. If an RTL locale is ever switched on, manara.css * would be REPLACED BY NOTHING and the LMS pages would lose their styling. * That is a latent bug worth fixing separately; do not build on top of it. */ /* ── DIRECTION ──────────────────────────────────────────────────────── */ [dir="rtl"] .kla-tabs__list, [dir="rtl"] .kla-card, [dir="rtl"] .kla-badge, [dir="rtl"] .kla-accordion { text-align: right; } /* ── THE CHEVRON ──────────────────────────────────────────────────────── * The accordion marker is a box with two borders rotated 45deg. Because it * uses border-inline-end, the borders themselves already move to the other * side in RTL — but the ROTATION does not mirror, so the arrow ends up * pointing the wrong way. Rotation is one of the few things with no logical * equivalent; it has to be restated. */ [dir="rtl"] .kla-accordion__marker { transform: rotate(-45deg); } [dir="rtl"] .kla-accordion__trigger[aria-expanded="true"] .kla-accordion__marker { transform: rotate(135deg); } /* ── SCROLLING TAB STRIP ──────────────────────────────────────────────── * An overflow-x strip starts scrolled to its inline-start edge, which is * correct, but some engines still report scroll position from the left. * Anchoring the first tab keeps the strip visually correct on first paint. */ [dir="rtl"] .kla-tabs__list { direction: rtl; } /* ── ARABIC TYPOGRAPHY ────────────────────────────────────────────────── * IBM Plex Sans Arabic renders optically smaller than the same size in * Latin, and Arabic ascenders/descenders need more vertical room — set the * same leading as English and the script looks cramped and hard to read at * lesson length. These two adjustments are the difference between "the * Arabic fits" and "the Arabic is comfortable to read". * * Keyed to [lang="ar"] rather than [dir="rtl"] on purpose: the adjustment * belongs to the SCRIPT, not the direction. */ [lang="ar"], [dir="rtl"] { font-family: var(--kla-font); line-height: var(--kla-ar-leading-adjust); } [lang="ar"] .kla-card__title, [dir="rtl"] .kla-card__title { font-size: calc(var(--kla-text-md) * var(--kla-ar-size-adjust)); line-height: var(--kla-leading-snug); } /* Arabic has no capital letters, so uppercasing is a no-op at best and letter-spacing actively breaks the cursive joins between glyphs. */ [lang="ar"] .kla-card__eyebrow, [dir="rtl"] .kla-card__eyebrow { text-transform: none; letter-spacing: 0; } /* ── MIXED-DIRECTION CONTENT ──────────────────────────────────────────── * Latin runs inside Arabic text — drug names, dosages, course codes, an * English brand — must keep their own direction, or the bidi algorithm * reorders them and "Vitamin D3 1000 IU" comes out scrambled. isolate is * the correct value: it also stops the run from affecting the text around * it, which embed/bidi-override do not. */ [dir="rtl"] [lang="en"], [dir="rtl"] .kla-ltr, [dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] samp, [dir="rtl"] .kla-card__meta time { unicode-bidi: isolate; direction: ltr; } /* Numbers, percentages and progress labels read left-to-right even in Arabic copy. Isolating them keeps a trailing % or / on the correct side. */ [dir="rtl"] .kla-progress__label, [dir="rtl"] .kla-badge__label:has(+ .kla-ltr) { unicode-bidi: isolate; } /* ── WHAT IS DELIBERATELY ABSENT ──────────────────────────────────────── * No rules for the parent theme (.thim-*), LearnPress (.lp-*, .course-*) or * Elementor. Eduma ships no RTL support at all, and retro-fitting it from a * child theme means overriding thousands of physical-property declarations * that will be rewritten on the next parent update. That is Phase 3 work, * scoped page by page against real Arabic content — not a blanket flip. */