/* Élvania — Arabic / RTL overlay
   Loaded AFTER styles.css on /ar/. Targets html[lang="ar"] so it never
   leaks into the English page if the file is accidentally referenced. */

html[lang="ar"] body {
  font-family: "Tajawal", "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .hero h1,
html[lang="ar"] .modal h2 {
  font-family: "Amiri", "Cormorant Garamond", Georgia, serif;
}

/* Keep the brand mark "É" in its Latin display face. */
html[lang="ar"] .brand-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
}

/* Brand wordmark stays in Tajawal for Arabic glyphs; remove uppercase tracking. */
html[lang="ar"] .brand-text {
  font-family: "Tajawal", sans-serif;
  letter-spacing: 0;
  font-weight: 500;
}

/* Hero typography: Arabic looks better slightly tighter than the Latin defaults. */
html[lang="ar"] .hero h1 {
  line-height: 1.05;
}

html[lang="ar"] .hero-sub,
html[lang="ar"] .modal-sub {
  line-height: 1.95;
}

/* ── Logical-property flips that browsers do NOT auto-mirror ───────────── */

/* Hero content is anchored to the left in LTR; mirror to the right in RTL. */
html[lang="ar"] .hero-content {
  margin-left: 0;
  margin-right: clamp(24px, 7vw, 86px);
}

/* Scroll hint is positioned absolute from the left edge. */
html[lang="ar"] .scroll-hint {
  left: auto;
  right: clamp(24px, 7vw, 86px);
}

/* CTA arrows point right in English. In Arabic they should point left. */
html[lang="ar"] .btn svg {
  transform: scaleX(-1);
}

/* Eyebrow / section-label letter-spacing: Arabic doesn't benefit from
   wide letter-spacing the way Latin uppercase does. Tighten it. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .section-label,
html[lang="ar"] .nav-links a,
html[lang="ar"] .footer-links a,
html[lang="ar"] .hero-meta span,
html[lang="ar"] .nav-link-button,
html[lang="ar"] .nav-whatsapp,
html[lang="ar"] .scroll-hint,
html[lang="ar"] .btn,
html[lang="ar"] .tier-card button,
html[lang="ar"] .submit-btn,
html[lang="ar"] .mobile-bar button {
  letter-spacing: 0;
  text-transform: none;
}

/* Tier-card numbered labels & step numbers stay LTR — they are numerals only. */
html[lang="ar"] .step span,
html[lang="ar"] .arrange-card span {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Form inputs that must remain LTR regardless of page direction. */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"] {
  direction: ltr;
  text-align: right; /* place cursor near the label visually */
}

html[lang="ar"] input[type="email"]::placeholder,
html[lang="ar"] input[type="tel"]::placeholder {
  text-align: left;
}

/* Email link in footer should render left-to-right even inside RTL block. */
html[lang="ar"] .footer-links a[dir="ltr"],
html[lang="ar"] .contact-actions a[dir="ltr"] {
  unicode-bidi: isolate;
}

/* Language switcher pill in the nav. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding-inline: 16px;
  border: 1px solid rgba(201, 168, 76, 0.32);
  border-radius: 999px;
  color: rgba(245, 240, 232, 0.82);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.lang-switch[lang="ar"] {
  font-family: "Tajawal", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  color: var(--ivory);
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.12);
}

/* Inside the open mobile menu, the lang-switch should stretch nicely. */
@media (max-width: 1080px) {
  html[lang="ar"] .lang-switch,
  .site-nav.menu-open .lang-switch {
    width: 100%;
    padding: 12px 18px;
    min-height: 44px;
  }
}

/* The Latin "EN" label inside an RTL nav needs its own isolation so the
   surrounding Arabic doesn't pull it into bidi confusion. */
.lang-switch span[lang="en"] {
  unicode-bidi: isolate;
  letter-spacing: 1px;
}

/* Cal.com embed defaults to dark theme on dark sites — make sure modal
   reading direction matches the host page when a user opens it. */
html[lang="ar"] .modal {
  text-align: right;
}

html[lang="ar"] .modal .contact-card {
  text-align: right;
}

/* Hard reset: in RTL, season-card and signature-card overlay text alignment. */
html[lang="ar"] .season-card div,
html[lang="ar"] .tier-card,
html[lang="ar"] .step,
html[lang="ar"] .contact-copy {
  text-align: right;
}

/* Gallery captions and section heads — text alignment relies on dir. */
html[lang="ar"] .gallery-grid figcaption,
html[lang="ar"] .section-head,
html[lang="ar"] .section-head.narrow {
  text-align: right;
}

/* Footer is centered in both languages — no override needed there. */

/* Print: keep RTL flow. */
@media print {
  html[lang="ar"] body { direction: rtl; }
}