/* Shared primary navigation (Ram, website review 12 Nov 2026 §1).
   Used by the homepage, the Help pages and /for-venues. Markup:
     <button class="nav-toggle" data-nav-toggle aria-controls="ID" aria-expanded="false">…Menu</button>
     <div class="site-menu" id="ID"> links… </div>
   Desktop (931px and up): the menu is a row of links and the button is hidden.
   Phones/tablets: the button shows and opens the menu as a panel under the header.
   Behaviour lives in site-nav.js. Colours match the Ram v2 tokens. */
.nav-toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #2a3040;border-radius:12px;background:transparent;color:#f7f8fb;font:inherit;font-size:14px;font-weight:800;cursor:pointer;flex:none}
.nav-toggle svg{width:20px;height:20px;flex:none}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"]{border-color:#b9ff4a;color:#b9ff4a}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
.nav-toggle:focus-visible,.site-menu a:focus-visible,.nav-cta:focus-visible{outline:3px solid #b9ff4a;outline-offset:3px}
.site-menu{display:flex;align-items:center;gap:18px}
.site-menu a{font-size:14px;color:#d8dde7;text-decoration:none}
.site-menu a:hover,.site-menu a[aria-current="page"]{color:#fff}
.site-menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:#b9ff4a}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 15px;border-radius:12px;background:#b9ff4a;color:#111;font-weight:850;font-size:15px;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:#a3e83a}
.m-only{display:none!important}
@media (max-width:930px){
  .nav-toggle{display:inline-flex}
  /* "Find a game" stays visible as the main action; compact on phones. */
  .nav-cta{padding:9px 12px;font-size:14px}
  nav:has(> .nav-toggle),.nav:has(> .nav-toggle){gap:10px!important}
  .site-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;background:#0b0e14;border-bottom:1px solid #2a3040;box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:calc(100vh - 70px);overflow-y:auto}
  .site-menu.open{display:flex}
  .site-menu a{display:flex;align-items:center;min-height:48px;padding:0 4px;font-size:16px;font-weight:700;color:#f7f8fb;border-bottom:1px solid #1d2230}
  .site-menu a:last-child{border-bottom:0}
  .site-menu a.m-cta{justify-content:center;margin:6px 0 8px;border:0;border-radius:12px;background:#b9ff4a;color:#111;font-weight:850}
  .site-menu .m-only{display:flex!important}
  .site-menu .d-only{display:none!important}
}
@media (max-width:359px){.nav-cta{display:none}}