/* ===== MLB Header ===== */
header .nav-wrapper {
  background-color: var(--brand-primary);
  width: 100%;
  z-index: 20;
  position: relative;
  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 50%);
}

header nav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0 16px;
  margin: 0;
  max-width: none;
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  font-family: var(--body-font-family);
  color: #fff;
}

header nav a:any-link {
  color: #fff;
  text-decoration: none;
}

header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===== Brand ===== */
header .nav-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

header .nav-brand img {
  width: 71px;
  height: 40px;
  display: block;
}

/* ===== Primary nav (left) ===== */
header .nav-primary {
  flex: 1 1 auto;
  min-width: 0;
}

header .nav-primary > ul {
  display: flex;
  align-items: center;
  gap: 0 6px;
}

header .nav-primary > ul > li {
  position: relative;
  white-space: nowrap;
}

header .nav-primary > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;
}

/* ===== Utility nav (right) ===== */
header .nav-tools {
  display: flex;
  align-items: center;
  gap: 0 12px;
  flex: 0 0 auto;
}

header .nav-tools > ul {
  display: flex;
  align-items: center;
  gap: 0 16px;
}

header .nav-tools > ul > li {
  position: relative;
  white-space: nowrap;
}

header .nav-tools > ul > li > a {
  display: inline-flex;
  align-items: center;
  height: 56px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ===== Flyout dropdowns (megamenus) ===== */
header nav .nav-drop > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 150px;
  max-width: 90vw;
  padding: 8px;
  background-color: #fff;
  border-top: 3px solid #057aff;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 14px 0 rgb(0 0 0 / 25%);
  z-index: 30;
}

header nav .nav-drop > ul > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  text-transform: none;
  letter-spacing: normal;
  border-radius: 4px;
  white-space: nowrap;
}

/* long flat flyouts (News, Schedule, Tickets) render as two columns */
header nav .nav-flyout-2col > ul {
  columns: 2;
  column-gap: 8px;
  width: auto;
  min-width: 460px;
}

header nav .nav-flyout-2col > ul > li {
  break-inside: avoid;
}

/* group headings inside a flyout (e.g. Watch → Video / MLB.TV) */
header nav .nav-drop .nav-group-heading {
  margin: 8px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-color);
}

header nav .nav-drop > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav .nav-drop > ul > li > ul > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  border-radius: 4px;
  white-space: nowrap;
}

/* utility flyouts sit on the right side of the bar, so right-align them under
   their trigger to avoid running off the viewport edge; cap list height */
header .nav-tools .nav-drop > ul {
  left: auto;
  right: 0;
  max-height: 75vh;
  overflow-y: auto;
}

header nav .nav-drop[aria-expanded='true'] > ul {
  display: block;
}

header nav .nav-primary > ul > li > a:hover,
header nav .nav-tools > ul > li > a:hover {
  color: #d1d5db;
}

header nav .nav-drop > ul > li > a:hover,
header nav .nav-drop > ul > li > ul > li > a:hover {
  background-color: #1a6dff;
  color: #fff;
}

/* active L1 item: white text + upward blue caret when its flyout is open */
header nav .nav-primary > ul > li.nav-drop[aria-expanded='true'] > a,
header nav .nav-tools > ul > li.nav-drop[aria-expanded='true'] > a {
  color: #fff;
}

/* upward caret tip sitting on the panel's top border, centered under the trigger */
header nav .nav-primary > ul > li.nav-drop[aria-expanded='true']::after,
header nav .nav-tools > ul > li.nav-drop[aria-expanded='true']::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 31;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: #057aff;
  transform: translateX(-50%);
}

/* flyout link icons (team logos) sized 24px beside the label */
header nav .nav-drop > ul .icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

header nav .nav-drop > ul .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Teams flyout: division-grouped grid of club logos */
header nav .nav-tools .nav-drop > ul:has(.nav-group-heading) {
  columns: 3;
  column-gap: 8px;
  width: auto;
  max-width: 680px;
}

header nav .nav-tools .nav-drop > ul > li {
  break-inside: avoid;
}


/* ===== Search ===== */
header .nav-search {
  display: flex;
  align-items: center;
  position: relative;
}

header .nav-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

