/* ===========================================================
   Arabic / RTL overrides — loaded AFTER style.css
   Sharbatly Village — قرية الشربتلي
   =========================================================== */

:root {
  /* Amiri: elegant Naskh serif, the Arabic counterpart to Playfair Display.
     Tajawal: clean geometric sans, pairs with Inter for body text. */
  --font-display: 'Amiri', 'Times New Roman', serif;
  --font-body:    'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

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

/* -----------------------------------------------------------
   CRITICAL: Arabic is a cursive script — letters JOIN.
   letter-spacing breaks the joins and renders text as
   disconnected glyphs. It must be zero everywhere.
   text-transform: uppercase has no meaning in Arabic.
   ----------------------------------------------------------- */
html[dir="rtl"] .section-label,
html[dir="rtl"] .btn,
html[dir="rtl"] .logo-tagline,
html[dir="rtl"] .hero-eyebrow,
html[dir="rtl"] .hero-scroll,
html[dir="rtl"] .heritage-caption,
html[dir="rtl"] .stat-lbl,
html[dir="rtl"] .villa-badge,
html[dir="rtl"] .rest-link,
html[dir="rtl"] .footer-brand .logo-tagline,
html[dir="rtl"] .footer-col h5,
html[dir="rtl"] .nav-cta,
html[dir="rtl"] .villa-tag,
html[dir="rtl"] .page-header,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5 {
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Arabic glyphs carry more vertical detail than Latin — they need air */
html[dir="rtl"] body { line-height: 1.9; }
html[dir="rtl"] p    { line-height: 2.05; }
html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.5; font-weight: 700; }

/* Amiri runs small at a given px size; nudge headings up to match
   the visual weight of the English original */
html[dir="rtl"] h1 { font-size: clamp(2.4rem, 6.4vw, 4.3rem); }
html[dir="rtl"] h2 { font-size: clamp(2rem, 4.4vw, 3rem); }

/* Latin fragments inside Arabic (phone numbers, emails, brand names)
   must stay left-to-right or they display reversed */
html[dir="rtl"] .ltr,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* -----------------------------------------------------------
   Mirrored layout properties
   ----------------------------------------------------------- */
html[dir="rtl"] .about-features li { padding-left: 0; padding-right: 1.4rem; }
html[dir="rtl"] .about-features li::before { left: auto; right: 0; }

html[dir="rtl"] .villa-badge { right: auto; left: 1rem; }

html[dir="rtl"] .nav-cta { margin-left: 0; margin-right: 0.5rem; }

/* the → in "Explore Menu →" has to point the other way */
html[dir="rtl"] .rest-link { direction: rtl; }

/* fac-detail uses a direction hack for column ordering in LTR;
   neutralise it so RTL flows naturally */
html[dir="rtl"] .fac-detail,
html[dir="rtl"] .fac-detail.reverse { direction: rtl; }

/* -----------------------------------------------------------
   Mobile menu — chevrons must point left (the reading direction)
   ----------------------------------------------------------- */
@media (max-width: 768px) {
  html[dir="rtl"] .navbar-nav a::after {
    transform: rotate(135deg);
    border-right-color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
  html[dir="rtl"] .navbar-nav a:active::after {
    transform: rotate(135deg) translate(3px, 3px);
  }
  html[dir="rtl"] .nav-toggle { margin-right: 0; margin-left: -10px; }
}