/* ===========================================================
   Al Massar — RTL overrides for Arabic pages
   Loaded AFTER almasar.css on [dir="rtl"] pages only.
   =========================================================== */

/* -----------------------------------------------------------
   Arabic Google Font — Tajawal
   A modern humanist Arabic sans — clean, professional, warm.
   Designed by Boutros International to pair with Latin
   geometric/humanist sans like Outfit & Open Sans.
   Used for both headings and body for a cohesive Arabic voice.
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* -----------------------------------------------------------
   Font overrides — Tajawal for all Arabic type
   ----------------------------------------------------------- */
[dir="rtl"] body {
  font-family: "Tajawal", "Open Sans", sans-serif;
  letter-spacing: 0;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: "Tajawal", "Outfit", sans-serif;
  letter-spacing: 0;
}

[dir="rtl"] .button-font-2 {
  font-family: "Tajawal", "Outfit", sans-serif;
  letter-spacing: 0.5px;
}

[dir="rtl"] .title-heading {
  font-family: "Tajawal", "Outfit", sans-serif;
  letter-spacing: 0.5px;
}

[dir="rtl"] .sm-heading {
  font-family: "Tajawal", "Outfit", sans-serif;
  letter-spacing: 0.5px;
}

[dir="rtl"] .station-detail__index,
[dir="rtl"] .trail-popup__index,
[dir="rtl"] .about-plan__label,
[dir="rtl"] .hq-map-card__kicker,
[dir="rtl"] .contact-info-card__label,
[dir="rtl"] .footer-contact__label,
[dir="rtl"] .vm-label,
[dir="rtl"] .lang-code,
[dir="rtl"] .lang-current {
  font-family: "Tajawal", "Outfit", sans-serif;
  letter-spacing: 0.5px;
}

[dir="rtl"] .contact-info-card__value,
[dir="rtl"] .trail-map-item__num,
[dir="rtl"] .trail-pin__num,
[dir="rtl"] .vm-value-card__number {
  font-family: "Tajawal", "Outfit", sans-serif;
}

/* Navigation links & menu toggle — override theme's "Outfit" default */
[dir="rtl"] .header .header-menu .nav .nav-item .nav-link,
[dir="rtl"] .header .menu-toggle,
[dir="rtl"] .nav-dropdown .nav-dropdown-link,
[dir="rtl"] .nav-dropdown-link .lang-name,
[dir="rtl"] .button {
  font-family: "Tajawal", "Outfit", sans-serif;
  letter-spacing: 0;
}

/* -----------------------------------------------------------
   Title-heading pseudo-element flip: // before → after
   ----------------------------------------------------------- */
[dir="rtl"] .title-heading:before {
  padding-right: 0;
  padding-left: 6px;
}

/* -----------------------------------------------------------
   General direction helpers — flip margin/padding utilities
   ----------------------------------------------------------- */
[dir="rtl"] .ms-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}
[dir="rtl"] .me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}
[dir="rtl"] .ms-1 {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}
[dir="rtl"] .pe-2 {
  padding-right: 0 !important;
  padding-left: 0.5rem !important;
}
[dir="rtl"] .ps-2 {
  padding-right: 0.5rem !important;
  padding-left: 0 !important;
}

/* -----------------------------------------------------------
   Text alignment
   ----------------------------------------------------------- */
[dir="rtl"] .text-md-start,
[dir="rtl"] .text-lg-start {
  text-align: right !important;
}
[dir="rtl"] .text-md-end,
[dir="rtl"] .text-lg-end {
  text-align: left !important;
}
[dir="rtl"] .text-end {
  text-align: left !important;
}
[dir="rtl"] .text-start {
  text-align: right !important;
}

/* -----------------------------------------------------------
   Hero section — flip gradient overlay from left→right to right→left
   ----------------------------------------------------------- */
[dir="rtl"] .hero-overlay {
  background:
    linear-gradient(
      to left,
      rgba(10, 14, 19, 0.82) 0%,
      rgba(10, 14, 19, 0.58) 45%,
      rgba(10, 14, 19, 0.28) 70%,
      rgba(10, 14, 19, 0.12) 100%
    ),
    linear-gradient(
      to top,
      rgba(10, 14, 19, 0.35) 0%,
      transparent 50%
    );
}

/* CTA arrow icons — flip direction so they point in reading direction */
[dir="rtl"] .hero-overlay .bi-arrow-right::before,
[dir="rtl"] .button .bi-arrow-right::before {
  content: "\f12f"; /* bi-arrow-left */
}

/* -----------------------------------------------------------
   Navigation
   ----------------------------------------------------------- */
