/* menu.css */

/* 

.nav-toggle-bar:nth-child(1){ transform: translateY(-7px); }
.nav-toggle-bar:nth-child(2){ transform: translateY(0); }
.nav-toggle-bar:nth-child(3){ transform: translateY(7px); } */

/* IMPORTANT: header uses .glass-panel (overflow:hidden) — override so dropdown can show */
.site-header{
  overflow: visible;
}

/* hamburger button */
.nav-toggle{
  display:none;                 /* stays hidden until mobile media query turns it on */
  width:44px;
  height:44px;
  border:none;
  border-radius:999px;
  background: rgba(255,255,255,0.8);
  cursor:pointer;
  box-shadow: var(--shadow-subtle);
  -webkit-tap-highlight-color: transparent;

  /* center the 3 bars */
  display: grid;
  place-items: center;
}

.nav-toggle-bar{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background: var(--color-text-main);
  transition: transform 180ms ease, opacity 160ms ease;
}

/* spacing between bars */
.nav-toggle-bar + .nav-toggle-bar{
  margin-top: 5px;
}

/* turn into X when open */
.site-header.nav-open .nav-toggle-bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle-bar:nth-child(2){
  opacity:0;
}
.site-header.nav-open .nav-toggle-bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* FIX: keep hamburger/X fully inside the circle */
.nav-toggle{
  overflow: hidden;                 /* prevents bars from being clipped outside */
}

.nav-toggle-bar{
  left: 14px;                       /* was 12px */
  right: 14px;                      /* was 12px */
}

.nav-toggle-bar:nth-child(1){ transform: translateY(-6px); }  /* was -7px */
.nav-toggle-bar:nth-child(3){ transform: translateY(6px); }   /* was 7px */

  @media (max-width: 800px) {
.nav-toggle{ display: grid; }

  }
/* desktop default */
.nav-toggle{ display:none; }

/* show hamburger + use dropdown mode at the SAME breakpoint */
@media (max-width: 960px){
  .nav-toggle{ display:inline-flex; }

  /* hide desktop layout so it doesn't overflow */
  .nav-cta-group .btn-ghost{ display:none; }
}

/* only re-enable the nav at the SMALLER breakpoint where dropdown CSS exists */
@media (max-width: 768px){
  .site-nav{ display:block; }  /* needed so .nav-list can render as the dropdown */
}

.nav-toggle{
  width:44px;
  height:44px;
  padding:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.nav-toggle-icon{
  width:20px;
  height:20px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill:none;
}

.nav-icon--close{ opacity:0; }
.site-header.nav-open .nav-icon--menu{ opacity:0; }
.site-header.nav-open .nav-icon--close{ opacity:1; }