/* ============================================================
   TRANQUIL TERRACE GALLE — PREMIUM STICKY NAVIGATION FIX
   Ensures the header is always visible while scrolling on
   all devices: iPhone Safari, Android Chrome, and Desktop.

   ROOT CAUSE: overflow-x: hidden on <html> breaks
   position: sticky in iOS Safari and some Chrome versions.
   The scroll container must be <html>, not <body>.
   ============================================================ */

/* 1. CRITICAL FIX — Let <html> scroll freely so sticky works
      Move overflow control to <body> only (not html)          */
html {
  overflow-x: clip !important;   /* clip = no scroll, no sticky break */
  overflow-y: auto !important;   /* html must be the scroll container  */
  height: 100% !important;
}

body {
  overflow-x: clip !important;
  min-height: 100% !important;
  position: relative !important; /* keeps layout flow correct          */
}

/* 2. STICKY HEADER — enforce always-visible at top */
header.taru-header,
header.luxury-hotel-header,
#site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9500 !important;       /* above all sections, below modals  */
  transform: translateZ(0);       /* GPU layer — prevents iOS flicker  */
  will-change: height, box-shadow;
  -webkit-transform: translateZ(0);
}

/* 3. DEFAULT (Top of page) — full height, transparent-ish */
header.taru-header,
header.luxury-hotel-header,
#site-header {
  height: 96px !important;
  background: rgba(250, 246, 241, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(37, 40, 36, 0.08) !important;
  box-shadow: none !important;
  transition:
    height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    background 0.3s ease !important;
}

/* 4. SCROLLED / COMPACT STATE — slim, frosted glass */
header.taru-header.scrolled,
header.taru-header.compact,
header.luxury-hotel-header.scrolled,
header.luxury-hotel-header.compact,
#site-header.scrolled,
#site-header.compact {
  height: 68px !important;
  background: rgba(250, 246, 241, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 1px 0 rgba(37, 40, 36, 0.08),
    0 4px 24px rgba(37, 40, 36, 0.07) !important;
  border-bottom-color: rgba(37, 40, 36, 0.12) !important;
}

/* 5. LOGO SCALE DOWN when scrolled */
header.taru-header.scrolled .luxury-crest-svg,
header.taru-header.compact .luxury-crest-svg,
header.luxury-hotel-header.scrolled .luxury-crest-svg,
header.luxury-hotel-header.compact .luxury-crest-svg,
#site-header.scrolled .luxury-crest-svg,
#site-header.compact .luxury-crest-svg {
  width: 46px !important;
  height: 54px !important;
  transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 6. MOBILE — compact defaults */
@media (max-width: 767px) {
  header.taru-header,
  header.luxury-hotel-header,
  #site-header {
    height: 68px !important;
  }

  header.taru-header.scrolled,
  header.taru-header.compact,
  header.luxury-hotel-header.scrolled,
  header.luxury-hotel-header.compact,
  #site-header.scrolled,
  #site-header.compact {
    height: 60px !important;
  }
}

/* 7. MOBILE DRAWER — must sit above everything when open */
#luxury-mobile-drawer,
.luxury-mobile-drawer {
  z-index: 9600 !important;
}

/* 8. BOOKING BAR (mobile bottom) — keep below drawer */
.meta-sticky-book-bar,
.search-strip-wrapper,
.sticky-book-bar {
  z-index: 9400 !important;
}

/* 9. WHATSAPP FAB — stays above content, below drawer */
.whatsapp-fab,
.meta-whatsapp-fab,
#whatsapp-fab {
  z-index: 9300 !important;
}

/* 10. Prevent hero / first section from hiding under header */
.meta-hero-section,
.cinematic-hero,
#hero,
section:first-of-type {
  scroll-margin-top: 96px;
}

/* 11. Anchor scroll targets — account for sticky header offset */
[id] {
  scroll-margin-top: 80px;
}

/* 12. REDUCE MOTION — skip transitions for accessibility */
@media (prefers-reduced-motion: reduce) {
  header.taru-header,
  header.luxury-hotel-header,
  #site-header {
    transition: none !important;
  }
  header.taru-header.scrolled .luxury-crest-svg,
  header.luxury-hotel-header.scrolled .luxury-crest-svg {
    transition: none !important;
  }
}

/* ============================================================
   13. HERO FULLSCREEN EDGE-TO-EDGE — ZERO BLACK GAPS (MOBILE)
   Ensures video covers 100% viewport width and height on iPhone
   Safari & Android with no black strips, letterboxing or clipping.
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  main#main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* Full viewport width hero without 9:16 aspect ratio box constraint */
  .meta-hero,
  #home.meta-hero {
    position: relative !important;
    width: 100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100% !important;
    height: calc(100svh - 68px) !important;
    min-height: calc(100svh - 68px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    background: #141615 !important;
  }

  /* Video wrapper fills absolute full bounds */
  .meta-hero-video-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  /* Video object-fit cover takes 100% width and height without black side borders */
  .meta-hero-video,
  video#meta-hero-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
    border: none !important;
  }

  /* Cinematic overlay gives contrast for text without blocking taps */
  .meta-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    background: linear-gradient(
      180deg,
      rgba(20, 22, 21, 0.35) 0%,
      rgba(20, 22, 21, 0.15) 30%,
      rgba(20, 22, 21, 0.65) 65%,
      rgba(20, 22, 21, 0.94) 100%
    ) !important;
    pointer-events: none !important;
  }

  /* Text container sits cleanly above video and bottom booking bar */
  .meta-hero-container {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.25rem calc(1.75rem + 70px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .meta-hero-copy {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .meta-hero-copy .meta-eyebrow {
    font-size: 0.68rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.4rem !important;
    color: #E2CA92 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
    font-weight: 600 !important;
  }

  .meta-hero-title {
    font-size: clamp(1.85rem, 7.2vw, 2.45rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
  }

  .meta-hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    color: #F0ECE1 !important;
    margin: 0 auto 0.9rem !important;
    max-width: 320px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
  }
}