/* ============================================
   WOMANITY — Navigation
   Updated: 2026-05-29 18:50
   Two modes: hero-dark (homepage) / hero-light (inner pages)
   ============================================ */

.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px var(--container-padding);display:flex;align-items:center;justify-content:space-between;transition:all 0.6s var(--ease-out);color:var(--white);background:transparent;}
.nav.scrolled{background:rgba(248,245,242,0.88);backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);border-bottom:1px solid rgba(183,110,121,0.1);padding:12px var(--container-padding);box-shadow:0 4px 32px rgba(0,0,0,0.06);color:var(--charcoal)}

/* Logo text */
.nav__logo-text{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:300;letter-spacing:0.08em;color:var(--white);text-decoration:none;transition:all 0.5s var(--ease-out);}
.nav__logo-text:hover{opacity:0.8;}
.nav.scrolled .nav__logo-text{color:var(--charcoal);}
.hero-light .nav .nav__logo-text{color:var(--charcoal);}

/* Light hero (inner pages) */
.hero-light .nav{background:rgba(253,246,240,0.85);color:var(--charcoal);border-bottom:1px solid rgba(0,0,0,0.04)}
.hero-light .nav.scrolled{background:rgba(253,246,240,0.9);backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);border-bottom:1px solid rgba(201,169,110,0.15);padding:12px var(--container-padding);box-shadow:0 4px 32px rgba(0,0,0,0.06)}

/* Links */
.nav__links{display:flex;align-items:center;gap:36px}
.nav__link{font-size:14px;font-weight:400;letter-spacing:0.02em;transition:opacity 0.2s;position:relative;}
.nav__link:hover{opacity:0.7}
.nav__link--active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:currentColor;opacity:0.4}

/* Book Now - rotating glow */
.nav__cta{position:relative;overflow:hidden;border-radius:100px;padding:10px 26px;font-size:13px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--white);background:transparent;z-index:0;transition:all 0.4s var(--ease-out)}
.nav__cta::before{content:'';position:absolute;inset:-1.5px;z-index:-2;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0%,transparent 65%,rgba(255,255,255,0.6) 78%,rgba(255,255,255,0.9) 82%,rgba(255,255,255,0.6) 86%,transparent 95%);animation:glowSpin 3.5s linear infinite}
.nav__cta::after{content:'';position:absolute;inset:1.5px;z-index:-1;border-radius:inherit;background:rgba(255,255,255,0.15);backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%)}
.nav__cta:hover{transform:translateY(-1px)}

/* Scrolled nav CTA - solid */
.nav.scrolled .nav__cta{color:var(--white)}
.nav.scrolled .nav__cta::after{background:var(--charcoal)}
.nav.scrolled .nav__cta::before{display:none}

/* Light hero CTA - solid from start */
.hero-light .nav__cta{color:var(--white)}
.hero-light .nav__cta::after{background:var(--charcoal)}
.hero-light .nav__cta::before{display:none}

/* Hamburger */
.nav__hamburger{display:none;flex-direction:column;justify-content:center;gap:6px;width:32px;height:32px;cursor:pointer;z-index:1001;color:var(--white);}
.nav__hamburger span{display:block;width:24px;height:1.5px;background:currentColor;transition:all 0.4s var(--ease-out);transform-origin:center}
.nav__hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5.5px,5.5px)}
.nav__hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5.5px,-5.5px)}
.nav.scrolled .nav__hamburger{color:var(--charcoal);}
.hero-light .nav__hamburger{color:var(--charcoal);}

/* Mobile overlay */
.nav__overlay{position:fixed;inset:0;background:var(--charcoal);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;visibility:hidden;transition:opacity 0.4s,visibility 0.4s}
.nav__overlay.active{opacity:1;visibility:visible}
.nav__overlay a{font-family:var(--font-display);font-size:36px;font-weight:300;color:var(--white);text-decoration:none;transition:opacity 0.2s}
.nav__overlay a:hover{opacity:0.7}
.nav__overlay .nav__overlay-cta{margin-top:16px;background:var(--white);color:var(--charcoal);padding:14px 36px;border-radius:100px;font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase}

/* Responsive */
@media(max-width:768px){
  .nav{padding:16px var(--container-padding-mobile)}
  .nav__links{display:none}
  .nav__hamburger{display:flex}
  .nav.scrolled{padding:10px var(--container-padding-mobile)}
}