/* ==========================================================================
   BamPro shared header nav — mobile burger menu
   Loaded on every page. Uses CSS variables defined inline in each page.
   ========================================================================== */

.nav-toggle{
  display:none;background:none;border:none;margin:0;padding:8px;
  width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;color:var(--ink);flex-shrink:0;
  transition:color .18s ease;
}
.nav-toggle:hover{color:var(--forest)}
.nav-toggle span{
  display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu-backdrop{
  position:fixed;inset:0;background:rgba(30,61,40,.45);z-index:99;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mobile-menu-backdrop.is-open{opacity:1;pointer-events:auto}

.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);
  background:var(--white);z-index:100;
  padding:72px 32px 32px;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;box-shadow:-8px 0 32px rgba(0,0,0,.12);
  display:flex;flex-direction:column;
}
.mobile-menu.is-open{transform:translateX(0)}

.menu-close{
  position:absolute;top:18px;right:22px;background:none;border:none;
  font-size:28px;font-weight:300;color:var(--ink);cursor:pointer;padding:8px;
  line-height:1;transition:color .18s ease;
}
.menu-close:hover{color:var(--forest)}

.mobile-menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.mobile-menu li a{
  display:block;padding:16px 0;font-size:16px;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--hair);
  letter-spacing:.005em;transition:color .18s ease,padding-left .18s ease;
}
.mobile-menu li a:hover{color:var(--forest);padding-left:6px}
.mobile-menu li a.is-current{color:var(--forest);font-weight:600}
.mobile-menu .actions{
  margin-top:auto;padding-top:28px;
  display:flex;flex-direction:column;gap:12px;
}
.mobile-menu .btn{width:100%;justify-content:center;padding:14px 22px}

@media (max-width:980px){
  .nav-toggle{display:flex}
  .nav{display:none}
  /* Burger menu carries the CTAs on mobile — hide the header-desktop CTA block */
  .header .cta{display:none}
  /* Compact header padding on mobile — reclaims ~20px of top-of-screen */
  .header .wrap{padding-top:14px !important;padding-bottom:14px !important;gap:12px}
}
@media (max-width:620px){
  .header .wrap{padding-top:12px !important;padding-bottom:12px !important}
  .lockup img{height:36px !important}
}
body.menu-open{overflow:hidden}