/**
 * Within Sports additions. Loaded after style.css; style.css itself is untouched.
 */

/* ---------- Home hero ---------- */
.withinsports-hero {
  padding-top: var(--header-height, 100px);
  background: #000;
}
.withinsports-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1920px;
  margin: 0 auto;
}
.hero-slider {
  max-width: 1920px;
  margin: 0 auto;
}
.hero-slider .swiper-slide {
  background: #000;
}
/* Centred dots; overrides the template's left-aligned, ringed pagination in style.css */
.hero-slider .hero-slider-pagination.swiper-pagination-bullets {
  bottom: 16px;
  justify-content: center;
  gap: 4px;
}
.hero-slider .hero-slider-pagination span.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border: 0;
  background-color: #fff;
  opacity: 0.5;
}
.hero-slider .hero-slider-pagination span.swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  background-color: #20E566;
  opacity: 1;
}
.hero-slider .hero-slider-pagination span.swiper-pagination-bullet-active::before {
  content: none;
}
.hero-intro {
  position: relative;
  overflow: hidden;
  padding: 70px 0 90px;
}
.hero-intro .container {
  position: relative;
  z-index: 1;
}
.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.8;
  animation: hero-particles-in 1.6s ease-out both;
}
@keyframes hero-particles-in {
  from { opacity: 0; }
}
.hero-intro p {
  color: rgba(var(--white-rgb), 0.75);
  font-size: 20px;
}
@media (max-width: 767.98px) {
  .hero-intro {
    padding: 50px 0 60px;
  }
}

/* ---------- Feature (pillar) icons: feather icons in place of the template PNGs ---------- */
.feature-entry .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}
.feature-entry .icon i {
  font-size: 32px;
  color: var(--black);
}

/* ---------- Header / footer social icons ---------- */
.social-links {
  gap: 22px;
}
.social-links a {
  display: inline-flex;
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  transition: all 0.4s ease-in-out;
}
.social-links a:hover {
  color: var(--primary);
}
.social-links .spotify-icon {
  width: 22px;
  height: 22px;
}
.navbar .nav-link.active {
  color: var(--primary);
}

/* ---------- Episode cards ---------- */
.episodes-sec .sec-title {
  color: var(--white);
}
.episode-card {
  display: block;
  height: 100%;
  background: #111;
  border: 1px solid rgba(var(--white-rgb), 0.08);
  border-radius: 8px;
  overflow: hidden;
  color: var(--white);
  transition: all 0.4s ease-in-out;
}
.episode-card:hover {
  border-color: var(--primary);
  color: var(--white);
}
.episode-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1c1c1c;
}
.episode-thumb img,
.episode-thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease-in-out;
}
.episode-card:hover .episode-thumb img,
.episode-card:hover .episode-thumb-placeholder {
  transform: scale(1.05);
}
.episode-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1c1c1c, #0a0a0a);
  color: rgba(var(--white-rgb), 0.25);
  font-size: 56px;
}
.episode-watch,
.episode-tag {
  position: absolute;
  top: 14px;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.2;
}
.episode-watch {
  right: 14px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--white);
}
.episode-tag {
  left: 14px;
  background: var(--primary);
  color: var(--black);
}
.episode-body {
  padding: 22px 24px 26px;
}
.episode-label {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.episode-title {
  margin: 0;
  color: var(--white);
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Episode preview link, play button and in-place YouTube player */
.episode-thumb {
  display: block;
}
.episode-thumb img {
  display: block;
}
.episode-play {
  /* Bottom-left, so it never covers the title text designed into episode thumbnails. */
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--black);
  font-size: 22px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: all 0.4s ease-in-out;
}
.episode-play i {
  margin-left: 4px; /* optically centre the triangle */
}
.episode-thumb:hover .episode-play,
.episode-thumb:focus-visible .episode-play {
  transform: scale(1.08);
}
.episode-thumb.is-playing {
  background: #000;
}
.episode-thumb.is-playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.episode-guest {
  margin: 10px 0 0;
  color: rgba(var(--white-rgb), 0.6);
  font-size: 15px;
}

/* ---------- Inner page header ---------- */
.promo-txt .page-intro {
  max-width: 760px;
  color: var(--white);
}
/* Banner text sits over the green artwork in page-header.jpg; a soft shadow keeps it readable. */
.promo-txt h1,
.promo-txt .page-intro,
.promo-txt .breadcrumb {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.8);
}

/* ---------- Placeholder copy ---------- */
.placeholder-copy {
  font-style: italic;
  opacity: 0.6;
}

/* style.css overlays images/promo-g.png on page headers, but the template never shipped that
   file; keep the dark overlay without requesting the missing image. */
