//*
Theme Name: DallasJay - Drive
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.1.1774560733
Updated: 2026-03-26 21:32:13
*/

/* =========================
   STYLESHEET UPDATED 4/24 6:30AM
========================= */

/* =========================
   UTILITIES + GLOBAL TYPOGRAPHY
========================= */

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
  font-family: 'Montserrat', sans-serif;
  color: var(--secondary-text);
}

p {
  line-height: 1.4;
}

.bg-black {
  background: var(--black);
}

.bg-charcoal {
  background: var(--dark-charcoal);
}

.text-white {
  color: var(--white);
}

.text-muted {
  color: var(--secondary-text);
}

.accent {
  color: var(--fire-orange);
}

.font-heading {
  font-family: 'Roadhawk', sans-serif;
}

.font-body {
  font-family: 'Montserrat', sans-serif;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-center {
  text-align: center;
}

/* =========================
   GLOBAL TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Roadhawk', sans-serif;
  color: var(--white);
  letter-spacing: 0.04em;
  margin: 0 0 0.5em;
}

h1,
h2 {
  font-size: 3em !important;
}

/* =========================
   HERO TYPOGRAPHY
========================= */

.drive-hero__title {
  font-size: clamp(2.8rem, 5vw, 5rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.drive-hero__tagline {
  font-size: 1.1rem;
  color: var(--secondary-text);
  margin-top: 10px;
}

/* =========================
   SECTION TITLES
========================= */

.drive-section-title {
  font-family: 'Roadhawk', sans-serif;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =========================
   BUTTON BASE TYPOGRAPHY
========================= */

.drive-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================================================
   DRIVE HOMEPAGE MASTER
   Version: 2026-03-31-clean
   Notes:
   - removed broken leftover block
   - kept h1/h2 at 3em by request
   - kept footer padding 50/50
========================================================= */

/* =========================
   01. NAV DROPDOWN
========================= */

.main-navigation .main-nav ul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;




  z-index: 1000;
  background: var(--dark-charcoal);
}

.main-navigation .main-nav ul li:hover > ul {
  display: block;
}

/* =========================
   02. CAROUSEL CLEANUP
========================= */

.srp_swiper-track-title,
.srp_swiper-track-artist,
.srp_swiper-title {
  display: none !important;
}

.srp_swiper-titles .song-store,
.srp_swiper-titles .song-store-list-menu,
.srp_swiper-titles .song-store-list-container,
.srp_swiper-titles .store-list {
  display: flex !important;
	/*
  visibility: visible !important;
  opacity: 1 !important;
	*/
  justify-content: center;
}

.srp_swiper-slide-active {
  box-shadow:
    0 0 40px rgba(255, 100, 40, 0.35),
    0 0 80px rgba(255, 60, 20, 0.20);
}

.srp_swiper-button-prev,
.srp_swiper-button-next {
  color: var(--soft-highlight);
  opacity: 0.7;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.srp_swiper-button-prev:hover,
.srp_swiper-button-next:hover {
  color: var(--fire-orange);
  opacity: 1;
}

/* =========================
   03. DRIVE WRAPPER
========================= */

.drive-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--black) url('/wp-content/uploads/2026/03/drivebg9-scaled.webp') center top / cover no-repeat;
  padding: 40px 20px 80px;
}

.drive-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.12) 18%,
      rgba(0, 0, 0, 0.18) 40%,
      rgba(0, 0, 0, 0.38) 72%,
      rgba(0, 0, 0, 0.55) 100%
    );
}

.drive-wrapper > * {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   04. TOP COPY
========================= */

.drive-wrapper h1,
.drive-wrapper h2 {
  text-align: center;
  margin: 0 0 8px;
  line-height: 1;
}

.drive-tagline,
.drive-tagline2 {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.drive-tagline {
  font-size: 0.8rem;
  margin: 0 0 28px;
}

.drive-tagline2 {
  font-size: 0.9rem;
  margin: 10px 0 18px;
}

/* =========================
   05. CAROUSEL WRAPPER
========================= */

.drive-carousel {
  margin: 0 auto;
  max-width: 1180px;
}

.drive-carousel .srp_swiper-container,
.drive-carousel .swiper,
.drive-carousel .sonaar-slider {
  max-width: 100%;
}

/* ========================= 
06. DRIVE HERO CONTENT 
========================= */ 
:root {
  --hero-offset: 540px;
}

.drive-content {
  position: relative;
  top: var(--hero-offset);
}

.drive-columns {
  margin: var(--hero-offset) auto 0px auto;
}

.drive-content .drive-hero-title {
	display: block; 
	width: 100%; 
	text-align: center;
	font-family: 'Roadhawk', sans-serif; 
	font-size: clamp(2.8rem, 7vw, 7rem); 
	line-height: 1; 
	letter-spacing: 0.08em; 
	color: var(--white); 
} 
.drive-hero-title span { 
	display: inline-block; 
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 100, 40, 0.18); 
	animation: driveTitlePulseClean 4.5s ease-in-out infinite; 
} 
@keyframes driveTitlePulseClean { 
	0%, 100% { 
		opacity: 0.82; 
		transform: scale(1); 
	} 
	50% { 
		opacity: 1; 
		transform: scale(1.03); 
	} 
}

/* =========================
   12. TRAILER MODAL
========================= */

.drive-content .drive-music-trailer-btn {
  display: block;
    position: relative;
  z-index: 1 !important;
  width: 80px;
  padding: 0;
  margin: 10px auto 40px auto;
  position:relative;
  background: transparent;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
  transition: all 0.2s ease-in-out;
}

.drive-music-trailer-btn:hover {
  opacity: 1;
  cursor: pointer;
}

.drive-music-trailer {
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: none;
  background: transparent;
}

.drive-music-trailer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drive-music-trailer::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
}

