/*
Theme Name: Dallas Jay Music
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.0.1761695627
Updated: 2025-10-28 23:53:47


	/* BODY */
body {overflow-x:hidden}

/* CONTENT HEADINGS */
h1::before,h2::before {content: ''; display: inline-block;width: 24px;height: 24px;background-image: url('/wp-content/uploads/2025/12/star.png');background-size: contain;background-repeat: no-repeat;background-position: center !important;margin-right: 5px;position:relative;top:-5px}
h1::after,h2::after {content: '';  display: inline-block;width: 24px;height: 24px;background-image: url('/wp-content/uploads/2025/12/star.png');background-size: contain;background-repeat: no-repeat;background-position: center;margin-left: 5px;position:relative;top:-5px}
.subtitle {text-transform: uppercase;margin-top:-25px;font-weight: 500}		
h2 {margin-bottom:0px}

/* HOME SECTIONS */
.section-albums, .section-vote, .section-videos, .section-about, .section-follow {padding: 35px}
.section-hero {margin:0px 0px -35px;padding:0px}
.section-follow {margin:0px 0px 0px 0px;position:relative}
.section-albums .album-title {display: none}
.section-albums {padding-top: 0px;}
.section-albums .subtitle {margin-bottom:0px}
.section-vote img {margin:10px 0px -10px 0px}
.tracklist-az {border-radius:4px}

@media screen and (max-width:768px) {
    h1, h2 {font-size:40px}
    .section-albums h1 {margin-top:-60px}
    .section-albums .jet-listing-grid--blocks {margin-top:-50px }
    .section-albums .album-ctas {margin-top: -30px}
    .section-albums .album-ctas a.button {width:80%;min-width:48px !important;text-align: center !important;min-height:48px;justify-content: center}
}


/* ROUND IMAGE CORNERS*/
.section-albums img, .section-vote img, .section-about img, .srp_swiper-album-art, .section-contact,.album-cover {border-radius:4px !important}
.section-vote .subtitle {margin:0px !important}
.section-about {margin-bottom:-30px}
/* BUTTONS */
.button, .wp-block-button__link, form button {padding: 10px 40px !important;border-radius:3px;color:var(--ivory-text) !important;font-size:24px !important; transform: scale(1);transform-origin: center;will-change: transform;/*transition: all 0.3s ease-in-out;*/ transition: transform 0.22s cubic-bezier(.25,.8,.25,1), 
                box-shadow 0.22s cubic-bezier(.25,.8,.25,1);}				
.button:hover, .wp-block-button__link:hover, form button  { transform: scale(1.08) translateY(-1px);/*box-shadow: 0 2px 6px rgba(0,0,0,0.18);*/box-shadow: 0 3px 8px rgba(0,0,0,0.22);}

.nextend-bullet-bar {margin-top:20px !important;position: relative;top:25px;}
.section-videos .wp-block-button {margin-top:30px}
/* STEAMING BUTTONS */
/* Wrapper on album cards */
.album-ctas {display: flex;flex-wrap: wrap;gap: 10px;margin-top: -5px;}
.album-ctas .button, .album-ctas .button.ghost {  display: inline-flex;align-items: center;padding: 10px 14px !important;font-size: 13px !important;font-weight: 600;font-family: 'Inter', 'Montserrat', sans-serif;text-decoration: none;border-radius: 3px;border: none;cursor: pointer;transition: transform 0.22s cubic-bezier(.25,.8,.25,1), 
                box-shadow 0.22s cubic-bezier(.25,.8,.25,1); line-height: 1;transform: scale(1);transform-origin: center;will-change: transform;}

