/* ==========================================================================
   Language switcher and right-to-left support
   ========================================================================== */

/* --- Switcher -------------------------------------------------------------
   <details>/<summary>, so it opens, closes and takes keyboard focus with no
   JavaScript — the same contract as the mega-menu.
   ------------------------------------------------------------------------ */

.lang {
  position: relative;
}

.lang__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 40px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.lang__summary::-webkit-details-marker {
  display: none;
}

.lang__summary:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-muted);
}

.lang__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Chevron. Mirrors automatically because it is drawn with logical borders. */
.lang__summary::after {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast);
}

.lang[open] > .lang__summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.lang__code {
  display: grid;
  place-items: center;
  min-inline-size: 26px;
  padding-inline: 5px;
  padding-block: 2px;
  border-radius: 4px;
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  /* The code is always Latin, even in an Arabic layout. */
  direction: ltr;
}

/* The switcher's own label is hidden on the bar — the code carries it —
   but stays available to assistive technology through the aria-label. */
.lang__label {
  display: none;
}

.lang__panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  /* Logical, so the panel hangs from the correct edge in both directions. */
  inset-inline-end: 0;
  z-index: 70;
  min-inline-size: 220px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  animation: lang-open var(--transition-fast) both;
}

@keyframes lang-open {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
}

.lang__list {
  display: grid;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
  /* Nine languages fit without the panel running off a short viewport. */
  max-block-size: min(70vh, 420px);
  overflow-y: auto;
}

.lang__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 44px touch target. */
  min-block-size: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: background var(--transition-fast);
}

.lang__option:hover {
  background: var(--color-surface-muted);
}

.lang__option.is-active {
  background: var(--color-surface-muted);
  font-weight: 700;
}

.lang__name {
  flex: 1;
  min-inline-size: 0;
}

.lang__rtl {
  padding-inline: 6px;
  padding-block: 1px;
  border-radius: 3px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lang__option.is-active .lang__rtl {
  background: var(--color-surface);
}

/* In the mobile drawer the switcher is a full-width block, not a chip. */
@media (max-width: 1023px) {
  .lang {
    inline-size: 100%;
  }

  .lang__summary {
    justify-content: space-between;
    min-block-size: 48px;
    border-radius: var(--radius-md);
  }

  .lang__label {
    display: block;
    flex: 1;
  }

  .lang__panel {
    position: static;
    inline-size: 100%;
    margin-block-start: var(--space-2);
    box-shadow: none;
    animation: none;
  }
}

/* ==========================================================================
   Right to left

   The layout mirrors from `dir="rtl"` on <html> alone, because the
   stylesheets are written with logical properties — inline-start/inline-end,
   margin-inline, border-inline — rather than left/right. There is no
   parallel RTL stylesheet to keep in step.

   What follows are the handful of places that CANNOT mirror automatically:
   anything drawn with a rotation, a hard-coded direction, or a gradient
   angle. Those are enumerated here rather than hunted for later.
   ========================================================================== */

/* Chevrons and arrows are rotated squares, so a mirror has to flip them
   explicitly — rotation has no logical equivalent. */
[dir="rtl"] .carousel__button--prev::before {
  transform: rotate(45deg);
  margin-inline-start: 0;
  margin-inline-end: 3px;
}

[dir="rtl"] .carousel__button--next::before {
  transform: rotate(-135deg);
  margin-inline-end: 0;
  margin-inline-start: 3px;
}

[dir="rtl"] .faq-index__arrow {
  transform: rotate(-135deg) translateX(-4px);
}

[dir="rtl"] .faq-index__button.is-active .faq-index__arrow,
[dir="rtl"] .faq-index__button:hover .faq-index__arrow {
  transform: rotate(-135deg) translateX(0);
}

[dir="rtl"] .hero__proof li::before,
[dir="rtl"] .destination-support__list li::before {
  rotate: 45deg;
}

/* The carousel scrolls in the reading direction. Browsers report scrollLeft
   as negative in RTL, which carousel.js handles by using logical scrolling —
   this only needs the snap direction. */
[dir="rtl"] .carousel__track {
  direction: rtl;
}

/* Progress bars and the FAQ accent rule grow from the reading edge. */
[dir="rtl"] .carousel__progress-bar {
  transform-origin: right center;
}

[dir="rtl"] .service-item__rule {
  transform-origin: right center;
}

[dir="rtl"] .journey__rule {
  transform-origin: right center;
}

/* The hero scrim is a directional gradient: unmirrored, the dark end would
   sit under empty space and the headline would lose its contrast. */
[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(to left, rgb(9 18 28 / 0.90) 0%, rgb(9 18 28 / 0.72) 45%, rgb(9 18 28 / 0.42) 100%),
    linear-gradient(to top, rgb(9 18 28 / 0.75), transparent 55%);
}

/* Numerals stay Latin and left-to-right inside RTL text. An Arabic layout
   still shows "+91 7042497347", not a reversed number. */
[dir="rtl"] .site-nav__phone-number,
[dir="rtl"] .faq-index__number,
[dir="rtl"] .service-item__index,
[dir="rtl"] .review__stars,
[dir="rtl"] .journey__number {
  direction: ltr;
  unicode-bidi: embed;
}

/* Phone numbers and email addresses, ANYWHERE.
   Targeted by href rather than by class on purpose: enumerating classes
   missed the hero card, where "+91 7042497347" rendered as "7042497347 91+"
   — the digits are stored correctly and only the bidi resolution flips the
   leading +. Matching the link type catches every one on the site, including
   any added later. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .site-footer__contact a,
[dir="rtl"] .contact-detail__list dd a {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* The hero card's contact rows are a definition list, so the value cell
   needs the isolation too — not just the link inside it. */
[dir="rtl"] .hero__contact dd,
[dir="rtl"] .site-nav__phone {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;
}

/*
 * Arabic needs more line height than Latin at the same size: its ascenders
 * and descenders are deeper, and tight leading makes long passages hard to
 * read. This is the one typographic concession the mirror does not give.
 */
[lang="ar"] body {
  line-height: 1.85;
}

[lang="ar"] .hero__title,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 {
  line-height: 1.4;
}