.drive-music-trailer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(92vw, 420px);
  max-height: 90vh;
  height: auto;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(255, 120, 40, 0.25);
  border-radius: 8px;
  background: rgba(10, 10, 12, 0.95);
  box-shadow:
    0 0 20px rgba(255, 100, 40, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.8);
  animation: driveModalFade 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.drive-music-trailer__title {
  margin: 0 0 8px;
  text-align: center;
  font-family: 'Roadhawk', sans-serif;
  letter-spacing: 0.08em;
  color: var(--white);
}

.drive-music-trailer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.drive-music-trailer__video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(90vh - 70px);
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  background: #000;
}

.drive-music-trailer__video:hover {
  cursor: pointer;
}

.drive-music-trailer__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--soft-highlight);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drive-music-trailer__close:hover {
  color: var(--fire-orange);
  transform: scale(1.1);
}

@keyframes driveModalFade {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* =========================
   07. BUTTONS
========================= */

.drive-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: 'Roadhawk', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease;
}

.drive-btn,
.drive-btn:visited {
  color: #fff;
}

.drive-btn i {
  display: inline-flex;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1;
  color: inherit;
}

.drive-btn:not(.outline) {
  background: var(--fire-orange);
  border-color: var(--fire-orange);
}

.drive-btn:not(.outline):hover,
.drive-btn:not(.outline):focus,
.drive-btn:not(.outline):active {
  background: var(--bright-flame);
  border-color: var(--bright-flame);
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(255, 100, 40, 0.25);
  transform: translateY(-1px);
}

.drive-btn.outline {
  background: transparent;
  border-color: var(--secondary-text);
}

.drive-btn.outline:hover,
.drive-btn.outline:focus,
.drive-btn.outline:active {
  background: rgba(255, 255, 255, 0.05);
  border-color: #fff;
  color: #fff !important;
  transform: translateY(-1px);
}

.drive-btn:active {
  transform: translateY(1px);
}

/* =========================
   08. CTA AREA
========================= */

.drive-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 auto 40px;
}

.drive-available {
  margin: -20px 0 40px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--secondary-text);
  opacity: 0.9;
}

/* =========================
   09. CONTENT COLUMNS
========================= */

.drive-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1150px;

}

