/* ============================================================
   THE LONG GAME — site chrome
   The masthead, the phone menu toggle and the footer, in one place.
   Every page loads this, including the home page (which has its own
   inline shell and doesn't load style.css). Colours fall back to the
   v3 values so it reads the same against either set of tokens.

   Nav order everywhere: Framework · Guides · Sports · Printables.
   The current page gets aria-current; nothing else is styled special.
   ============================================================ */

/* ============================================================ MASTHEAD */
.mast{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  background:var(--teal,#13A8A0);
  border-bottom:1px solid var(--ink,#19292B);
  padding-block:0;
  position:sticky;top:0;z-index:60;
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(max(50vw - 590px, 0px) + clamp(1rem,4vw,3rem));
  font-family:'Public Sans',system-ui,sans-serif;line-height:1.62;
}
.wordmark{
  text-decoration:none;
  background:var(--ink,#19292B);
  padding:4px 13px;
  border-right:1px solid var(--ink,#19292B);
  display:flex;align-items:center;
}
.wordmark .lgmark{display:block;height:34px;width:auto}
.wordmark:hover{background:var(--ink,#19292B)}
.wordmark:hover .lgmark g text:last-child{fill:var(--gold,#FFC24A)}
.mast nav{margin-left:auto;display:flex;gap:0;font-size:.95rem;font-weight:500}
.mast nav a{
  text-decoration:none;border-bottom:0;
  background:var(--paper,#F6F3EA);color:var(--ink,#19292B);
  padding:.65rem .85rem;
  border-left:1px solid var(--ink,#19292B);
  display:flex;align-items:center;white-space:nowrap;
}
.mast nav a:hover{background:var(--ink,#19292B);color:var(--paper,#F6F3EA)}
.mast nav a[aria-current]{background:var(--ink,#19292B);color:var(--gold,#FFC24A)}

/* ============================================================ MENU TOGGLE
   Injected by nav.js. Hidden above 720px, where the tabs show normally. */
.navtoggle{
  display:none;align-items:center;gap:.5rem;
  background:var(--paper,#F6F3EA);color:var(--ink,#19292B);
  border:0;border-left:1px solid var(--ink,#19292B);
  padding:0 .95rem;min-height:44px;cursor:pointer;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.7rem;letter-spacing:.14em;
}
.navtoggle__bars{
  width:16px;height:2px;background:currentColor;position:relative;display:block;
}
.navtoggle__bars::before,.navtoggle__bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;
}
.navtoggle__bars::before{top:-5px}
.navtoggle__bars::after{top:5px}
[aria-expanded="true"] .navtoggle__bars{background:transparent}
[aria-expanded="true"] .navtoggle__bars::before{top:0;transform:rotate(45deg)}
[aria-expanded="true"] .navtoggle__bars::after{top:0;transform:rotate(-45deg)}
.navtoggle[aria-expanded="true"]{background:var(--ink,#19292B);color:var(--gold,#FFC24A)}
.navtoggle:focus-visible{outline:2.5px solid var(--pink,#FF5C9E);outline-offset:-3px}

/* ============================================================ FOOT */
footer{
  padding-block:0;border-top:1px solid var(--ink,#19292B);
  font-size:.88rem;line-height:1.62;color:var(--ink,#19292B);
  background:var(--teal,#13A8A0);
  display:flex;flex-wrap:wrap;
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(max(50vw - 590px, 0px) + clamp(1rem,4vw,3rem));
}
footer a{
  text-decoration:none;border:0;border-right:1px solid var(--ink,#19292B);
  background:var(--paper,#F6F3EA);color:var(--ink,#19292B);padding:.75rem 1rem;
  font-family:'Public Sans',system-ui,sans-serif;
}
footer a:first-child{border-left:1px solid var(--ink,#19292B)}
footer a:hover{background:var(--ink,#19292B);color:var(--paper,#F6F3EA)}
footer .copy{
  margin-left:auto;padding:.75rem 0 .75rem 1rem;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;align-self:center;
}

/* ============================================================ TOUCH */
@media (max-width:720px){
  /* masthead collapses to one 44px row: mark left, toggle right */
  .mast{position:static;flex-wrap:wrap;align-items:stretch}
  .wordmark{padding:4px 10px;min-height:44px;flex:0 0 auto;margin-right:auto}
  .wordmark .lgmark{height:24px}
  .navtoggle{display:flex}
  .mast nav{display:none;width:100%;margin-left:0}
  .mast.is-open nav{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink,#19292B)}
  .mast nav a{padding:.6rem 1rem;min-height:48px;font-size:.95rem;
    display:flex;align-items:center;justify-content:flex-start;
    border-left:0;border-bottom:1px solid var(--ink,#19292B)}
  .mast nav a:last-child{border-bottom:0}
  footer a{padding:.85rem 1rem;min-height:46px;display:flex;align-items:center}
  footer .copy{flex-basis:100%;margin-left:0;padding:.6rem 0}
}

@media print{
  .mast,footer{display:none}
}