/* basketballapi.net: the menu the burger opens on narrow screens, built by menu.js from the header's own links */
/* the header stays on screen while the page scrolls, above the strip so the open menu covers it; anchors land below it */
.hdr { position: sticky; top: 0; z-index: 40; }
html { scroll-padding-top: 76px; }
.m-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #101828; border-top: 1px solid #1D2939; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); padding: 6px 16px 18px; z-index: 30; }
.m-menu.open { display: block; }
.m-link { display: block; padding: 13px 2px; color: #D0D5DD; font: 500 16px "IBM Plex Sans", sans-serif; border-bottom: 1px solid #1D2939; }
.m-link:hover, .m-link[aria-current="page"] { color: #fff; }
.m-link[aria-current="page"] { box-shadow: inset 3px 0 0 #F97316; padding-left: 12px; }
.m-acts { display: flex; gap: 10px; margin-top: 16px; }
.m-acts .btn { flex: 1; }
.m-acts .btn.ghost, .m-acts .btn.dark { box-shadow: inset 0 0 0 1px #475467; }
.m-link:focus-visible, .m-acts .btn:focus-visible { outline: 3px solid #FDBA74; outline-offset: 2px; }
@media (min-width: 981px) { .m-menu, .m-menu.open { display: none; } }
/* the main nav: the pages, a divider, then the developer links; Status carries a dot that follows the live status (menu.js) */
.nav { align-items: center; }
.nav a { display: inline-flex; align-items: center; gap: 7px; }
.nav .sep { width: 1px; height: 20px; background: #344054; margin: 0 8px; flex: none; }
.nav .live { width: 8px; height: 8px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 3px rgba(18, 183, 106, .22); }
.nav .live[data-state="degraded"] { background: #F79009; box-shadow: 0 0 0 3px rgba(247, 144, 9, .22); }
.nav .live[data-state="down"] { background: #F04438; box-shadow: 0 0 0 3px rgba(240, 68, 56, .22); }

/* with API Docs and Status in the nav, the upsell steps aside before the header runs out of room */
@media (max-width: 1320px) { .upsell { display: none; } }