/* ============================================================
   NAV — Desktop Navigation, Dropdowns & Mobile Drawer
   Hanalei Day Spa

   Matches the approved v5 design exactly. The sticky nav stays
   68px tall (--nav-h). Desktop uses CSS hover for dropdowns
   with an invisible bridge element so the cursor can travel
   into the panel without it closing. Mobile collapses to a
   hamburger that opens a full-screen slide-in drawer.

   JS files: assets/js/nav.js (hamburger toggle, body-scroll
   lock, mobile accordion sub-menus, scroll shadow class).
   ============================================================ */

/* --------------------------------------------------------
   SITE NAV WRAPPER
   -------------------------------------------------------- */
#site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--transition-fast) ease;
}

#site-nav.scrolled {
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  max-width: var(--max-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* --------------------------------------------------------
   LOGO
   Text fallback with Playfair + utility sub-label.
   Swapped for an <img> by hds_the_logo() when set in
   Site Settings.
   -------------------------------------------------------- */
.nav-logo {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-regular);
  color: var(--plum);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  flex-shrink: 0;
  transition: opacity var(--transition-fast) ease;
}

.nav-logo:hover { opacity: 0.82; color: var(--plum); }

.nav-logo small {
  display: block;
  font-family: var(--font-utility);
  font-size: 9px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-top: 2px;
}

/* When an image logo is used. */
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
}

/* --------------------------------------------------------
   DESKTOP NAV LINKS
   Full-height list items so the entire nav-height is the
   hover target — no gap to accidentally leave.
   -------------------------------------------------------- */
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  height: 100%;
  margin: 0 auto; /* center between logo and nav-right */
}

.nav-links > li {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-links > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline: 16px;
  height: 100%;
  font-family: var(--font-utility);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast) ease,
              border-color var(--transition-fast) ease;
}

.nav-links > li > a:hover,
.nav-links > li.has-drop:hover > a {
  color: var(--charcoal);
  border-bottom-color: var(--sage-dark);
}

/* --------------------------------------------------------
   DROPDOWN CHEVRON
   Separate <span class="chevron"> so the underline on the
   parent <a> and the chevron animate independently.
   -------------------------------------------------------- */
.chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform var(--transition-fast) ease,
              margin-top var(--transition-fast) ease;
}

.has-drop:hover .chevron {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* --------------------------------------------------------
   DROPDOWN PANEL
   Positioned flush to the bottom of the nav. An invisible
   ::before bridge fills the gap between the nav bottom edge
   and the panel top so the cursor can travel into the panel
   diagonally without triggering a mouseleave on the <li>.
   -------------------------------------------------------- */
.drop-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  z-index: var(--z-dropdown);
}

/* The hover bridge — critically, this sits ABOVE the panel top. */
.drop-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.drop-panel-inner {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--sage);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.has-drop:hover .drop-panel {
  display: block;
}

.drop-panel ul { list-style: none; }

.drop-panel a {
  display: block;
  padding: 11px 18px;
  font-family: var(--font-utility);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
  transition: color var(--transition-fast) ease,
              background var(--transition-fast) ease;
}

.drop-panel a:hover {
  color: var(--plum);
  background: var(--plum-lighter);
}

/* --------------------------------------------------------
   RIGHT CLUSTER — phone + Book Now CTA
   -------------------------------------------------------- */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-phone {
  font-family: var(--font-utility);
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--mid);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-cta {
  background: var(--plum);
  color: var(--white);
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-utility);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition) ease,
              transform var(--transition-fast) ease,
              box-shadow var(--transition) ease;
}

.nav-cta:hover {
  background: var(--plum-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-plum);
}

/* --------------------------------------------------------
   HAMBURGER BUTTON — hidden on desktop
   -------------------------------------------------------- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--charcoal);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s var(--ease), opacity 0.25s ease;
}

/* X state — applied via aria-expanded="true" in JS */
.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* --------------------------------------------------------
   MOBILE DRAWER
   Full-screen overlay that slides in from the right.
   Revealed by adding .open (JS). Body scroll locked while
   open via document.body.style.overflow = 'hidden'.
   -------------------------------------------------------- */
#mobile-drawer {
  display: none; /* shown only below 900px breakpoint */
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--cream);
  z-index: var(--z-drawer);
  padding: var(--space-md) 28px 48px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.38s var(--ease);
}

#mobile-drawer.open {
  transform: none;
}

/* Top-level list */
.mob-list { list-style: none; }

.mob-list > li {
  border-bottom: 1px solid var(--rule);
}

.mob-list > li > a,
.mob-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 17px 0;
  font-family: var(--font-utility);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--charcoal);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.mob-list > li > a:hover { color: var(--plum); }

/* Accordion chevron for sub-menus */
.mob-chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--mid);
  border-bottom: 1.5px solid var(--mid);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.mob-acc-btn.open .mob-chevron {
  transform: rotate(-135deg);
}

/* Sub-menu — height-animated via max-height */
.mob-sub {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s var(--ease);
}

.mob-sub.open {
  max-height: 320px;
}

.mob-sub li a {
  display: block;
  padding: 10px 0 10px 16px;
  font-family: var(--font-utility);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mid);
  border-left: 2px solid var(--sage);
  transition: color var(--transition-fast) ease;
}

.mob-sub li a:hover { color: var(--plum); }

/* Contact block at the bottom of the drawer */
.mob-contact {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

.mob-label {
  font-family: var(--font-utility);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: var(--space-xs);
}

.mob-phone {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-regular);
  color: var(--charcoal);
  margin-bottom: var(--space-md);
}

.mob-cta {
  display: block;
  text-align: center;
  background: var(--plum);
  color: var(--white);
  padding: 15px;
  border-radius: var(--radius-sm);
  font-family: var(--font-utility);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--transition) ease;
}

.mob-cta:hover {
  background: var(--plum-dark);
  color: var(--white);
}

/* --------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   -------------------------------------------------------- */

/* Hide phone number at 1100px when space gets tight */
@media (max-width: 1100px) {
  .nav-phone { display: none; }
  .nav-links { gap: 0; }
  .nav-links > li > a { padding-inline: 12px; }
}

/* Collapse to hamburger at 900px */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
  #mobile-drawer { display: block; }
  .nav-inner { padding-inline: var(--space-md); }
}