/* ============================================================
   NAV.CSS — Navigation, Hamburger, Mobile Menu
   ============================================================ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 72px;
  background: linear-gradient(to bottom, rgba(8,8,8,.97), transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  transition: all .4s;
}
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem; font-weight: 600;
  color: var(--gold); letter-spacing: .08em;
  cursor: pointer; flex-shrink: 0; text-decoration: none;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: .68rem; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
  text-decoration: none; transition: color .3s;
  cursor: pointer; white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-book {
  background: var(--gold); color: var(--black);
  border: none; padding: 9px 22px; border-radius: 2px;
  font-family: 'Outfit', sans-serif; font-size: .68rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: all .3s;
  white-space: nowrap; flex-shrink: 0;
  text-decoration: none; display: inline-block;
}
.nav-book:hover { background: var(--gold-light); transform: translateY(-1px); }

/* Currency toggle — used in mobile menu only */
.currency-toggle {
  display: flex; gap: 2px; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 20px; padding: 4px;
}
.currency-toggle button {
  background: none; border: none; color: var(--text-dim);
  padding: 4px 10px; border-radius: 16px; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-size: .72rem;
  transition: all .3s; letter-spacing: .05em;
}
.currency-toggle button.active {
  background: var(--gold); color: var(--black); font-weight: 600;
}

/* ── Hamburger — Rolls-Royce 2-line style ── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  cursor: pointer; padding: 8px; z-index: 200;
  width: 44px; height: 44px; position: relative;
}
.nav-hamburger .hb-line {
  display: block; height: 1px; background: var(--gold);
  position: absolute; left: 8px;
  transition:
    width  .5s cubic-bezier(.77,0,.175,1),
    transform .5s cubic-bezier(.77,0,.175,1),
    top    .5s cubic-bezier(.77,0,.175,1);
}
.hb-top    { width: 28px; top: 16px; }
.hb-bottom { width: 18px; top: 24px; }
/* Hover: short line extends */
.nav-hamburger:hover .hb-bottom { width: 28px; transition-duration: .35s; }
/* Open: X morph */
.nav-hamburger.open .hb-top    { width: 24px; top: 20px; transform: rotate(45deg); }
.nav-hamburger.open .hb-bottom { width: 24px; top: 20px; transform: rotate(-45deg); }

/* ── Mobile Overlay Menu ── */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 150;
  background: rgba(8,8,8,.98); backdrop-filter: blur(24px);
  flex-direction: column; align-items: flex-start; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .5s cubic-bezier(.77,0,.175,1);
  padding: 0 10vw;
}
.mobile-menu.open { opacity: 1; pointer-events: all; display: flex; }
/* Gold accent line */
.mobile-menu::before {
  content: ''; position: absolute; left: 8vw; top: 15%; bottom: 15%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .6s .2s;
}
.mobile-menu.open::before { opacity: .4; }

.mobile-menu a {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem,6vw,3rem); font-weight: 500; color: var(--text-dim);
  text-decoration: none; padding: 12px 0; letter-spacing: .04em;
  transition: color .3s, transform .5s cubic-bezier(.77,0,.175,1), opacity .5s;
  cursor: pointer; display: block; width: 100%;
  border-bottom: 1px solid var(--glass-border);
  transform: translateY(20px); opacity: 0;
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a:hover { color: var(--gold); }

/* Staggered slide-in */
.mobile-menu.open a { transform: translateY(0); opacity: 1; }
.mobile-menu.open a:nth-child(1) { transition-delay: .05s; }
.mobile-menu.open a:nth-child(2) { transition-delay: .10s; }
.mobile-menu.open a:nth-child(3) { transition-delay: .15s; }
.mobile-menu.open a:nth-child(4) { transition-delay: .20s; }
.mobile-menu.open a:nth-child(5) { transition-delay: .25s; }
.mobile-menu.open a:nth-child(6) { transition-delay: .30s; }

.mobile-menu-footer {
  position: absolute; bottom: 48px; left: 10vw;
  display: flex; gap: 12px; align-items: center;
}
.menu-currency-label {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint); margin-right: 8px;
}