/* ===========================================================================
   Arabic (ar-AE) — RTL layout and typography.
   Loaded only on /ar/ pages, after style.css, so it overrides rather than
   duplicates. The English pages never download any of this.
   =========================================================================== */

@import url('fonts-ar.css');

:root {
  /* Amiri is a naskh serif — the closest Arabic counterpart to Cormorant's
     editorial feel. Tajawal is a clean geometric sans, pairing with Jost. */
  --font-display: 'Amiri', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Tajawal', 'Jost', ui-sans-serif, system-ui, sans-serif;
}

/* Arabic script has taller ascenders/descenders and no capitals, so the Latin
   type scale reads cramped. Loosen line-height and drop the letter-spacing
   tricks, which are meaningless (and harmful) in connected Arabic script. */
body {
  line-height: 1.9;
  letter-spacing: 0;
  font-weight: 400;
}

h1, h2, h3, .wordmark__name {
  line-height: 1.4;
  letter-spacing: 0;
}

h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); }

/* Letter-spacing breaks Arabic joining — remove it everywhere it was used for
   Latin small-caps styling. */
.eyebrow,
.btn,
.site-nav a,
.stat__label,
.card__flag,
.site-footer__col h2,
.contact-card__text strong,
.field label,
.price span,
.wordmark__sub {
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow { font-size: 0.8rem; }
.btn { font-size: 0.9rem; }
.site-nav a { font-size: 0.92rem; }

/* ---------- direction-specific fixes ----------
   Most of the layout is flex/grid and mirrors automatically under dir="rtl".
   These are the cases that use physical directions and need flipping. */

.section-head--left { text-align: right; }

/* The animated underline on text buttons grows from the correct edge. */
.btn--text::after { transform-origin: right; }
.btn--text:hover::after { transform-origin: right; }

/* Nav underline direction */
.site-nav a::after { transform-origin: left; }
.site-nav a:hover::after,
.site-nav a[aria-current='page']::after { transform-origin: right; }

/* Tick bullets sit on the right in RTL */
.ticks li { padding-left: 0; padding-right: 1.6rem; }
.ticks li::before { left: auto; right: 0; }

/* Process step numbers */
.process__step { left: auto; right: 0; padding-right: 0; padding-left: 0.9rem; }

/* Floating badge over the intro image */
.intro__badge { right: auto; left: -1.25rem; }
@media (max-width: 900px) { .intro__badge { left: 1rem; right: auto; } }

/* Card flag ribbon */
.card__flag { left: auto; right: 1rem; }

/* Contact rows nudge the other way on hover */
.contact-card:hover { transform: translateX(-4px); }
.contact-card .icon:last-child { margin-left: 0; margin-right: auto; transform: scaleX(-1); }

/* Arrow glyphs point the correct way */
.btn--text .icon { transform: scaleX(-1); }

/* Lightbox chevrons swap sides */
.lightbox__close { right: auto; left: 1.25rem; }
@media (max-width: 900px) {
  .lightbox__nav--prev { left: auto; right: 25%; }
  .lightbox__nav--next { right: auto; left: 25%; }
}

/* Floating WhatsApp button moves to the left edge */
.wa-float { right: auto; left: clamp(1rem, 2.5vw, 1.75rem); }

/* Skip link */
.skip-link:focus { left: auto; right: 1rem; }

/* Numbers, phone numbers, emails and Latin handles stay LTR inside Arabic text */
[dir='ltr'] { unicode-bidi: isolate; }
.price { direction: rtl; }
.stat__num { direction: ltr; unicode-bidi: isolate; }

/* Language switch sits beside the nav in both directions */
.lang-switch { margin-inline-start: 0; }