/* ==========================================================================
   HUDHUD SAFARIS — RTL OVERRIDES
   Loaded only on Arabic (/ar/) pages, after base.css and layout.css.
   Mirrors layout for right-to-left reading: nav order, icon/text order,
   text alignment, and directional spacing (margin/padding that assumed
   left-to-right get flipped).
   ========================================================================== */

html[dir="rtl"] body {
  text-align: right;
}

/* NOTE ON APPROACH: flexbox rows (display:flex; flex-direction:row) already
   reverse their visual order automatically under dir="rtl" — no manual
   row-reverse needed for header nav, logo lockup, card icon+text pairs,
   etc. The rules below only cover PHYSICAL properties (left/right,
   padding-left, border-left...) that do NOT follow direction automatically
   and would otherwise stay stuck on the wrong side. */

html[dir="rtl"] .brand-wordmark span:last-child {
  margin-left: 0;
  margin-right: 0.15em;
}

html[dir="rtl"] .nav-toggle {
  transform: scaleX(-1); /* mirror the hamburger icon */
}

/* Hero content should still read from the right */
html[dir="rtl"] .hero__content {
  text-align: right;
}

/* Steps: numbered circle sits to the right of text instead of the left */
html[dir="rtl"] .step {
  padding-left: 0;
  padding-right: var(--space-4);
}
html[dir="rtl"] .step::before {
  left: auto;
  right: 0;
}

/* Trust strip / cards / reason grid already center or stretch, so they
   don't need mirroring beyond text-align, which is inherited. */

/* Testimonials: quote bar moves from left border to right border */
html[dir="rtl"] .testimonial {
  border-left: none;
  border-right: 3px solid var(--color-clay);
}

/* Language switcher dropdown menu opens from the left in RTL, matching
   its header position (which is now on the visual left since the whole
   header row is mirrored) */
html[dir="rtl"] .lang-switcher__menu {
  right: auto;
  left: 0;
}

/* Mobile nav dropdown panel: anchor still reads correctly since base.css
   already pins both left:0 and right:0 (full width) — only alignment of
   its inner content needs a nudge so links hug the right edge. */
html[dir="rtl"] .site-nav {
  align-items: flex-end;
}

/* Icons that visually imply direction (arrows) should flip */
html[dir="rtl"] .rtl-flip {
  display: inline-block;
  transform: scaleX(-1);
}