/* Hide summary image when details is open */
details.image-details[open] summary img {
  display: none;
}

/* Optional: remove summary spacing when open */
details.image-details[open] summary {
  padding: 0;
}
details.image-details summary img {
  transition: opacity 0.25s ease; 
}

details.image-details:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

details.image-details[open]:hover {
  opacity: 1;
	transform: translateY(0px);	
}

/* Override Gutenberg inline width on Details summary images */
.wp-block-details summary img {
  width: clamp(100px, 8vw, 185px) !important;
  height: auto !important;
}
/* Smooth Details open/close animation */
.wp-block-details {
  transition: all 200ms ease;
}
.wp-block-details > :not(summary) {
  overflow: hidden;
  transition:
    opacity 300ms ease,
    transform 300ms ease;
  opacity: 0;
  transform: translateY(-6px);
}

/* When open, reveal content */
.wp-block-details[open] > :not(summary) {
  opacity: 1;
  transform: translateY(0);
}
.wp-block-details[open] > :not(summary) {
  transition-delay: 80ms;
}
.wp-block-details summary:hover img {
  opacity: 0.8;
}
/* Make Astra header sticky */
.site-header,
#masthead {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Make thumbnail feel interactive */
.video-thumb {
  cursor: pointer;
}

/* Tighten spacing so image + details feel grouped */
.video-thumb + details {
  margin-top: 0.25rem;
}

/* Optional: subtle hover feedback */
.video-thumb:hover {
  opacity: 0.9;
}

/* PLAYER */
.video-player {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 2rem;
  aspect-ratio: 16 / 9;
}

.video-player iframe {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: block;
}

@media (max-width: 767px) {
  .video-player {
    position: sticky;
    top: 120px; /* match Astra mobile header */
    z-index: 1000;

    background: #111;
    padding: 0.75rem;
    border-radius: 12px;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .video-player {
    position: relative;
    top: auto;
    padding: 0;
    background: none;
    border-radius: 0;
    z-index: auto;
  }
}

@media (min-width: 768px) {
  .video-player {
    scroll-margin-top: 120px;
  }
}


/* MOBILE ONLY: when Astra mobile header is active */
.ast-header-break-point {

  /* When the mobile menu is visible */
  .ast-mobile-popup,
  .ast-mobile-menu {
    z-index: 9999;
  }

  /* Force the video player below the menu */
  .video-player {
    z-index: 1;
  }
}

/* When Astra mobile menu is open, disable sticky video */
.ast-header-break-point
.ast-mobile-popup.ast-mobile-popup-active
~ .site-content .video-player {
  position: relative;
}

.ast-header-break-point.ast-mobile-menu-active .video-player {
  position: relative;
}


/* GRID */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .videos-grid {
    grid-template-columns: 1fr;
  }
}

/* THUMBNAILS */
.video-thumb {
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.video-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

.video-thumb:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.video-thumb.is-active {
  opacity: 0.6;
  pointer-events: none;
}
/* Video thumbnail title overlay */
.video-thumb {
  position: relative;
  overflow: hidden;
}

/* Title overlay */
.video-thumb .video-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  margin: 0;

  text-align: center;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.3;
  color: #fff;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.0)

	);

  pointer-events: none;
}

body.page-id-53 {
  background-image: url(https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.page-id-925 {
  background-image: url(https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.page-id-38 {
  background-image: url('https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.page-id-117 {
  background-image: url(https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.page-id-1013 {
  background-image: url(https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.page-id-2686 {
  background-image: url(https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.page-id-2705 {
  background-image: url(https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.page-id-29 {
  background-image: url(https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.woocommerce {
  background-image: url('https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.woocommerce-cart {
  background-image: url('https://calebjohnmatthews.com/wp-content/uploads/2026/01/Beige-Background-3rd-Attempt-even-lighter-vignette.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}


/* overscroll fix on mobile */
html,
body {
  background-color: #E6CEB3; /* your actual content background color in global settings */
  overscroll-behavior-y: contain;
}

.site-footer,
.main-navigation,
.ast-mobile-header {
  background-clip: padding-box;
}

@media (max-width: 1024px) {
  body {
    background-attachment: scroll !important;
  }
}

.ast-mobile-header {
  will-change: transform;
}

.woocommerce-result-count,
.woocommerce-ordering {
    display: none;
}

.woocommerce-breadcrumb {
    display: none;
}

/* Hide Add to Cart buttons on shop and category pages */
.woocommerce ul.products li.product .button {
    display: none;
}

/* Disable WooCommerce product image zoom on hover */
.woocommerce-product-gallery__image img {
    pointer-events: none;
}

/* Remove zoom cursor and transitions */
.woocommerce-product-gallery__image img {
    cursor: default !important;
    transition: none !important;
}

/* Hide WooCommerce zoom overlay */
.woocommerce-product-gallery__trigger,
.zoomImg {
    display: none !important;
}

/* --- WooCommerce Empty Cart: Kill message + icon (ALL variants) --- */
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block,
.woocommerce-cart .wp-block-woocommerce-cart-empty-block {
    display: none !important;
}

/* --- Remove empty-cart product suggestions / “New in store” --- */
.woocommerce-cart .cross-sells,
.woocommerce-cart .products,
.woocommerce-cart .wc-block-grid,
.woocommerce-cart section.products {
    display: none !important;
}

/* Hide cart icon outside WooCommerce pages */
body:not(.woocommerce):not(.woocommerce-page) .ast-header-woo-cart {
    display: none !important;
}

.ast-header-woo-cart[data-cart_count="0"] {
    display: none !important;
}

.hero-cover {
  min-height: 65vh;
  background-image: url("https://calebjohnmatthews.com/wp-content/uploads/2026/01/Studio-Sidewall-noise-HALF-TINT.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: center;  /* horizontal centering */
  text-align: center;
  padding: 2rem;
}

/* Active (currently playing) track */
.ai-wrap .ai-track.ai-track-active {
  background-color: #092e3d;
  color: #ffffff;
}

/* Hover (non-active) track */
.ai-wrap .ai-track:hover:not(.ai-track-active) {
  background-color: #355866;
  color: #ffffff;
}

/* Paused state */
.ai-wrap .ai-audio-control[aria-pressed="false"] {
  background-color: #355866;
}

/* Playing state */
.ai-wrap .ai-audio-control[aria-pressed="true"] {
  background-color: #355866;
}

/* Hover (either state) */
.ai-wrap .ai-audio-control:hover {
  background-color: #809ba6;
}

/* Track progress (played portion) */
.ai-wrap .ai-track-progress {
  background-color: #b3d7e5;
}

/* Volume bars (active / current volume) */
.ai-wrap .ai-volume-bar.ai-volume-bar-active::before {
  background-color: #b3d7e5;
}

/* Shared details panel (desktop only) */
@media (min-width: 768px) {
  #music-details-panel {
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: #00000000;
    border-radius: 12px;
    min-height: 3rem;
  }

  /* Hide inline details content on desktop */
  details.music-item[open] {
    display: none;
  }
}

#music-details-panel {
  scroll-margin-top: 140px; /* match header + breathing room */
}

/* Subtle player reaffirmation */
.player-fade {
  animation: playerFadeIn 160ms ease-out;
}

@keyframes playerFadeIn {
  from {
    opacity: 0.85;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-shadow-effect {
    text-shadow: 1px 1px 1px #3c2915;
}