/* ============================================================================
 * nav-2026.css — Tiki Tan header / navigation, 2026 tropical-resort theme
 *
 * Drop-in retheme of css/nav.css. EVERY SELECTOR IS IDENTICAL to the file it
 * replaces, because js/nav.js drives this markup by class name:
 *
 *   .nav-dropdown / .nav-dropdown-toggle / .nav-dropdown-menu
 *   .mobile-nav / .mobile-toggle / .mobile-accordion(-toggle|-panel)
 *   toggles .open on dropdowns + mobile nav, .active on the current page
 *
 * js/nav.js is NOT modified. Do not rename anything here.
 *
 * Requires tiki-2026.css to be loaded first (uses its --tt-* tokens).
 * ==========================================================================*/

/* --- Header shell ---------------------------------------------------------
 * Frosted ivory. The fallback background is opaque so the header stays
 * readable where backdrop-filter is unsupported or disabled. */
.site-header {
  background: var(--tt-bg);
  border-bottom: 1px solid var(--tt-border);
  position: sticky;                 /* pre-existing behaviour, retained */
  top: 0;
  z-index: 1000;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .site-header {
    background: rgba(255, 252, 242, 0.88);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.nav-container {
  max-width: var(--tt-max-w);
  margin: 0 auto;
  padding: 0 var(--tt-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

/* --- Logo lockup: real bamboo wordmark + sun brand mark ------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: var(--tt-tap-min);
}
.logo img { height: 44px; width: auto; }
.logo .logo-sun { height: 34px; width: 34px; flex-shrink: 0; }

/* --- Desktop nav links ---------------------------------------------------- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-links > a,
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  font-family: var(--tt-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tt-ink-soft);
  background: none;
  border: none;
  border-radius: var(--tt-r-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tt-t-fast) var(--tt-ease),
              background var(--tt-t-fast) var(--tt-ease);
}

.nav-links > a:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown.open > .nav-dropdown-toggle {
  color: var(--tt-teal-deep);
  background: var(--tt-teal-pale);
}

/* Current page. Colour alone would not be enough, so the active item also
 * carries a gold underline bar (mockup shows this under "Home"). */
.nav-links > a.active,
.nav-dropdown-toggle.active {
  color: var(--tt-teal-deep);
  position: relative;
}
.nav-links > a.active::after,
.nav-dropdown-toggle.active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 1px;
  height: 3px;
  border-radius: 3px;
  background: var(--tt-gold);
}

/* VIP — gold accent. --tt-gold-deep, not --tt-gold: gold text on ivory is 2:1. */
.nav-links > a.highlight-gold,
.mobile-nav > a.highlight-gold {
  color: var(--tt-gold-deep);
  font-weight: 700;
}
.nav-links > a.highlight-gold:hover,
.mobile-nav > a.highlight-gold:hover {
  color: var(--tt-bronze);
  background: var(--tt-gold-soft);
}
/* Keep VIP gold when it is the active page. */
.nav-links > a.highlight-gold.active,
.mobile-nav > a.highlight-gold.active { color: var(--tt-gold-deep); }

/* "My Account" — the old coral is dropped for teal; coral has no place in the
 * new palette and read as a second competing accent. */
.nav-dropdown-toggle.highlight-coral,
.mobile-accordion-toggle.highlight-coral { color: var(--tt-teal-deep); }
.nav-dropdown-toggle.highlight-coral:hover,
.nav-dropdown.open > .nav-dropdown-toggle.highlight-coral {
  color: var(--tt-teal-deep);
  background: var(--tt-teal-pale);
}

/* --- Chevron -------------------------------------------------------------- */
.nav-chevron { transition: transform var(--tt-t) var(--tt-ease); flex-shrink: 0; }
.nav-dropdown.open > .nav-dropdown-toggle .nav-chevron { transform: rotate(180deg); }

/* --- Desktop dropdown ----------------------------------------------------- */
.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 220px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  padding: 8px;
  box-shadow: var(--tt-shadow-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity var(--tt-t) var(--tt-ease),
              transform var(--tt-t) var(--tt-ease),
              visibility var(--tt-t);
}

.nav-dropdown.open > .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Keep the menu on screen if a dropdown sits near the viewport edge. */
@media (max-width: 1140px) {
  .nav-dropdown:last-of-type .nav-dropdown-menu { left: auto; right: 0; transform: translateY(6px); }
  .nav-dropdown:last-of-type.open > .nav-dropdown-menu { transform: translateY(0); }
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: var(--tt-tap-min);
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tt-ink-soft);
  border-radius: var(--tt-r-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tt-t-fast) var(--tt-ease), color var(--tt-t-fast) var(--tt-ease);
}
.nav-dropdown-menu a:hover { background: var(--tt-teal-pale); color: var(--tt-teal-deep); }
.nav-dropdown-menu a.active { color: var(--tt-teal-deep); font-weight: 600; background: var(--tt-teal-pale); }

/* --- Book Now ------------------------------------------------------------- */
.btn-book {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tt-tap-min);
  padding: 11px 24px;
  background: var(--tt-teal);
  color: var(--tt-on-teal);
  font-family: var(--tt-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--tt-r-pill);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--tt-shadow);
  transition: background var(--tt-t) var(--tt-ease),
              box-shadow var(--tt-t) var(--tt-ease),
              transform var(--tt-t) var(--tt-ease);
}
.btn-book:hover { background: var(--tt-teal-deep); box-shadow: var(--tt-shadow-hover); transform: translateY(-1px); }
.btn-book img { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .btn-book:hover { transform: none; } }

