/* ── Shared responsive nav hamburger ────────────────────────────────────────
   ONE mechanism for both nav systems: the setup/manage nav (.hv2-nav, System A)
   and the signed-in account chrome (.topbar, System B — My Sessions / Trash /
   Account). Driven by public/js/nav-menu.js against a class/data contract:
     [data-nav]        the nav root      (anchors the panel; JS scope)
     [data-nav-toggle] the burger button (.nav-burger)
     [data-nav-menu]   the items cluster (.nav-collapse — .hv2-nav-items / .user)
     .nav-open         toggled on the root by the JS

   Desktop (>768px): the burger is display:none and the items render inline
   exactly as before — every rule that changes the item cluster lives INSIDE the
   max-width:768px query, so the desktop nav is untouched. Mobile (<=768px): the
   items collapse behind the burger into a panel anchored under the nav.

   This replaces the per-page mobile stacking rules (the System B
   .topbar/.user flex-direction:column blocks) — those are removed at source,
   not left beside this. */

.nav-burger{
  display:none;                 /* desktop: no burger */
  flex:0 0 auto;
  box-sizing:border-box;
  width:40px;height:40px;
  margin-left:auto;             /* seat the burger at the right edge when shown */
  padding:9px;
  align-items:center;justify-content:center;
  background:none;border:0;
  color:var(--ink,#1A1208);
  cursor:pointer;
}
/* Three-bar glyph → animates to an X in the open state. */
.nav-burger-bars,
.nav-burger-bars::before,
.nav-burger-bars::after{
  content:'';
  display:block;
  width:22px;height:2px;
  background:currentColor;
  transition:transform .2s ease,opacity .2s ease,background .2s ease;
}
.nav-burger-bars{position:relative;}
.nav-burger-bars::before{position:absolute;left:0;top:-7px;}
.nav-burger-bars::after{position:absolute;left:0;top:7px;}
.nav-open .nav-burger-bars{background:transparent;}
.nav-open .nav-burger-bars::before{transform:translateY(7px) rotate(45deg);}
.nav-open .nav-burger-bars::after{transform:translateY(-7px) rotate(-45deg);}

@media(max-width:768px){
  [data-nav]{position:relative;}          /* containing block for the panel */

  .nav-burger{display:inline-flex;}

  /* Collapsed by default; opened into an anchored panel by .nav-open. The
     panel is a self-contained box (its own bg/border/shadow) so it works
     identically on System B pages, which do not load templates.css.
     Scoped under [data-nav] so the display/panel rules carry (0,2,0) and beat
     the item cluster's own base rule (.user / .hv2-nav-items, 0,1,0) even
     though those are authored in an inline <style> AFTER this linked file. */
  [data-nav] .nav-collapse{
    display:none;
    position:absolute;top:100%;right:0;
    box-sizing:border-box;
    min-width:210px;max-width:calc(100vw - 24px);
    margin:0;
    flex-direction:column;align-items:stretch;
    gap:0;
    background:var(--cream,#E2DCD0);
    border:1px solid var(--border,rgba(26,22,18,0.12));
    box-shadow:0 8px 24px rgba(26,18,8,0.12);
    padding:6px 0;
    z-index:200;
    text-align:left;
  }
  [data-nav].nav-open .nav-collapse{display:flex;}

  /* Every leaf item becomes a full-width, left-aligned, comfortably tappable
     row regardless of which system authored it (links, the email span, the
     sign-out form/button, and the setup page's guest sign-in cluster). */
  .nav-collapse > a,
  .nav-collapse > span,
  .nav-collapse > button,
  .nav-collapse > form,
  .nav-collapse > .tpl-ws-auth-individual{
    width:100%;
    text-align:left;
  }
  .nav-collapse a,
  .nav-collapse button,
  .nav-collapse .user-email,
  .nav-collapse .hv2-nav-fac-value{
    display:block;
    width:100%;
    padding:10px 18px;
    text-align:left;
  }
  /* Guest sign-in buttons on the setup page keep their coloured chip look but
     sit as a stacked pair inside the panel row. */
  .nav-collapse .tpl-ws-auth-individual{padding:8px 18px;}
  .nav-collapse .tpl-facilitator-signin__btns{flex-direction:column;align-items:stretch;gap:8px;width:100%;}
  .nav-collapse .tpl-facilitator-signin__btn{width:100%;padding:10px 12px;text-align:center;}
}