/* This theme layers overrides on top of the header/footer component rules, so
   its selectors are intentionally ordered by region rather than by ascending
   specificity; disable the ordering heuristic for the file. */
/* stylelint-disable no-descending-specificity */

/* ===== Syracuse Mets theme =====
   Scoped to body.syracuse (the class decorateTemplateAndTheme adds from the
   page's `theme` metadata). Overrides the base design tokens defined in
   styles.css :root, so any block/header/footer that references those tokens
   re-brands automatically. Loaded eagerly by loadTheme() in scripts.js.

   The Mets header is a single orange bar (no sponsor row); the footer is the
   simpler MiLB layout on the club's navy blue. */

@import url('fonts.css');

body.syracuse {
  /* Mets palette: orange header chrome, navy blue as the secondary/footer color */
  --brand-primary: #f47d30;
  --brand-accent: #004b8d;
  --brand-accent-hover: #003a6e;
  --link-color: #004b8d;
  --link-hover-color: #003a6e;

  /* fonts (theme-scoped families from fonts.css, MLB fallbacks preserved) */
  --body-font-family: syracuse-body, proxima-nova-fallback, "helvetica neue", helvetica, arial, sans-serif;
  --heading-font-family: syracuse-heading, var(--body-font-family);

  /* height of the header's top sponsor row (offsets the sticky header) */
  --syr-sponsor-h: 44px;

  /* dark sections use the footer's navy so they blend into the footer */
  --dark-section-background: #004b8d;
  --dark-section-color: #fff;

  /* muted caption/date color on the navy dark sections */
  --video-date-color: rgb(255 255 255 / 65%);
}

/* ===== Sticky header =====
   Pinned but offset upward by the sponsor row's height, so on scroll the
   sponsor row slides off the top and only the main nav stays fixed. */
body.syracuse header {
  position: sticky;
  top: calc(-1 * var(--syr-sponsor-h, 44px));
  z-index: 30;
}

body.syracuse header .nav-wrapper {
  box-shadow: none;
}

/* ===== Sponsor bar (top row) =====
   A thin orange strip above the main nav carrying the Syracuse affiliate
   tagline logo on the left (authored as a "Sponsor" section, rendered by
   header.js as .nav-sponsor; no partner logo). */
body.syracuse header .nav-sponsor {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--syr-sponsor-h);
  padding: 0 32px;
  background: #004b8d; /* match the footer's navy */
  border-bottom: 1px solid rgb(255 255 255 / 20%);
}

body.syracuse header .nav-sponsor .nav-sponsor-affiliate {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

body.syracuse header .nav-sponsor .nav-sponsor-affiliate .icon {
  display: inline-flex;
  width: 121px;
  height: 24px;
}

body.syracuse header .nav-sponsor .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== Header =====
   Orange bar. The base header already paints --brand-primary as the
   background; size the image-only brand mark and render its navy logo white. */
body.syracuse header .nav-brand a {
  display: inline-flex;
  align-items: center;
}

/* the brand mark is authored as a :syr-logo: token → .icon span wrapping the
   img. Show the logo in its natural colors (navy "S" with white outline),
   matching the source. */
body.syracuse header .nav-brand .icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
}

