/* ================================================================ Sokoon — LTR overrides ---------------------------------------------------------------- Loaded after style.css. Every rule scoped to [dir="ltr"] so it only applies when LanguageService sets . When user is in Arabic (dir="rtl"), these rules are inert. ================================================================ */ /* ---- Cascading direction reset ---- style.css line 89 hardcodes `body { direction: rtl }` which cascades to every descendant and locks the entire page to RTL regardless of . Reset it for LTR. */ [dir="ltr"] body { direction: ltr; } /* ---- Elements with their own hardcoded `direction: rtl` ---- Each must be explicitly flipped because cascade doesn't reach them. */ [dir="ltr"] .theme2 .main-menu { direction: ltr; } [dir="ltr"] .theme2 .blog-strip { direction: ltr; } [dir="ltr"] .form-control { direction: ltr; } /* ---- text-align flips (theme2 elements that hardcode `right`) ---- */ [dir="ltr"] .theme2 .blog-title { text-align: left; } /* ---- Physical margin flips on footer store-btn icon ---- */ [dir="ltr"] .theme2 .store-btn i { margin-left: 0; margin-right: 7px; } /* ================================================================ NON-direction-specific overrides (apply in both RTL and LTR) ================================================================ */ /* Cluster nav items next to the logo instead of spreading them to the far edge. style.css line 17297 sets `justify-content: end` which pushes items AWAY from the logo regardless of direction. `start` makes items align next to the logo (right side in RTL, left side in LTR). */ .theme2 .main-menu { justify-content: start; } /* Keep the language toggle anchored to the far edge (opposite side from the logo). `margin-inline-start: auto` on its LI pushes it to the end of the flex container — works in both RTL and LTR. Previously anchored to .search-btn but that element is now commented out. */ .theme2 .main-menu .nav-item:has(.small-link) { margin-inline-start: auto; } /* Match the spacing between the logo and the first nav item to the inter-item gap (36px). The navbar is a flex container; gap applies between the brand and the collapse area, regardless of direction. */ .theme2 .navbar { gap: 36px; }