/* Sports 803 — mobile bottom navigation
   Fixed app-style tab bar, phones only. Uses its own token set so it works
   on any page, whether or not the events hub shortcode is present there. */

.s803-bottomnav{
  --s803nav-bg:rgba(10,13,19,.92);
  --s803nav-line:#232d3e;
  --s803nav-text:#8b97ab;
  --s803nav-active:#ef3f45;
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9999;
  align-items:stretch;
  background:var(--s803nav-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--s803nav-line);
  padding-bottom:env(safe-area-inset-bottom,0);
  font-family:'Barlow Condensed',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body.s803-has-bottomnav{padding-bottom:0}

@media(max-width:760px){
  .s803-bottomnav{display:flex}
  body.s803-has-bottomnav{padding-bottom:calc(60px + env(safe-area-inset-bottom,0))}
}

.s803-bottomnav-item{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:9px 4px 8px;
  min-height:60px;
  background:none;
  border:0;
  color:var(--s803nav-text);
  text-decoration:none;
  font:500 11px/1 'Barlow Condensed',sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.s803-bottomnav-item svg{transition:transform .15s ease}
.s803-bottomnav-item.is-active{color:var(--s803nav-active)}
.s803-bottomnav-item.is-active::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  width:26px;height:2.5px;
  transform:translateX(-50%);
  background:var(--s803nav-active);
  border-radius:0 0 3px 3px;
}
.s803-bottomnav-item:active svg{transform:scale(.9)}
.s803-bottomnav-item:focus-visible{outline:2px solid var(--s803nav-active);outline-offset:-2px}

.s803-bottomnav-badge{
  position:absolute;
  top:6px;left:calc(50% + 6px);
  min-width:15px;height:15px;
  padding:0 3px;
  border-radius:999px;
  background:var(--s803nav-active);
  color:#fff;
  font:700 9.5px/15px 'Barlow Condensed',sans-serif;
  text-align:center;
}

/* ---------- categories sheet ---------- */
.s803-nav-sheet{position:fixed;inset:0;z-index:10000}
.s803-nav-sheet[hidden]{display:none}
.s803-nav-sheet-backdrop{position:absolute;inset:0;background:rgba(3,5,9,.6);opacity:0;transition:opacity .2s ease}
.s803-nav-sheet-panel{
  position:absolute;left:0;right:0;bottom:0;
  max-height:70vh;
  overflow-y:auto;
  background:#0e1420;
  border:1px solid #232d3e;
  border-bottom:0;
  border-radius:18px 18px 0 0;
  padding:6px 18px calc(18px + env(safe-area-inset-bottom,0));
  transform:translateY(100%);
  transition:transform .22s ease;
  font-family:'Barlow Condensed',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.s803-nav-sheet.is-open .s803-nav-sheet-backdrop{opacity:1}
.s803-nav-sheet.is-open .s803-nav-sheet-panel{transform:translateY(0)}

.s803-nav-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 8px;border-bottom:1px solid #1c2534}
.s803-nav-sheet-head h3{margin:0;font:600 19px/1.2 'Barlow Condensed',sans-serif;color:#eef1f6}
.s803-nav-sheet-x{background:none;border:0;color:#8b97ab;font-size:26px;line-height:1;cursor:pointer;padding:4px 6px}
.s803-nav-sheet-x:focus-visible{outline:2px solid #ef3f45}

.s803-nav-sheet-list{display:flex;flex-direction:column;padding:6px 0 4px}
.s803-nav-sheet-list a{
  padding:13px 4px;
  color:#eef1f6;
  text-decoration:none;
  font:500 15.5px/1.2 'Barlow Condensed',sans-serif;
  border-bottom:1px solid #161d2a;
}
.s803-nav-sheet-list a:first-child{color:#ef3f45;font-weight:600}
.s803-nav-sheet-list a:last-child{border-bottom:0}
.s803-nav-sheet-list a:active{opacity:.7}
.s803-nav-sheet-empty{color:#5c6980;padding:16px 4px;margin:0;font:500 14px 'Barlow Condensed',sans-serif}

/* ---------- category tile grid (SPORTS sheet) ---------- */
.s803-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 0 4px}
.s803-cat-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px 6px;
  background:#141b28;
  border:1px solid #232d3e;
  border-radius:14px;
  color:#eef1f6;
  text-decoration:none;
  font:600 13px/1.15 'Barlow Condensed',sans-serif;
  text-align:center;
}
.s803-cat-tile:active{opacity:.75}
.s803-cat-icon{font-size:26px;line-height:1}
.s803-cat-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

@media(prefers-reduced-motion:reduce){
  .s803-nav-sheet-backdrop,.s803-nav-sheet-panel,.s803-bottomnav-item svg{transition:none}
}