.column-overlay {
  text-align: center;
  padding: 28px 26px;
  border: 1px solid rgba(58, 58, 64, 0.75);
  border-radius: 6px;
  background: rgba(20, 20, 22, 0.72);
  backdrop-filter: blur(3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  color: var(--secondary-text) !important;
}

.drive-columns h2 {
  padding-bottom: 10px;
  background: url(https://dallasjay.com/wp-content/uploads/2026/03/colh2bborder.png) center bottom repeat-x;
}

.column-overlay .drive-btn {
  margin-top: 16px;
  padding: 12px 20px;
  font-size: 1.4rem;
}

.dallas-title::before {
  content: url(https://dallasjay.com/wp-content/uploads/2026/03/dallasjay43.png);
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.firewave-title::before {
  content: url(https://dallasjay.com/wp-content/uploads/2026/03/fiorewave43.png);
  position: relative;
  top: 2px;
  margin-right: 5px;
}

/* =========================
   10. FOOTER
========================= */

.drive-follow {
  position: relative;
  z-index: 1;
  margin-top: -30px;
  padding: 50px 20px 50px;
  text-align: center;
  background: url(https://dallasjay.com/wp-content/uploads/2026/03/footerbg.webp) center / cover no-repeat;
}

.drive-follow::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #050505);
}

.drive-follow h2,
.drive-follow h3 {
  margin-bottom: 6px;
}

.drive-follow p {
  margin-bottom: 14px;
  color: var(--secondary-text);
}

.drive-follow .wp-block-columns {
  max-width: 1100px;
  margin: 0 auto;
  gap: 30px;
}

.drive-follow .wp-block-column {
  text-align: center;
}

.follow-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 0;
  padding: 0;
}

.follow-icons .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  text-decoration: none;
  transition: all 0.25s ease;
}

.follow-icons .ico:hover {
  background: var(--fire-orange);
  color: #111;
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(255, 120, 40, 0.5);
}

.follow-icons .ico i {
  font-size: 18px;
  line-height: 1;
}

/* =========================
   11. MAILCHIMP + GAS MONEY
========================= */

.mc4wp-form {
  margin-top: 10px;
}

.mc4wp-form .mailchimp-signup {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mc4wp-form input[type="email"] {
  height: 42px;
  padding: 0 12px;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mc4wp-form input[type="submit"] {
  position: relative;
  top: 3.5px;
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 4px;
  background: var(--fire-orange);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mc4wp-form input[type="submit"]:hover {
  background: var(--bright-flame);
}

.drive-follow a.button {
  border-radius: 4px;
}

.drive-follow a.button i {
  position: relative;
  top: -2px;
  font-size: 1.3rem;
}

.footer-tipjar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}



/* =========================
   11A. STARRED CONTENT HEADINGS
========================= */

h1.title::before,
h2.title::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  position: relative;
  top: -5px;
  background-image: url('/wp-content/uploads/2026/04/star-gray.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

h1.title::after,
h2.title::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  position: relative;
  top: -5px;
  background-image: url('/wp-content/uploads/2026/04/star-gray.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================
   11B. MUSIC PAGE
========================= */

.music-wrapper {
  background: url('https://dallasjay.com/wp-content/uploads/2026/04/asphaltbg3-scaled.webp') center top / auto no-repeat;
}

.music-wrapper h3 {
  margin-bottom: 0;
}


.music-wrapper .subtext {
  font-size: 0.8rem;
  opacity: 0.6;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.music-wrapper .available-now {
  font-size: 0.8em;
  text-align: center;
}


.album-ctas {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.album-ctas .button,
.album-ctas .button.ghost {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 1.2rem;
  line-height: 36px;
  border: 0;
  border-radius: 0;
  letter-spacing: 0.04em;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.16);
}

.album-ctas .button:hover,
.album-ctas .button.ghost:hover {
  transform: scale(1.03);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.22);
}

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

.album-ctas .button.ghost[href*="spotify"]:hover {
  background: #17a74a;
}

.album-ctas .button.ghost[href*="apple"] {
  background: #111;
  color: #fff;
}

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

.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;
}


/* =========================
   11C. ABOUT PAGE
========================= */

.about-top {
  padding: 20px 0 !important;
  border-radius: 4px;
}

.about-firewave {
  max-width: 650px;
  height: 90px;
  margin: 0 auto;
  padding: 20px;
  padding-left: 100px;
  border-radius: 5px;
  background: url('https://dallasjay.com/wp-content/uploads/2026/03/fiorewave43.png') 20px 25px no-repeat var(--primary-overlay);
}

.about-firewave ul {
  margin: 0 auto;
  padding: 0;
}

.about-firewave li {
  list-style: none;
  margin: 0 0 0 -70px;
  padding: 0 !important;
}


/* =========================
   13. RESPONSIVE PLACEHOLDERS
========================= */

@media (min-width: 1600px) {
  .drive-wrapper {
    padding-top: 50px;
  }

  .drive-car {
    height: 760px;
  }
}


@media screen and (min-width: 1200px) {
  .about-top {
    max-height: 280px;
  }
}

/* =========================
   13A. HOMEPAGE RESPONSIVE — FINALIZED
========================= */

/* 1440 laptop range */
@media (max-width: 1440px) and (min-width: 1401px) {
  .drive-wrapper {background-position: center 170px;}
:root {--hero-offset: 390px;}

}

/* 1366 laptop range */
@media (max-width: 1400px) and (min-width: 1366px) {
 .drive-wrapper {background-position: center 170px;}
:root {--hero-offset: 340px;}
}

/* Small laptop / large tablet */
@media (max-width: 1200px) and (min-width: 902px) {
 .drive-wrapper {background-position: center 170px;}
:root {--hero-offset: 430px;}

}

/* 769–901 tight layout range */
@media (min-width: 769px) and (max-width: 901px) {
  .drive-wrapper {
    background-color: var(--black) !important;
    background-image: url('/wp-content/uploads/2026/04/drivebg10.webp') !important;
	  background-repeat: no-repeat !important;
	background-size:1200px;
  }
	 .drive-wrapper {background-position: center 170px;}
:root {--hero-offset: 260px;}

}

/* 481–768 tablet / large mobile */
@media (min-width: 481px) and (max-width: 768px) {
  .drive-wrapper {
    background-color: var(--black) !important;
    background-image: url('/wp-content/uploads/2026/04/drivebg10.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center 400px ;
    background-size: 800px;
  }
	:root {--hero-offset: 160px;}
  .drive-music-trailer-btn {width: 60px !important;}

}

/* =========================
   14. TABLET
========================= */

@media (max-width: 768px) {
  .dallas-title,
  .firewave-title {
    margin-top: 5px !important;
  }

  .dallas-title::before,
  .firewave-title::before {
    content: "" !important;
    display: none !important;
  }

  a,
  button,
  input[type="submit"],
  .drive-btn {
    min-width: 48px;
    min-height: 48px;
  }

  a {
    display: inline-block;
  }

  .drive-wrapper {
    padding: 28px 16px 56px;
  }

  .drive-wrapper h1,
  .drive-wrapper h2 {
    margin-bottom: 6px;
  }

  .drive-tagline {
    margin-bottom: 20px;
  }

  .drive-car {
    height: 320px;
  }

  .drive-car::before {
    bottom: 42px;
    letter-spacing: 0.06em;
  }

  .drive-cta {
    gap: 12px;
    margin-bottom: 40px;
  }

  .drive-btn {
    padding: 14px 20px;
  }

  .drive-cta .drive-btn {
    width: 100%;
    max-width: 340px;
    margin-bottom: 8px;
  }

  .drive-columns {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .column-overlay {
    padding: 22px 20px;
    background: rgba(20, 20, 22, 0.88);
  }

  .drive-follow {
    padding: 35px 16px 34px;
  }

  .drive-follow .wp-block-columns {
    gap: 20px;
  }

  .mc4wp-form .mailchimp-signup {
    flex-direction: column;
    align-items: center;
  }

  .mc4wp-form input[type="email"],
  .mc4wp-form input[type="submit"] {
    width: 100%;
    max-width: 300px;
  }

  .drive-music-trailer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
}

/* =========================
   15. MOBILE
========================= */

@media (max-width: 480px) {
  .drive-wrapper {
    background-color: var(--black) !important;
    background-image: url('https://dallasjay.com/wp-content/uploads/2026/03/drivebg800webp-scaled.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center 0px !important;
    background-size: cover !important;
  }

		:root {--hero-offset: 160px;}
  .drive-music-trailer-btn {width: 60px !important;}

  .drive-music-trailer-btn {
    display: block;
    width: 60px;
    padding: 0;
    margin: 0 auto;
    opacity: 0.9;
  }

  .drive-music-trailer__inner {
    width: 94vw;
    max-height: 92vh;
    padding: 12px;
  }

  .drive-music-trailer__title {
    font-size: 1rem;
  }

  .drive-music-trailer__close {
    top: 6px;
    right: 6px;
    font-size: 18px;
  }
}


/* =========================================================
   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;
  }
}

.single-album-cover {width:150px}
.r5-lyrics-btn {margin-top: 10px}
.r5-song-grid {margin-bottom: 100px !important;}

/* ===============================
   SONAAR - SONG DETAILS CTA
   =============================== */

/* keep wrapper available + position button */
.srp_swiper-titles {
  display: block !important;
  visibility: visible !important;
  transform: translateY(250px) !important;
}

/* hide song/artist text */
.srp_swiper-track-title,
.srp_swiper-track-artist,
.srp_swiper-title {
  display: none !important;
}

/* center wrapper */
.store-list,
.song-store-list-menu,
.song-store-list-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* actual button style */
a.song-store.sr_store_wc_round_bt,
.song-store.sr_store_wc_round_bt,
.sr_store_wc_round_bt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  min-height: 0 !important;

  padding: 10px 18px !important;
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 4px !important;

  color: #fff !important;
  font-family: 'Roadhawk', sans-serif !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
/* desktop: hide until hover */
@media (min-width: 1025px) {
  .srp_swiper-titles .song-store,
  .srp_swiper-titles a.song-store.sr_store_wc_round_bt,
  .srp_swiper-titles .sr_store_wc_round_bt {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .srp_swiper-slide:hover .song-store,
  .swiper-slide:hover .song-store,
  .srp_swiper-slide:hover a.song-store.sr_store_wc_round_bt,
  .swiper-slide:hover a.song-store.sr_store_wc_round_bt,
  .srp_swiper-slide:hover .sr_store_wc_round_bt,
  .swiper-slide:hover .sr_store_wc_round_bt {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* tablet/mobile: always show */
@media (max-width: 1024px) {
  .srp_swiper-titles .song-store,
  .srp_swiper-titles a.song-store.sr_store_wc_round_bt,
  .srp_swiper-titles .sr_store_wc_round_bt {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}