/* Logo sits at the start (right edge in RTL) — flip the auto-margin */
[dir="rtl"] .header .header-logo {
  margin-right: 0;
  margin-left: auto;
}

/* Desktop: menu sits at the end (left edge in RTL) — flip auto-margin + item spacing */
@media (min-width: 992px) {
  [dir="rtl"] .header .header-menu {
    margin-left: 0;
    margin-right: auto;
  }
  [dir="rtl"] .header .header-menu .nav .nav-item {
    margin-left: 0;
    margin-right: 1px;
  }
  [dir="rtl"] .header .header-menu .nav .nav-item:first-child {
    margin-right: 0;
  }
}

/* Flip the mobile slide-in from right to left */
@media (max-width: 1199.98px) {
  [dir="rtl"] .header .header-menu {
    right: auto;
    left: -100%;
  }
  [dir="rtl"] .header .header-menu.show {
    left: 0;
  }
  [dir="rtl"] .header .header-menu #menu-close {
    right: auto;
    left: 16px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  [dir="rtl"] .header .header-menu {
    right: auto;
    left: -100%;
    transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  [dir="rtl"] .header .header-menu.show {
    left: 0;
    right: auto;
  }
  [dir="rtl"] .header .header-menu #menu-close {
    right: auto;
    left: 16px;
  }
  /* Dropdown toggle on RTL */
  [dir="rtl"] .header .header-menu .nav .nav-item .nav-dropdown-toggle {
    right: auto;
    left: 0;
  }
  [dir="rtl"] .header .menu-toggle span {
    right: auto;
    left: 24px;
  }
  [dir="rtl"] .header .menu-toggle {
    padding: 10px 24px 10px 34px;
  }
}

/* Dropdown panels: align to right edge in RTL */
@media (min-width: 1200px) {
  [dir="rtl"] .header .header-menu .nav .nav-item .nav-dropdown {
    left: auto;
    right: 0;
  }
  [dir="rtl"] .header .header-menu .nav .nav-item .nav-dropdown.nav-dropdown-lang {
    right: auto;
    left: 0;
  }
}

/* Nav dropdown toggle arrow flip */
[dir="rtl"] .header .header-menu .nav .nav-item .nav-dropdown-toggle {
  right: auto;
  left: 0;
}

/* Accordion arrow flip */
[dir="rtl"] .accordion li .accordion-title .title-arrow {
  right: auto;
  left: 30px;
}

/* -----------------------------------------------------------
   Slider nav arrows — swap prev/next icon directions
   ----------------------------------------------------------- */
[dir="rtl"] .swiper-portfolio-prev .bi-arrow-left::before {
  content: "\f138"; /* bi-arrow-right */
}
[dir="rtl"] .swiper-portfolio-next .bi-arrow-right::before {
  content: "\f12f"; /* bi-arrow-left */
}

/* -----------------------------------------------------------
   About section — counter text & image positioning
   ----------------------------------------------------------- */
[dir="rtl"] .journey-stages .stage-meta h1 {
  margin-right: 0;
  margin-left: 0.75rem;
}

/* Chevrons in stage lists point left in RTL */
[dir="rtl"] .stage-list li .bi-chevron-right::before {
  content: "\f284"; /* bi-chevron-left */
}
[dir="rtl"] .journey-stages .stage-list li .bi-chevron-right {
  padding-right: 0;
  padding-left: 0.5rem;
}

/* -----------------------------------------------------------
   Station Detail cards — flip flex direction
   ----------------------------------------------------------- */
/* Station detail is already flex row by default, we don't need to flip
   since flexbox handles it automatically with dir="rtl".
   Just fix specific directional css props. */

/* About-plan list bullet position */
[dir="rtl"] .about-plan__list li {
  padding: 0.3rem 1.15rem 0.3rem 0;
}
[dir="rtl"] .about-plan__list li::before {
  left: auto;
  right: 0;
}

/* -----------------------------------------------------------
   Trail Map — flip the side panel border
   ----------------------------------------------------------- */
[dir="rtl"] .trail-map-list {
  border-left: none;
  border-right: 1px solid var(--brand-border);
}
[dir="rtl"] .trail-map-item:hover,
[dir="rtl"] .trail-map-item--active {
  transform: translateX(2px); /* flip from -2px */
}

@media (max-width: 991.98px) {
  [dir="rtl"] .trail-map-list {
    border-right: none;
    border-top: 1px solid var(--brand-border);
  }
}

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
/* Reverse the text-md-start / text-md-end */
@media (min-width: 768px) {
  [dir="rtl"] .footer .text-md-start {
    text-align: right !important;
  }
  [dir="rtl"] .footer .text-md-end {
    text-align: left !important;
  }
}

