/* === HEADER & NAVIGATION STYLES === */

/* Navigation Base */
.main-nav { 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  padding:10px 30px; 
  z-index:1000; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  backdrop-filter: blur(8px); 
  background:rgba(12,11,11,.55); 
  border-bottom:1px solid rgba(255,255,255,.07); 
  transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease, border-color .4s ease; 
}

.main-nav.scrolled { 
  background:rgba(10,10,10,.75); 
  backdrop-filter:blur(10px) saturate(160%); 
  border-bottom:1px solid rgba(255,255,255,.1); 
}

.main-nav.condensed { 
  padding:4px 26px; 
}

/* Navigation Wrapper */
.main-nav .nav-wrapper { 
  flex:1; 
  display:flex; 
  justify-content:center; 
}

.main-nav .nav-wrapper ul { 
  margin:0 auto; 
  padding:0; 
  display:flex; 
  gap:4px; 
}

.main-nav .nav-wrapper ul li { 
  background:transparent; 
  border:none; 
}

.main-nav .nav-wrapper ul li a { 
  color: var(--text-light); 
  font-weight:500; 
  font-size:.85rem; 
  letter-spacing:.12em; 
  position:relative; 
  padding:.75rem .9rem; 
  opacity:.85; 
  transition:var(--transition); 
  text-decoration:none;
}

.main-nav .nav-wrapper ul li a:after { 
  content:""; 
  position:absolute; 
  left:50%; 
  bottom:6px; 
  width:0; 
  height:2px; 
  background:var(--gold); 
  transform:translateX(-50%); 
  transition:var(--transition); 
}

.main-nav .nav-wrapper ul li a:hover, 
.main-nav .nav-wrapper ul li a:focus { 
  opacity:1; 
  color:#fff; 
}

.main-nav .nav-wrapper ul li a:hover:after, 
.main-nav .nav-wrapper ul li a:focus:after { 
  width:60%; 
}

.main-nav a.active { 
  color:#fff; 
}

.main-nav a.active:after { 
  width:60%; 
}

/* Hamburger Button */
.nav-btn { 
  cursor:pointer; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  width:50px; 
  height:50px; 
  touch-action:manipulation; 
  -webkit-tap-highlight-color: transparent; 
  position:fixed; 
  top:14px; 
  right:14px; 
  background:rgba(255,255,255,.06); 
  border:1px solid rgba(255,255,255,.15); 
  border-radius:14px; 
  backdrop-filter:blur(6px); 
  -webkit-backdrop-filter:blur(6px); 
  box-shadow:0 4px 12px -4px rgba(0,0,0,.5); 
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease; 
  z-index:10001;
}

.nav-btn:hover, 
.nav-btn:focus { 
  background:rgba(255,255,255,.1); 
  border-color:rgba(255,255,255,.3); 
}

.nav-btn .nav-icon { 
  pointer-events:none; 
}

/* Hamburger Icon Animation */
.nav-icon { 
  position:relative; 
  width:26px; 
  height:20px; 
  display:inline-block; 
}

.nav-icon span { 
  position:absolute; 
  left:0; 
  width:100%; 
  height:3px; 
  background:var(--gold); 
  border-radius:3px; 
  transform-origin: center; 
  transition: transform .5s cubic-bezier(.68,-0.55,.27,1.55), top .35s ease, opacity .3s ease, background .35s ease; 
}

.nav-icon span:nth-child(1){ 
  top:0; 
}

.nav-icon span:nth-child(2){ 
  top:8.5px; 
}

.nav-icon span:nth-child(3){ 
  top:17px; 
}

#nav:checked + .nav-btn .nav-icon span:nth-child(1){ 
  top:8.5px; 
  transform:rotate(45deg); 
}

#nav:checked + .nav-btn .nav-icon span:nth-child(2){ 
  opacity:0; 
}

#nav:checked + .nav-btn .nav-icon span:nth-child(3){ 
  top:8.5px; 
  transform:rotate(-45deg); 
}

/* Hidden Checkbox */
.hidden { 
  position:absolute !important; 
  width:1px; 
  height:1px; 
  padding:0; 
  margin:-1px; 
  border:0; 
  overflow:hidden; 
  clip:rect(0 0 0 0); 
  clip-path:inset(50%); 
  white-space:nowrap; 
}