section.promo-sec::before {
  background: rgba(10, 9, 9, 0.3); /* lighter than the template's 0.7 so the green artwork shows */
}
/* jarallax shifts the image down, so give the section a black base under the gap at the top. */
section.promo-sec {
  background-color: #000;
}

/* The 404 page has a white background, so the white nav links need a dark bar behind them. */
body:has(.error-sec) .header-1 .navbar {
  background-color: var(--black);
}

/* =========================================================================
   Brand accent: Within Sports green (#20E566, from the logo and banner)
   replaces the template's yellow-lime (#E0F465). style.css hardcodes the old
   colour in the rules below, so each is overridden here with the same selector.
   ========================================================================= */
:root {
  --primary: #20E566;
  --primary-rgb: 32, 229, 102;
  --primary-dark: #17B850;
  --light: #EDFCF2;
  --bs-light-rgb: 237, 252, 242;
}
:root,
[data-bs-theme=light] {
  --bs-primary: #20E566;
  --bs-light: #EDFCF2;
  --bs-primary-rgb: 32, 229, 102;
  --bs-link-color: #20E566;
  --bs-link-color-rgb: 32, 229, 102;
  --bs-focus-ring-color: rgba(32, 229, 102, 0.25);
}
.table-light {
  --bs-table-bg: #EDFCF2;
}
.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
}
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
}
.form-check-input:checked {
  background-color: #20E566;
  border-color: #20E566;
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #20E566;
  border-color: #20E566;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
}
.form-range::-webkit-slider-thumb {
  background-color: #20E566;
}
.form-range::-moz-range-thumb {
  background-color: #20E566;
}
.btn-primary {
  --bs-btn-bg: #20E566;
  --bs-btn-border-color: #20E566;
  --bs-btn-disabled-bg: #20E566;
  --bs-btn-disabled-border-color: #20E566;
}
.btn-light {
  --bs-btn-bg: #EDFCF2;
  --bs-btn-border-color: #EDFCF2;
  --bs-btn-disabled-bg: #EDFCF2;
  --bs-btn-disabled-border-color: #EDFCF2;
}
.btn-outline-primary {
  --bs-btn-color: #20E566;
  --bs-btn-border-color: #20E566;
  --bs-btn-hover-bg: #20E566;
  --bs-btn-hover-border-color: #20E566;
  --bs-btn-focus-shadow-rgb: 32, 229, 102;
  --bs-btn-active-bg: #20E566;
  --bs-btn-active-border-color: #20E566;
  --bs-btn-disabled-color: #20E566;
  --bs-btn-disabled-border-color: #20E566;
}
.btn-outline-light {
  --bs-btn-color: #EDFCF2;
  --bs-btn-border-color: #EDFCF2;
  --bs-btn-hover-bg: #EDFCF2;
  --bs-btn-hover-border-color: #EDFCF2;
  --bs-btn-active-bg: #EDFCF2;
  --bs-btn-active-border-color: #EDFCF2;
  --bs-btn-disabled-color: #EDFCF2;
  --bs-btn-disabled-border-color: #EDFCF2;
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: #20E566;
}
.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: #20E566;
}
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: #20E566;
}
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
}
.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
  --bs-pagination-active-bg: #20E566;
  --bs-pagination-active-border-color: #20E566;
}
.progress,
.progress-stacked {
  --bs-progress-bar-bg: #20E566;
}
.list-group {
  --bs-list-group-active-bg: #20E566;
  --bs-list-group-active-border-color: #20E566;
}
.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(32, 229, 102, 0.25);
}
.single-entry .entry-content {
  background-color: #EDFCF2;
}
.open-popup .icon, .open-popup .icon-sm {
  color: #20E566;
  border: 4px solid #20E566;
}
.counter-sec2 .counter-card .display-1 {
  text-shadow: 2px 2px 0 #17B850, -2px 2px 0 #17B850, -2px -2px 0 #17B850, 2px -2px 0 #17B850;
}

/* Body text on the solid green Listen section needs to be dark to stay readable. */
.listen-sec p {
  color: var(--black);
}

/* ---------- Branded preloader (see Preloader.astro) ---------- */
#preloader {
  display: none;
}
.ws-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.ws-preloader.is-done {
  opacity: 0;
  visibility: hidden;
}
.ws-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.ws-preloader img {
  width: 168px;
  height: auto;
  animation: ws-logo-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ws-preloader-bar {
  display: block;
  width: 140px;
  height: 3px;
  border-radius: 3px;
  background: rgba(var(--white-rgb), 0.12);
  overflow: hidden;
}
.ws-preloader-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--primary);
  transform-origin: left;
  animation: ws-bar-fill 0.9s ease-out both;
}
@keyframes ws-logo-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ws-bar-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-preloader img,
  .ws-preloader-bar span {
    animation: none;
  }
}