/* -----------------------------------------------------------
   Inline dots list — flip the dot position
   ----------------------------------------------------------- */
[dir="rtl"] ul.list-inline-dot li {
  padding: 0 14px 0 4px;
}
[dir="rtl"] ul.list-inline-dot li:before {
  left: auto;
  right: 0;
}
[dir="rtl"] ul.list-inline-dot li:first-child {
  padding-right: 0;
}
[dir="rtl"] ul.list-inline-dot li:first-child:before {
  display: none;
}

/* -----------------------------------------------------------
   About highlights — hover slide direction
   ----------------------------------------------------------- */
[dir="rtl"] .about-highlights li:hover {
  transform: translateX(3px); /* flip from -3px */
}

/* -----------------------------------------------------------
   Contact info card link — flip arrow direction
   ----------------------------------------------------------- */
[dir="rtl"] .contact-info-card__link:hover {
  transform: translateX(-3px); /* flip from 3px */
}

/* -----------------------------------------------------------
   Contact info card values — force right-align for LTR content
   (phone digits, email) inside an RTL block
   ----------------------------------------------------------- */
[dir="rtl"] .contact-info-card__value,
[dir="rtl"] a.contact-info-card__value,
[dir="rtl"] .contact-info-card__label,
[dir="rtl"] .contact-info-card__hint,
[dir="rtl"] .contact-info-card__link {
  text-align: right;
}

/* -----------------------------------------------------------
   VM media card badge — flip position
   ----------------------------------------------------------- */
[dir="rtl"] .vm-media-card__badge {
  left: auto;
  right: 1rem;
}

/* -----------------------------------------------------------
   VM intro quote — flip quote mark position
   ----------------------------------------------------------- */
[dir="rtl"] .vm-intro-quote::before {
  left: auto;
  right: 1rem;
}

/* -----------------------------------------------------------
   Swiper — ensure RTL behavior
   ----------------------------------------------------------- */
[dir="rtl"] .swiper {
  direction: rtl;
}

/* -----------------------------------------------------------
   General tweaks for Arabic text
   ----------------------------------------------------------- */
[dir="rtl"] p {
  line-height: 1.85;
}

[dir="rtl"] .display-5,
[dir="rtl"] .display-4,
[dir="rtl"] .display-3,
[dir="rtl"] .display-6 {
  line-height: 1.4;
}

/* Footer-contact body stays RTL so label, value, and hint all share the
   same right-edge alignment. Latin-script values (email, phone, address)
   still render L→R inside the RTL block via strong-LTR bidi behaviour. */
[dir="rtl"] .footer-contact__value,
[dir="rtl"] .footer-contact__hint {
  text-align: right;
  unicode-bidi: plaintext;
}

/* Phone numbers and email stay LTR — but skip footer-contact cards so their
   RTL flex layout (icon on right, label/hint right-aligned) is preserved.
   The Latin value itself is handled by .footer-contact__value's
   unicode-bidi: plaintext above. */
[dir="rtl"] a[href^="tel:"]:not(.footer-contact),
[dir="rtl"] a[href^="mailto:"]:not(.footer-contact) {
  direction: ltr;
  unicode-bidi: embed;
}

/* -----------------------------------------------------------
   Hero play button — shift to left side in RTL
   ----------------------------------------------------------- */
/* No change needed — it's centered with text-center */

/* -----------------------------------------------------------
   Breadcrumb — reverse separator
   ----------------------------------------------------------- */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-left: var(--bs-breadcrumb-item-padding-x);
  padding-right: 0;
}

/* -----------------------------------------------------------
   Featured card top-accent bar — same regardless of direction
   ----------------------------------------------------------- */


/* -----------------------------------------------------------
   Mobile menu lang dropdown — mirror spacing
   ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  [dir="rtl"] .nav-item-lang .nav-dropdown.nav-dropdown-lang .nav-dropdown-item {
    margin: 0 0 6px 6px !important;
  }
}

/* -----------------------------------------------------------
   Contact social pills
   ----------------------------------------------------------- */
[dir="rtl"] .contact-social {
  direction: rtl;
}

/* -----------------------------------------------------------
   Order-box (pillars) — text align
   ----------------------------------------------------------- */
@media (min-width: 768px) {
  [dir="rtl"] .order-box {
    text-align: right;
  }
}

/* -----------------------------------------------------------
   Scroll to top — stay at right in RTL too (conventional)
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   Leaflet map popups
   ----------------------------------------------------------- */
[dir="rtl"] .trail-popup {
  text-align: right;
}
[dir="rtl"] .trail-map-item {
  text-align: right;
}