/* Video Lyric css */
.youtube-video-wrapper {
  max-width: 760px;
  margin: 50px auto;
  position: relative;
}
.yt-bg-image {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.yt-overlay {
  border-image: linear-gradient(rgb(7 140 226 / 85%), rgb(109 20 71 / 85%)) fill 1;
}
.yt-play-button {
  position: absolute;
  width: 80px;
  height: 80px;
  inset: 0;
  margin: auto;
  transition: all 500ms ease-in;
}
.yt-play-button:hover {
  transform: scale(1.2);
  transition: all 500ms ease-out;
}

.lazy-video {
  width: 100%;
  line-height: 0;
  margin-bottom: 2rem;
}
.lazy-video a:after {
  left: calc(50% + 5px);
}
.lazy-video .video-wrapper iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.lazy-video-thumbnail {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.3s;
  transition-property: all;
  border-width: 0;
  width: 100%;
  display: inline-block;
  position: relative;
}
.video-wrapper {
  margin-top: 0;
  margin-bottom: 2rem;
  padding-bottom: 56.25%;
  height: 0;
  aspect-ratio: 16 / 9;
  position: relative;
}

/* Single lyric text */
.single-lyrics-songwriters {
  margin-bottom: 1.25rem;
}

/* Lyric Info */
.lyric-info {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  background-color: #fbfbfb;
  border-radius: 12px;
  margin-top: 2rem;
  padding: 2rem;
}

.lyric-info p {
  margin: 0;
}

/* Print Button */
.print-button-wrap {
  margin-bottom: 1.25rem;
}

.print-button {
  display: flex !important;
  margin-top: 1.25rem;
  gap: 6px;
}

svg.print-icon {
  width: 14px;
  margin-right: 2px;
}

/* 1. Global Reset and Print Optimization */
/* Whitelist ONLY the article content */
@media print {
  /* 1. Global Reset (Keep this as is) */
  body * {
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    box-shadow: none !important;
  }

  /* 2. Whitelist the Structural Elements and the Article (Crucial Addition) */

  /* Ensure the body and its direct containers are visible */
  body,
  .wd-page-wrapper, /* WordPress Main Wrapper (Check your theme's HTML) */
    .wd-page-content,          
    #main-content,       /* Main Content Area */
    .wd-content-area {
    /* Inner Content Wrapper */
    display: block !important;
    visibility: visible !important;
    /* Ensure no margin/padding is inherited from the hidden layout */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Target the article and ALL its children to show the actual text */
  article,
  article * {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    float: none !important;
    page-break-inside: auto;
  }

  /* 3. Revert specific elements back to inline */
  article a,
  article span,
  article strong,
  article em {
    display: inline !important;
    visibility: visible !important;
  }

  /* Hide unnecessary sections in the article */
  .button,
  .lazy-video,
  .lyric-info {
    display: none !important;
  }
}