/* ==========================================================================
   BILINGUAL SYSTEM STYLES — Ekuveri Boli Mulah
   --------------------------------------------------------------------------
   Loaded AFTER styles.css / gallery.css so it can layer bilingual behaviour
   on top without touching the original design. English/default appearance
   is 100% unaffected — every rule below is scoped to html[lang="dv"] /
   html[dir="rtl"] or to the new .lang-switch control.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. Custom Dhivehi fonts — loaded locally, used only in Dhivehi mode    */
/* ---------------------------------------------------------------------- */
@font-face {
  font-family: 'MV Izyanreethi Bold';
  src: url('../fonts/MvIzyanreethi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MV Mohamed Ali';
  src: url('../fonts/Mv-Mohamed-Ali-Final.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------- */
/* 2. Language switcher control                                          */
/* ---------------------------------------------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}
.lang-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.lang-btn[data-lang="dv"] {
  font-family: 'MV Izyanreethi Bold', 'Inter', sans-serif;
  font-size: 0.8rem;
}
.lang-btn:hover {
  opacity: 0.8;
}
.lang-btn.active {
  background: currentColor;
  color: #0b0b0b;
  border-color: currentColor;
}

/* ---------------------------------------------------------------------- */
/* 3. Dhivehi typography — headings use the Bold display font,           */
/*    body copy uses the readable text font. Forms are explicitly        */
/*    excluded so they are never restyled or mirrored.                   */
/* ---------------------------------------------------------------------- */
html[lang="dv"] h1,
html[lang="dv"] h2,
html[lang="dv"] h3,
html[lang="dv"] h4,
html[lang="dv"] h5,
html[lang="dv"] h6,
html[lang="dv"] .nav-brand,
html[lang="dv"] .hero-title,
html[lang="dv"] .hero-eyebrow,
html[lang="dv"] .hero-cta span,
html[lang="dv"] .section-title,
html[lang="dv"] .section-label,
html[lang="dv"] .footer-title,
html[lang="dv"] .social-name,
html[lang="dv"] .social-btn,
html[lang="dv"] .gallery-title,
html[lang="dv"] .gallery-eyebrow,
html[lang="dv"] .gallery-load-more,
html[lang="dv"] .perf-tag,
html[lang="dv"] .lbl,
html[lang="dv"] .contact-role,
html[lang="dv"] .lang-btn[data-lang="dv"] {
  font-family: 'MV Izyanreethi Bold', 'Playfair Display', serif !important;
}

html[lang="dv"] body,
html[lang="dv"] p,
html[lang="dv"] li,
html[lang="dv"] .section-body,
html[lang="dv"] .hero-sub,
html[lang="dv"] .hero-desc,
html[lang="dv"] .gallery-description,
html[lang="dv"] .footer-copy,
html[lang="dv"] .footer-legal,
html[lang="dv"] .footer-contact {
  font-family: 'MV Mohamed Ali', 'Inter', sans-serif;
}

/* Never restyle or mirror the booking form, names, phone numbers, or
   social handles — these must stay exactly as authored. */
html[lang="dv"] #digitalBookingForm,
html[lang="dv"] #digitalBookingForm *,
html[lang="dv"] .contact-name,
html[lang="dv"] .contact-phone,
html[lang="dv"] .social-handle,
html[lang="dv"] .footer-contact a {
  font-family: 'Inter', sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------- */
/* 4. RTL layout — only where it improves the Dhivehi reading experience. */
/*    Numbers, phone links, and the booking form always stay LTR.        */
/* ---------------------------------------------------------------------- */
html[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}

html[dir="rtl"] .num,
html[dir="rtl"] .contact-phone,
html[dir="rtl"] .footer-contact a,
html[dir="rtl"] .social-handle,
html[dir="rtl"] #digitalBookingForm {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .hero-cta svg {
  transform: scaleX(-1);
}

/* Text-heavy blocks read naturally right-to-left; grids/cards keep their
   existing responsive flow (CSS Grid/Flexbox wrap direction is unaffected
   unless explicitly reversed above), so layout integrity is preserved. */
html[dir="rtl"] .section-body,
html[dir="rtl"] .hero-sub,
html[dir="rtl"] .hero-desc,
html[dir="rtl"] .gallery-description,
html[dir="rtl"] .footer-copy,
html[dir="rtl"] .footer-legal {
  text-align: right;
}