/* =========================================================================
   COEXIST COFFEE CO. — MOBILE NAV
   -------------------------------------------------------------------------
   Each page's own inline <style> already owns showing/hiding .menu-toggle
   (display:none by default, display:block under 900px) and its color
   (paper/ink depending on header scroll state) — this file intentionally
   never sets `display` or `color` on .menu-toggle so it doesn't fight that
   per-page cascade. It only adds the hamburger icon's bars and the slide-
   out panel itself.
   ========================================================================= */

.menu-toggle{
  position:relative;
  width:34px;height:34px;
  margin-right:6px;
  background:none;border:none;
}
.menu-toggle .bar{
  position:absolute;left:7px;right:7px;height:2px;background:currentColor;border-radius:1px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, top .3s cubic-bezier(.16,1,.3,1);
}
.menu-toggle .bar:nth-child(1){top:12px;}
.menu-toggle .bar:nth-child(2){top:17px;}
.menu-toggle .bar:nth-child(3){top:22px;}
.menu-toggle.active .bar:nth-child(1){top:17px;transform:rotate(45deg);}
.menu-toggle.active .bar:nth-child(2){opacity:0;}
.menu-toggle.active .bar:nth-child(3){top:17px;transform:rotate(-45deg);}

/* ---------------- overlay + panel ---------------- */
.mobile-nav-overlay{
  position:fixed;inset:0;background:rgba(14,14,13,.5);
  opacity:0;visibility:hidden;transition:opacity .35s ease, visibility .35s ease;
  z-index:1900;
}
.mobile-nav-overlay.open{opacity:1;visibility:visible;}

.mobile-nav-panel{
  position:fixed;top:0;right:0;bottom:0;
  width:min(360px, 86vw);
  background:#0e0e0d;color:#faf9f6;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  z-index:1901;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h, 76px) + 20px) 32px 32px;
  overflow-y:auto;
  box-shadow:-8px 0 32px rgba(0,0,0,.25);
}
.mobile-nav-panel.open{transform:translateX(0);}

.mobile-nav-links{display:flex;flex-direction:column;}
.mobile-nav-links a{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:-0.01em;
  padding:13px 0;border-bottom:1px solid rgba(250,249,246,.12);
  color:#faf9f6;opacity:.82;
  transition:opacity .2s ease;
}
.mobile-nav-links a:first-child{padding-top:0;}
.mobile-nav-links a.active,.mobile-nav-links a:hover{opacity:1;}

.mobile-nav-foot{margin-top:36px;display:flex;flex-direction:column;gap:22px;flex-shrink:0;}
.mobile-nav-foot .btn{
  width:100%;justify-content:center;
  border-color:#faf9f6;color:#faf9f6;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 26px;border-radius:100px;border-width:1.5px;border-style:solid;
  transition:background .25s ease,color .25s ease;
  display:inline-flex;align-items:center;gap:8px;
}
.mobile-nav-foot .btn:hover{background:#faf9f6;color:#0e0e0d;}
.mobile-nav-socials{display:flex;gap:18px;}
.mobile-nav-socials a{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#a8a59e;}
.mobile-nav-socials a:hover{color:#faf9f6;}

body.mobile-nav-open{overflow:hidden;}

@media(min-width:901px){
  .mobile-nav-panel, .mobile-nav-overlay{display:none;}
}

/* the header's Contact pill is redundant once the mobile panel has its own
   Contact button below the nav links — hiding it here is what keeps the
   logo + cart + hamburger cluster from overflowing the fixed header height
   on narrow screens. */
@media(max-width:900px){
  .nav-right > a{display:none;}
}