/* ==========================================================================
   Pho Bowl - shared mobile hamburger navigation
   Loaded on: /, /gallery/, /blog/, /events/  (the /order/ page has no menu)
   Reveals the .nav-links row as an accessible slide-down panel <=820px.
   Uses var() fallbacks so it works on every page's palette.
   ========================================================================== */

/* keep the bar on one line; toggle + logo never shrink */
.bar .logo{flex:0 0 auto}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-cta{display:inline-flex;align-items:center}
.nav-cta .btn{padding:11px 20px;font-size:14px}

/* hamburger button - hidden on desktop, shown on mobile */
.nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;padding:0;margin:0;
  border:1px solid var(--line,#DED7C4);border-radius:12px;
  background:transparent;color:var(--ink,#14203D);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,border-color .18s ease;
}
.nav-toggle:hover{border-color:var(--broth,#0A1F44);background:rgba(10,31,68,.05)}
.nav-toggle .bars{position:relative;display:block;width:20px;height:14px}
.nav-toggle .bars span{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s var(--ease-lux,cubic-bezier(.2,.8,.2,1)),opacity .18s ease;
}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:6px}
.nav-toggle .bars span:nth-child(3){top:12px}
.bar.nav-open .nav-toggle .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bar.nav-open .nav-toggle .bars span:nth-child(2){opacity:0}
.bar.nav-open .nav-toggle .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.nav-toggle .bars span{transition:none}}

@media(max-width:820px){
  .nav-toggle{display:inline-flex}

  /* the link row becomes a full-width dropdown panel under the sticky bar */
  .nav-links{
    display:flex !important;                 /* override the page's max-820 display:none */
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    padding:6px 0 calc(6px + env(safe-area-inset-bottom));
    background:rgba(250,246,236,.985);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line,#DED7C4);
    box-shadow:0 24px 48px -22px rgba(10,31,68,.55);
    max-height:calc(100vh - var(--nav-h,61px));overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
    transition:opacity .26s var(--ease-lux,cubic-bezier(.2,.8,.2,1)),
               transform .26s var(--ease-lux,cubic-bezier(.2,.8,.2,1)),
               visibility 0s linear .26s;
  }
  .bar.nav-open .nav-links{
    opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .26s var(--ease-lux,cubic-bezier(.2,.8,.2,1)),
               transform .26s var(--ease-lux,cubic-bezier(.2,.8,.2,1)),
               visibility 0s linear 0s;
  }

  .nav-links a{
    display:flex;align-items:center;width:100%;min-height:48px;
    padding:12px 24px;
    font-size:16px;font-weight:600;line-height:1.25;
    color:var(--ink,#14203D);white-space:normal;
    border-bottom:1px solid rgba(222,215,196,.55);
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-links a::after{display:none !important}         /* remove desktop underline anim */
  .nav-links a:hover,.nav-links a:focus-visible{
    background:var(--paper-2,#EFE9DA);color:var(--chili-deep,#8E1B2A);text-decoration:none;
  }
  .nav-links a.here,.nav-links a.active{
    color:var(--chili-deep,#8E1B2A);
    box-shadow:inset 3px 0 0 var(--chili,#B22234);
  }
}

/* keep everything on one line on small phones */
@media(max-width:400px){
  .nav-cta .btn{padding:9px 15px;font-size:13px}
}
@media(max-width:344px){
  .nav-right{gap:9px}
  .nav-toggle{width:40px;height:40px}
  .nav-cta .btn{padding:8px 12px;font-size:12.5px}
}

/* ---- shared footer "find & follow" strip: Pho Bowl logo + named company pills ---- */
.social-strip{margin:6px auto 22px;max-width:700px;text-align:center}
.social-strip .ss-logo{height:60px;width:auto;max-width:230px;object-fit:contain;display:block;margin:0 auto 14px}
.social-strip .ss-h{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft,#E4C77E);margin-bottom:14px}
.social-strip .ss-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.social-strip a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(250,246,236,.06);border:1px solid rgba(250,246,236,.16);color:var(--paper,#FAF6EC);transition:transform .18s ease,background .18s ease}
.social-strip a:hover{transform:translateY(-2px);background:rgba(250,246,236,.13);text-decoration:none;border-color:rgba(250,246,236,.3)}
.social-strip a span{font-size:12.5px;font-weight:600;white-space:nowrap}
.social-strip svg{width:20px;height:20px;display:block;flex-shrink:0}
@media(max-width:520px){.social-strip a{padding:7px 12px 7px 9px;gap:6px}.social-strip a span{font-size:12px}}