/* ============================================================
TOASTBIKES SHARED SITE NAV — tb-nav.css
One burger menu for every page. Markup is injected by
/tb-nav.js into ; each page only includes:
(in )
(before )
Self-contained: own colour tokens (no dependency on page vars),
every rule scoped under #tbSiteNav.
============================================================ */
#tbSiteNav{
/* fixed top-right, identical on every page + viewport */
position:fixed;top:14px;right:14px;z-index:2147483000;
/* own tokens so WordPress-exported pages need no :root vars */
--tbn-paper:#F5F0E4;--tbn-panel:#EDE6D3;--tbn-ink:#1A1713;--tbn-red:#D22C26;
font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
line-height:1.2;text-align:left;
}
#tbSiteNav *,#tbSiteNav *::before,#tbSiteNav *::after{box-sizing:border-box;}
/* ---- the burger button: 44x44 chip, three bars -> X ---- */
#tbSiteNav .tbn-btn{
width:44px;height:44px;margin:0;padding:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
background:var(--tbn-paper);color:var(--tbn-ink);
border:2px solid var(--tbn-ink);border-radius:0;
box-shadow:3px 3px 0 var(--tbn-ink);
cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none;
}
#tbSiteNav .tbn-btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tbn-ink);}
#tbSiteNav.open .tbn-btn{box-shadow:3px 3px 0 var(--tbn-red);}
#tbSiteNav .tbn-bar{
display:block;width:22px;height:3px;background:currentColor;border-radius:0;
transition:transform .18s ease-out,opacity .18s ease-out;
}
/* bar height 3px + 5px gap => bar centres 8px apart */
#tbSiteNav.open .tbn-bar1{transform:translateY(8px) rotate(45deg);}
#tbSiteNav.open .tbn-bar2{opacity:0;}
#tbSiteNav.open .tbn-bar3{transform:translateY(-8px) rotate(-45deg);}
/* ---- dropdown panel ---- */
#tbSiteNav .tbn-panel{
position:absolute;top:calc(100% + 10px);right:0;width:240px;
background:var(--tbn-paper);border:2px solid var(--tbn-ink);
box-shadow:5px 5px 0 var(--tbn-ink);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s ease-out,transform .16s ease-out,visibility .16s;
}
#tbSiteNav.open .tbn-panel{opacity:1;visibility:visible;transform:translateY(0);}
/* header row (CLOSE lives here; hidden on desktop) */
#tbSiteNav .tbn-head{
display:none;align-items:center;justify-content:space-between;gap:8px;
padding:10px 14px;border-bottom:2px solid var(--tbn-ink);
}
#tbSiteNav .tbn-title{
font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tbn-ink);
}
#tbSiteNav .tbn-close{
margin:0;background:var(--tbn-ink);color:var(--tbn-paper);
border:2px solid var(--tbn-ink);border-radius:0;
font-family:inherit;font-weight:700;font-size:11px;letter-spacing:.06em;
padding:5px 9px;cursor:pointer;-webkit-appearance:none;appearance:none;
}
/* links */
#tbSiteNav .tbn-link{
display:block;padding:12px 14px;
color:var(--tbn-ink);background:transparent;text-decoration:none;
font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
border-bottom:2px solid rgba(26,23,19,.14);
}
#tbSiteNav .tbn-link:last-child{border-bottom:0;}
#tbSiteNav .tbn-link:hover,
#tbSiteNav .tbn-link:focus-visible{
color:var(--tbn-red);background:var(--tbn-panel);text-decoration:none;
}
#tbSiteNav .tbn-link[aria-current="page"]{
color:var(--tbn-red);box-shadow:inset 4px 0 0 var(--tbn-red);
}
/* ---- mobile <=520px: full-width top sheet + visible CLOSE ---- */
@media (max-width:520px){
#tbSiteNav .tbn-panel{
position:fixed;top:0;left:0;right:0;width:auto;
border:0;border-bottom:3px solid var(--tbn-ink);
box-shadow:0 5px 0 rgba(26,23,19,.25);
padding-top:env(safe-area-inset-top,0px);
opacity:1;transform:translateY(-103%);
transition:transform .22s ease-out,visibility .22s;
}
#tbSiteNav.open .tbn-panel{transform:translateY(0);}
#tbSiteNav .tbn-head{display:flex;}
#tbSiteNav .tbn-link{padding:13px 16px;}
}
@media (prefers-reduced-motion:reduce){
#tbSiteNav .tbn-bar,#tbSiteNav .tbn-panel{transition:none;}
}
/* ============================================================
THE BAR — horizontal quick-nav injected by tb-nav.js as