body.syracuse header .nav-brand .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== Flyout dropdowns =====
   Source styling: white panel, dark (#222) links at weight 500 (no uppercase),
   a light-grey top bar/caret, and a light-grey hover pill. */
body.syracuse header nav .nav-drop > ul {
  border-top: 3px solid #e1e2e2;
  border-radius: 0;
  box-shadow: 0 8px 16px rgb(0 0 0 / 20%);
}

body.syracuse header nav .nav-primary > ul > li.nav-drop[aria-expanded='true']::after,
body.syracuse header nav .nav-tools > ul > li.nav-drop[aria-expanded='true']::after {
  border-bottom-color: #e1e2e2;
}

body.syracuse header nav .nav-drop > ul > li > a,
body.syracuse header nav .nav-drop > ul > li > ul > li > a {
  color: #222;
  font-weight: 500;
  text-transform: none;
}

body.syracuse header nav .nav-drop > ul > li > a:hover,
body.syracuse header nav .nav-drop > ul > li > ul > li > a:hover {
  background: #eee;
  color: #222;
}

/* ===== Two-column feed (What's New) look-and-feel =====
   Core lays out the heading + View All row and the plain list; the theme sets
   the source colors/sizes. The teaser links use the site's brighter blue
   (#0048c7, darkening to #0048ab on hover) rather than the theme's navy chrome
   accent, matching the source. */
body.syracuse main .section.two-column .default-content-wrapper h2 {
  font-size: 28px;
}

/* Insider/Promotions section heading — match the source (28px, weight 700,
   near-black) */
body.syracuse main .section:has(.carousel.insider) h2,
body.syracuse main .section:has(.carousel.promos) h2,
body.syracuse main .section:has(.video-library) h2 {
  font-size: 28px;
  font-weight: 700;
  color: #070a0d;
}

/* on a dark section the heading flips to the light foreground for contrast */
body.syracuse main .section[data-theme='dark'] h2 {
  color: var(--dark-section-color, #fff);
}

/* Insider/Promotions arrows: near-black chevron with a light-grey ring; the
   ring turns solid black only on hover. Disabled arrows fade to light grey. */
body.syracuse .carousel:is(.insider, .promos) .carousel-nav button {
  color: #070a0d;
  border-color: #d4d8dd;
}

body.syracuse .carousel:is(.insider, .promos) .carousel-nav button:hover {
  border-color: #000;
}

body.syracuse .carousel:is(.insider, .promos) .carousel-nav button[disabled] {
  color: #c8cdd3;
  border-color: #d4d8dd;
}

/* Newsletter sign-up: white-outline pill on the navy band, fills white on hover */
body.syracuse main .section.newsletter a.button:any-link {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
}

body.syracuse main .section.newsletter a.button:hover,
body.syracuse main .section.newsletter a.button:focus-visible {
  background: #fff;
  color: var(--dark-section-background, #004b8d);
}

/* Promotions cards: black title, near-black description, grey opponent/date,
   and a green-outlined "Ticket Info" pill (the MiLB tickets green). */
body.syracuse .carousel.promos .promo-title {
  color: #000;
}

body.syracuse .carousel.promos .promo-desc {
  color: #070a0d;
}

body.syracuse .carousel.promos .promo-opp,
body.syracuse .carousel.promos .promo-date {
  color: #57606c;
}

body.syracuse .carousel.promos .promo-cta {
  color: #006c00;
}

body.syracuse .carousel.promos .promo-cta:hover {
  background: #006c00;
  color: #fff;
}

body.syracuse main .section.two-column .default-content-wrapper > p a:any-link {
  font-size: var(--body-font-size-m);
  color: #070a0d;
}

body.syracuse main .section.two-column .default-content-wrapper > p a:hover {
  color: #0048ab;
}

body.syracuse main .section.two-column .default-content-wrapper li a:any-link {
  font-size: 19px;
  font-weight: 600;
  color: #070a0d;
}

body.syracuse main .section.two-column .default-content-wrapper li a:hover {
  color: #57606c;
}

/* ===== Ticker (schedule strip) look-and-feel =====
   Core lays out the scrolling rail and cards; the theme sets the source
   colors — near-black date/opponent, grey "vs."/time, and a green Tickets
   pill (the MiLB tickets green, not a team color). */
body.syracuse .ticker .ticker-date,
body.syracuse .ticker .ticker-opp {
  color: #070a0d;
}

body.syracuse .ticker .ticker-vs,
body.syracuse .ticker .ticker-time {
  color: #57606c;
}

body.syracuse .ticker .ticker-tickets {
  background: #006c00;
  color: #fff;
}

body.syracuse .ticker .ticker-prev,
body.syracuse .ticker .ticker-next,
body.syracuse .ticker .ticker-viewall {
  color: #070a0d;
}

/* circular prev/next with the source's light-grey ring, and matching
   inter-game dividers */
body.syracuse .ticker .ticker-prev,
body.syracuse .ticker .ticker-next {
  border-color: #e8eaed;
}

body.syracuse .ticker .ticker-game + .ticker-game {
  border-left-color: #e8eaed;
}

/* full-bleed rule under the ticker: the ticker sits inside the centered
   content column, so stretch a viewport-wide underline via a pseudo-element */
body.syracuse .ticker {
  position: relative;
}

body.syracuse .ticker::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-bottom: 1px solid #e8eaed;
}

/* calendar "view all" hover: subtle grey wash, matching the source */
body.syracuse .ticker .ticker-viewall:hover {
  background: rgb(7 10 13 / 5%);
}

/* ===== Footer (MiLB layout) =====
   Dark navy bar with a thin top link strip, a connect row (MiLB logo +
   "Follow…" label + social icons), and a legal row. The base footer.css targets
   the multi-column MLB layout, so scope these overrides to re-skin the three
   sections footer.js tags. */
body.syracuse footer {
  background-color: #004b8d;
}

/* top link strip: centered white links, thin bar with a divider below */
body.syracuse footer .footer-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 32px;
  padding: 16px 24px;
  border-bottom: 1px solid rgb(255 255 255 / 15%);
}

body.syracuse footer .footer-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.syracuse footer .footer-strip li {
  margin: 0;
}

body.syracuse footer .footer-strip a:any-link {
  color: var(--footer-fg);
  font-size: var(--body-font-size-m);
  font-weight: 600;
}

/* connect row: MiLB logo, follow label, social icons — centered column */
body.syracuse footer .footer-connect {
  gap: 16px;
  padding: 32px 24px;
}

body.syracuse footer .footer-connect .footer-connect-partner .icon {
  width: 80px;
  height: 45px;
}

/* the MiLB logo art is already light; don't invert it like the base partner logo */
body.syracuse footer .footer-connect .footer-connect-partner .icon img {
  filter: none;
}

body.syracuse footer .footer-connect-label {
  margin-top: 8px;
  font-size: var(--body-font-size-s);
  font-weight: 600;
}

/* larger social icons than the base 24px, matching the MiLB footer's 32px */
body.syracuse footer .footer-connect ul {
  gap: 24px;
  margin-top: 8px;
}

body.syracuse footer .footer-connect ul .icon {
  width: 32px;
  height: 32px;
}

/* ===== Mobile ===== */
@media (width < 1024px) {
  /* the source drops the sponsor row on mobile; hide it and reset the sticky
     offset since there's no row to scroll away */
  body.syracuse header .nav-sponsor {
    display: none;
  }

  body.syracuse header {
    top: 0;
  }

  /* brand sits on the left, immediately after the hamburger */
  body.syracuse header .nav-brand {
    margin: 0 0 0 8px;
    margin-right: auto;
  }

  /* no divider line between the bar and the quick-links strip */
  body.syracuse header .nav-quick {
    border-top: 0;
  }

  /* quick links fill the strip width, equally distributed, each link centered */
  body.syracuse header .nav-quick li {
    flex: 1 1 0;
    text-align: center;
  }

  /* active L1 rail item: light-grey background with dark text/icon/chevron */
  body.syracuse header nav .nav-primary > ul > li.nav-drop[aria-expanded='true'] {
    background: #e1e2e2;
  }

  body.syracuse header nav .nav-primary > ul > li.nav-drop[aria-expanded='true'] > a {
    color: #000;
  }

  body.syracuse header nav .nav-primary > ul > li.nav-drop[aria-expanded='true'] > a > .icon img {
    filter: none;
  }

  body.syracuse header nav .nav-primary > ul > li.nav-drop[aria-expanded='true']::after {
    display: none;
  }

  /* rail items: include padding in the width so long labels stay inside the rail */
  body.syracuse header nav .nav-primary > ul > li {
    box-sizing: border-box;
  }

  body.syracuse header nav .nav-primary > ul > li > a {
    white-space: normal;
  }
}