/*--------------------------------------------------------------
# Alshaheen RTL overrides
#
# Loaded after aports.css + aports-responsive.css on every page.
# Font-family swap for RTL is handled in aports.css itself (the
# --aports-font / --aports-reey-font custom properties are redefined
# under [dir="rtl"], so every existing var(--aports-font) usage in
# aports.css re-resolves automatically — this file only needs to fix
# LAYOUT (float/margin/absolute-position mirroring), not fonts.
#
# This file carries the COMMON component rules (header, nav, footer,
# buttons, section titles, lang toggle) that repeat on every page.
# Page-unique components get their own assets/css/rtl-<page>.css
# partial, written alongside that page, loaded after this file.
#
# Known limitation (v1, accepted): Owl/Swiper/Slick/bxslider carousels
# are configured once at load with no `rtl` key and compute slide
# position via internal LTR transform math. CSS cannot fix drag /
# autoplay direction for these — they stay behaviorally LTR even in
# Arabic mode.
--------------------------------------------------------------*/

[dir="rtl"] .text-left {
  text-align: right !important;
}

[dir="rtl"] .text-right {
  text-align: left !important;
}

/* Header top bar
--------------------------------------------------------------*/
[dir="rtl"] .main-header__contact-list li {
  flex-direction: row-reverse;
}

[dir="rtl"] .main-header__contact-list li + li {
  margin-left: 0;
  margin-right: 35px;
}

[dir="rtl"] .main-header__top-right {
  flex-direction: row-reverse;
}

[dir="rtl"] .lang-toggle {
  margin-left: 0;
  margin-right: 30px;
}

[dir="rtl"] .lang-toggle--mobile {
  margin-right: 0;
}

[dir="rtl"] .main-header__social {
  margin-left: 0;
  margin-right: 40px;
}

[dir="rtl"] .main-header__social a + a {
  margin-left: 0;
  margin-right: 25px;
}

/* Main nav / dropdowns
--------------------------------------------------------------*/
[dir="rtl"] .main-menu .main-menu__list > li > ul,
[dir="rtl"] .main-menu .main-menu__list > li > ul > li > ul,
[dir="rtl"] .stricky-header .main-menu__list > li > ul,
[dir="rtl"] .stricky-header .main-menu__list > li > ul > li > ul {
  left: auto;
  right: 0;
}

[dir="rtl"] .main-menu .main-menu__list > li > ul > li > a::before,
[dir="rtl"] .main-menu .main-menu__list > li > ul > li > ul > li > a::before,
[dir="rtl"] .stricky-header .main-menu__list > li > ul > li > a::before,
[dir="rtl"] .stricky-header .main-menu__list > li > ul > li > ul > li > a::before {
  right: auto;
  left: 20px;
  content: "\f104";
}

[dir="rtl"] .main-menu__right {
  flex-direction: row-reverse;
}

/* .main-menu__list > li + li's margin-left is a physical gap meant to
   sit *before* each nav item in source order. Under RTL, the browser
   auto-reverses the flex "row" (DOM-first item lands on the visual
   right), but the margin stays on the same physical side — so Home
   (DOM-first, now rightmost) ends up with no gap before the next item
   while an orphaned gap appears past the last item instead. Flip it so
   the gap tracks the item it's meant to separate. */
[dir="rtl"] .main-menu .main-menu__list > li + li,
[dir="rtl"] .stricky-header .main-menu__list > li + li {
  margin-left: 0;
  margin-right: 75px;
}

/* The logo is pinned to the left edge regardless of language direction
   (brand mark shouldn't jump sides when toggling EN/AR) — flex "row" is
   direction-relative, so under RTL it would otherwise auto-reverse to
   the right; explicitly reversing it back cancels that out and restores
   the same left-logo/right-nav layout as LTR. Because of this, the base
   (non-RTL) .main-menu__wrapper padding-right and .main-menu__logo
   margin-top values already apply correctly in RTL too — no override
   needed for either. */
[dir="rtl"] .main-menu__wrapper-inner {
  flex-direction: row-reverse;
}

/* Top bar (address/hours/social) is NOT pinned like the logo — it still
   auto-reverses under RTL, so its content lands on the opposite side
   from where it sits in LTR. That's fine on its own, but combined with
   the now-left-pinned logo badge (which pops up into the top bar via a
   negative margin-top), the badge would collide with whatever top-bar
   content also ends up on the left under RTL. Keep the badge flush
   (no overlap pop) in RTL to avoid that collision. */
[dir="rtl"] .main-menu__logo {
  margin-top: 0;
}

/* Footer
--------------------------------------------------------------*/
[dir="rtl"] .site-footer__social a + a,
[dir="rtl"] .mobile-nav__social a + a {
  margin-left: 0;
  margin-right: 15px;
}

[dir="rtl"] .footer-widget__Contact-list li,
[dir="rtl"] .footer-widget__Contact-list li .icon,
[dir="rtl"] .main-header__contact-list li .icon {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-widget__Contact-list li .text,
[dir="rtl"] .main-header__contact-list li .text {
  margin-right: 15px;
  margin-left: 0;
}

/* Directional icons (arrows that must point the other way in RTL) —
   apply this class to any "read more"/next/prev chevron element that
   should mirror; icons like accordion carets stay as-is. */
[dir="rtl"] .icon-right-arrow,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-arrow-right {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] .feature-one__btn i,
[dir="rtl"] .news-one__more i {
  margin-left: 8px;
  margin-right: 0;
}

/* Inner-page header / breadcrumb (common component — every inner page
   past the homepage uses .page-header + .thm-breadcrumb, not just about.html)
--------------------------------------------------------------*/
/* li+li margin-left is a physical gap meant to sit *before* each item in
   source order. Under [dir="rtl"] the browser's bidi reordering flips the
   visual order of these inline-block <li>s right-to-left, but the margin
   stays on the same physical side — so the gap silently migrates to the
   wrong pair of items (first two items collide, last item gets a stray
   trailing gap instead). Flip it to margin-right so the gap tracks the
   item it's meant to separate. */
[dir="rtl"] .thm-breadcrumb li + li {
  margin-left: 0;
  margin-right: 4px;
}

/* Mobile nav drawer
--------------------------------------------------------------*/
[dir="rtl"] .mobile-nav__content {
  transform: translateX(100%);
}

[dir="rtl"] .mobile-nav__wrapper.expanded .mobile-nav__content {
  transform: translateX(0);
}

[dir="rtl"] .mobile-nav__close {
  right: auto;
  left: 15px;
}