/*
 * IQTL Musician Theme – Override Layer
 *
 * Loaded after style.css to ensure Customizer typography wins over:
 * - WordPress Global Styles (block themes / presets)
 * - Page builders that apply base typography rules
 */

/* Ensure the root background/text uses the theme tokens */
:root {
  color-scheme: dark;
}

/*
 * Force body text elements to inherit the body font stack.
 * (The actual stack is set via wp_head inline CSS from Customizer settings.)
 */
html body,
html body .site,
html body .site-content,
html body .entry-content,
html body .wp-site-blocks,
html body .wp-block-post-content,
html body .wp-block-group,
html body .wp-block-cover__inner-container {
  font-family: inherit !important;
}

html body p,
html body li,
html body a,
html body span,
html body small,
html body strong,
html body em,
html body blockquote,
html body pre,
html body code,
html body label,
html body dt,
html body dd,
html body figcaption,
html body cite,
html body time,
html body input,
html body textarea,
html body select,
html body button {
  font-family: inherit !important;
}

/* Keep headings/title elements controlled by the theme typography settings */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .hero__headline,
html body .section__title {
  font-family: inherit; /* actual font-family is applied inline with !important */
}

/* Prevent global styles from forcing different fonts on buttons/links */
html body .wp-element-button,
html body .wp-block-button__link,
html body .button,
html body .btn {
  font-family: inherit !important;
}


/* Screen-reader only utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* === IQTL Featured Track: portrait video tile (autoplay muted, tap-to-unmute) === */

/* Give the card enough width for a ~440px-tall portrait tile */
.hero__player-card {
  max-width: 310px;
}

/* Match the portrait tile width (9:16 at 440px tall ≈ 248px wide) */
.hero__player-embed {
  width: 260px;
  max-width: 100%;
}

/* Force the portrait tile height on desktop (keeps it clean + intentional) */
.hero__embed--portrait {
  height: 440px;
  width: auto;
  aspect-ratio: 9 / 16;
}

/* Ensure direct video fills the portrait tile without letterboxing */
.hero__embed--portrait .hero__video-embed {
  object-fit: cover;
}

/* === Featured Track: always-visible mute indicator (no button chrome) === */

/* Wrapper ensures overlays position correctly */
.hero__embed--portrait[data-featured-video] {
  position: relative;
}

/* Keep the video non-interactive so taps hit the wrapper */
.hero__embed--portrait[data-featured-video] .hero__video-embed {
  pointer-events: none;
}

.hero__video-mute-toggle {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  opacity: 1;
}

.hero__video-mute-toggle:focus {
  outline: 2px solid rgba(255,255,255,0.25);
  outline-offset: 2px;
}

/* Icon swapping via data-muted */
.hero__video-mute-toggle .hero__icon { display: none; }
.hero__embed--portrait[data-featured-video][data-muted="true"] .hero__video-mute-toggle .hero__icon--muted { display: block; }
.hero__embed--portrait[data-featured-video][data-muted="false"] .hero__video-mute-toggle .hero__icon--unmuted { display: block; }

/* Center play/pause uses SVG icons too */
.hero__video-center-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  color: rgba(255,255,255,0.92);
}

[data-featured-video]:hover .hero__video-center-toggle { opacity: 1; }
@media (max-width: 960px) { .hero__video-center-toggle { opacity: 1; } }

.hero__video-center-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
  opacity: 1;
}

.hero__video-center-toggle .hero__icon { display: none; }
.hero__video-center-toggle.is-playing .hero__icon--pause { display: block; }
.hero__video-center-toggle:not(.is-playing) .hero__icon--play { display: block; }

/* Restart control: icon-only, consistent */
.hero__video-controls {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.hero__video-control {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
}

.hero__video-control:focus {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}

/* Tap-to-unmute: no button chrome. We only show a subtle icon indicator. */

@media (max-width: 640px) {
  .hero__embed--portrait {
    height: 380px;
  }
}