/* === MOBILE NAVIGATION === */
@media (max-width: 864px){
  .main-nav { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    z-index:10000; 
  }

  .nav-wrapper { 
    position:fixed; 
    inset:0; 
    width:100%; 
    height:90vh; 
    max-height:90vh; 
    overflow-y:auto; 
    -webkit-overflow-scrolling:touch; 
    z-index:-1; 
    opacity:0; 
    pointer-events:none; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    padding:0 30px; 
    background:rgba(10,9,9,0.92); 
    backdrop-filter:blur(19px) saturate(100%); 
    -webkit-backdrop-filter:blur(19px) saturate(120%); 
    transition:opacity .35s ease, z-index 0s linear .35s; 
  }

  #nav:checked ~ .nav-wrapper { 
    opacity:1; 
    z-index:9999; 
    pointer-events:auto; 
    transition:opacity .35s ease; 
    display:flex !important; 
  }

  .nav-wrapper ul { 
    position:static; 
    transform:none; 
    width:100%; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center; 
    gap:34px; 
    margin:0; 
    padding:0; 
  }

  .nav-wrapper ul li { 
    width:auto; 
    margin:0; 
    text-align:center; 
  }

  .nav-wrapper ul li a { 
    font-size:1.8rem; 
    font-weight:700; 
    letter-spacing:.22em; 
    text-align:center; 
    padding:.9rem 1.4rem; 
    opacity:0; 
    transform:translateY(14px); 
    color:#fff;
  }



  #nav:checked ~ .nav-wrapper ul li a { 
    opacity:1; 
    transform:translateY(0) scale(1); 
    transition:all .45s ease; 
  }

  #nav:checked ~ .nav-wrapper ul li:nth-child(1) a { 
    transition-delay:.05s; 
  }

  #nav:checked ~ .nav-wrapper ul li:nth-child(2) a { 
    transition-delay:.1s; 
  }

  #nav:checked ~ .nav-wrapper ul li:nth-child(3) a { 
    transition-delay:.15s; 
  }

  #nav:checked ~ .nav-wrapper ul li:nth-child(4) a { 
    transition-delay:.2s; 
  }

  /* Page Blur Effect When Menu Open */
  body.menu-open main,
  body.menu-open .hero,
  body.menu-open .page-intro,
  body.menu-open footer { 
    filter:blur(6px) brightness(.8); 
    transition:filter .35s ease; 
  }

  /* Light theme override for wines page */
  .wines-page #nav:checked ~ .nav-wrapper {
    background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(248,246,242,0.88)) !important;
  }

  .wines-page #nav:checked ~ .nav-wrapper ul li a {
    color:#2e2724 !important;
  }

  /* Ensure nav wrapper displays as flex when menu is open */
  #nav:checked ~ .nav-wrapper {
    display:flex !important;
  }

  body.menu-open { 
    overflow:hidden; 
  }

  /* Translucent overlay with blur */

  body.menu-open main,
  body.menu-open .hero,
  body.menu-open .page-intro,
  body.menu-open footer { 
    filter: blur(8px); 
  }

  /* Keep hero logo visible */
  .hero-logo { 
    position:relative; 
    z-index:10001; 
    pointer-events:none; 
  }

  /* Override earlier rule that set z-index:-1 */
  .nav-wrapper { 
    opacity:0; 
    pointer-events:none; 
    z-index:9999; 
  }

  #nav:checked ~ .nav-wrapper { 
    opacity:1; 
    pointer-events:auto; 
  }

  body.menu-open .nav-wrapper { 
    opacity:1; 
    pointer-events:auto; 
  }
}

/* === DESKTOP NAVIGATION === */
@media (min-width:865px){
  /* Hide mobile toggle */
  #nav, 
  .nav-btn { 
    display:none !important; 
  }

  body.menu-open { 
    overflow:auto; 
  }

  /* Reset nav wrapper to normal flow */
  .main-nav { 
    position:sticky; 
    top:0; 
    left:0; 
    right:0; 
    justify-content:center !important; 
  }

  .main-nav .nav-wrapper {
    position:relative;
    inset:auto;
    width:auto;
    height:auto;
    opacity:1 !important;
    z-index:1;
    pointer-events:auto;
    backdrop-filter:none;
    background:transparent !important;
    padding:0;
    display:flex;
    justify-content:center;
    margin:0 auto;
  }

  .main-nav .nav-wrapper ul { 
    flex-direction:row; 
    align-items:center; 
    justify-content:center !important; 
    gap:60px !important; 
  }

  .main-nav .nav-wrapper ul li { 
    display:block; 
  }

  .main-nav .nav-wrapper ul li a { 
    opacity:0.9 !important; 
    transform:none !important; 
    font-size:.8rem; 
    letter-spacing:.18em; 
    padding:1.1rem .4rem .9rem; 
  }

  .main-nav .nav-wrapper ul li a:hover { 
    opacity:1; 
  }

  /* Remove page blur effect if any leftover class present */
  body.menu-open main, 
  body.menu-open .hero, 
  body.menu-open .page-intro, 
  body.menu-open footer { 
    filter:none !important; 
  }
}

@media (max-width:680px){
  .main-nav { 
    padding:8px 16px; 
  }

  .nav-btn { 
    top:10px; 
    right:10px; 
    width:46px; 
    height:46px; 
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-icon span,
  .nav-wrapper,
  .nav-wrapper ul li a { 
    transition:none!important; 
  }
}