/* Voyage Villas v4 - responsive and multilingual refinements - Codex - 2026-08-10 */

html { overflow-x: clip; }
body { overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }

/* Padrao Voyage Villas: nenhum formato redondo, inclusive nos controles do MapLibre. */
.maplibregl-ctrl button,
.maplibregl-ctrl-group,
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib-button,
.maplibregl-popup-content {
  border-radius: 0 !important;
}

.header-actions .lang-menu a,
.tr-lang-menu a,
.mobile-menu .lang-switch a {
  min-height: 44px;
}

.brand,
.menu-toggle,
.lang-trigger,
.maplibregl-ctrl button,
.lx-xp-close,
.orl-xp-close {
  min-height: 44px;
  min-width: 44px;
}

.mobile-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(42px, env(safe-area-inset-bottom));
}

.lx-xp-chip,
.orl-xp-chip,
.lx-xp-skip,
.lx-xp-replay,
.globe-exit,
.btn,
.button {
  min-height: 44px;
}

@media (max-width: 760px) {
  .header-inner {
    min-height: 68px;
    padding-inline: 18px;
  }

  .header-actions { gap: 8px; }

  .hero-actions .btn,
  .hero-actions .button,
  .lx-cta .btn,
  .orl-cta .btn {
    justify-content: center;
    width: 100%;
  }

  .lx-section,
  .lx-video-section,
  .theater,
  .service,
  .contact-copy {
    scroll-margin-top: 76px;
  }

  .lx-xp,
  .orl-xp {
    min-height: 720px;
    height: 100svh;
  }

  .lx-xp-title,
  .orl-xp-title,
  .lx-xp-caption,
  .orl-xp-caption {
    max-width: calc(100vw - 32px);
  }

  .lx-xp-legend,
  .orl-xp-legend {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .lx-xp-legend::-webkit-scrollbar,
  .orl-xp-legend::-webkit-scrollbar { display: none; }
}

@media (max-width: 390px) {
  .header-inner { gap: 8px; padding-inline: 14px; }
  .header-actions { gap: 6px; }
}

/* Trancoso uses its own page shell. The v4 drawer aligns its mobile navigation
   with the rest of the site without rewriting the page's visual identity. */
.tr-mobile-toggle,
.tr-mobile-menu-v4 { display: none; }

@media (max-width: 1060px) {
  body[data-page="trancoso"] .site-header {
    align-items: center;
    min-height: 68px;
    padding: 12px 16px;
  }

  body[data-page="trancoso"] .site-header > .nav { display: none; }

  body[data-page="trancoso"] .site-header .brand { margin-inline-end: auto; }

  body[data-page="trancoso"] .tr-lang { margin-right: 4px; }

  .tr-mobile-toggle {
    display: inline-flex;
    flex: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    position: relative;
    z-index: 1102;
  }

  .tr-mobile-toggle span,
  .tr-mobile-toggle::before,
  .tr-mobile-toggle::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 1px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .tr-mobile-toggle::before { transform: translateY(-6px); }
  .tr-mobile-toggle::after { transform: translateY(6px); }
  body.tr-mobile-open .tr-mobile-toggle span { opacity: 0; }
  body.tr-mobile-open .tr-mobile-toggle::before { transform: rotate(45deg); }
  body.tr-mobile-open .tr-mobile-toggle::after { transform: rotate(-45deg); }

  .tr-mobile-menu-v4 {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1100;
    flex-direction: column;
    padding: 98px 24px max(32px, env(safe-area-inset-bottom));
    background: #fbf7f2;
    color: #3a2e23;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
    overflow-y: auto;
  }

  body.tr-mobile-open { overflow: hidden; }
  body.tr-mobile-open .tr-mobile-menu-v4 {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .tr-mobile-menu-v4 nav { display: grid; }
  .tr-mobile-menu-v4 nav > a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid rgba(58, 46, 35, 0.14);
    color: inherit;
    font-family: var(--font-body, "Jost", sans-serif);
    font-size: clamp(20px, 6vw, 28px);
  }

  body[data-page="trancoso"] .hero-content { padding-top: 106px; }
}

/* Right-to-left language support. Media, phone numbers, e-mail addresses and
   language codes stay left-to-right, while reading order follows Arabic. */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] :where(h1, h2, h3, p, li, figcaption, blockquote) { text-align: right; }
html[dir="rtl"] :where(.header-inner, .header-actions, .hero-actions, .footer-bottom-inner) { flex-direction: row-reverse; }
html[dir="rtl"] .main-nav,
html[dir="rtl"] .mobile-nav,
html[dir="rtl"] .tr-mobile-menu-v4 nav { direction: rtl; }
html[dir="rtl"] .header-actions .lang-menu,
html[dir="rtl"] .tr-lang-menu { right: auto; left: 0; }
html[dir="rtl"] .eyebrow::before { margin-right: 0; margin-left: 12px; }
html[dir="rtl"] :where(a[href^="tel:"], a[href^="mailto:"], a[href*="wa.me"], .lang-switch, [data-rail-counter]) {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 1060px) {
  html[dir="rtl"] body[data-page="trancoso"] .site-header .brand {
    margin-inline-end: 0;
    margin-inline-start: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-mobile-menu-v4,
  .tr-mobile-toggle span,
  .tr-mobile-toggle::before,
  .tr-mobile-toggle::after { transition: none !important; }
}