/* ============================================================================
   RTL support layer for the AUTé theme.
   The source aute.gov.ma theme is LTR-only; the CMS emits <html dir="rtl"> 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.
   ============================================================================ */

/* Arabic (lang=ar) uses 'Noto Kufi Arabic'. Scoped to lang=ar only — NOT zgh
   (Tifinagh) — and never applied to icon fonts. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap');

html[lang="ar"] { font-family: 'Noto Kufi Arabic', sans-serif; }
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] li,
html[lang="ar"] td, html[lang="ar"] th, html[lang="ar"] dt, html[lang="ar"] dd,
html[lang="ar"] blockquote, html[lang="ar"] label,
html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select,
html[lang="ar"] button, html[lang="ar"] .btn,
html[lang="ar"] .menu-navigation a, html[lang="ar"] .dropdown-menu a,
html[lang="ar"] rs-layer,
html[lang="ar"] span:not([class*="flaticon"]):not([class*="icon"]):not([class^="fa"]):not([class*=" fa"]):not([class*="mdi"]) {
  font-family: 'Noto Kufi Arabic', sans-serif !important;
}

[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; }

/* ---- .autelist arrow bullets ----
   The bullet is a ➤ glyph (content:"➤"; margin-right:15px) before each <li>. The
   glyph isn't in the Unicode auto-mirroring set, so it keeps pointing right in RTL,
   and its spacing is a physical margin-right. Flip the glyph to point left (toward
   the now right-aligned text) and move the gap to the left. Shared across all pages. */
[dir="rtl"] .autelist ul li::before {
  display: inline-block;
  transform: scaleX(-1);
  margin-right: 0;
  margin-left: 15px;
}

/* ---- 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; }

/* ---- desktop navbar menu (this theme: .arc6-header-style) ---- */
[dir="rtl"] .site-logo { float: right; }
[dir="rtl"] .main-header-menu-item { float: left; }
[dir="rtl"] .menu-navigation { text-align: right; direction: rtl; }
[dir="rtl"] .menu-navigation > li { float: right; }
[dir="rtl"] .menu-navigation li a { text-align: right; }
[dir="rtl"] .menu-navigation .dropdown-menu,
[dir="rtl"] .menu-navigation ul { left: auto; right: 0; text-align: right; }
[dir="rtl"] .menu-navigation .dropdown-menu li { float: none; text-align: right; }
[dir="rtl"] .header-cta-btn { float: left; }

/* ---- topbar contact row (holds the language switcher) ----
   The theme spaces items with a physical margin-left:30px (first-child:0). In the
   rtl flex row that gap lands on the wrong side, so the language switcher (first
   child, now rightmost) sticks to the next item. Mirror it to margin-right. */
[dir="rtl"] .react-header .topbar-area.style1 .topbar-contact ul li {
  margin-left: 0;
  margin-right: 30px;
}
[dir="rtl"] .react-header .topbar-area.style1 .topbar-contact ul li:first-child {
  margin-right: 0;
  margin-left: 0;
}

/* ---- 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 (RTL) ----
   The theme floats the <li> right unconditionally; combined with bidi that pushed the
   "/" separator to the far left and collapsed the two labels. Force a centred flex row
   in rtl so items read right-to-left with the "/" between them. */
[dir="rtl"] .breadcrumb-section .breadcrumb {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  direction: rtl;
}
[dir="rtl"] .breadcrumb-section .breadcrumb li { float: none !important; direction: rtl; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { transform: none; }

/* ---- 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: owl/slick keep internal LTR (transform math), text RTL ---- */
[dir="rtl"] .owl-carousel,
[dir="rtl"] .slick-slider { direction: ltr; }
[dir="rtl"] .owl-carousel .item,
[dir="rtl"] .slick-slide { direction: rtl; text-align: right; }

/* ---- hero: Slider Revolution (rs6) was removed and replaced by the custom
   .cms-hero slider, which is RTL-aware via logical CSS (inset-inline / text-align:start
   / scaleX-flipped arrows) in its own section CSS — nothing needed here. ---- */

/* ---- google map / iframes unaffected ---- */
[dir="rtl"] iframe { direction: ltr; }