/* ========================================================================== Arabic / RTL overrides Loaded ONLY when the active locale is right-to-left (see resources/views/partials/rtl-assets.blade.php), so the English site never downloads or parses any of this. The bundled theme (css/clientside/app.min.css) already handles Phosphor icon flipping, Select2, DataTables and Slick via its own [dir="rtl"] rules , those switch on automatically once is set. What remains, and what lives here, is: the Arabic typeface, direction-aware fixes for this app's own components, and a safety net for the many hardcoded inline `left:` / `margin-left:` styles in the Blade views. ========================================================================== */ /* --- Typography ---------------------------------------------------------- */ html[dir="rtl"], html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { font-family: 'Readex Pro', 'Segoe UI', Tahoma, Arial, sans-serif; } /* The theme hardcodes its own font-family directly on these elements (h1-h6 -> "Inter", b/strong -> "Inter"), which , being a rule that targets the element itself rather than an inherited ancestor value , wins over html[dir="rtl"]'s inherited Readex Pro regardless of selector specificity. Every element with its own explicit, non-icon font-family needs an explicit override here; inheritance alone can't reach them. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3, html[dir="rtl"] .h4, html[dir="rtl"] .h5, html[dir="rtl"] .h6, html[dir="rtl"] b, html[dir="rtl"] strong { font-family: 'Readex Pro', 'Segoe UI', Tahoma, Arial, sans-serif; } /* Arabic has no letter-casing and no true small-caps; uppercase transforms are a no-op visually but the tracking they ship with makes text look loose and broken, so neutralise both. */ html[dir="rtl"] .text-uppercase, html[dir="rtl"] [style*="text-transform: uppercase"], html[dir="rtl"] [style*="text-transform:uppercase"] { text-transform: none !important; letter-spacing: normal !important; } /* Arabic glyphs sit taller than Latin; a touch more leading keeps diacritics from colliding with the line above. Multi-line body text gets the full bump; short single-line labels (buttons, badges, pills) keep a tighter value , at 1.85 the extra leading reads as visible empty space above/below the text rather than breathing room between lines. */ html[dir="rtl"] p, html[dir="rtl"] li { line-height: 1.85; } html[dir="rtl"] .text-14, html[dir="rtl"] .text-15, html[dir="rtl"] .text-16 { line-height: 1.6; } /* --- Direction-neutral numerals ------------------------------------------ */ /* Prices, dates, durations and counts must stay LTR even inside RTL text, otherwise "LE1,832.00" renders with the currency on the wrong side. */ html[dir="rtl"] .price, html[dir="rtl"] .amount, html[dir="rtl"] time, html[dir="rtl"] .session-card__meta-value, html[dir="rtl"] .session-card__timestamp { direction: ltr; unicode-bidi: embed; display: inline-block; } /* Readex Pro's ascent/descent metrics differ enough from the Latin fallback that plain digits set in it sit visibly higher than an inline-flex sibling icon, even though the flex box itself is centered correctly , the glyphs float inside their own line box. Numerals get nothing from Arabic typography anyway, so keep them on the Latin stack. */ html[dir="rtl"] [data-wallet-balance], html[dir="rtl"] .rs-step-badge, html[dir="rtl"] .mentorship-home-step__num { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; line-height: normal; } /* Every Phosphor icon () sitting next to Arabic text , eyebrow badges, course-card level/lesson-count rows, "show details" arrows, sort-dropdown carets, and anything else pairing an icon with a text node , shows the same optical mismatch: Readex Pro's glyphs render visually lower within their own line box than the icon glyph does within its, so even though the flex row centers both boxes at an identical geometric center (confirmed via getBoundingClientRect — the boxes really are centered), the icon reads as sitting noticeably above the text next to it. Same ascent/descent mismatch as the numerals above, just for running text instead of digits. This used to be patched per-wrapper (`span.flex.text-2xl { transform: translateY(2px) }`), which only covered icons wrapped in that exact span — everything else (bare `` siblings like the show-details arrow or the sort caret, which have no such wrapper) stayed broken. Targeting the icon element itself instead of a wrapper convention covers every occurrence in one rule, and using an em value (rather than a fixed px nudge) keeps the correction proportional across the icon's many font-sizes (text-2xl badges vs a plain-sized arrow) instead of only being tuned for one. */ /*Shutdown due switched to readex pro font*/ /*html[dir="rtl"] i[class^="ph-"],*/ /*html[dir="rtl"] i[class*=" ph-"] {*/ /* transform: translateY(0.12em);*/ /*}*/ /* Exception 1: an icon that's the ONLY content of a circular badge (the header search-trigger's magnifying glass, the student/mentor dashboard's mobile hamburger toggle, the homepage mentorship section's benefit icons, and the same pattern anywhere else on the site) has no adjacent text to optically align against — the badge centers it by flex alone, correctly, and the nudge above (tuned for icon-next-to-Arabic-text pairs) only pushes it *off* that already-correct center instead of fixing anything. .dashboard-menu-toggle and .mentorship-home-benefit-icon are listed explicitly alongside .rounded-circle since they draw their own circle via a plain border-radius:50% in the page's own