/* ============================================================
   NAV.CSS — Navigation (Mobile-First)
   Mobile: Top header with logo + icon links (no bottom bar)
   Desktop: Full top nav with text links
   ============================================================ */

#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
  padding: 1.6rem 0;
}
#nav.scrolled {
  background: rgba(254,252,250,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border-mid);
  padding: 1rem 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Logo */
.nav-logo { display: flex; align-items: center; gap: 0.65rem; cursor: pointer; flex-shrink: 0; }
.nav-logo-icon { width: 32px; height: 32px; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-logo-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 500; color: var(--text-dark); letter-spacing: 0.02em; }
.nav-logo-sub  { font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--coral); font-weight: 400; }

/* Desktop text links */
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); font-weight: 400; transition: color var(--transition); position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--coral); transition: width var(--transition); }
.nav-links a:hover { color: var(--coral); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { padding: 0.5rem 1.3rem; border: 1.5px solid var(--coral); border-radius: 2px; font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral) !important; transition: background var(--transition), color var(--transition) !important; }
.nav-cta::after { display: none !important; }
.nav-cta:hover  { background: var(--coral) !important; color: white !important; }

/* Tablet hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; -webkit-tap-highlight-color: transparent; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text-dark); transition: var(--transition); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4.5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4.5px); }

/* Tablet drawer */
.nav-drawer { display: none; position: fixed; top: 0; left: 0; right: 0; background: var(--warm-white); padding: 5rem 2rem 2.5rem; z-index: 999; box-shadow: 0 4px 30px rgba(44,36,32,0.1); transform: translateY(-100%); transition: transform 0.4s ease; }
.nav-drawer.open { transform: translateY(0); }
.nav-drawer ul { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.nav-drawer a { font-family: var(--font-serif); font-size: 1.5rem; color: var(--text-dark); font-style: italic; transition: color 0.2s; }
.nav-drawer a:hover { color: var(--coral); }

/* No bottom nav at all */
.mobile-nav { display: none !important; }

/* Mobile top icon nav (hidden by default, shown on mobile) */
.mobile-icon-nav { display: none; align-items: center; gap: 0; }

.mobile-icon-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 44px; height: 44px;
  color: var(--text-mid); text-decoration: none; border: none; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--font-sans); font-size: 0.4rem; letter-spacing: 0.08em;
  text-transform: uppercase; transition: color 0.2s ease; border-radius: 8px;
}
.mobile-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mobile-icon-btn:active, .mobile-icon-btn.active { color: var(--coral); }
.mobile-icon-btn.wp { color: #25D366; }
.mobile-icon-btn.wp svg { stroke: #25D366; }

/* Book Now pill in mobile header */
.mobile-book-btn {
  display: none;
  padding: 0.45rem 1rem;
  background: var(--coral); color: white;
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 100px; font-family: var(--font-sans); border: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  white-space: nowrap; transition: background 0.2s; text-decoration: none;
}
.mobile-book-btn:active { background: #c95e44; }

/* ── Tablet: 769–1024px ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav-links  { display: none; }
  .hamburger  { display: flex; }
  .nav-drawer { display: block; }
}

/* ── Mobile: ≤ 768px ── */
@media (max-width: 768px) {
  body { padding-bottom: 0; }

  #nav {
    background: rgba(254,252,250,0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--border-mid);
    padding: 0;
  }
  .nav-inner { height: 56px; padding: 0 0.6rem; gap: 0.2rem; }

  .nav-links  { display: none !important; }
  .hamburger  { display: none !important; }
  .nav-drawer { display: none !important; }
  .nav-logo-sub  { display: none; }
  .nav-logo-name { font-size: 0.82rem; }
  .nav-logo-icon { width: 24px; height: 24px; }

  .mobile-icon-nav { display: flex; }
  .mobile-book-btn { display: block; }

  a, button { touch-action: manipulation; }
}

@media (max-width: 360px) {
  .nav-inner { padding: 0 0.4rem; }
  .mobile-icon-btn { width: 38px; }
  .mobile-book-btn { padding: 0.38rem 0.7rem; font-size: 0.5rem; }
}