/* The base `footer .footer a:any-link` rule intentionally precedes the more
   specific component link rules; the pseudo-class makes stylelint's ordering
   heuristic misfire, so it is disabled for this file. */
/* stylelint-disable no-descending-specificity */

/* ===== MLB Footer ===== */
footer {
  --footer-fg: #fff;
  --footer-muted: rgb(255 255 255 / 70%);
  --footer-rule: rgb(255 255 255 / 15%);
  --footer-bar-bg: #081a33;
  --footer-bar-hover: #1a2c48;
  --footer-flyout-bg: #f4f5f6;
  --footer-flyout-fg: #070a0d;
  --footer-flyout-hover: #e2e6ea;

  background-color: var(--brand-primary);
  color: var(--footer-fg);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
}

footer .footer a:any-link {
  color: var(--footer-fg);
  text-decoration: none;
}

footer .footer a:hover {
  text-decoration: underline;
}

/* ===== Row 1: full-width dropdown headings bar ===== */
footer .footer-columns {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--footer-bar-bg);
}

footer .footer-column {
  position: relative;
  border-top: 1px solid var(--footer-rule);
}

footer .footer-column-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 32px);
  margin: 12px 16px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--footer-fg);
  font-family: inherit;
  font-size: var(--body-font-size-m);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

/* hover / open: lighter-navy box with a white rounded border, inset from the
   cell edges (matches the source) */
footer .footer-column-toggle:hover,
footer .footer-column-toggle[aria-expanded='true'] {
  border-color: var(--footer-fg);
  background: var(--footer-bar-hover);
}

/* chevron indicator */
footer .footer-column-toggle::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

footer .footer-column-toggle[aria-expanded='true']::after {
  transform: translateY(2px) rotate(-135deg);
}

/* flyout: light panel with dark links, scrolls after 3 items */
footer .footer-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--footer-flyout-bg);
}

footer .footer-column-toggle[aria-expanded='false'] + ul {
  display: none;
}

footer .footer-column li {
  margin: 0;
}

footer .footer-column ul a:any-link {
  display: block;
  padding: 16px 24px;
  color: var(--footer-flyout-fg);
  font-size: var(--body-font-size-m);
  line-height: 1.3;
}

footer .footer-column ul a:hover {
  background: var(--footer-flyout-hover);
  text-decoration: none;
}

/* ===== Row 2: connect (logo + label + social) ===== */
footer .footer-connect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 28px 24px;
}

footer .footer-connect .footer-connect-logo {
  margin: 0;
}

footer .footer-connect-logo .icon {
  display: inline-flex;
  width: 64px;
  height: 40px;
}

footer .footer-connect-partner {
  margin: 0;
}

footer .footer-connect-partner .icon {
  display: inline-flex;
  width: 200px;
  height: 44px;
}

footer .footer-connect-logo .icon img,
footer .footer-connect-partner .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* the partner logo art is dark navy; render it white to match the footer */
footer .footer-connect-partner .icon img {
  filter: brightness(0) invert(1);
}

footer .footer-connect-label {
  margin: 0;
  font-weight: 700;
}

footer .footer-connect ul {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

footer .footer-connect a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

footer .footer-connect ul .icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--footer-fg);
}

footer .footer-connect ul .icon svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

/* social glyphs are dark-on-transparent SVGs; render them white */
footer .footer-connect ul .icon img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}

/* ===== Row 3: legal (disclaimer + links on one line) ===== */
footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px 24px 28px;
  color: var(--footer-muted);
  font-size: var(--body-font-size-xxs);
  line-height: 1.6;
}

footer .footer-legal p {
  margin: 0;
}

footer .footer-legal p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

footer .footer-legal a {
  white-space: nowrap;
}

/* ===== Desktop: headings in one horizontal bar, flyouts overlay ===== */
@media (width >= 768px) {
  footer .footer-columns {
    flex-direction: row;
  }

  footer .footer-column {
    flex: 1 1 0;
    border-top: 0;
    border-left: 1px solid var(--footer-rule);
  }

  footer .footer-column:first-child {
    border-left: 0;
  }

  /* flyout drops under the inset heading box, aligned to its left/right edges
     (16px in from the column edges). Shows exactly 3 items, then scrolls
     (each item is ~53px tall: ~21px line + 16px+16px padding). */
  footer .footer-column ul {
    position: absolute;
    top: calc(100% - 12px);
    right: 16px;
    left: 16px;
    z-index: 2;
    width: auto;
    max-height: 159px;
    overflow-y: auto;
    box-shadow: 0 8px 16px rgb(0 0 0 / 25%);
  }

  /* connect row: logo, partner, label + social all on one line */
  footer .footer-connect {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}