/* ============================================================
   RTL — physical-direction overrides for components that can't
   express their behavior with pure logical properties.

   The bulk of layout uses logical properties already (margin-inline,
   padding-inline, inset-inline, text-align: start). What lives here:
     - transform-origin flips
     - translateX direction flips
     - SVG arrow icon flips
     - marquee animation reverse
     - mapbox RTL plugin selector handle
   ============================================================ */

/* ----------------------------------------------------------
   Underline-fill animations: transform-origin must flip per dir
   ---------------------------------------------------------- */
.btn--ghost::after,
.nav-link::after,
.card-service::before,
.hero__sub-cta::after {
  transform-origin: var(--origin-start) center;
}

/* ----------------------------------------------------------
   Mobile menu — slides from end edge in LTR, start edge in RTL
   Uses --menu-slide-from CSS var (1 LTR, -1 RTL).
   Hidden state: translated 100% off-screen on its origin side.
   ---------------------------------------------------------- */
.mobile-menu {
  transform: translateX(calc(100% * var(--menu-slide-from)));
}
.mobile-menu[aria-hidden="false"] {
  transform: translateX(0);
}

/* ----------------------------------------------------------
   CTA arrow icons — flip horizontally so → reads correctly in RTL
   Mark icons that should flip with .icon--flip-rtl
   ---------------------------------------------------------- */
[dir="rtl"] .icon--flip-rtl {
  transform: scaleX(-1);
}

/* ----------------------------------------------------------
   Marquee — reverse animation direction so logos enter from
   the natural reading-entry side
   ---------------------------------------------------------- */
[dir="rtl"] .marquee__track {
  animation-direction: reverse;
}

/* ----------------------------------------------------------
   Phone numbers + emails inside Arabic body text
   Wrap in <bdi dir="ltr"> in HTML; this keeps font upright.
   ---------------------------------------------------------- */
bdi[dir="ltr"] {
  unicode-bidi: isolate;
  direction: ltr;
  font-family: var(--font-mono);
}

/* ----------------------------------------------------------
   When document is RTL, force LTR-only widgets (date inputs,
   maps with own controls) to keep their internal LTR layout.
   ---------------------------------------------------------- */
input[type="date"],
input[type="time"],
input[type="number"] {
  direction: ltr;
  text-align: end; /* visually trails on the inline-end edge */
}

[dir="rtl"] .maplibregl-ctrl-top-right,
[dir="rtl"] .mapboxgl-ctrl-top-right { left: 10px; right: auto; }
[dir="rtl"] .maplibregl-ctrl-top-left,
[dir="rtl"] .mapboxgl-ctrl-top-left  { right: 10px; left: auto; }

/* ----------------------------------------------------------
   Lightbox prev/next — keep prev as the start-edge button
   (visually appropriate; readers expect "previous" near reading entry)
   ---------------------------------------------------------- */
.lightbox__prev { inset-inline-start: 24px; right: auto; left: auto; }
.lightbox__next { inset-inline-end: 24px;   right: auto; left: auto; }