header .nav-search-toggle:hover {
  background: rgb(255 255 255 / 15%);
}

header .nav-search-form {
  position: absolute;
  top: 100%;
  right: 0;
  padding: 8px;
  background: #fff;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 14px 0 rgb(0 0 0 / 25%);
}

header .nav-search-form input {
  width: 240px;
  padding: 8px 12px;
  border: 1px solid var(--light-color);
  border-radius: 4px;
  font-size: 14px;
}

/* ===== Login ===== */
header .nav-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

/* stylelint-disable-next-line no-descending-specificity */
header .nav-login span {
  line-height: 1;
}

/* back button only shows inside mobile slide-in sub-panels */
header nav .nav-back {
  display: none;
}

/* quick-nav strip and top-level rail icons are mobile-only. The icons are
   authored as :nav-*: tokens on each top-level link; hide them in the desktop
   bar (scoped to the direct link so flyout team logos are unaffected). */
header .nav-quick {
  display: none;
}

header nav .nav-primary > ul > li > a > .icon,
header nav .nav-tools > ul > li > a > .icon {
  display: none;
}

/* ===== Hamburger (hidden on desktop) ===== */
header nav .nav-hamburger {
  display: none;
}

header nav .nav-hamburger button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

header nav .nav-hamburger-icon,
header nav .nav-hamburger-icon::before,
header nav .nav-hamburger-icon::after {
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
}

header nav .nav-hamburger-icon::before,
header nav .nav-hamburger-icon::after {
  content: '';
  position: absolute;
}

header nav .nav-hamburger-icon::before { top: -6px; }
header nav .nav-hamburger-icon::after { top: 6px; }

