/*
 * Blog-Maker podcast episode player, kato-paphos-apartment.com receiver
 * (Fix 3/3 of the podcast-player redesign, 2026-08-25).
 *
 * blog-article.php renders the audio-via-<video>-workaround block as
 * figure.bm-podcast-player (same markup as every other Blog-Maker
 * receiver, see v11/src/lib/podcast-audio/player-html.ts), and
 * podcast-enhancer.js (enqueued alongside this file) replaces the native
 * <audio controls> with the same play/skip/seek control bar used on
 * blog-maker.com, oa54321 and oliver-albrecht.com. Unlike those two,
 * this site is theme-aware: it reuses kato-paphos's own CSS custom
 * properties (--gold/--dark/--cream, see blog-article.php's :root) so
 * the player matches the site's own palette instead of importing
 * myLandingpage's fixed brand hex values.
 */

.bm-podcast-player {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(26, 26, 46, 0.1);
  border-radius: 12px;
  background: var(--cream, #f7f3ec);
}

.bm-podcast-player figcaption {
  margin: 0 0 0.5rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-light, #555);
}

.bm-podcast-player audio {
  display: block;
  width: 100%;
  height: 40px;
}

.bm-podcast-player p {
  margin: 0.625rem 0 0;
}

.bm-podcast-player p a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gold-dim, #b89d5e);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bm-podcast-player p a:hover {
  color: var(--dark, #1a1a2e);
}

.bm-podcast-player p a:focus-visible {
  outline: 2px solid var(--gold-dim, #b89d5e);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Enhancer state (js/podcast-enhancer.js): once it runs it removes the
   native `controls` attribute and appends .bm-podcast-controls as a
   sibling of the <audio>. 132px covers the desktop single-row control
   bar; at mobile widths it wraps to two rows (measured 223px on the
   equivalent Blog-Maker component, see v11/src/app/globals.css). */
.bm-podcast-player {
  min-height: 132px;
}
@media (max-width: 640px) {
  .bm-podcast-player {
    min-height: 240px;
  }
}
.bm-podcast-player audio[data-bm-enhanced] {
  display: none;
}
.bm-podcast-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.bm-podcast-controls .bm-podcast-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(26, 26, 46, 0.08);
  color: var(--dark, #1a1a2e);
  cursor: pointer;
}
.bm-podcast-controls .bm-podcast-btn:hover {
  background: rgba(26, 26, 46, 0.14);
}
.bm-podcast-controls .bm-podcast-btn:active {
  background: rgba(26, 26, 46, 0.2);
}
.bm-podcast-controls .bm-podcast-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.bm-podcast-controls .bm-podcast-btn:focus-visible {
  outline: 2px solid var(--gold-dim, #b89d5e);
  outline-offset: 2px;
}
.bm-podcast-controls .bm-podcast-play {
  width: 44px;
  height: 44px;
  background: linear-gradient(to bottom right, var(--gold, #e0c181), var(--gold-dim, #b89d5e));
  color: var(--dark, #1a1a2e);
}
.bm-podcast-controls .bm-podcast-play:hover {
  /* .bm-podcast-btn:hover ties specificity (0,3,0 vs 0,3,0) and sets
     background, which this rule never declared, so hovering the play
     button fell back to the generic grey btn hover fill (found live,
     2026-08-25). Repeating the base gradient here, later in source
     order at equal specificity, wins for that property. */
  background: linear-gradient(to bottom right, var(--gold, #e0c181), var(--gold-dim, #b89d5e));
  filter: brightness(0.95);
}
.bm-podcast-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.bm-podcast-play .bm-podcast-icon-pause {
  display: none;
}
.bm-podcast-play.is-playing .bm-podcast-icon-play {
  display: none;
}
.bm-podcast-play.is-playing .bm-podcast-icon-pause {
  display: block;
}
.bm-podcast-mute .bm-podcast-icon-muted {
  display: none;
}
.bm-podcast-mute.is-muted .bm-podcast-icon-vol {
  display: none;
}
.bm-podcast-mute.is-muted .bm-podcast-icon-muted {
  display: block;
}
.bm-podcast-skip {
  width: auto;
  min-height: 44px;
  padding: 0 10px;
  gap: 2px;
}
.bm-podcast-skip .bm-podcast-icon {
  width: 18px;
  height: 18px;
}
.bm-podcast-skip-n {
  font-size: 10px;
  font-weight: 700;
}
.bm-podcast-time {
  flex: 0 0 auto;
  min-width: 32px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-light, #555);
}
.bm-podcast-seek {
  flex: 1 1 auto;
  min-width: 60px;
  height: 4px;
  accent-color: var(--gold-dim, #b89d5e);
  cursor: pointer;
}
.bm-podcast-seek:disabled {
  cursor: default;
  opacity: 0.5;
}
.bm-podcast-seek:focus-visible {
  outline: 2px solid var(--gold-dim, #b89d5e);
  outline-offset: 2px;
}
.bm-podcast-mute {
  margin-left: 4px;
  min-width: 44px;
  min-height: 44px;
}