/* NAVBAR — extracted from index-style.css
   Contains header, hamburger and mobile menu styles
*/

/* Scroll-lock to avoid viewport-height reflow on mobile when menu open */
.no-scroll {
  position: fixed;
  inset: 0;
  overflow: hidden;
  width: 100%;
}

/* When menu open, remove transforms/backdrop filters from header so fixed menu behaves consistently */
.menu-open .nav-wrap {
  transform: none !important;
  will-change: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
}
.nav-wrap.scrolled {
  background: rgba(10,10,10,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.logo em { color: var(--pink); font-style: italic; }
.logo-mark {
  color: var(--pink);
  font-size: 1rem;
  display: inline-block;
  animation: spin-mark 8s linear infinite;
}
@keyframes spin-mark {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.nav-link {
  color: var(--white-60);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 300;
  transition: color .25s;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--pink);
  transition: width .3s var(--ease-out);
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-cta {
  background: var(--pink);
  color: #0A0A0A !important;
  padding: .55rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 500 !important;
  letter-spacing: .1em;
  transition: background .25s, box-shadow .25s !important;
}
.nav-cta:hover { background: #ff85c2 !important; box-shadow: 0 0 25px rgba(255,105,180,.35); }
.nav-cta::after { display: none; }

/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  gap: 5px;
  z-index: 2100;
}
.hamburger span {
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .35s var(--ease-out),
              opacity .25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Make sure the hamburger (close icon) sits above the mobile overlay when open */
.hamburger[aria-expanded="true"] {
  z-index: 3000;
}

/* MOBILE MENU */
.mobile-menu {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10,10,10,0.98);
  backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  gap: 1.6rem;
  padding: 2rem;
  text-align: center;
  z-index: 2000;
  overscroll-behavior: contain;
  touch-action: none;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  font-size: 1.2rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: color .25s ease, transform .25s ease;
}
.mobile-menu a:hover { color: var(--pink); transform: translateY(-2px); }
.mobile-menu .nav-cta { margin-top: 1rem; padding: .8rem 2.5rem; border-radius: var(--radius); }

@media (max-width:768px){
  .hamburger{ display:flex; }
  .mobile-menu { display: flex; }
  :root { --nav-h: 70px; }
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10,10,10,.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform .4s var(--ease-out);
    z-index: 1001;
    padding: calc(var(--nav-h) + 4rem) 2rem 2rem;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-link { font-size: 1.1rem; letter-spacing: .15em; text-align: center; padding: 0.5rem 0; width: 100%; }
  .nav-cta { padding: .8rem 2.5rem; font-size: 1rem; width: 100%; justify-content: center; }
}