/* ============================================================================ RTL support layer for the AUTé theme. The source aute.gov.ma theme is LTR-only; the CMS emits for Arabic. This sheet mirrors the layout under [dir="rtl"] so Arabic renders correctly once content is translated in the CMS. Loaded LAST so it overrides. Carousels (owl/slick/revslider) are forced LTR internally to avoid breaking their transform math, while their text stays RTL. ============================================================================ */ [dir="rtl"] body, [dir="rtl"] { direction: rtl; text-align: right; } /* ---- generic text alignment ---- */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } [dir="rtl"] .text-center { text-align: center !important; } /* ---- Bootstrap float utilities ---- */ [dir="rtl"] .float-left, [dir="rtl"] .pull-left { float: right !important; } [dir="rtl"] .float-right, [dir="rtl"] .pull-right { float: left !important; } /* ---- Bootstrap spacing helpers (ml-* / mr-* / pl-* / pr-*) ---- */ [dir="rtl"] .ml-1{margin-left:0!important;margin-right:.25rem!important} [dir="rtl"] .ml-2{margin-left:0!important;margin-right:.5rem!important} [dir="rtl"] .ml-3{margin-left:0!important;margin-right:1rem!important} [dir="rtl"] .ml-4{margin-left:0!important;margin-right:1.5rem!important} [dir="rtl"] .ml-5{margin-left:0!important;margin-right:3rem!important} [dir="rtl"] .mr-1{margin-right:0!important;margin-left:.25rem!important} [dir="rtl"] .mr-2{margin-right:0!important;margin-left:.5rem!important} [dir="rtl"] .mr-3{margin-right:0!important;margin-left:1rem!important} [dir="rtl"] .mr-4{margin-right:0!important;margin-left:1.5rem!important} [dir="rtl"] .mr-5{margin-right:0!important;margin-left:3rem!important} [dir="rtl"] .pl-1{padding-left:0!important;padding-right:.25rem!important} [dir="rtl"] .pl-2{padding-left:0!important;padding-right:.5rem!important} [dir="rtl"] .pl-3{padding-left:0!important;padding-right:1rem!important} [dir="rtl"] .pl-4{padding-left:0!important;padding-right:1.5rem!important} [dir="rtl"] .pl-5{padding-left:0!important;padding-right:3rem!important} [dir="rtl"] .pr-1{padding-right:0!important;padding-left:.25rem!important} [dir="rtl"] .pr-2{padding-right:0!important;padding-left:.5rem!important} [dir="rtl"] .pr-3{padding-right:0!important;padding-left:1rem!important} [dir="rtl"] .pr-4{padding-right:0!important;padding-left:1.5rem!important} [dir="rtl"] .pr-5{padding-right:0!important;padding-left:3rem!important} /* ---- lists ---- */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 0; } [dir="rtl"] .ul-li ul, [dir="rtl"] .ul-li-block ul { padding-right: 0; } /* ---- header / top bar / main navigation ---- */ [dir="rtl"] .topbar-area .topbar-left { float: right; } [dir="rtl"] .topbar-area .topbar-right { float: left; } [dir="rtl"] .main-navigation-area .nav-logo { float: right; } [dir="rtl"] .main-navigation-area .main-menu, [dir="rtl"] .main-navigation-area .nav-right-button { float: left; } [dir="rtl"] .main-menu ul > li { float: right; } [dir="rtl"] .main-menu ul ul.sub-menu { left: auto; right: 0; text-align: right; } [dir="rtl"] .main-menu ul ul.sub-menu li { float: none; } /* ---- off-canvas mobile menu: open from the right ---- */ [dir="rtl"] .str-mobile-main-navigation, [dir="rtl"] .mobile-menu-wrap, [dir="rtl"] .offcanvas-menu { left: auto; right: 0; } [dir="rtl"] .str-mobile-main-navigation.is-open { transform: translateX(0); } [dir="rtl"] .str-mobile-main-navigation:not(.is-open) { transform: translateX(100%); } /* ---- breadcrumb ---- */ [dir="rtl"] .breadcrumb-section .breadcrumb li { float: right; } [dir="rtl"] .breadcrumb-section .breadcrumb li + li::before { transform: scaleX(-1); } /* ---- columns / cards / icon-text rows ---- */ [dir="rtl"] .archf-footer-content .row { direction: rtl; } [dir="rtl"] .icon-box .icon, [dir="rtl"] .media .media-left { float: right; margin-left: 1rem; margin-right: 0; } /* ---- forms ---- */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } [dir="rtl"] .form-check { padding-right: 1.25rem; padding-left: 0; } [dir="rtl"] .form-check-input { margin-right: -1.25rem; margin-left: 0; } /* ---- scroll-up button ---- */ [dir="rtl"] .up { left: 20px; right: auto; } /* ---- carousels: keep internal LTR (transform math), text RTL ---- */ [dir="rtl"] .owl-carousel, [dir="rtl"] .slick-slider, [dir="rtl"] rs-module-wrap, [dir="rtl"] .rev_slider_wrapper { direction: ltr; } [dir="rtl"] .owl-carousel .item, [dir="rtl"] .slick-slide { direction: rtl; text-align: right; } /* ---- google map / iframes unaffected ---- */ [dir="rtl"] iframe { direction: ltr; }