/* --- Mobile toggle -------------------------------------------------------- */
.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tt-tap-min);
  height: var(--tt-tap-min);
  background: none;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  color: var(--tt-teal-deep);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.mobile-toggle:hover { background: var(--tt-teal-pale); border-color: var(--tt-teal); }

/* --- Mobile navigation ---------------------------------------------------- */
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--tt-bg);
  border-bottom: 1px solid var(--tt-border);
  box-shadow: var(--tt-shadow-hover);
  padding: 12px var(--tt-gutter) 20px;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 68px);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.open { display: flex; }

.mobile-nav > a {
  display: flex;
  align-items: center;
  min-height: var(--tt-tap-min);
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tt-ink-soft);
  border-radius: var(--tt-r-sm);
  text-decoration: none;
  transition: background var(--tt-t-fast) var(--tt-ease), color var(--tt-t-fast) var(--tt-ease);
}
.mobile-nav > a:hover { background: var(--tt-teal-pale); color: var(--tt-teal-deep); }
.mobile-nav > a.active {
  color: var(--tt-teal-deep);
  background: var(--tt-teal-pale);
  box-shadow: inset 3px 0 0 var(--tt-gold);   /* not colour alone */
}

/* --- Mobile accordion ----------------------------------------------------- */
.mobile-accordion { border-radius: var(--tt-r-sm); }

.mobile-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--tt-tap-min);
  padding: 12px 16px;
  font-family: var(--tt-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tt-ink-soft);
  background: none;
  border: none;
  border-radius: var(--tt-r-sm);
  cursor: pointer;
  transition: background var(--tt-t-fast) var(--tt-ease), color var(--tt-t-fast) var(--tt-ease);
}
.mobile-accordion-toggle:hover { background: var(--tt-teal-pale); color: var(--tt-teal-deep); }
.mobile-accordion-toggle.active { color: var(--tt-teal-deep); }
.mobile-accordion.open > .mobile-accordion-toggle .nav-chevron { transform: rotate(180deg); }

.mobile-accordion-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 8px 12px;
  margin-left: 12px;
  border-left: 2px solid var(--tt-border);
}
.mobile-accordion.open > .mobile-accordion-panel { display: flex; }

.mobile-accordion-panel a {
  display: flex;
  align-items: center;
  min-height: var(--tt-tap-min);
  padding: 10px 16px;
  font-size: 0.9375rem;
  color: var(--tt-ink-soft);
  border-radius: var(--tt-r-sm);
  text-decoration: none;
  transition: background var(--tt-t-fast) var(--tt-ease), color var(--tt-t-fast) var(--tt-ease);
}
.mobile-accordion-panel a:hover { background: var(--tt-teal-pale); color: var(--tt-teal-deep); }
.mobile-accordion-panel a.active { color: var(--tt-teal-deep); font-weight: 600; }

/* Mobile Book Now */
.mobile-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 12px;
  padding: 13px 16px;
  background: var(--tt-teal);
  color: var(--tt-on-teal) !important;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  border-radius: var(--tt-r-pill);
  text-decoration: none;
  box-shadow: var(--tt-shadow);
  transition: background var(--tt-t) var(--tt-ease);
}
.mobile-book-btn:hover { background: var(--tt-teal-deep); }

/* --- Responsive breakpoint (unchanged from nav.css) ----------------------- */
@media (max-width: 1024px) {
  .nav-links,
  .btn-book { display: none !important; }
  .mobile-toggle { display: inline-flex; }
  .nav-container { min-height: 62px; }
  .logo img { height: 38px; }
  .logo .logo-sun { height: 30px; width: 30px; }
}

/* Very narrow phones — keep the lockup from crowding the toggle. */
@media (max-width: 359px) {
  .logo img { height: 32px; }
  .logo .logo-sun { display: none; }
}