/* ==========================================================================
   GoodluckSports — header league dropdown
   --------------------------------------------------------------------------
   The wide ESPN-style panel that drops from any sport tab with more than
   one league. Kept separate from style.css so the feature can be added or
   removed by touching one <link>. Uses the site's existing custom
   properties, so it inherits the theme.
   ========================================================================== */

/* Each tab is wrapped so its menu can anchor to it. */
.header-tab-wrap {
  position: relative;
  display: inline-block;
}

.tab-caret {
  font-size: 9px;
  margin-left: 3px;
  opacity: .6;
  vertical-align: middle;
}

/* ---- the panel ---- */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  display: none;
  padding-top: 6px;
}

/* Hover opens it on pointer devices; .open is toggled by JS for touch. */
@media (hover: hover) {
  .header-tab-wrap.has-menu:hover .mega-menu { display: block; }
}
.header-tab-wrap.open .mega-menu { display: block; }

.mega-inner {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  font-family: 'Inter', system-ui, sans-serif;
  /* Capped so a wide menu can never run off the right of the screen —
     columns wrap to a second row instead. */
  max-width: min(760px, calc(100vw - 24px));
}

.mega-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}

.mega-group {
  min-width: 124px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Column heading — matches the small bold uppercase labels ESPN uses. */
.mega-group-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
  white-space: nowrap;
}

.mega-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.mega-link:hover {
  background: rgba(127, 127, 127, .1);
  color: var(--brand);
}

.mega-flag { font-size: 13px; line-height: 1; }
.mega-name { line-height: 1.2; }

/* "All <Sport>" footer row — a column here made the panel too wide. */
.mega-all {
  display: block;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
}
.mega-all:hover { opacity: .75; }

/* Flipped by JS when the panel would spill past the right edge. */
.header-tab-wrap.align-right .mega-menu {
  left: auto;
  right: 0;
}

/* ---- narrow screens: stack the menu inline instead of floating ---- */
@media (max-width: 860px) {
  .header-tab-wrap { display: block; }
  .mega-menu {
    position: static;
    padding-top: 0;
  }
  .mega-inner {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 6px 0 10px 16px;
    background: transparent;
  }
  .mega-cols { flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   Hidden chrome
   --------------------------------------------------------------------------
   The "Updated 2:57:25 PM" pill is hidden rather than deleted: app-scores.js
   and app-news.js still write to it on every refresh, so removing the markup
   would break those scripts. This file is loaded by index.html and
   news.html, so one rule covers both. Delete this block to bring it back.
   ========================================================================== */
.status-pill { display: none; }


/* ==========================================================================
   === HEADER SCROLLS AWAY (delete this block to revert) ===
   style.css keeps #site-header fixed/sticky so it hovers at the top even at
   the bottom of the page. `position: relative` takes it out of that fixed
   flow so it scrolls away with the page — while (unlike `static`) still
   letting it hold a z-index. The high z-index gives the header its own
   stacking context ABOVE the score ticker, so the dropdown menu floats over
   the score cards in Chrome (Safari already did this; Chrome is stricter
   about stacking contexts created by the ticker's column).
   ========================================================================== */
#site-header {
  position: relative !important;
  top: auto !important;
  z-index: 600;
}
/* === end header scrolls away block === */

/* ==========================================================================
   === GREY TOP BAR (Step 4) — delete this block to revert to the light bar ===
   Charcoal header with white text. The logo keeps its green mark; "Goodluck"
   turns white so it reads on dark (the green "Sporting" stays green).
   ========================================================================== */
#site-header {
  background: #1e2329;
  border-bottom: 1px solid #2b3138;
}

/* Logo wordmark → white (the <strong>Sporting</strong> keeps its brand green
   via the rule below). */
#site-header .logo-text { color: #ffffff; }
#site-header .logo-text strong { color: var(--brand); }

/* Favorites + league tabs → light, brighter on hover/active. */
#site-header .header-tab {
  color: #e7eaee;
}
#site-header .header-tab:hover,
#site-header .header-tab.active {
  color: #ffffff;
}
/* Dropdown caret (▾) and Favorites star inherit the light color. */
#site-header .header-tab .caret,
#site-header .header-tab-fav { color: #e7eaee; }

/* Hamburger bars (mobile) → light. */
#site-header .nav-toggle span { background: #e7eaee; }

/* Dropdown mega-menus open off the dark bar — give them a dark surface so
   they don't flash white. */
#site-header .mega-menu,
#site-header .mega-inner {
  background: #232a31;
  border-color: #333b44;
}
#site-header .mega-link { color: #e7eaee; }
#site-header .mega-link:hover { background: rgba(255,255,255,.08); color: #ffffff; }
#site-header .mega-group-title,
#site-header .mega-col-title { color: #9aa2ac; }
/* === end grey top bar block === */

/* ==========================================================================
   === MEGA-MENU HEIGHT CAP — delete this block to revert ===
   Sports with many leagues (Basketball, Soccer) made the dropdown run nearly
   to the bottom of the screen. Cap its height to the viewport and let it
   scroll internally so it never drops too low.
   ========================================================================== */
.mega-inner {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
/* === end mega-menu height cap block === */

/* ==========================================================================
   === COMPACT MEGA-MENU — delete this block to revert to the larger menu ===
   Smaller fonts, tighter rows, and a narrower panel so the dropdown is
   short and unobtrusive instead of filling the screen. Uses #site-header +
   !important to beat style.css's own mega-menu rules.
   ========================================================================== */
#site-header .mega-inner {
  padding: 9px 12px !important;
  max-width: min(520px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 160px) !important;
  overflow-y: auto !important;
}
#site-header .mega-cols { gap: 6px 16px !important; }
#site-header .mega-group { min-width: 96px !important; }
#site-header .mega-group-title {
  font-size: 9px !important;
  margin-bottom: 3px !important;
  letter-spacing: .05em !important;
}
#site-header .mega-link {
  gap: 5px !important;
  padding: 1px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}
#site-header .mega-name { font-size: 11px !important; line-height: 1.15 !important; }
#site-header .mega-flag { font-size: 10px !important; }
#site-header .mega-all {
  margin-top: 7px !important;
  padding-top: 6px !important;
  font-size: 10px !important;
}
/* === end compact mega-menu block === */