/* =========================================================
   LAMAR SMILE — Arabic / RTL overrides
   Loaded AFTER style.css on pages with <html dir="rtl" lang="ar">
   ========================================================= */

/* ---------- 1. Arabic typefaces ----------
   Cairo for display, Tajawal for body. Both keep the modern-bold feel
   of Space Grotesk / Inter while being properly designed for Arabic. */
:root {
  --font-display: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-body: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
}

/* ---------- 2. Arabic typography corrections ----------
   CRITICAL: letter-spacing breaks the cursive joins in Arabic script.
   Every tracked style from the Latin sheet must be reset to normal. */
body,
h1, h2, h3, h4,
.eyebrow,
.brand,
.footer-col h4,
.pricing thead th,
.btn,
.nav__links a,
.quote blockquote {
  letter-spacing: normal;
}

/* Arabic needs more leading, but must keep the same visual weight as the
   English pages — only a slight trim, since Cairo runs a little wide. */
body { line-height: 1.85; }
h1, h2, h3, h4 { line-height: 1.4; }
h1 { font-size: clamp(2.4rem, 1.6rem + 4.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem); }

/* Uppercasing is meaningless in Arabic and hurts legibility */
.eyebrow,
.footer-col h4,
.pricing thead th,
.brand {
  text-transform: none;
}

/* ---------- 3. Directional flips ---------- */
.skip-link { left: auto; right: 1rem; }

.portrait__tag { left: auto; right: 1rem; }

.hero__glyph { left: auto; right: 1.6rem; }

/* Decorative blobs mirror so the composition reads the same way round */
.hero__visual::before { inset: -30% auto auto -10%; }
.hero__visual::after  { inset: auto -20% -25% auto; }
.cta::after           { inset: auto auto -60% -10%; }

/* Arrows point the way the text runs */
.link-arrow svg { transform: scaleX(-1); }
.link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

/* Left-aligned blocks become right-aligned */
.faq__q,
.pricing caption,
.pricing th,
.pricing td { text-align: right; }

/* Centre stays centre */
.section-head.center,
.scheduler,
.map { text-align: center; }

/* ---------- 4. Latin fragments inside Arabic text ----------
   Phone numbers, GDC numbers, postcodes and email addresses must stay LTR
   or the digits and punctuation reorder wrongly. */
.ltr,
a[href^="tel:"],
a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
}

/* NOTE: .hero__meta dt is deliberately NOT forced LTR — those values mix
   Arabic and digits ("+20 عامًا"), and the Unicode bidi algorithm already
   orders the numerals correctly inside RTL text. */

/* Inline Latin runs (brand name, "NEBDN", "GDC") */
bdi, .lat {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- 5. Form fields ---------- */
.field input,
.field textarea,
.field select { text-align: right; }

/* Phone and email inputs stay LTR even in an RTL form */
.field input[type="tel"],
.field input[type="email"] {
  direction: ltr;
  text-align: left;
}

/* ---------- 6. Language switcher ----------
   Fully styled in style.css and already forced LTR there, so EN stays on the
   left in both languages. Nothing to override. */

/* ---------- 7. Collapsed nav ----------
   Must match the 1000px breakpoint in style.css, not 760px. */
@media (max-width: 1000px) {
  .nav__links a { text-align: right; }
}