/* ===== Mobile / tablet drawer (< 1024px) ===== */
@media (width < 1024px) {
  /* Header grows to fit the bar + quick-nav strip. Reserve the nav height up
     front (min-height, not a fixed height) so the empty <header> holds its
     space before the block lazy-loads — otherwise it collapses to 0 and the
     page content shifts down when the header renders (CLS). */
  header {
    height: auto;
    min-height: var(--nav-height);
  }

  header nav {
    --m-bar: 56px;
    --m-rail: 172px;

    min-height: var(--m-bar);
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
    padding: 0 12px;
  }

  /* show hamburger, order it first */
  header nav .nav-hamburger {
    display: flex;
    align-items: center;
    order: 1;
  }

  header .nav-brand {
    order: 2;
    margin: 0 auto;
  }

  /* keep search + login visible in the bar; hide the utility link list from the bar */
  header nav .nav-tools {
    order: 3;
    gap: 0 8px;
  }

  header nav .nav-tools > ul {
    display: none;
  }

  /* icon-only on mobile — give it a full tap target */
  header nav .nav-login {
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  header nav .nav-login span {
    display: none;
  }

  /* ===== Quick-nav strip (below the bar) ===== */
  header .nav-quick {
    display: block;
    background: var(--brand-primary);
    border-top: 1px solid rgb(255 255 255 / 10%);
    overflow-x: auto;
    scrollbar-width: none;
  }

  header .nav-quick::-webkit-scrollbar {
    display: none;
  }

  /* stylelint-disable no-descending-specificity -- quick-nav is a distinct
     sibling of the drawer; its lower-specificity selectors are intentional */
  header .nav-quick ul {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  header .nav-quick li {
    flex: 1 0 auto;
    list-style: none;
  }

  header .nav-quick a {
    display: block;
    padding: 14px 24px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* stylelint-enable no-descending-specificity */

  /* hide the quick strip while the drawer is open */
  header nav[aria-expanded='true'] + .nav-quick {
    display: none;
  }

  /* ===== Two-pane drawer =====
     the drawer container fills the screen below the bar; its background is the
     white right pane, with the navy rail sitting on the left */
  header nav .nav-primary {
    order: 4;
    position: fixed;
    inset: var(--m-bar) 0 0;
    width: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 40;
    flex: none;
    visibility: hidden;
  }

  header nav[aria-expanded='true'] .nav-primary {
    transform: translateX(0);
    visibility: visible;
  }

  /* left rail: navy column listing every top-level item */
  header nav .nav-primary > ul {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--m-rail);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--brand-primary);
    overflow-y: auto;
  }

  header nav .nav-primary > ul > li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 14px;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
  }

  /* the "…" overflow trigger is desktop-only; never show it in the rail */
  header nav .nav-primary > ul > li[hidden] {
    display: none;
  }

  header nav .nav-primary > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    height: auto;
    padding: 16px 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  /* leading L1 icon in the rail (authored :nav-*: token) */
  header nav .nav-primary > ul > li > a > .icon {
    display: inline-flex;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #fff;
  }

  header nav .nav-primary > ul > li > a > .icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
  }

  /* chevron on rail items that open a sub-menu (positioned on the li so it
     sits at the rail's right edge regardless of the anchor width). Also matches
     the active state to fully override the desktop upward blue caret. */
  header nav .nav-primary > ul > li.nav-drop::after,
  header nav .nav-primary > ul > li.nav-drop[aria-expanded='true']::after {
    content: '';
    position: absolute;
    inset: 50% 14px auto auto;
    width: 7px;
    height: 7px;
    border: solid #fff;
    border-width: 2px 2px 0 0;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.6;
    pointer-events: none;
  }

  header nav .nav-primary > ul > li.nav-drop[aria-expanded='true']::after {
    opacity: 1;
  }

  /* active rail item: lighter navy background */
  header nav .nav-primary > ul > li.nav-drop[aria-expanded='true'] {
    background: rgb(255 255 255 / 10%);
  }

  /* white tip pointing from the rail's right edge into the pane. Rendered on
     the (non-clipping) drawer container rather than the rail item, because the
     rail is a scroll container and would clip a tip poking past its edge. Its
     vertical position tracks the active item via --m-tip-top (set in JS).
     Replaces the desktop upward blue caret. */
  header nav[aria-expanded='true'] .nav-primary::after {
    content: '';
    position: absolute;
    top: var(--m-tip-top, 28px);
    left: var(--m-rail);
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #fff;
    transform: translate(-20px, -50%);
    z-index: 42;
    pointer-events: none;
  }

  /* right pane: the active item's sub-menu, white background, dark text.
     .nav-primary is a transformed ancestor, so the fixed pane is positioned
     relative to it — top 0 aligns with the bar, left is the rail width. */
  header nav .nav-drop > ul {
    position: fixed;
    inset: 0 0 0 var(--m-rail);
    display: none;
    width: auto;
    min-width: 0;
    max-width: none;
    background: #fff;
    border-top: 3px solid #057aff;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 24px;
    overflow-y: auto;
    z-index: 41;
    columns: auto;
  }

  header nav .nav-drop[aria-expanded='true'] > ul {
    display: block;
  }

  header nav .nav-tools .nav-drop > ul,
  header nav .nav-tools .nav-drop > ul:has(.nav-group-heading) {
    position: fixed;
    inset: 0 0 0 var(--m-rail);
    columns: auto;
    max-height: none;
    width: auto;
  }

  header nav .nav-drop > ul > li > a,
  header nav .nav-drop > ul > li > ul > li > a {
    color: #333;
    padding: 12px 20px;
  }

  header nav .nav-drop > ul > li > a:hover,
  header nav .nav-drop > ul > li > ul > li > a:hover {
    background: rgb(0 0 0 / 4%);
    color: #333;
  }

  header nav .nav-drop .nav-group-heading {
    color: #8a8d90;
    font-size: 12px;
    padding: 16px 20px 4px;
    margin: 0;
  }

  /* team logos in the pane keep their color icons */
  /* stylelint-disable-next-line no-descending-specificity */
  header nav .nav-drop > ul .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* the injected slide-in back button isn't used in the two-pane layout */
  header nav .nav-back {
    display: none;
  }

  /* hamburger morphs to a cross when open */
  header nav .nav-hamburger-icon,
  header nav .nav-hamburger-icon::before,
  header nav .nav-hamburger-icon::after {
    transition: transform 0.3s ease, background 0.3s ease, top 0.3s ease;
  }

  header nav[aria-expanded='true'] .nav-hamburger-icon {
    background: transparent;
  }

  header nav[aria-expanded='true'] .nav-hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  header nav[aria-expanded='true'] .nav-hamburger-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
}