/* ===============================================================
   Bad Bets — Nav v2: sport-aware, 4 top-level items
   Replaces the 17-item flat nav with [Hub] [MLB ▾] [NFL ▾] [🔍]
   =============================================================== */

/* Hide the legacy primary nav; nav-v2.js takes over */
.site-header.bbv2 nav.primary { display: none !important; }

/* OVERRIDE the legacy .site-header { display: flex } that's set in styles.css
   in multiple places — bbv2 owns the layout now. The bar inside takes full
   width so the right-slot (search + auth) hugs the right edge. */
header.site-header.bbv2 {
  display: block !important;
  padding: 0 28px !important;
  gap: 0 !important;
}
@media (max-width: 800px) {
  header.site-header.bbv2 { padding: 0 14px !important; }
}

/* Container */
.bbv2-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Brand stays as-is, just tightened */
.site-header.bbv2 .brand { gap: 10px; }
.site-header.bbv2 .brand-wordmark { font-size: 18px; letter-spacing: 1px; }

/* Top-level pill nav */
.bbv2-pills {
  display: flex; gap: 4px; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 4px;
  justify-self: center;
}
.bbv2-pill {
  position: relative;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; letter-spacing: 1px;
  color: var(--text-2);
  padding: 7px 14px; border-radius: 8px;
  transition: all .15s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.bbv2-pill:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.bbv2-pill.active {
  color: var(--text);
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.bbv2-pill[data-sport="mlb"].active { color: var(--green); }
.bbv2-pill[data-sport="nfl"].active { color: var(--amber); }
.bbv2-pill .bbv2-pill-icon { font-size: 14px; line-height: 1; }
.bbv2-pill .bbv2-chev { font-size: 9px; opacity: 0.55; margin-left: 2px; }

/* Right slot — search + auth.
   Override .auth-slot { margin-left: auto } from legacy styles.css that
   would otherwise push the search button left of the auth chip. */
.bbv2-right { display: flex; align-items: center; gap: 8px; justify-self: end; }
.bbv2-right .auth-slot { margin-left: 0 !important; }
.bbv2-search-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  padding: 6px 10px; border-radius: 8px;
  cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
}
.bbv2-search-btn:hover { color: var(--text); border-color: var(--text-2); }
.bbv2-search-btn .bbv2-kbd {
  background: rgba(255,255,255,0.06);
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted);
}

/* ===== Dropdown menus =====
   The trigger zone is the pill PLUS a transparent strip above the dropdown.
   We use padding-top on the dropdown (not margin) so the hover area is
   continuous — fixes "dropdown vanishes when I move my mouse down to click".
   Also extend the trigger area UP into the pill wrapper so the hover chain
   doesn't break between pill → gap → dropdown. */
.bbv2-pill-wrap {
  position: relative;
  display: inline-block;
}
/* Invisible bridge: when hovering anywhere on the pill-wrap, dropdown stays open */
.bbv2-pill-wrap:hover .bbv2-dropdown,
.bbv2-dropdown:hover {
  display: block;
  animation: bbv2-dd-fade-in 0.15s ease-out;
}

.bbv2-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  /* padding-top creates a hoverable gap instead of an unhoverable margin */
  padding: 8px 0 0 0;
  margin-top: 0;
  background: transparent;
  border: 0;
  min-width: 240px;
  z-index: 100;
  display: none;
}
/* Inner panel holds the actual visual */
.bbv2-dropdown::before {
  content: ""; display: block;
  position: absolute; top: 8px; left: 0; right: 0; bottom: 0;
  background: var(--surface-2, #131720);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 0;
}
.bbv2-dropdown > * { position: relative; z-index: 1; padding-left: 8px; padding-right: 8px; }
.bbv2-dropdown > .bbv2-dd-section-label,
.bbv2-dropdown > .bbv2-dd-link {
  margin-left: 0; margin-right: 0;
}
.bbv2-dropdown .bbv2-dd-section-label { padding-top: 14px; }
.bbv2-dropdown .bbv2-dd-link:last-child { margin-bottom: 8px; }

@keyframes bbv2-dd-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bbv2-dd-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.5px;
  color: var(--text-2); text-decoration: none;
  transition: all .12s;
}
.bbv2-dd-link:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.bbv2-dd-link.current {
  color: var(--text);
  background: rgba(255,170,0,0.08);
  border-left: 2px solid var(--amber);
  padding-left: 10px;
}
.bbv2-pill[data-sport="mlb"] + .bbv2-dropdown .bbv2-dd-link.current { border-left-color: var(--green); background: rgba(40,214,112,0.06); }
.bbv2-pill[data-sport="nfl"] + .bbv2-dropdown .bbv2-dd-link.current { border-left-color: var(--amber); background: rgba(255,170,0,0.06); }

.bbv2-dd-icon { font-size: 16px; min-width: 18px; text-align: center; }
.bbv2-dd-divider {
  height: 1px; background: var(--border);
  margin: 6px 0;
}
.bbv2-dd-section-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
  padding: 6px 12px 4px;
}

/* Mobile: hide nav-v2 dropdowns; rely on bottom-nav + hamburger drawer */
@media (max-width: 800px) {
  .bbv2-pills { display: none; }
  .bbv2-search-btn { padding: 6px 8px; }
  .bbv2-search-btn .bbv2-kbd { display: none; }
}

/* Sport-aware page tint — adds a subtle hue to the page based on current section */
body[data-section="mlb"] .site-header { border-bottom-color: rgba(40,214,112,0.25); }
body[data-section="nfl"] .site-header { border-bottom-color: rgba(255,170,0,0.25); }
body[data-section="nba"] .site-header { border-bottom-color: rgba(255,80,80,0.25); }
body[data-section="ncaaf"] .site-header { border-bottom-color: rgba(180,130,255,0.25); }
.bbv2-pill[data-sport="nba"].active   { color: #ff8080; }
.bbv2-pill[data-sport="ncaaf"].active { color: #c19fff; }

/* Bad Bets Bucks wallet pill — shows current balance, click → /tickets.html */
.bbv2-wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255,170,0,0.10);
  border: 1px solid rgba(255,170,0,0.3);
  color: var(--amber);
  border-radius: 8px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
  transition: all .15s;
}
.bbv2-wallet-pill:hover {
  background: var(--amber);
  color: #0b0d12;
}
.bbv2-wallet-icon { font-size: 13px; }

@media (max-width: 800px) {
  .bbv2-wallet-pill { padding: 5px 8px; font-size: 11px; }
  .bbv2-wallet-icon { display: none; }
}