/* Bible In Living Sound — audiobook player styling
   Themed to match the site's blue gradient (#1781c6 → #0c3e71)
   and yellow accent (#f6d142). Layered on top of Plyr's own CSS
   (loaded separately from the CDN, before this file). */

.bls-player {
  --bls-blue-light: #1781c6;
  --bls-blue-dark: #0c3e71;
  --bls-yellow: #f6d142;
  --bls-yellow-hover: #ffe066;

  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  margin: 0 0 1.25em 0;
  font-family: inherit;
  background: linear-gradient(160deg, var(--bls-blue-light), var(--bls-blue-dark));
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 4px 14px rgba(12, 62, 113, 0.35);
}

/* Scale controls up on small/touch screens so buttons meet
   ~44px minimum touch target size and don't read as "tiny". */
@media (max-width: 480px) {
  .bls-player {
    border-radius: 12px;
    padding: 12px 12px 14px;
    max-width: 85%;
  }

  .bls-btn {
    font-size: 1.2em;
    padding: 0.85em 1.3em;
    min-height: 48px;
  }

  .bls-now-playing {
    font-size: 1em;
  }

  .bls-player .plyr {
    --plyr-control-spacing: 16px;
  }

  .bls-player .plyr__controls {
    font-size: 1.35em;
  }

  .bls-player .plyr__control svg {
    width: 28px;
    height: 28px;
  }

  /* Bigger, more tappable track list titles on mobile. Extra line-height
     does most of the work here — spacing titles apart makes them easier
     to tap accurately without the list feeling bloated. */
  .bls-playlist li {
    font-size: 1.15em;
    line-height: 1.9;
    padding: 4px 0;
  }

  .bls-playlist-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Retheme Plyr itself to sit inside the blue card ---- */
.bls-player .plyr {
  --plyr-color-main: var(--bls-yellow);
  --plyr-audio-controls-background: transparent;
  --plyr-audio-control-color: #ffffff;
  --plyr-audio-control-color-hover: #0c3e71;
  --plyr-audio-control-background-hover: var(--bls-yellow);
  --plyr-control-radius: 10px;
  --plyr-font-family: inherit;
  border-radius: 10px;
}

/* ---- Transport row (Previous / Now Playing / Next) ---- */
.bls-player-transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.6em;
}

.bls-btn {
  font-size: 0.95em;
  font-weight: 700;
  padding: 0.5em 0.9em;
  border: none;
  border-radius: 999px; /* pill shape, friendlier/rounder look */
  background: var(--bls-yellow);
  color: #0c3e71;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease, background 0.15s ease;
}

.bls-btn:hover:not(:disabled) {
  background: var(--bls-yellow-hover);
  transform: translateY(-1px);
}

.bls-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.bls-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.bls-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.bls-now-playing {
  flex: 1;
  text-align: center;
  font-size: 0.88em;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Current track indication in the existing <ol> list ----
   Uses more than colour: bold weight, a yellow left border, and a
   screen-reader-only text label inserted by the JS. */
.bls-playlist li.bls-current-track {
  font-weight: bold;
  border-left: 5px solid #f6d142;
  background: rgba(23, 129, 198, 0.08);
  padding: 2px 0 2px 0.6em;
  margin-left: -0.6em;
  border-radius: 4px;
}

.bls-playlist li a:focus-visible {
  outline: 3px solid #1781c6;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Multi-part playlist layout (e.g. long lists split into a 2x2
   grid, as on the 270-story Thai BLS page) ---- */
.bls-playlist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}
.bls-section-heading {
  grid-column: 1 / -1;
  text-align: center;
  margin: 20px 0 8px;
}

.bls-playlist {
  font-size: 1.05em;
  text-align: left;
}
.bls-playlist--plain { /* added so JP playlist won't have 1,2,3 numbering on every <ol> */
  list-style: none;
  padding-left: 0;
}

.bls-nav-link {
  text-align: center;
  margin: 12px 0;
}

.bls-sr-now-playing {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}