/* Selina Theme - RTL Support Layer -------------------------------------------- This stylesheet is loaded only when WordPress is running in RTL mode (e.g., Arabic, Hebrew). It is intended to complement the main styles without requiring extensive changes to front.css. Why this file exists: - Some RTL rules in the theme rely on body.rtl. In some environments (or with certain translation setups), the RTL class can be missing while the document direction is RTL via the dir attribute. - We therefore key off the document direction: html[dir="rtl"]. Scope: - High-impact layout fixes for header/nav, footer templates, and common UI. - Footer menu markers are mirrored so they appear on the correct side. */ /* A small helper selector that works whether RTL is on or a .rtl class exists. */ :where(html[dir="rtl"], .rtl) { direction: rtl; } /* ------------------------------------------------------------ Header / Navigation ------------------------------------------------------------ */ :where(html[dir="rtl"], .rtl) .selina-top-inner, :where(html[dir="rtl"], .rtl) .selina-bottom-inner { direction: rtl; } :where(html[dir="rtl"], .rtl) .selina-top-menu { justify-content: flex-end; } :where(html[dir="rtl"], .rtl) .selina-main-menu { justify-content: flex-end; } /* Sub menus should open from the right edge in RTL */ :where(html[dir="rtl"], .rtl) .selina-main-menu .sub-menu { right: 0; left: auto; text-align: right; } /* Desktop submenu toggles */ :where(html[dir="rtl"], .rtl) .selina-main-menu > li.menu-item-has-children > .selina-sub-toggle { right: auto; left: 10px; } :where(html[dir="rtl"], .rtl) .selina-main-menu .sub-menu li.menu-item-has-children > .selina-sub-toggle { right: auto; left: 10px; } /* Back-to-top button placement */ :where(html[dir="rtl"], .rtl) .selina-back-to-top { right: auto; left: 22px; } /* Mobile nav: toggle on the left in RTL (mirrors LTR placement) */ @media (max-width: 768px) { :where(html[dir="rtl"], .rtl) .selina-sub-toggle { right: auto; left: 6px; } :where(html[dir="rtl"], .rtl) .selina-main-menu > li.menu-item-has-children > .selina-sub-toggle { right: auto; left: 6px; } :where(html[dir="rtl"], .rtl) .selina-main-menu .sub-menu li.menu-item-has-children > .selina-sub-toggle { right: auto; left: 6px; } } /* ------------------------------------------------------------ Footer Templates (Columns / Mega) ------------------------------------------------------------ */ /* Force RTL direction inside footer templates. Some environments/plugins can leave nested components LTR even when the document is RTL. This guarantees correct column ordering + alignment. */ :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template, :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-grid, :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-links{ direction: rtl !important; } /* Footer columns in RTL --------------------- Avoid `justify-items: end` on the footer links grid. In CSS Grid, that can cause each .selina-ft-col to shrink to its content width, which makes headings/links look misaligned. We keep RTL direction, but ensure columns stretch and text aligns correctly. */ :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-links{ justify-items: stretch !important; } :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-links > .selina-ft-col{ justify-self: stretch !important; width: 100%; } :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-title, :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-nav, :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-desc{ text-align: right; } :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-social{ text-align: right; } /* Bottom row: move copyright to the right and links to the left in RTL */ :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-bottom{ flex-direction: row-reverse; } /* Make footer content align naturally in RTL */ :where(html[dir="rtl"], .rtl) .selina-footer-template .selina-ft-brand, :where(html[dir="rtl"], .rtl) .selina-footer-template .selina-ft-col { text-align: right; } /* Improve mixed LTR/RTL text blocks inside RTL pages (e.g., English text in Arabic UI). */ :where(html[dir="rtl"], .rtl) .selina-footer-template .selina-ft-desc, :where(html[dir="rtl"], .rtl) .selina-footer-template .selina-ft-copy { unicode-bidi: plaintext; } /* Footer column menus: RTL alignment without shrinking items */ :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-nav .selina-footer-menu{ align-items: stretch !important; } :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-nav .selina-footer-menu li, :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-nav .selina-footer-menu a{ width: 100%; } :where(html[dir="rtl"], body.rtl, .rtl) .selina-footer-template .selina-ft-nav .selina-footer-menu a{ text-align: right; } /* Footer menu marker/chevron: - LTR uses: li::before { content: '›'; left: 0; padding-left: 14px } - RTL must mirror it: marker on the RIGHT and use '‹'. We use !important for a few properties to guarantee we override any earlier marker rules in front.css. */ :where(html[dir="rtl"], .rtl) .selina-footer-template .selina-ft-nav .selina-footer-menu li { padding-left: 0 !important; padding-right: 14px !important; } :where(html[dir="rtl"], .rtl) .selina-footer-template .selina-ft-nav .selina-footer-menu li::before { content: '‹' !important; left: auto !important; right: 0 !important; } /* Footer bottom links alignment in RTL */ :where(html[dir="rtl"], .rtl) .selina-footer-template .selina-ft-bottom-nav .selina-footer-menu { justify-content: flex-start; } /* ------------------------------------------------------------ Minor RTL polish (generic) ------------------------------------------------------------ */ /* If a UI element explicitly uses left/right margins, ensure it remains sensible in RTL. */ :where(html[dir="rtl"], .rtl) .selina-social-icons { margin-left: 0; margin-right: 10px; }