/* ==========================================================================
   BarberGo — Arabic (RTL) overrides. Loaded only by /ar/ pages, after site.css.
   site.css already uses logical properties, so layout mirrors on its own.
   What remains here is what direction alone doesn't fix.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Letter-spacing — the single most important rule in this file.
   The design uses -0.3px to -1.5px tracking on headings. Negative tracking
   breaks the cursive joins between Arabic glyphs, rendering words as visibly
   disconnected letters. Arabic script must never be letter-spaced.
   -------------------------------------------------------------------------- */

[lang="ar"],
[lang="ar"] * {
  letter-spacing: normal;
}

/* Keep the uppercase-label look for kickers without tracking the Arabic apart.
   text-transform is a no-op on Arabic, so only the spacing needed removing. */
[lang="ar"] .kicker {
  letter-spacing: normal;
  font-weight: 700;
}

/* Latin runs embedded in Arabic text (BarberGo, MAD, e-mail addresses) keep
   their own direction and may keep normal Latin typography. */
[dir="ltr"] {
  unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   2. Line height — Arabic glyphs have taller ascenders/descenders and need
   more leading than the Latin values inherited from the design.
   -------------------------------------------------------------------------- */

[lang="ar"] body { line-height: 1.7; }
[lang="ar"] .h-display { line-height: 1.25; }
[lang="ar"] .h-page,
[lang="ar"] .h-section,
[lang="ar"] .h-sub { line-height: 1.35; }
[lang="ar"] .prose p,
[lang="ar"] .step-body,
[lang="ar"] .card-body { line-height: 1.9; }

/* --------------------------------------------------------------------------
   3. Mirrored gradients — the amber corner should stay on the outer edge of
   the reading direction, so every angled gradient flips about the vertical.
   (140deg -> 220deg, 150deg -> 210deg, 120deg -> 240deg.)
   -------------------------------------------------------------------------- */

[dir="rtl"] .hero {
  background: linear-gradient(220deg, var(--teal-deep) 0%, var(--teal) 42%, var(--teal-mid) 68%, var(--amber-dark) 115%);
}
[dir="rtl"] .hero-teal {
  background: linear-gradient(220deg, var(--teal-deep) 0%, var(--teal) 55%, var(--amber-dark) 130%);
}
[dir="rtl"] .hero-amber {
  background: linear-gradient(220deg, var(--amber-deeper) 0%, var(--amber) 45%, var(--teal) 140%);
}
[dir="rtl"] .mode-shop { background: linear-gradient(210deg, var(--teal), #0B4747); }
[dir="rtl"] .mode-home { background: linear-gradient(210deg, var(--amber), var(--amber-deeper)); }
[dir="rtl"] .cta-panel {
  background: linear-gradient(240deg, var(--teal) 20%, var(--teal-mid) 60%, var(--amber-dark) 120%);
}
[dir="rtl"] .photo-slot {
  background:
    radial-gradient(circle at 22% 22%, rgba(232, 169, 79, 0.55), transparent 58%),
    linear-gradient(220deg, var(--teal-deep) 0%, var(--teal) 45%, var(--teal-mid) 72%, var(--amber-dark) 125%);
}
[dir="rtl"] .hero-grad {
  background: linear-gradient(270deg, var(--amber-light), var(--amber));
  -webkit-background-clip: text; background-clip: text;
}

/* --------------------------------------------------------------------------
   4. Mirrored transforms. Rotations are not flipped by `dir`, so the phone
   mockups and map pins would lean the wrong way against a mirrored layout.
   -------------------------------------------------------------------------- */

[dir="rtl"] .phone-2 { transform: rotate(-6deg); }
[dir="rtl"] .pin { border-radius: 50% 50% 5px 50%; transform: rotate(45deg); }
[dir="rtl"] .map-road { transform: rotate(8deg); }
/* The logo mark is a raster brand asset — it must NOT be mirrored. */

@keyframes floaty2-rtl {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-10px) rotate(-6deg); }
}
[dir="rtl"] .phone-2 { animation-name: floaty2-rtl; }

/* --------------------------------------------------------------------------
   5. Numerals. Prices, distances and dates read as Western Arabic numerals
   across Morocco, so leave them as-is — but keep them isolated so a number
   next to Arabic text doesn't reorder around punctuation.
   -------------------------------------------------------------------------- */

[lang="ar"] .stat-k,
[lang="ar"] .step-big-n,
[lang="ar"] .step-num,
[lang="ar"] .hero-point-k {
  unicode-bidi: isolate;
}