/* Listen on Site (primary button) */
.album-ctas .button {background: #1f1f1f;color: #fff;transition: transform 0.22s cubic-bezier(.25,.8,.25,1), box-shadow 0.22s cubic-bezier(.25,.8,.25,1);}
.album-ctas .button:hover {background: #333;transform: scale(1.08);box-shadow: 0 2px 6px rgba(0,0,0,0.18);}

/* Spotify */
.album-ctas .button.ghost[href*="spotify"] {background: #1DB954;color: #000;}
.album-ctas .button.ghost[href*="spotify"]:hover {background: #17a74a;}

/* Apple */
.album-ctas .button.ghost[href*="apple"] {background: #000;color: #fff;}
.album-ctas .button.ghost[href*="apple"]:hover {background: #222;}

/* YouTube */
.album-ctas .button.ghost[href*="youtube"], .album-ctas .button.ghost[href*="youtu.be"] {background: #FF0000;color: #fff;}
.album-ctas .button.ghost[href*="youtube"]:hover,.album-ctas .button.ghost[href*="youtu.be"]:hover {background: #D80000;}

/* Ensure all buttons match height visually */
.album-ctas .button,.album-ctas .button.ghost {height: 36px;}

/* ALBUM COVERS */
.album-cover {
    transform: perspective(800px) rotateX(0) rotateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.album-cover:hover {
    transform: perspective(800px) rotateX(3deg) rotateY(-4deg);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

.album-card {
    position: relative;
}

.album-card::before{
  content:none !important;
}


/* SONG DETAILS Button – Featured Tracks Carousel */
.song-store.sr_store_wc_round_bt {
	position: relative;top: -75px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 18px !important;
    height: 36px !important;
    min-width: 120px;
    background: #1f1f1f !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 3px !important;  /* subtle squared corners */
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    gap: 6px;
    border: none !important;
    cursor: pointer;
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(.25,.8,.25,1), 
                box-shadow 0.22s cubic-bezier(.25,.8,.25,1);
}

/* Hover Animation */
.song-store.sr_store_wc_round_bt:hover {
    transform: scale(1.08) translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.22);
    background: #333 !important;
}

/* Ensure icon doesn't break spacing */
.song-store.sr_store_wc_round_bt i {
    display: none !important; /* hide Sonaar's empty icon */
}

/* Label styling */
.song-store.sr_store_wc_round_bt .srp_cta_label {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

						


/* --- FEATURED TRACKS: SONG DETAILS OVERLAY BUTTON --- */

/* Base styling for the Song Details button on cover art */
.srp_swiper-album-art .song-store.sr_store_wc_round_bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 3px;
    border: 1px solid var(--ivory) !important;;
    background: transparent !important;
    color: var(--ivory);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;

    /* visibility defaults (desktop) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Remove Sonaar’s icon and let label control the look */
.srp_swiper-album-art .song-store.sr_store_wc_round_bt i {
    display: none;
}

.srp_swiper-album-art .song-store.sr_store_wc_round_bt .srp_cta_label {
    color: inherit;
    font: inherit;
}

/* Hover style: simple fill, no scale */
.srp_swiper-album-art .song-store.sr_store_wc_round_bt:hover {
    background: #ffffff !important;
    color: #000000 !important;
	transform:scale(1) !important;
}

/* Show the button when hovering the slide (desktop) */
.srp_swiper-album-art:hover .song-store.sr_store_wc_round_bt {
    opacity: 1;
    pointer-events: auto;
}

/* Stack the titles + button nicely under the play button */
.srp_swiper-album-art .srp_swiper-titles {
    position: relative;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    z-index: 3;
}

/* Keep the track title visible; button sits right under it */
.srp_swiper-album-art .srp_swiper-track-title {
    display:none
}

/* Make store-list behave like a normal block under the title */
.srp_swiper-album-art .store-list {
    display: block;
}

/* On mobile: always show the button */
@media (max-width: 767px) {
    .srp_swiper-album-art .song-store.sr_store_wc_round_bt {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Hide index number, album title, and artist on slides */
.srp_swiper-album-art .srp_index,
.srp_swiper-album-art .srp_swiper-title,
.srp_swiper-album-art .srp_swiper-track-artist {
    display: none;
}

/* Hide the ellipsis icon “…” menu – we only want the button */
.srp_swiper-album-art .song-store-list-menu > i {
    display: none;
}

/* Hide descriptions under each track in the list */
.srp_tracklist .srp_track_description {
    display: none;
}

/* Hide store ellipsis/button in the text tracklist (if you don't need it) */
.srp_tracklist .store-list {
    display: none;
}

/* Optional: hide some mini meta under the main player if it shows */
.srp_miniplayer_metas,
.srp_player_meta {
    display: none;
}

/* New Music Page/Section */
.section-new-music .srp_miniplayer_metas,
.srp_player_meta {
    display: block;
}
.section-new-music .srp_miniplayer_metas,
.srp_player_meta h3 {
    margin:-50px 0px ;
    position: relative
}

.section-new-music .srp_artistname {font-family: Roadhawk !important;text-transform:uppercase;font-size:1em !important;margin:0px 0px 35px 0px}
.section-new-music {border-radius: 4px}
.jet-form-builder__label-text {font-weight: 600;text-transform: uppercase;margin-bottom: 3px}
.jet-form-builder-row {margin-bottom: 10px}
.jet-form-builder-row .for-radio {margin:-5px  0px !important;padding: 0px !important;}
.section-new-music button {margin: 0 auto;justify-content: center !important;}
.trackrelease::before{content: url("/wp-content/uploads/2025/12/profile-round-45.png"); margin: 15px 10px 0px 0px;position:relative;top:8px }

/* FOLLOW SECTION – SOCIAL ICON ROW */
.follow-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* Individual icon links */
.follow-icons .ico {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px; /* subtle, squared – matches your 3px vibe but a bit softer for icons */
    border: 1px solid rgba(255, 255, 255, 0.45);
    text-decoration: none;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;

    /* motion */
    transform: scale(1);
    transform-origin: center;
    transition:
        transform 0.22s cubic-bezier(.25,.8,.25,1),
        box-shadow 0.22s cubic-bezier(.25,.8,.25,1),
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

/* Make the SVGs follow the link color */
.follow-icons .ico svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Hover state – simple, clean, on-brand */
.follow-icons .ico:hover {
    background: rgba(0, 0, 0, 0.22);
    border-color: #ffffff;
    transform: scale(1.08) translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Optional: focus outline for keyboard nav */
.follow-icons .ico:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Example if you add a custom class "follow-section" to the Group block */
.follow-section {
    padding: 40px 20px;
    color: #ffffff;
}

.follow-section h2,
.follow-section p {
    color: #ffffff;
}
		


/* HERO OVERLAY SETUP */
.hero {
  position: relative;       /* anchor for absolute overlays */
  overflow: hidden;         /* optional: prevents overlays spilling outside hero */
}

/* ensure the hero image itself behaves normally */
.hero .section-hero {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* overlay figures */
.hero .at-paper-sheilds,
.hero .at-battle-scars {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  pointer-events: none;     /* lets clicks pass through (remove if you want them clickable) */
}

/* horizontal placement */
.hero .at-paper-sheilds { left: 16%; }
.hero .at-battle-scars  { right: 17%; }

/* make sure the images don't blow up oddly */
.hero .at-paper-sheilds img,
.hero .at-battle-scars img {
  display: block;
  height: auto;
  max-width: 452px;         /* optional: cap at native width */
  width: clamp(180px, 18vw, 452px);  /* responsive sizing */
}

/* MOBILE: stack them + center so they don't collide */
@media (max-width: 768px) {
  .hero .at-paper-sheilds,
  .hero .at-battle-scars {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .hero .at-paper-sheilds { top: 40%; }
  .hero .at-battle-scars  { top: 62%; }
}

/* ===============================
   HERO OVERLAY – SUBTLE PULSE
   =============================== */

@keyframes heroPulse {
  0%   { transform: translateY(-50%) scale(1); }
  50%  { transform: translateY(-50%) scale(1.035); }
  100% { transform: translateY(-50%) scale(1); }
}

/* Paper Shields – slower, first */
.hero .at-paper-sheilds {
  animation: heroPulse 6s ease-in-out infinite;
}

/* Battle Scars – slightly offset so they don’t mirror each other */
.hero .at-battle-scars {
  animation: heroPulse 6s ease-in-out infinite;
  animation-delay: 1.2s;
}



/* ======================================================
   ALBUM SINGLE LAYOUT (CLEAN)
   - Right column background: dark navy
   - Column/card radius: 4px
   ====================================================== */

/* --- Layout wrapper --- */
.dj-album-single .dj-album-columns{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:2rem;

  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}

.dj-album-single .dj-album-left{  flex:1 1 60%; min-width:0; }
.dj-album-single .dj-album-right{ flex:1 1 40%; min-width:260px; }

/* --- Album cover image --- */
.dj-album-single .dj-album-cover img{
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.08);
}

/* --- Right column "details" card --- */
.dj-album-single .dj-album-details-card{
  background: var; /* <-- your new dark navy token */

  border-radius:4px;
  padding:1.25rem 1.5rem;
  width:100%;
}

.dj-album-single .dj-album-right h2{ margin-top:0 !important; }

/* --- Title + meta --- */
.dj-album-title{
  margin:0 0 .25rem 0;
  padding-top:0 !important;
}

.release-date{
  margin:.25rem 0 1rem;
  opacity:.9;
}

/* --- CTA buttons under cover (scoped to album only) --- */
.dj-album-single .album-ctas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  margin-top:.5rem;
}

.dj-album-single .album-ctas a{
  border:1px solid rgba(255,255,255,0.18) !important;
  text-decoration:none;
}

/* Let your global .button styling do the heavy lifting.
   Only add hover color if you want the album CTAs to pop. */
.dj-album-single .album-ctas a:hover{
  background:var(--accent2);
  color:var(--ivory);
}

/* --- Tracklist --- */
.dj-album-tracklist{
  margin:20px 0 80px 0;
}

.dj-album-tracklist h2{
  text-align:center;
  margin-bottom:0 !important;
}

/* --- Credits --- */
.album-credits-title,
.about-this-album-title{
  margin-bottom:0;
  font-family:Roadhawk;
  font-size:30px;
  text-transform:uppercase;
}

.album-credit{
  display:flex;
  gap:.75rem;
  align-items:center;
  margin:12px 0;
}

.album-credit .credit-avatar{
  width:48px;
  height:48px;
  border-radius:4px;
  object-fit:cover;
    border:none !important;
}

.album-credit-company{ font-weight:700; }
.album-credit-role{ opacity:.9; font-style:italic; }

.album-credit-link{
  color:var(--ivory);
  text-decoration:none;
}

.album-credit-link:hover{
  color:var(--firewave-orange);
}

/* --- Responsive --- */
@media (max-width: 980px){
  .dj-album-single .dj-album-columns{
    flex-wrap:wrap;
    padding:0 20px;
  }
  .dj-album-single .dj-album-left,
  .dj-album-single .dj-album-right{
    flex:1 1 100%;
    min-width:0;
  }
}

h6.album-credits-title {margin-top:-5px;margin-bottom:-12px}
.dj-firefox-note {display: none}
.dj-album-tracklist h2 {margin-bottom:10px !important;}
.album-credit-link {padding-left: 5px }
.album-credit-link::before {
  font-family: "Font Awesome 5 Free"; /* or "Font Awesome 6 Brands" */
  font-weight: 900; /* Use 900 for solid icons, 400 for regular/brands */
  content: "\f101"; /* Example Unicode for the user icon */
   position:relative;left: -5px
}
 .dj-album-single .album-cover {transform:none !important;}


/* =========================
   Song Vote Form (Plugin)
   ========================= */

/* Layout */
.djm-svf-form{
  max-width: 720px;
  margin: 0 auto;
}

/* Field spacing + labels */
.djm-svf-field{ margin: 0 0 18px; }
.djm-svf-label{
  display:block;
  margin: 0 0 10px;
  font-weight: 700;
}

/* Hide the first label (you already have an H3 above it) */
.djm-svf-label[for="song_choice"]{
  display: none !important;
}

/* Inputs: select, email input, textarea */
.djm-svf-form .djm-svf-select,
.djm-svf-form .djm-svf-input,
.djm-svf-form input[type="email"].djm-svf-input,
.djm-svf-form .djm-svf-textarea{
  width: 100%;
  padding: 14px 14px;
  font-size: 18px;

  /* Consistent rounding */
  border-radius: 6px !important;

  /* Cleaner look (no border) */
  border: none !important;

  /* Your dark field style */
  background: rgba(0,0,0,0.28) !important;

  /* Force ivory text (fixes the “dark email text” issue) */
  color: var(--ivory-text) !important;

  box-sizing: border-box;
}

/* Placeholders */
.djm-svf-form .djm-svf-input::placeholder,
.djm-svf-form .djm-svf-textarea::placeholder{
  color: rgba(255,255,255,0.65) !important;
}

/* Keep textarea consistent on focus (prevents white background / dark text) */
.djm-svf-form .djm-svf-textarea,
.djm-svf-form .djm-svf-textarea:focus{
  background: rgba(0,0,0,0.28) !important;
  color: var(--ivory-text) !important;
  caret-color: var(--ivory-text) !important;
}

/* Focus: use glow instead of border */
.djm-svf-form .djm-svf-select:focus,
.djm-svf-form .djm-svf-input:focus,
.djm-svf-form .djm-svf-textarea:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(218,90,71,0.25);
}

/* Submit button: stop forcing full width, let your global button style handle it */
.djm-svf-form .djm-svf-button{
  width: auto !important;
  max-width: none !important;
  display: inline-flex;
}

/* Download page */
.djm-svf-download{
  text-align:center;
  padding: 50px 20px;
}
.djm-svf-download-note{ opacity: .75; }

/* Download link styled as button */
.djm-svf-download-button{
  padding: 10px 40px !important;
  border-radius: 3px;
  color: var(--ivory-text) !important;
  font-size: 30px !important;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
  transition: transform 0.22s cubic-bezier(.25,.8,.25,1),
              box-shadow 0.22s cubic-bezier(.25,.8,.25,1);
  display: inline-block;
  text-decoration: none !important;
}
.djm-svf-download-button:hover{
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.22);
}

/* Honeypot */
.djm-svf-hp{ display:none !important; }

/* Center submit button */
.djm-svf-form{
  text-align: center;
}
.wpcf7-response-output{
  border: none;
  background: rgba(0,0,0,0.35);
  color: var(--ivory-text);
  border-radius: 6px;
  padding: 12px 16px;
}

.section-contact img {margin:-15px 0px 10px 0px}






/* =========================================================
   SINGLE SONGS — CLEAN + CONSOLIDATED (Portal BG via --portal-bg)
   Keep this as the ONLY Single Songs block at bottom of style.css
   ========================================================= */

/* =========================
   Layout
   ========================= */

.songs-subtitle {margin:-18px 0px 20px 0px;font-size:.8em;font-style: italic }

body.single-songs .r5-song-title{
  margin: 0 0 12px;
  text-align: center;
}

body.single-songs .r5-song-grid{
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); /* ~65/35 */
  gap: 24px;
  align-items: start;
  margin-bottom: 50px; /* space above .section-follow */
}

body.single-songs .r5-song-grid > *{ min-width: 0; }

body.single-songs .r5-song-left,
body.single-songs .r5-song-right{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1024px){
  body.single-songs .r5-song-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 60px;
  }
}

/* Details grid */
body.single-songs .r5-details-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 1199px){
  body.single-songs .r5-details-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

body.single-songs .r5-album-thumb img{
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

body.single-songs .r5-meta-list{
  font-size: 16px;
  line-height: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.single-songs .r5-meta-line{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

body.single-songs .r5-meta-line i{
  width: 18px;
  margin-top: 2px;
  opacity: .9;
}

body.single-songs .r5-desc-title{ margin: 18px 0 8px; }

@media (max-width: 600px){
  body.single-songs .r5-meta-list{
    font-size: 15px;
    line-height: 1.25em;
  }

  body.single-songs .r5-lyrics-btn.button{
    width: 100%;
    justify-content: center;
  }

  body.single-songs .album-ctas{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.single-songs .album-ctas .button{
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   Portal Frame (BG via --portal-bg)
   ========================= */

body.single-songs .r5-portal-frame{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  min-height: clamp(640px, 68vh, 920px);
}

body.single-songs .r5-portal-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--portal-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 2200px){
  body.single-songs .r5-portal-frame::before{
    filter: blur(36px) saturate(1.25) contrast(1.1);
  }
}

/* Player above portal bg */
body.single-songs .r5-song-player{
  position: relative;
  z-index: 5;
  margin-top: 50px;
  padding-bottom: 140px; /* space for shockwave INSIDE portal */
}

@media (max-width: 1024px){
  body.single-songs .r5-song-player{ margin-top: 24px; }
  body.single-songs .r5-portal-frame{ min-height: auto; }
}
@media (max-width: 1199px){
  body.single-songs .r5-song-player{ padding-bottom: 90px; }
}
@media (max-width: 600px){
  body.single-songs .r5-song-player{ margin-top: 16px; }
}

/* =========================
   Sonaar: force 1-column, remove phantom playlist column (keep in DOM)
   ========================= */

body.single-songs .r5-song-left .iron-audioplayer{
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
}

/* Force Sonaar grid to be 1 column + center immediately */
body.single-songs .r5-song-left .sonaar-grid{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  width: 100% !important;
}

/* Keep playlist in DOM for JS, but remove it from layout */
body.single-songs .r5-song-left .sonaar-grid > .playlist{
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide playlist title/subtitle */
body.single-songs .r5-song-left .sr_it-playlist-title,
body.single-songs .r5-song-left .srp_subtitle{
  display: none !important;
}

/* Artwork wrapper MUST shrink-wrap so glow doesn't go full width */
body.single-songs .r5-song-left .sonaar-Artwort-box{
  position: relative !important;
  display: inline-block !important;   /* key: shrink to artwork */
  width: fit-content !important;      /* key: stop full-width glow */
  max-width: 100% !important;
  margin: 0 auto !important;
  z-index: 10;
  isolation: isolate;                 /* keeps neon contained */
}

/* Artwork frame (anchor for layout) */
body.single-songs .r5-song-left .album-art{
  position: relative !important;
  z-index: 12 !important;
  display: inline-block !important;   /* shrink-to-fit */
  width: auto !important;
  transform: translateZ(0);
  filter: saturate(1.05) contrast(1.02);
}

/* Image stays responsive + site radius */
body.single-songs .r5-song-left .album-art img{
  display: block !important;
  width: 100% !important;
  max-width: 1024px !important;       /* desktop cap */
  height: auto !important;
  border-radius: 4px !important;      /* match site */
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04);
}

/* Under 1200px, don't allow internal columns */
@media (max-width: 1199px){
  body.single-songs .r5-song-left .srp_player_grid{
    grid-template-columns: 1fr !important;
  }
  body.single-songs .r5-song-left .album-art img{
    max-width: 100% !important;
  }
}

/* =========================
   Play button overlay: lock center (no shift on hover)
   ========================= */

body.single-songs .r5-song-left .sonaar-Artwort-box .control{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: 40 !important;
}

body.single-songs .r5-song-left .sonaar-Artwort-box .control .play{
  position: relative !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 45 !important;
}

/* Only opacity transitions (no layout/position shifts) */
body.single-songs .r5-song-left .sonaar-Artwort-box,
body.single-songs .r5-song-left .sonaar-Artwort-box *{
  transition: opacity .15s ease !important;
}

@media (hover:hover){
  body.single-songs .r5-song-left .sonaar-Artwort-box:hover .control .play{
    opacity: 1 !important;
  }
}

/* =========================
   Shockwave / Spectrum
   IMPORTANT: Spectrum lives inside .album-player (do NOT hide it)
   Move DOWN 156px from your previous working position
   ========================= */

/* Bring album-player back + position it */
body.single-songs .r5-song-left .iron-audioplayer .album-player{
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -121px !important;          /* 35px -> moved DOWN 156px */
  z-index: 25 !important;
  pointer-events: none !important;
}

/* On tablet/mobile, keep it a bit higher (but still moved down) */
@media (max-width: 1199px){
  body.single-songs .r5-song-left .iron-audioplayer .album-player{
    bottom: -66px !important;         /* 90px -> moved DOWN 156px */
  }
}

/* The plugin hard-sets 33px inline height — override so the canvas can render */
body.single-songs .r5-song-left .iron-audioplayer .album-player .player.sr_player__inline{
  height: 160px !important;
  min-height: 160px !important;
  position: relative !important;
}

/* Force spectrum visible */
body.single-songs .r5-song-left .iron-audioplayer .srp_spectrum_container{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: 160px !important;
  width: 100% !important;
}

body.single-songs .r5-song-left .iron-audioplayer .srp_spectrum_container canvas{
  display: block !important;
  width: 100% !important;
  height: 160px !important;
}

/* Hide ONLY the waveform/progress UI (not the spectrum) */
body.single-songs .r5-song-left .iron-audioplayer .sr_progressbar,
body.single-songs .r5-song-left .iron-audioplayer .wave,
body.single-songs .r5-song-left .iron-audioplayer .sonaar_fake_wave,
body.single-songs .r5-song-left .iron-audioplayer .sonaar_wave_base,
body.single-songs .r5-song-left .iron-audioplayer .sonaar_wave_cut{
  display: none !important;
}

/* =========================
   FIREWAVE NEON PORTAL GLOW (ONLY around artwork/player)
   (No glow on portal parent)
   ========================= */

/* Neon frame layers wrap the SHRINK-WRAPPED artwork box */
body.single-songs .r5-song-left .sonaar-Artwort-box::before,
body.single-songs .r5-song-left .sonaar-Artwort-box::after{
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* Crisp neon edge */
body.single-songs .r5-song-left .sonaar-Artwort-box::before{
  inset: -10px;
  border-radius: 8px; /* visually matches 4px art radius */
  border: 2px solid rgba(255, 140, 60, 0.95);
  box-shadow:
    0 0 10px rgba(255, 140, 60, 0.95),
    0 0 22px rgba(255, 110, 40, 0.80),
    0 0 44px rgba(255, 80, 30, 0.60);
  animation: firewaveNeonFlicker 4.8s ease-in-out infinite;
}

/* Outer glow bloom */
body.single-songs .r5-song-left .sonaar-Artwort-box::after{
  inset: -26px;
  border-radius: 14px;
  background:
    radial-gradient(circle at center,
      rgba(255, 120, 40, 0.48),
      rgba(255, 80, 30, 0.26) 45%,
      rgba(0,0,0,0) 72%);
  filter: blur(18px);
  opacity: 0.95;
  z-index: 1;
  animation: firewaveGlowBreath 6s ease-in-out infinite;
}

/* Make sure neon never blocks controls */
body.single-songs .r5-song-left .sonaar-Artwort-box::before,
body.single-songs .r5-song-left .sonaar-Artwort-box::after{
  pointer-events: none !important;
}

/* Subtle ambient spill on the image only (not the portal) */
body.single-songs .r5-song-left .album-art{
  box-shadow:
    0 20px 60px rgba(0,0,0,.60),
    0 0 90px rgba(255, 100, 40, 0.22);
}

/* Animations */
@keyframes firewaveNeonFlicker{
  0%   { opacity: 0.82; }
  18%  { opacity: 1; }
  22%  { opacity: 0.90; }
  40%  { opacity: 1; }
  72%  { opacity: 0.94; }
  100% { opacity: 0.82; }
}
@keyframes firewaveGlowBreath{
  0%   { opacity: 0.62; }
  50%  { opacity: 1; }
  100% { opacity: 0.62; }
}

@media (max-width: 1024px){
  body.single-songs .r5-song-left .sonaar-Artwort-box::after{
    inset: -18px;
    filter: blur(14px);
  }
}
@media (max-width: 600px){
  body.single-songs .r5-song-left .sonaar-Artwort-box::after{
    inset: -14px;
    filter: blur(12px);
  }
}

/* Optional hover lift */
@media (hover:hover){
  body.single-songs .r5-song-left .album-art:hover{
    transform: translateY(-4px) scale(1.005);
  }
}

/* =========================
   Lyrics modal (unchanged)
   ========================= */

body.single-songs .button.r5-lyrics-btn i{
  font-size: 23px;
  position: relative;
  top: -3px;
}

.r5-lyrics-modal{
  border: 0;
  padding: 0;
  width: 600px;
  max-width: calc(100% - 28px);
  border-radius: 16px;
  background: rgba(10, 12, 16, 0.96);
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.65);
}

.r5-lyrics-modal::backdrop{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}

.r5-lyrics-modal__inner{
  position: relative;
  padding: 20px 22px 18px;
}

.r5-lyrics-modal__title{
  margin: 0 0 14px;
  text-align: center;
}

.r5-lyrics-modal__body{
  max-height: min(70vh, 560px);
  overflow: auto;
  padding-right: 6px;
  line-height: 1.55em;
  text-align: center;
}

.r5-lyrics-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-size: 22px;
  opacity: .75;
}
.r5-lyrics-modal__close:hover{ opacity: 1; }

/* Meta list spacing */
.r5-meta-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Each meta row */
.r5-meta-line{
  display:flex;
  align-items:center;
  line-height:1.2;
}

/* The inline meta content inside a row */
.r5-meta-inline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;       /* allows wrap for long genre/mood lines */
  gap:0;
}

/* Keep small value/unit groups together (fixes "91" + "BPM" splitting) */
.r5-meta-inline .meta-pair{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

/* Icon spacing (replaces inline styles) */
.r5-meta-line i{
  margin-right:6px;
}
.r5-meta-inline i{
  margin-right:6px;
}

/* Your new controllable dot */
.r5-meta-inline .dot{
  display:inline-block;
  width:10px;           /* tweak this */
  text-align:center;
  margin:0 8px;         /* tweak this */
  opacity:.55;
}

/* Optional: slightly de-emphasize units like BPM */
.r5-meta-inline .meta-unit{
  opacity:.75;
  font-size:.7em !important;
	position: relative;
	top:-1px;
	left:2px
}

/* Lowercase only Genre + Mood values */
body.single-songs .r5-meta-line[title="Genre"] span,
body.single-songs .r5-meta-line[title="Mood"] span{
  text-transform: lowercase;
}

/* Optional: keep the first letter of each word lowercase too (no change), but
   if you ever want Title Case again, remove the rule above. */

/* Safety guard: never lowercase these */
body.single-songs .r5-meta-line[title="BPM"] span,
body.single-songs .r5-meta-line[title="Key"] span{
  text-transform: none;
}


span.dot{margin: 0 3px !important;color:var(--dark-navy)}


/* SONGS ARCHIVE */
/* Songs Grid (Gutenberg Query Loop) */
body.page .wp-block-query .wp-block-post-template.is-layout-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Tablet */
@media (max-width: 1024px){
  body.page .wp-block-query .wp-block-post-template.is-layout-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 767px){
  body.page .wp-block-query .wp-block-post-template.is-layout-grid{
    grid-template-columns: 1fr;
  }
}

/* Make featured images behave like covers */
body.page .wp-block-query .wp-block-post-featured-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.r5-songs-grid img{
  transition: transform .25s ease, box-shadow .25s ease;
}
.r5-songs-grid a:hover img{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.wp-block-post-featured-image img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Tracklist A–Z grid (Query Loop) - tablet columns */
@media (max-width: 1024px) and (min-width: 600px){
  .tracklist-az .wp-block-post-template.is-layout-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile stays 1 column (optional, only if needed) */
@media (max-width: 599px){
  .tracklist-az .wp-block-post-template.is-layout-grid{
    grid-template-columns: 1fr !important;
  }
}


/* =========================
   Mailchimp – Follow Section
   ========================= */

.r5-mailchimp {
  width: 100%;
}

.r5-mailchimp-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.r5-mailchimp input[type="email"] {
  width: min(420px, 100%);
  height: 46px;
  padding: 12px 14px;
  border-radius: 3px;
  border: 0px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #fff;
}

.r5-mailchimp input::placeholder {
  color: rgba(255,255,255,0.65);
}

.r5-mailchimp button {
  height: 46px;
  padding: 0 18px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.r5-mailchimp-note {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.8;
  text-align: center;
}

/* Mobile */
@media (max-width: 640px) {
  .r5-mailchimp-row {
    flex-direction: column;
  }

  .r5-mailchimp button {
    width: 100%;
    max-width: 420px;
  }
}

/* MAILCHIMP FORM */
 * #mc4wp-form-1 {justify-content: center;text-align: center}
#mc4wp-form-1 input:first-child {border:none;border-radius:3px;background:#57190e;color:#FFF;position:relative;top:-2px}


/* Force JetEngine / Swiper sliders to render left-to-right in query order */
.jet-listing-grid__slider,
.jet-listing-grid__slider .swiper-wrapper {
  direction: ltr;
}