/* Homepage-only styles with background image */

/* Only apply background image to the homepage (index.html) */
@supports (selector(body:has(> main > .overlay))) {
  body:has(> main > .overlay) {
    overflow: hidden;
    background-image: 
      linear-gradient(135deg, rgba(255, 20, 147, 0.3) 0%, rgba(0, 255, 255, 0.2) 50%, rgba(157, 78, 221, 0.3) 100%),
      url("./images/collage.webp");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
}

/* Fallback for browsers that don't support :has() - only apply to index.html */
body.homepage {
  overflow: hidden;
  background-image: 
    linear-gradient(135deg, rgba(255, 20, 147, 0.3) 0%, rgba(0, 255, 255, 0.2) 50%, rgba(157, 78, 221, 0.3) 100%),
    url("./images/collage.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Purple styling for patron content button */
.patron-content-btn {
  color: #9d4edd !important;
  font-family: 'Impact', 'Arial Black', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
}

.patron-content-btn:hover {
  color: #fff !important;
}