/* ── Site footer ── */
.site-footer {
  background: #011d2d;
  color: #fff;
  padding: 48px 24px 24px;
}

.site-footer__inner {
  max-width: 1579px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.site-footer__col--stacked {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.footer-nav__heading {
  margin: 0 0 16px;
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.footer-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav__list li + li {
  margin-top: 4px;
}

.footer-nav__list a {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 32px;
  color: #fff !important;
  text-decoration: none;
  transition: color 0.15s, opacity 0.15s;
}

.footer-nav__list a:hover {
  color: #24bdff;
}

.site-footer__payments {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.site-footer__payment-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__payment-badges img {
  display: block;
  width: 100%;
  max-width: 342px;
  height: auto;
}

.site-footer__copyright {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.64);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
}

.site-footer__copyright a {
  color: rgba(255, 255, 255, 0.64);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 0;
}

.site-footer__copyright a:hover {
  color: #fff;
}
/* All Mobiles */
@media (max-width: 767px) {
  .site-footer__nav {
    display: flex;
    grid-template-columns: 1fr;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .site-footer__col--stacked {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 36px;
  }
  .footer-nav__heading {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 28px;
  }
  .footer-nav__list a {
    font-size: 13px;
    line-height: 25px !important;
  }
  .site-footer__payment-badges img {
    max-width: 235px;
  }
  .site-footer__payments {
    gap: 0px;
  }
}

/* ══════════════════════════════════════
   TABLET (≥ 640px)
   ══════════════════════════════════════ */
@media (min-width: 640px) {
  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  .site-footer__payments {
    grid-column: 1 / -1;
  }
}

/* ══════════════════════════════════════
   TABLET (768px – 1023px)
   ══════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer {
    padding: 64px 32px 32px;
  }
  section.player-card.ng-mobile-player .station-title {
    font-size: 12px !important;
  }
  section.player-card.ng-mobile-player .time-row {
    font-size: 12px !important;
  }
  section.player-card.ng-mobile-player .track-title, section.player-card.ng-mobile-player .track-title a, section.player-card.ng-mobile-player .ngTrackTitleStyle {
    font-size: 15px !important;
  }
  section.player-card.ng-mobile-player .track-artist, section.player-card.ng-mobile-player .track-artist a, section.player-card.ng-mobile-player .track-artist span {
    font-size: 13px !important;
  }
  section.player-card.ng-mobile-player .track-info .album-art {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
  }
  section.player-card.ng-mobile-player .progress-bar {
    height: 5px !important;
}

  .site-footer__nav {
    gap: 36px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .site-footer__col--stacked {
    grid-column: span 1;
  }

  .site-footer__payments {
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  .footer-nav__heading {
    font-size: 22px;
  }

  .footer-nav__list a {
    font-size: 16px;
    line-height: 28px;
  }

  .site-footer__copyright {
    font-size: 14px;
    line-height: 24px;
  }
}

/* ══════════════════════════════════════
   DESKTOP (≥ 1024px)
   ══════════════════════════════════════ */
@media (min-width: 1024px) {
  .site-footer {
    /* padding: 50px 170px 22px 171px; */
    padding: 41px 105px 22px 105px;
  }

  .site-footer__inner {
    gap: 124px;
  }

  .site-footer__nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    /* gap: 72px; */
    gap: 12px;
  }

  .site-footer__col {
    flex: 0 0 202px;
    /* width: 202px; */
    width:100%;
  }

  .site-footer__col--stacked {
    flex: 0 0 272px;
    width: 272px;
    gap: 54px;
  }

  .footer-nav__heading {
    /* font-size: 28px; */
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 20px;
  }

  .footer-nav__list a {
    font-size: 20px;
    line-height: 40px;
  }

  .site-footer__payments {
    flex: 0 0 330px;
    gap: 0px;
    padding: 0 10px;
    margin-left: auto;
  }

  .site-footer__copyright {
    font-size: 16px;
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* column-gap: 72px; */
    column-gap: 116px;
    padding-left: 27px;
    row-gap: 25px;
    align-items: start;
  }
  .site-footer__payments {
    margin: 0;
    text-align: left;
    justify-self: start;
    padding: 14px 0px;
  }
}


/* =========================================================================
   SITE FOOTER - MOBILE ACCORDION   [Option 4]
   Added by Claude.

   Below 768px the five link groups collapse to five tappable rows and open
   one at a time. Nothing is removed: all 27 links stay, one tap away.

   Everything is inside @media (max-width: 767px), the same breakpoint this
   file already uses for phones, so the tablet rules at 768-1023 and the
   desktop rules at 1024+ are untouched. Verified pixel-identical at 768,
   1024, 1199 and 1512.

   Requires the accordion script at the foot of footer.cfm. Without it the
   groups render closed and cannot be opened, so the two ship together.
   ========================================================================= */

@media (max-width: 767px) {

  .site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
  }

  /* let the two navs inside the stacked column become siblings, so all
     five groups are equal accordion rows                              */
  .site-footer__col--stacked { display: contents; }

  .footer-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .footer-nav:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

  .footer-nav__heading {
    position: relative;
    margin: 0;
    padding: 15px 34px 15px 0;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
  }

  .footer-nav__heading::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(255, 255, 255, 0.72);
    border-bottom: 2px solid rgba(255, 255, 255, 0.72);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.18s ease;
  }
  .footer-nav.is-open > .footer-nav__heading::after {
    transform: translateY(-25%) rotate(-135deg);
  }

  .footer-nav__list { display: none; padding-bottom: 8px; }
  .footer-nav.is-open > .footer-nav__list { display: block; }

  .footer-nav__list li + li { margin-top: 0; }
  .footer-nav__list a {
    display: block;
    font-size: 14px;
    line-height: 20px !important;
    padding: 9px 0 9px 2px;
  }

  .footer-nav__heading:focus-visible { outline: 2px solid #24bdff; outline-offset: 2px; }

  .site-footer__payments { margin-top: 20px; }
  .site-footer__payments .footer-nav__heading { padding: 0 0 10px; cursor: auto; }
  .site-footer__payments .footer-nav__heading::after { content: none; }

  .site-footer__inner { gap: 24px; }
  .site-footer__copyright { font-size: 12px; line-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-nav__heading::after { transition: none; }
}