/*
Theme Name: IQTL Musician Theme
Theme URI: https://example.com/iqtl-musician-theme
Author: AdrianEstrada.art
Author URI: https://example.com
Description: A modern, minimal, music-focused WordPress theme with hero video/image, sticky player, and smooth animations for I Quote the Liar.
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iqtl-musician
Tags: one-column, custom-background, custom-logo, custom-menu, featured-images, theme-options


Uiverse / UI Components Attribution:
This theme incorporates UI patterns inspired by components from Uiverse.dev.
Original component authors on Uiverse.dev retain credit as required by their license.
*/

/* UI patterns partially inspired by components on Uiverse.dev (attribution in CREDITS-UIVERSE.txt) */
/* Core Reset-ish */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    
    color: var(--iqtl-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


/* === Global animated background using IQTL theme colors (Uiverse pattern) === */

html,
body {
    height: 100%;
}

body {
    position: relative;
    min-height: 100vh;
    background-color: var(--iqtl-bg);
}

/* Rain pattern from Uiverse container, color driven by theme primary */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  --c: var(--iqtl-primary);
  background-color: #000;
  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
  background-size:
    300px 235px,
    300px 235px,
    300px 235px,
    300px 252px,
    300px 252px,
    300px 252px,
    300px 150px,
    300px 150px,
    300px 150px,
    300px 253px,
    300px 253px,
    300px 253px,
    300px 204px,
    300px 204px,
    300px 204px,
    300px 134px,
    300px 134px,
    300px 134px,
    300px 179px,
    300px 179px,
    300px 179px,
    300px 299px,
    300px 299px,
    300px 299px,
    300px 215px,
    300px 215px,
    300px 215px,
    300px 281px,
    300px 281px,
    300px 281px,
    300px 158px,
    300px 158px,
    300px 158px,
    300px 210px,
    300px 210px,
    300px 210px; animation: hi 150s linear infinite;
}

/* Fine grain & hue animation overlay from Uiverse ::after */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 50% 50%,
    #0000 0,
    #0000 2px,
    hsl(0 0% 4%) 2px
  );
  background-size: 8px 8px;
  --f: blur(1em) brightness(6);
  backdrop-filter: var(--f);
  animation: hii 10s linear infinite;
}

@keyframes hi {
  0% {
    background-position:
      0px 220px,
      3px 220px,
      151.5px 337.5px,
      25px 24px,
      28px 24px,
      176.5px 150px,
      50px 16px,
      53px 16px,
      201.5px 91px,
      75px 224px,
      78px 224px,
      226.5px 350.5px,
      100px 19px,
      103px 19px,
      251.5px 121px,
      125px 120px,
      128px 120px,
      276.5px 187px,
      150px 31px,
      153px 31px,
      301.5px 120.5px,
      175px 235px,
      178px 235px,
      326.5px 384.5px,
      200px 121px,
      203px 121px,
      351.5px 228.5px,
      225px 224px,
      228px 224px,
      376.5px 364.5px,
      250px 26px,
      253px 26px,
      401.5px 105px,
      275px 75px,
      278px 75px,
      426.5px 180px;
  }
  100% {
    background-position:
      0px 6800px,
      3px 6800px,
      151.5px 6917.5px,
      25px 13632px,
      28px 13632px,
      176.5px 13758px,
      50px 5416px,
      53px 5416px,
      201.5px 5491px,
      75px 17175px,
      78px 17175px,
      226.5px 17301.5px,
      100px 5119px,
      103px 5119px,
      251.5px 5221px,
      125px 8428px,
      128px 8428px,
      276.5px 8495px,
      150px 9876px,
      153px 9876px,
      301.5px 9965.5px,
      175px 13391px,
      178px 13391px,
      326.5px 13540.5px,
      200px 14741px,
      203px 14741px,
      351.5px 14848.5px,
      225px 18770px,
      228px 18770px,
      376.5px 18910.5px,
      250px 5082px,
      253px 5082px,
      401.5px 5161px,
      275px 6375px,
      278px 6375px,
      426.5px 6480px;
  }
}

@keyframes hii {
  0% {
    backdrop-filter: var(--f);
  }
  100% {
    backdrop-filter: var(--f);
  }
}



/* Override any legacy WordPress custom background with the same rules as the Listen section */
body.custom-background {
    background: var(--iqtl-bg, #050507) !important;
}


/* Layout helpers */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 60;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(5, 5, 7, 0.16) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}


.site-header__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.35rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}


/* Fine-tune header branding alignment so logo bottom visually matches tagline baseline */
.site-header .site-branding {
    align-items: flex-end;
}

.site-header .site-logo {
    display: flex;
    align-items: flex-end;
    transform: translateY(-0.35rem);
}

.site-header .site-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.site-logo img {
    max-height: var(--iqtl-logo-size, 44px);
    width: auto;
}

.site-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.1rem;
}

.site-title a {
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.site-description {
    margin: 0;
}


/* Navigation */
.main-navigation {
    display: flex;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.75rem;
}


.main-navigation a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0;
    font-size: calc(0.75rem + 2px);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--iqtl-heading);
    opacity: 0.86;
    border: none;
    background: transparent;
    cursor: pointer;
    transition:
        color 0.22s ease-out,
        opacity 0.22s ease-out,
        text-shadow 0.22s ease-out;
}

/* Hover / focus state uses primary accent */
.main-navigation #primary-menu a:hover,
.main-navigation #primary-menu a:focus {
    color: var(--iqtl-primary);
    opacity: 1;
    text-shadow:
        0 0 8px rgba(0, 191, 156, 0.65),
        0 0 14px rgba(0, 234, 180, 0.35);
}

/* Active / current menu item uses secondary accent */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--iqtl-secondary);
    opacity: 1;
    text-shadow:
        0 0 10px rgba(250, 78, 147, 0.65),
        0 0 18px rgba(250, 78, 147, 0.35);
}

/* Nav toggle (mobile) */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
}

.nav-toggle__line {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    margin: 4px 0;
    border-radius: 999px;
}

/* Hero */
.site-main {
    padding-top: 0;
}

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fefefe;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.1) brightness(0.9);
}

.hero__image,
.hero__fallback-gradient {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.hero__fallback-gradient {
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08) 0, var(--iqtl-bg) 46%, #000 100%);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.45), rgba(5, 5, 7, 0.96));
    mix-blend-mode: multiply;
}




.hero__inner {
    position: relative;
    max-width: 1120px;
    padding: 4rem 1.5rem 4.5rem;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
    gap: 2.75rem;
    align-items: center;
}

.hero__content {
    max-width: 540px;
    margin-top: 3.5rem;
}

.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.hero__headline {
    
    font-size: clamp(2.6rem, 4vw, 3.4rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0 0 1.1rem;
}

.hero__subheadline {
    margin: 0 0 1.75rem;
    font-size: 0.98rem;
    color: rgba(245, 245, 245, 0.82);
    max-width: 32rem;
}

.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* Buttons - Uiverse style (exact) */
.btn {
  width: 10em;
  position: relative;
  height: 3.5em;
  border: 3px solid var(--iqtl-primary);
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: transparent;
  transition: 0.5s;
  transform-origin: center;
}

.btn::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: transparent;
  transition: 0.5s;
}

.btn:hover::before,
.btn:hover::after {
  transform: scale(0)
}

.btn:hover {
  box-shadow: inset 0px 0px 25px var(--iqtl-secondary);
}
.newsletter__form .btn[disabled] {
  opacity: 1;
  cursor: default;
}


/* Variants available if needed but no extra styling by default */
.btn--primary {}
.btn--ghost {}


/* Variants (intentionally empty) */

.btn--primary {
}

.btn--ghost {
    border-color: rgba(250, 250, 250, 0.7);
    color: rgba(250, 250, 250, 0.92);
}


/* Hero player card */
.hero__player-card {
    border-radius: 18px;
    padding: 0.8rem 0.8rem;
    max-width: 230px;
    align-self: flex-start;
    justify-self: flex-end;
}

.hero__player-card {
    background: transparent;
    border-radius: 18px;
    padding: 0.8rem 0.8rem;
    box-shadow: none;
    backdrop-filter: none;
    max-width: 230px;
    align-self: flex-start;
    justify-self: flex-end;
}

.hero__player-title {
    
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 0.35rem;
}

.hero__player-sub {
    margin: 0 0 0.85rem;
    font-size: 0.75rem;
    color: rgba(230, 230, 230, 0.75);
}

.hero__player-embed iframe {
    width: 100%;
    border-radius: 12px;
    border: none;
    min-height: 152px;
}

/* Scroll indicator */
.hero__scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 2.75rem;
    transform: translateX(-50%);
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    color: rgba(240, 240, 240, 0.82);
}

.hero__scroll-dot {
    width: 26px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
}

.hero__scroll-dot::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--iqtl-primary), var(--iqtl-secondary));
    transform: translateX(-50%);
    animation: scroll-dot 1.4s ease-in-out infinite;
}

.hero__scroll-text {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

@keyframes scroll-dot {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}

/* Hero fade into content */
.hero__fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 180px;
    background: linear-gradient(to bottom, rgba(5, 5, 7, 0) 0%, #050507 70%, #050507 100%);
    z-index: -1;
}

/* Sections */
.homepage-sections {
    background: var(--iqtl-bg);
}

.section {
    padding: 4rem 1.5rem 4.25rem;
}

.section--music {
    background: radial-gradient(circle at top left, rgba(16, 114, 98, 0.16), #050507 58%);
}

.section--cta {
    background:
        radial-gradient(circle at 80% 20%, rgba(250, 78, 147, 0.18), transparent 55%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.94), var(--iqtl-bg));
}

.section__inner {
    max-width: 1120px;
    margin: 0 auto;
}

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

.section__header {
    margin-bottom: 2rem;
}

.section__title,
.hero__headline,
.music-card__title,
.card-post__title {
    color: var(--iqtl-heading);
}

.section__title {
    
    font-size: 1.35rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.section__subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--iqtl-subtitle, rgba(235, 235, 235, 0.8));
    max-width: 30rem;
}

.section__inner--center .section__subtitle {
    margin-left: auto;
    margin-right: auto;
}

.section__grid {
    display: grid;
    gap: 1.75rem;
}

.section__grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.section__grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Cards & posts */
.music-card,
.card-post {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.06) 0, transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.6) 0, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.45)),
        var(--iqtl-card-bg);
    border-radius: 18px;
    padding: 1.25rem 1.25rem 1.4rem;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.music-card__title {
    font-size: 0.88rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.85rem;
    color: rgba(249, 249, 249, 0.9);
}

.music-card__embed iframe {
    display: block;
}

.music-card__embed--video iframe {
    aspect-ratio: 16 / 9;
}

/* Blog cards */
.card-post__link {
    text-decoration: none;
    color: inherit;
}

.card-post__inner {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.card-post__thumb img {
    display: block;
    width: 100%;
    border-radius: 14px;
}

.card-post__title {
    
    font-size: 1.05rem;
    margin: 0 0 0.2rem;
}

.card-post__meta {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    color: var(--iqtl-text-light);
}

.card-post__excerpt {
    margin: 0;
    font-size: 0.9rem;
    color: var(--iqtl-subtitle, rgba(235, 235, 235, 0.8));
}

.card-post--full {
    margin-bottom: 2rem;
}

/* Newsletter */
.newsletter__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.newsletter__input {
    min-width: min(280px, 80vw);
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(8, 8, 11, 0.9);
    color: var(--iqtl-body);
    font-size: 0.9rem;
}

.newsletter__input::placeholder {
    color: rgba(210, 210, 210, 0.6);
}

/* Footer */
.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    --color: #1e1e1e;
    background-color: #0c0c0c;
    background-image: linear-gradient(
            0deg,
            transparent 24%,
            var(--color) 25%,
            var(--color) 26%,
            transparent 27%,
            transparent 74%,
            var(--color) 75%,
            var(--color) 76%,
            transparent 77%,
            transparent
        ),
        linear-gradient(
            90deg,
            transparent 24%,
            var(--color) 25%,
            var(--color) 26%,
            transparent 27%,
            transparent 74%,
            var(--color) 75%,
            var(--color) 76%,
            transparent 77%,
            transparent
        );
    background-size: 55px 55px;
}

.site-footer__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.78rem;
    color: rgba(210, 210, 210, 0.75);
}

.to-top {
    text-decoration: none;
    color: rgba(235, 235, 235, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
}

/* AOS-like simple fade-in */
.aos-fade {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.aos-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Screen reader text */
.screen-reader-text {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
}

/* Responsive */
@media (max-width: 960px) {
    .hero__inner {
        grid-template-columns: 1fr;
        padding-top: 5.25rem;
        padding-bottom: 4rem;
    }

    .hero__player-card {
        max-width: 100%;
    }

    .site-header__inner {
        padding-inline: 1.1rem;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(5, 5, 7, 0.98);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    }

    .main-navigation.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .main-navigation ul {
        flex-direction: column;
        padding: 0.75rem 1.25rem 1rem;
        gap: 0.75rem;
    }

    .nav-toggle {
        display: inline-flex;
    }
}

@media (max-width: 640px) {
    .section {
        padding-inline: 1.1rem;
        padding-bottom: 3.5rem;
    }

    .hero__subheadline {
        font-size: 0.94rem;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* === IQTL Listen section: animated rain background tied to theme colors === */
.section--music {
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.section--music::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    --c: var(--iqtl-primary);
    background-color: #000;
    background-image:
        radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
    background-size:
        300px 235px,
        300px 235px,
        300px 235px,
        300px 252px,
        300px 252px,
        300px 252px,
        300px 150px,
        300px 150px,
        300px 150px,
        300px 253px,
        300px 253px,
        300px 253px,
        300px 204px,
        300px 204px,
        300px 204px,
        300px 134px,
        300px 134px,
        300px 134px,
        300px 179px,
        300px 179px,
        300px 179px,
        300px 299px,
        300px 299px,
        300px 299px,
        300px 215px,
        300px 215px,
        300px 215px,
        300px 281px,
        300px 281px,
        300px 281px,
        300px 158px,
        300px 158px,
        300px 158px,
        300px 210px,
        300px 210px,
        300px 210px;
    animation: iqtlMusicRain 150s linear infinite;
}

.section--music::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(1em) brightness(6);
    background-image: radial-gradient(
        circle at 50% 50%,
        #0000 0,
        #0000 2px,
        hsl(0 0% 4%) 2px
    );
    background-size: 8px 8px;
}

.section--music .section__inner {
    position: relative;
    z-index: 2;
}

@keyframes iqtlMusicRain {
    0% {
        background-position:
            0px 220px, 3px 220px, 151.5px 337.5px,
            25px 24px, 28px 24px, 176.5px 150px,
            50px 16px, 53px 16px, 201.5px 91px,
            75px 224px, 78px 224px, 226.5px 350.5px,
            100px 19px, 103px 19px, 251.5px 121px,
            125px 120px, 128px 120px, 276.5px 187px,
            150px 31px, 153px 31px, 301.5px 120.5px,
            175px 235px, 178px 235px, 326.5px 384.5px,
            200px 121px, 203px 121px, 351.5px 228.5px,
            225px 224px, 228px 224px, 376.5px 364.5px,
            250px 26px, 253px 26px, 401.5px 105px,
            275px 75px, 278px 75px, 426.5px 180px;
    }
    100% {
        background-position:
            0px 6800px, 3px 6800px, 151.5px 6917.5px,
            25px 13632px, 28px 13632px, 176.5px 13758px,
            50px 5416px, 53px 5416px, 201.5px 5491px,
            75px 17175px, 78px 17175px, 226.5px 17301.5px,
            100px 5119px, 103px 5119px, 251.5px 5221px,
            125px 8428px, 128px 8428px, 276.5px 8495px,
            150px 9876px, 153px 9876px, 301.5px 9965.5px,
            175px 13391px, 178px 13391px, 326.5px 13540.5px,
            200px 14741px, 203px 14741px, 351.5px 14848.5px,
            225px 18770px, 228px 18770px, 376.5px 18910.5px,
            250px 5082px, 253px 5082px, 401.5px 5161px,
            275px 6375px, 278px 6375px, 426.5px 6480px;
    }
}



/* Blog / Newsletter section - matches footer background */


/* Contact section - darker, full-width band */
.section--contact {
    background: #050507;
}

.contact-form {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.contact-form__field--full {
    grid-column: 1 / -1;
}

.contact-form__field label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--iqtl-subtitle, rgba(235, 235, 235, 0.8));
}

.contact-form__field input,
.contact-form__field textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 8, 11, 0.9);
    color: var(--iqtl-body);
    font-size: 0.9rem;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: var(--iqtl-text-light);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
    outline: none;
    border-color: var(--iqtl-primary);
    box-shadow: 0 0 0 1px rgba(0, 191, 156, 0.5);
}

.contact-form__actions {
    display: flex;
    justify-content: center;
}

.contact-form__notice {
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
}

.contact-form__notice--success {
    color: #a7ffce;
}

/* Stack contact form fields on small screens */
@media (max-width: 640px) {
    .contact-form__grid {
        grid-template-columns: 1fr;
    }

    .contact-form__field--full {
        grid-column: auto;
    }
}

/* Shows / Tour Dates section */
.section--shows {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 2.8rem;
}

.section--meat {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    --color: #1e1e1e;
    background-color: #0c0c0c;
    background-image: linear-gradient(
            0deg,
            transparent 24%,
            var(--color) 25%,
            var(--color) 26%,
            transparent 27%,
            transparent 74%,
            var(--color) 75%,
            var(--color) 76%,
            transparent 77%,
            transparent
        ),
        linear-gradient(
            90deg,
            transparent 24%,
            var(--color) 25%,
            var(--color) 26%,
            transparent 27%,
            transparent 74%,
            var(--color) 75%,
            var(--color) 76%,
            transparent 77%,
            transparent
        );
    background-size: 55px 55px;
    padding-top: 2.8rem;
}











.section--shows .ste-event {
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    background: rgba(10, 10, 14, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.section--shows .ste-event-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
}

.section--shows .ste-event-title {
    /* Hide event titles in the front-page shows section so visitors focus on date, venue, and details */
    display: none;
}

.section--shows .ste-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    opacity: 0.9;
}

.section--shows .ste-event-note {
    font-style: italic;
}

.section--shows .ste-event-tickets a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    background: linear-gradient(135deg, var(--iqtl-primary), var(--iqtl-secondary));
    color: #050507;
}



/* Compact header layout: logo + title/description as one row */
.site-branding {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.site-logo {
    display: flex;
    align-items: flex-end;
}

.site-logo img {
    display: block;
}

.site-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.1rem;
}

.site-title {
    margin: 0;
    line-height: 1.1;
}

.site-title a {
    text-decoration: none;
}

.site-description {
    margin: 0;
    font-size: 0.75rem;
    opacity: 0.8;
}



/* Intro section: patterned background using theme colors */
.section--intro {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.04), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.04), transparent 55%),
        linear-gradient(135deg, rgba(5, 5, 7, 0.96), rgba(5, 5, 7, 0.9));
}

.section--intro::before {
    content: "";
    position: absolute;
    inset: -40%;
    background-image:
        radial-gradient(110px 110px at 10% 20%, var(--iqtl-primary, #00BF9C), transparent 60%),
        radial-gradient(160px 160px at 80% 0%, var(--iqtl-secondary, #FEFF38), transparent 60%),
        radial-gradient(140px 140px at 0% 100%, var(--iqtl_accent, #FA4E93), transparent 60%);
    opacity: 0.22;
    mix-blend-mode: screen;
    pointer-events: none;
}

.section--intro .section__inner {
    position: relative;
}

.section--intro .intro-layout {
    max-width: none;
    margin: 0;
    text-align: left;
}

/* Intro layout: title + body + button */
.section--intro .section__header--intro {
    text-align: left;
    margin-bottom: 1.5rem;
}

.intro-layout {
    max-width: 1120px;
    margin: 0 auto;
}

.intro-content {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.intro-content .intro-text {
    flex: 1 1 60%;
    text-align: left;
}

.intro-content .intro-text p {
    margin: 0;
}

.intro-content .intro-buttons {
    flex-shrink: 0;
}

.intro-content .intro-buttons .btn {
    white-space: nowrap;
}
7, 1);
}

.section__body--contact {
    margin-top: 1.5rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.field label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

.field input,
.field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 8, 12, 0.96);
    color: inherit;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--iqtl-primary, #00BF9C);
}

.field--full {
    margin-bottom: 1rem;
}

.contact-success {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: rgba(0, 191, 156, 0.12);
    border: 1px solid rgba(0, 191, 156, 0.4);
    font-size: 0.85rem;
}

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








.section--shows .cl-tour-item--hidden {
    display: none;
}

/* IQTL v41/43: spacing & layout for Shows & Tour Dates list */
.section--shows .ste-events-list {
    gap: 1.75rem;
}

/* Softer pill radius handled later; this just controls inner layout */
.section--shows .ste-event {
    padding: 1.35rem 1.75rem;
}

/* Header layout: left = title + meta, right = note + tickets */
.section--shows .ste-event-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.4rem;
}

/* Show titles visible and slightly emphasized */
.section--shows .ste-event-title {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 1.5rem;
}

/* Meta (date / time / venue / city/state) sits between title and tickets */
.section--shows .ste-event-meta {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.4rem;
    font-size: 0.82rem;
    opacity: 0.9;
    margin-right: auto; /* pushes note/tickets to the far right */
}

/* Short note like FREE / $20 at top-right */
.section--shows .ste-event-note {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0.9rem;
}

/* Ticket button stays aligned at the right */
.section--shows .ste-event-tickets a {
    white-space: nowrap;
}

/* On small screens, stack neatly */
@media (max-width: 640px) {
    .section--shows .ste-event {
        padding: 1.1rem 1.25rem;
    }

    .section--shows .ste-event-header {
        align-items: flex-start;
    }

    .section--shows .ste-event-note {
        margin-right: 0;
    }
}


/* IQTL v43: slightly squarer card corners */
.hero__player-card,
.section--shows .ste-event {
    border-radius: 12px;
}


/* === IQTL v44: layout & UX refinements requested by Adrian === */

/* 1) Hide page titles on regular pages; let sections speak for themselves */
.page .section--content .card-post__title {
    display: none;
}

/* 2) Mobile header: logo + hamburger only, smaller hero text */
@media (max-width: 640px) {

    /* Hide header title/tagline row on small screens */
    .site-title-wrap,
    .site-description {
        display: none;
    }

    .site-header__inner {
        padding-block: 0.25rem;
    }

    /* Compact logo */
    .site-logo img {
        max-height: 28px;
        width: auto;
    }

    /* Ensure nav toggle is visible and pushed right */
    .nav-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    /* Collapse nav into a vertical panel when closed; expand when .is-open */
    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        padding: 0.75rem 1.1rem 1.25rem;
        background: rgba(5, 5, 7, 0.98);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Hero text tuned for mobile */
    .hero__headline {
        font-size: clamp(1.6rem, 6vw, 2.1rem);
        line-height: 1.1;
    }

    .hero__subheadline {
        font-size: 0.9rem;
        max-width: 34rem;
    }
}

/* 3) Shows / Tour Dates: redesigned layout – date left, title/location center, note + tickets right */
.section--shows .ste-events-list {
    display: grid;
    gap: 1.5rem;
}

.section--shows .ste-event {
    padding: 1.15rem 1.5rem;
    border-radius: 6px;
    background: rgba(7, 8, 12, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Header becomes a 3-column grid */
.section--shows .ste-event-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    align-items: center;
}

/* Directly place meta children into the grid */
.section--shows .ste-event-meta {
    display: contents;
}

/* Date column: left, spanning both rows */
.section--shows .ste-event-date {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Title: top-middle */
.section--shows .ste-event-title {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Time + location + city/state on a single middle row */
.section--shows .ste-event-time,
.section--shows .ste-event-location,
.section--shows .ste-event-city-state {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8rem;
    opacity: 0.9;
    margin-right: 0.75rem;
}

/* Short note (FREE / $20 / 21+): right column */
.section--shows .ste-event-note {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Ticket button row */
.section--shows .ste-event-footer {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

/* Ticket button: outline pill with subtle rounding */
.section--shows .ste-event-ticket-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.3rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid var(--iqtl-primary);
    color: var(--iqtl-primary);
    background: transparent;
    white-space: nowrap;
}

.section--shows .ste-event-ticket-button:hover {
    background: rgba(0, 191, 156, 0.08);
}

/* Mobile stacking for events */
@media (max-width: 640px) {
    .section--shows .ste-event-header {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .section--shows .ste-event-note {
        grid-column: 2;
        grid-row: 3;
        justify-self: flex-start;
        margin-top: 0.2rem;
    }

    .section--shows .ste-event-footer {
        justify-content: flex-start;
        margin-top: 0.4rem;
    }
}

/* 4) Consistent subtle rounding across cards and inputs */
.hero__player-card,
.music-card,
.card-post,
.section--content .card-post,
.section--shows .ste-event,
.contact-grid .contact-card,
.newsletter,
input[type="text"],
input[type="email"],
textarea,
button,
.btn,
.button {
    border-radius: 6px;
}

/* Keep real pill UI pill-shaped */
.chip,
.badge,
.tag {
    border-radius: 999px;
}



/* === IQTL v45: Listen section visual pass, header tweaks, show/date refinements === */

/* 1) Listen section: distinct cards on top of the pattern, no inset gradient */
.section--music {
    position: relative;
    /* keep existing fun background, just ensure it's visible around cards */
}

.section--music .section__body {
    position: relative;
    z-index: 1;
}

.section--music .music-card {
    background: rgba(5, 5, 9, 0.86); /* opaque enough for readability */
    border-radius: 6px;              /* match global subtle radius */
    padding: 1.25rem 1.4rem 1.5rem;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background-image: none;          /* remove inset gradients from base card style */
}

/* Make sure the original gradient/card combo only affects blog cards now */
.section--music .card-post {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.06) 0, transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.6) 0, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.45)),
        var(--iqtl-card-bg);
}

/* 2) Mobile header: proper stacked hamburger + compact title/tagline, not hidden */
@media (max-width: 640px) {

    .site-header__inner {
        padding-block: 0.25rem;
        column-gap: 0.75rem;
    }

    /* Logo stays on the left */
    .site-logo img {
        max-height: 28px;
        width: auto;
    }

    /* Title + tagline visible but compact in the middle */
    .site-title-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
        max-width: 60%;
    }

    .site-title a {
        font-size: 0.78rem;
        letter-spacing: 0.12em;
    }

    .site-description {
        display: block;
        font-size: 0.7rem;
        opacity: 0.82;
    }

    /* Hamburger on the right, lines stacked */
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin-left: auto;
        padding: 0.35rem;
    }

    .nav-toggle__line {
        display: block;
        width: 20px;
        height: 2px;
        margin: 0;
        border-radius: 999px;
    }

    /* Mobile dropdown menu behaviour (keep from v44) */
    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        padding: 0.75rem 1.1rem 1.25rem;
        background: rgba(5, 5, 7, 0.98);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Hero text tuned for mobile */
    .hero__headline {
        font-size: clamp(1.6rem, 6vw, 2.1rem);
        line-height: 1.1;
    }

    .hero__subheadline {
        font-size: 0.9rem;
        max-width: 34rem;
    }
}

/* 3) Shows / Tour Dates: hide backend title, stack date/time left, location middle, note + tickets right */
.section--shows .ste-event-title {
    display: none;
}

/* Card container already squared in v44; preserve layout */
.section--shows .ste-events-list {
    display: grid;
    gap: 1.5rem;
}

.section--shows .ste-event {
    padding: 1.15rem 1.5rem;
    border-radius: 6px;
    background: rgba(7, 8, 12, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Header grid: 
   col 1 = date/time
   col 2 = location + city/state
   col 3 = note
*/
.section--shows .ste-event-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 1.4rem;
    row-gap: 0.2rem;
    align-items: center;
}

/* Let meta pieces place themselves in the grid */
.section--shows .ste-event-meta {
    display: contents;
}

/* Date (top-left) and time (bottom-left) stacked */
.section--shows .ste-event-date {
    grid-column: 1;
    grid-row: 1;
    font-weight: 600;
    font-size: 0.86rem;
}

.section--shows .ste-event-time {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.78rem;
    opacity: 0.9;
}

/* Location and city/state, center column stacked */
.section--shows .ste-event-location {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.88rem;
    font-weight: 500;
}

.section--shows .ste-event-city-state {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Note (FREE / $20 / 21+) right column */
.section--shows .ste-event-note {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Tickets footer aligned under the note on the right */
.section--shows .ste-event-footer {
    margin-top: 0.45rem;
    display: flex;
    justify-content: flex-end;
}

/* Button styling kept from v44 */
.section--shows .ste-event-ticket-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.3rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid var(--iqtl-primary);
    color: var(--iqtl-primary);
    background: transparent;
    white-space: nowrap;
}

.section--shows .ste-event-ticket-button:hover {
    background: rgba(0, 191, 156, 0.08);
}

/* Mobile stacking for events */
@media (max-width: 640px) {

    .section--shows .ste-event-header {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .section--shows .ste-event-date {
        grid-column: 1;
        grid-row: 1;
    }

    .section--shows .ste-event-time {
        grid-column: 1;
        grid-row: 2;
    }

    .section--shows .ste-event-location {
        grid-column: 2;
        grid-row: 1;
    }

    .section--shows .ste-event-city-state {
        grid-column: 2;
        grid-row: 2;
    }

    .section--shows .ste-event-note {
        grid-column: 2;
        grid-row: 3;
        justify-self: flex-start;
        margin-top: 0.15rem;
    }

    .section--shows .ste-event-footer {
        justify-content: flex-start;
        margin-top: 0.35rem;
    }
}



/* === IQTL v46: fine-tune Shows vertical alignment === */

/* Slightly tighter line heights and centered alignment for the grid columns */
.section--shows .ste-event-header {
    align-items: center;
}

.section--shows .ste-event-date,
.section--shows .ste-event-time,
.section--shows .ste-event-location,
.section--shows .ste-event-city-state {
    line-height: 1.25;
}

/* Center the note in the card vertically relative to date/location block */
.section--shows .ste-event-note {
    align-self: center;
}

/* Give the footer a touch more breathing room so button row feels centered */
.section--shows .ste-event-footer {
    margin-top: 0.6rem;
}



/* === IQTL v47: listen card transparency, page card style, mobile/tablet header text + hamburger === */

/* 1) Make Listen cards a bit more see-through and reuse style for page content cards */
.section--music .music-card,
.section--content .card-post {
    background: rgba(5, 5, 9, 0.65);  /* slightly more transparent than before */
    border-radius: 6px;
    padding: 1.25rem 1.4rem 1.5rem;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background-image: none;
}

/* 2) Mobile + tablet header typography + hamburger */

/* WordPress customizer tablet breakpoint is ~782px; treat it as mobile-ish */
@media (max-width: 782px) {

    .site-header__inner {
        padding-block: 0.25rem;
        column-gap: 0.75rem;
    }

    /* Logo */
    .site-logo img {
        max-height: 26px;
        width: auto;
    }

    /* Compact title/tagline */
    .site-title-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
        max-width: 60%;
    }

    .site-title a {
        font-size: 0.8rem;
        letter-spacing: 0.12em;
    }

    .site-description {
        display: block;
        font-size: 0.7rem;
        opacity: 0.8;
    }

    /* Hamburger: always stacked at this range */
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin-left: auto;
        padding: 0.35rem;
        background: transparent;
        border: 0;
    }

    .nav-toggle__line {
        display: block;
        width: 22px;
        height: 2px;
        margin: 0;
        border-radius: 999px;
    }

    /* Dropdown menu */
    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        padding: 0.75rem 1.1rem 1.25rem;
        background: rgba(5, 5, 7, 0.98);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Hero text scaling for mobile/tablet */
    .hero__headline {
        font-size: clamp(1.4rem, 5vw, 1.9rem);
        line-height: 1.08;
    }

    .hero__subheadline {
        font-size: 0.88rem;
        max-width: 30rem;
    }
}



/* === IQTL v48: glassier cards, shows location emphasis, hero/featured track layout === */

/* 1) Glass-like cards with stronger passthrough */
.section--music .music-card,
.section--content .card-post {
    background: rgba(10, 12, 22, 0.55);  /* more transparent tint */
    box-shadow:
        0 22px 40px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* 2) Shows & Tour Dates: location as main title + optional website in content */
.section--shows .ste-event-location {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.section--shows .ste-event-city-state {
    margin-top: 0.08rem;
}

/* If you add a venue website link in the event content, make it sit just under the city/state */
.section--shows .ste-event-content {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.86);
}

/* 3) Hero / Featured Track: slightly lower card and tablet/desktop refinements */

/* Base hero player styling adjustments */
.hero__player-card {
    background: rgba(7, 8, 12, 0.9);
    border-radius: 6px;
    margin-top: 1.5rem;
}

/* Tablet & small desktop up to 960px */
@media (max-width: 960px) {
    .hero__inner {
        grid-template-columns: 1fr;
        padding-top: 5rem;
        padding-bottom: 3.75rem;
    }

    .hero__headline {
        font-size: clamp(1.5rem, 4.4vw, 2.1rem);
        line-height: 1.08;
    }

    .hero__subheadline {
        font-size: 0.9rem;
        max-width: 32rem;
    }

    .hero__player-card {
        max-width: 90%;
        margin: 1.75rem auto 0;
    }
}

/* Phone: keep it compact */
@media (max-width: 782px) {

    .hero__headline {
        font-size: clamp(1.4rem, 5vw, 1.9rem);
        line-height: 1.06;
    }

    .hero__subheadline {
        font-size: 0.88rem;
        max-width: 28rem;
    }

    .hero__player-card {
        max-width: 100%;
        margin-top: 1.5rem;
    }
}


/* === IQTL v48 override: Shows & Tour Dates + header + page background === */

/* 1) Shows & Tour Dates – compact, modern cards using Simple Ticket Events */

.section--shows .section__body {
    max-width: 1120px;
    margin-inline: auto;
    margin-top: 1.5rem;
}

.section--shows .ste-events-list {
    display: grid;
    gap: 1.4rem;
}

/* Card container */
.section--shows .ste-event {
    position: relative;
    padding: 1.2rem 1.6rem 1.15rem;
    border-radius: 12px;
    background: rgba(5, 5, 9, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.65);
}

/* Header grid: date/time | location | note */
.section--shows .ste-event-header {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 2.1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 1.5rem;
    row-gap: 0.15rem;
    align-items: center;
}

/* Hide plugin event title on front end – catalog only. */
.section--shows .ste-event-title {
    display: none !important;
}

/* Use meta fields as grid items */
.section--shows .ste-event-meta {
    display: contents;
}

/* Left column: date + time */
.section--shows .ste-event-date,
.section--shows .ste-event-time {
    grid-column: 1;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.section--shows .ste-event-date {
    grid-row: 1;
}

.section--shows .ste-event-time {
    grid-row: 2;
}

/* Middle column: location & city/state */
.section--shows .ste-event-location,
.section--shows .ste-event-city-state {
    grid-column: 2;
    font-size: 0.9rem;
    opacity: 0.94;
}

/* Right column: short note (FREE / $0 / SOLD OUT) */
.section--shows .ste-event-note {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: flex-end;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Content below header, clamped so cards stay slim */
.section--shows .ste-event-content {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer: ticket button bottom-right */
.section--shows .ste-event-footer {
    margin-top: 0.7rem;
    display: flex;
    justify-content: flex-end;
}

.section--shows .ste-event-ticket-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1.4rem;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid rgba(152, 255, 122, 0.8);
    background: transparent;
    color: var(--iqtl-accent, #CFFF8F);
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.section--shows .ste-event-ticket-button:hover,
.section--shows .ste-event-ticket-button:focus-visible {
    border-color: var(--iqtl-secondary, #FEFF38);
    box-shadow: 0 0 0 1px rgba(254, 255, 56, 0.35);
    transform: translateY(-1px);
}

/* Mobile adjustments – keep everything legible but in one compact block */
@media (max-width: 768px) {
    .section--shows .ste-event-header {
        grid-template-columns: minmax(0, 1.3fr) auto;
        grid-template-rows: auto auto auto;
    }

    .section--shows .ste-event-date,
    .section--shows .ste-event-time,
    .section--shows .ste-event-location,
    .section--shows .ste-event-city-state {
        grid-column: 1;
    }

    .section--shows .ste-event-note {
        grid-column: 2;
        grid-row: 1;
        align-self: flex-start;
    }

    .section--shows .ste-event-footer {
        justify-content: flex-start;
    }
}

/* 2) Additional pages: section background slightly see-through like header */

body:not(.home) .section--content {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

body:not(.home) .section--content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 9, 0.40);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

body:not(.home) .section--content .section__inner {
    position: relative;
    z-index: 1;
}

/* 3) Header typography: keep title/tagline on one line, responsive per device */

.site-branding,
.site-title-wrap {
    min-width: 0;
}

.site-title a,
.site-description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop + large tablet */
.site-title a {
    font-size: clamp(1.05rem, 1.4vw + 0.85rem, 1.7rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-description {
    margin: 0;
    font-size: clamp(0.7rem, 0.7vw + 0.45rem, 0.95rem);
    opacity: 0.85;
}

/* Medium screens */
@media (max-width: 1024px) {
    .site-title a {
        font-size: clamp(0.95rem, 1.8vw + 0.55rem, 1.35rem);
    }

    .site-description {
        font-size: clamp(0.65rem, 1.4vw + 0.35rem, 0.9rem);
    }
}

/* Small screens – show header instead of hiding it, scale down */
@media (max-width: 640px) {
    .site-title-wrap {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }

    .site-description {
        display: block !important;
    }

    .site-title a {
        font-size: clamp(0.9rem, 3vw + 0.4rem, 1.2rem);
    }

    .site-description {
        font-size: clamp(0.6rem, 2.4vw + 0.25rem, 0.85rem);
    }
}




/* === IQTL v48.1: explicit header title sizes per device === */
@media (min-width: 1025px) {
    .site-title a {
        font-size: 1.8rem;
        letter-spacing: 0.09em;
    }
}

@media (min-width: 782px) and (max-width: 1024px) {
    .site-title a {
        font-size: 1.4rem;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 781px) {
    .site-title-wrap {
        display: flex !important;
    }
    .site-description {
        display: block !important;
    }
    .site-title a {
        font-size: 1.1rem;
        letter-spacing: 0.07em;
    }
}



/* === IQTL tweak: shrink and lighten featured track card further === */
.hero__player-card {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    max-width: 210px;
    padding: 0.6rem 0.6rem;
    border-radius: 16px;
    align-self: flex-start;
    justify-self: flex-end;
}

/* Scale down SoundCloud player inside card */
.hero__player-embed {
    width: 210px;
}

.hero__player-embed iframe {
    transform: scale(0.8);
    transform-origin: top right;
}

/* Push hero text block lower for better vertical spacing */
.hero__content {
    margin-top: 5.5rem;
}

.hero__headline {
    margin: 0 0 1.25rem;
}


/* === IQTL v70: Anchor hero content block to bottom === */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 6rem;
    min-height: 92vh;
}

.hero__inner {
    width: 100%;
}

.hero__content {
    margin: 0;
    padding: 0 2rem;
    max-width: 540px;
}


/* === IQTL v70 tweak: center-align featured track text + player === */
.hero__player-card {
    text-align: center;
}

.hero__player-title,
.hero__player-sub {
    text-align: center;
}

.hero__player-embed {
    width: 210px;
    margin: 0 auto;
}

.hero__player-embed iframe {
    transform-origin: top center;
}

/* === IQTL: portrait video/embed support in Featured Track card (YouTube Shorts / direct MP4) === */
.hero__embed {
    position: relative;
}

.hero__embed--portrait {
    width: 210px;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.hero__embed--portrait iframe,
.hero__embed--portrait .hero__video-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Override the global iframe scale-down for portrait embeds */
.hero__embed--portrait iframe {
    transform: none !important;
}


/* === IQTL v70: Tour/events list styling to mimic provided layout === */
.section--shows .section__body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.section--shows .section__body li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section--shows .section__body li:last-child {
    border-bottom: none;
}

/* Date column */
.section--shows .section__body li > *:first-child {
    min-width: 80px;
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.8);
}

/* Middle details column */
.section--shows .section__body li > *:nth-child(2) {
    flex: 1;
}

/* CTA column (tickets / notes) */
.section--shows .section__body li > *:last-child {
    text-align: right;
    white-space: nowrap;
}


/* Dynamic music layout from v76 */
.music-links {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 960px) {
  .music-links--count-1 {
    max-width: 520px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .music-links--count-2 {
    max-width: 840px;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .music-links--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .music-links--count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .music-links--count-5,
  .music-links--count-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 959.98px) and (min-width: 640px) {
  .music-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .music-links {
    grid-template-columns: minmax(0, 1fr);
  }
}




/* Music section dynamic layout refinements */
.section--music .section__grid {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
}

.section--music .music-links {
  width: 100%;
}

.section--music .music-links .music-card {
  width: 100%;
}



/* Shows section: v82 data layout with v70 card look */
.section--shows .cl-tour-list {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.section--shows .cl-tour-item {
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  background: rgba(10, 10, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.section--shows .cl-tour-date {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.section--shows .cl-tour-day {
  display: block;
  color: var(--iqtl-heading);
}

.section--shows .cl-tour-year {
  display: block;
  opacity: 0.8;
  font-size: 0.78rem;
}

.section--shows .cl-tour-venue {
  margin: 0 0 0.1rem;
}

.section--shows .cl-tour-venue a,
.section--shows .cl-tour-venue {
  color: var(--iqtl-heading);
  text-decoration: none;
}

.section--shows .cl-tour-venue a:hover {
  text-decoration: underline;
}

.section--shows .cl-tour-city,
.section--shows .cl-tour-note {
  font-size: 0.85rem;
  opacity: 0.85;
}

.section--shows .cl-tour-cta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
  font-size: 0.85rem;
}

.section--shows .cl-ticket-fancy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  background-color: rgba(5, 5, 7, 0.92);
  cursor: pointer;
  color: #ede5ff;
  transition: 0.2s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
  border-color: var(--iqtl-primary);
}

.section--shows .cl-ticket-fancy:hover {
  box-shadow: 0px 0px 17px -4px var(--iqtl-secondary);
  border-color: var(--iqtl-secondary);
  color: #f7f5ff;
  background-color: rgba(46, 37, 70, 0.95);
}

.section--shows .cl-ticket-fancy:active {
  box-shadow: 0px 0px 17px -7px var(--iqtl-secondary);
  border-color: var(--iqtl-secondary);
  transform: scale(0.95);
}


.section--shows .cl-ticket-text {
  white-space: nowrap;
}

.section--shows .cl-tour-toggle {
  margin-top: 1.5rem;
  text-align: center;
}

.section--shows .cl-tour-toggle-btn {
  border-radius: 999px;
}

/* Mobile stacking for tour items */
@media (max-width: 640px) {
  .section--shows .cl-tour-item {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
  }

  .section--shows .cl-tour-cta {
    align-items: flex-start;
  }
}



/* Header logo/tagline bottom alignment (scoped) */
.site-header__branding .site-branding {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.site-header__branding .site-logo {
  display: inline-flex;
  align-items: flex-end;
}

.site-header__branding .site-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.1rem;
}

.site-header__branding .site-description {
  margin: 0;
}




/* FINAL – Ticket Button Fully Theme-Driven */
.section--shows .cl-ticket-fancy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  border: 1px solid var(--iqtl-primary);
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;

  /* Base Colors – theme-based */
  background-color: var(--iqtl-bg);
  color: var(--iqtl-text-light);

  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  transition: 0.2s ease;
}

.section--shows .cl-ticket-fancy:hover {
  box-shadow: 0 0 17px -4px var(--iqtl-secondary);
  border-color: var(--iqtl-secondary);
  color: var(--iqtl-text-light);
  background-color: var(--iqtl-secondary-dark, rgba(20,20,20,0.9));
}

.section--shows .cl-ticket-fancy:active {
  box-shadow: 0 0 17px -7px var(--iqtl-secondary);
  border-color: var(--iqtl-secondary);
  transform: scale(0.95);
}



/* Header social icons */
.site-header__social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1.5rem;
}

.site-header__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  text-decoration: none;
  color: #ffffff;
  background: transparent;
  border: 1.5px solid currentColor;
  box-sizing: border-box;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.site-header__social-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* Default hover (fallback) */


/* Brand colors */
.site-header__social-link--facebook,
.site-header__social-link--facebook:visited {
  color: #1877F2;
}

.site-header__social-link--instagram,
.site-header__social-link--instagram:visited {
  color: #E1306C;
}

.site-header__social-link--x,
.site-header__social-link--x:visited {
  color: #1DA1F2;
}

.site-header__social-link--tiktok,
.site-header__social-link--tiktok:visited {
  color: #69C9D0;
}

.site-header__social-link--youtube,
.site-header__social-link--youtube:visited {
  color: #FF0000;
}

.site-header__social-link--spotify,
.site-header__social-link--spotify:visited {
  color: #1DB954;
}

.site-header__social-link--soundcloud,
.site-header__social-link--soundcloud:visited {
  color: #FF5500;
}

.site-header__social-link--bandcamp,
.site-header__social-link--bandcamp:visited {
  color: #629AA9;
}

/* Brand hover glow */
.site-header__social-link--facebook:hover,
.site-header__social-link--facebook:focus-visible,
.site-header__social-link--facebook:active,
.site-header__social-link--instagram:hover,
.site-header__social-link--instagram:focus-visible,
.site-header__social-link--instagram:active,
.site-header__social-link--x:hover,
.site-header__social-link--x:focus-visible,
.site-header__social-link--x:active,
.site-header__social-link--tiktok:hover,
.site-header__social-link--tiktok:focus-visible,
.site-header__social-link--tiktok:active,
.site-header__social-link--youtube:hover,
.site-header__social-link--youtube:focus-visible,
.site-header__social-link--youtube:active,
.site-header__social-link--spotify:hover,
.site-header__social-link--spotify:focus-visible,
.site-header__social-link--spotify:active,
.site-header__social-link--soundcloud:hover,
.site-header__social-link--soundcloud:focus-visible,
.site-header__social-link--soundcloud:active,
.site-header__social-link--bandcamp:hover,
.site-header__social-link--bandcamp:focus-visible,
.site-header__social-link--bandcamp:active {
  transform: translateY(-1px);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px currentColor, 0 0 14px currentColor;
}

/* Layout integration with nav */
.main-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

.main-navigation > ul {
  flex: 0 1 auto;
}

.main-navigation .site-header__social {
  flex: 0 0 auto;
}

/* Mobile / tablet: social icons drop into the hamburger panel */
@media (max-width: 768px) {
  .main-navigation {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-navigation .site-header__social {
    width: 100%;
    padding: 0 1.25rem 0.85rem;
    margin-left: 0;
  }

  .main-navigation .site-header__social-link {
    width: 34px;
    height: 34px;
  }
}



/* Ensure hidden tour items stay hidden, even after grid layout rules */
.section--shows .cl-tour-item.cl-tour-item--hidden {
  display: none !important;
}



/* Neon outline toggle for shows list */
.section--shows .cl-tour-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.4rem 1.4rem;
  background: transparent;
  border-radius: 6px;
  border: 1px solid var(--iqtl-primary);
  color: var(--iqtl-text-light);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 191, 156, 0.55);
  transition:
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    transform 0.18s ease-out,
    color 0.18s ease-out;
}

/* Arrows on both sides, pointing based on expanded state */
.section--shows .cl-tour-toggle-btn::before,
.section--shows .cl-tour-toggle-btn::after {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1;
}

/* Collapsed: show all dates -> arrows down */
.section--shows .cl-tour-toggle-btn::before,
.section--shows .cl-tour-toggle-btn::after {
  content: '▼';
}

/* Expanded: show fewer dates -> arrows up */
.section--shows .cl-tour-toggle-btn[data-expanded="true"]::before,
.section--shows .cl-tour-toggle-btn[data-expanded="true"]::after {
  content: '▲';
}

/* Hover state: stronger neon glow */
.section--shows .cl-tour-toggle-btn:hover {
  border-color: var(--iqtl-secondary);
  box-shadow:
    0 0 16px rgba(0, 191, 156, 0.9),
    0 0 24px rgba(0, 234, 180, 0.75);
  transform: translateY(-1px);
}

/* Compact on very small screens */
@media (max-width: 480px) {
  .section--shows .cl-tour-toggle-btn {
    font-size: 0.8rem;
    padding: 0.35rem 1.1rem;
    letter-spacing: 0.13em;
  }
}



/* IQTL compact shows list spacing */
.section--shows .cl-tour-list {
  gap: 0.7rem;
}

.section--shows .cl-tour-item {
  padding: 0.75rem 1.1rem;
  min-height: 3.5rem;
}



/* Ensure social icons don't pick up nav text-shadow glow */
.site-header__social-link,
.site-header__social-link:hover,
.site-header__social-link:focus {
  text-shadow: none !important;
}

/* === IQTL custom mobile fix: Intro section full-width stack === */
@media (max-width: 768px) {
    .section--intro .section__inner {
        max-width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .section--intro .intro-layout {
        max-width: 100%;
        margin: 0 auto;
    }

    .intro-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .intro-content .intro-text,
    .intro-content .intro-buttons {
        flex: 1 1 auto;
        width: 100%;
    }

    .intro-content .intro-text {
        text-align: left;
    }

    .intro-content .intro-buttons .btn {
        display: inline-block;
        max-width: 100%;
        width: auto;
        text-align: center;
    }
}

/* === IQTL custom: vivid brand hover for social icons === */
.site-header__social-link--facebook:hover,
.site-header__social-link--facebook:focus-visible,
.site-header__social-link--facebook:active {
    background-color: #1877F2;
    color: #050608;
    border-color: #1877F2;
}

.site-header__social-link--instagram:hover,
.site-header__social-link--instagram:focus-visible,
.site-header__social-link--instagram:active {
    background: radial-gradient(circle at 30% 30%, #FEDA77, #F58529 30%, #DD2A7B 60%, #8134AF 80%, #515BD4);
    color: #050608;
    border-color: #DD2A7B;
}

.site-header__social-link--x:hover,
.site-header__social-link--x:focus-visible,
.site-header__social-link--x:active {
    background-color: #000000;
    color: #FFFFFF;
    border-color: #000000;
}

.site-header__social-link--tiktok:hover,
.site-header__social-link--tiktok:focus-visible,
.site-header__social-link--tiktok:active {
    background: linear-gradient(135deg, #25F4EE, #FE2C55);
    color: #050608;
    border-color: #25F4EE;
}

.site-header__social-link--youtube:hover,
.site-header__social-link--youtube:focus-visible,
.site-header__social-link--youtube:active {
    background-color: #FF0000;
    color: #FFFFFF;
    border-color: #FF0000;
}

.site-header__social-link--spotify:hover,
.site-header__social-link--spotify:focus-visible,
.site-header__social-link--spotify:active {
    background-color: #1DB954;
    color: #050608;
    border-color: #1DB954;
}

.site-header__social-link--soundcloud:hover,
.site-header__social-link--soundcloud:focus-visible,
.site-header__social-link--soundcloud:active {
    background-color: #FF5500;
    color: #050608;
    border-color: #FF5500;
}

.site-header__social-link--bandcamp:hover,
.site-header__social-link--bandcamp:focus-visible,
.site-header__social-link--bandcamp:active {
    background-color: #629AA9;
    color: #050608;
    border-color: #629AA9;
}

/* Meat section reuses intro layout */
.section--meat .section__inner {
    max-width: 960px;
}


.section--meat .wp-block-button__link,
.section--meat .button {
  width: 10em;
  position: relative;
  height: 3.5em;
  border: 3px solid var(--iqtl-primary);
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.section--meat .wp-block-button__link::after,
.section--meat .button::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: transparent;
  transition: 0.5s;
  transform-origin: center;
}

.section--meat .wp-block-button__link::before,
.section--meat .button::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: transparent;
  transition: 0.5s;
}

.section--meat .wp-block-button__link:hover::before,
.section--meat .wp-block-button__link:hover::after,
.section--meat .button:hover::before,
.section--meat .button:hover::after {
  transform: scale(0)
}

.section--meat .wp-block-button__link:hover,
.section--meat .button:hover {
  box-shadow: inset 0px 0px 25px var(--iqtl-secondary);
}




/* Subtle primary-color accent, keeps pattern dominant */




/* Primary accent, low‑intensity glow */


/* Blog / Newsletter: Futuristic pattern only on background layer */
.section--blog-newsletter {
    position: relative;
    overflow: hidden;
    background: transparent; /* base stays clean; pattern handled by ::before */
}

/* Noise + gradient lives behind content only */
.section--blog-newsletter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        145deg,
        rgb(0, 0, 0),
        rgba(35, 35, 35, 0.9),
        rgb(50, 50, 50)
    );
    filter: url(#advanced-texture);
    z-index: 0;
    pointer-events: none;
}

/* Primary-color glow accent, also behind content */
.section--blog-newsletter::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, var(--iqtl-primary) 0%, transparent 60%),
        radial-gradient(circle at 85% 80%, var(--iqtl-primary) 0%, transparent 70%);
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}

/* Ensure inner content sits above textured background */
.section--blog-newsletter > * {
    position: relative;
    z-index: 1;
}


/* Ensure WPForms contact fields follow theme typography colors */
.section--contact .wpforms-form .wpforms-field-label,
.section--contact .wpforms-form .wpforms-field-sublabel,
.section--contact .wpforms-form label {
    color: var(--iqtl-subtitle, rgba(235, 235, 235, 0.8));
}

.section--contact .wpforms-form input[type="text"],
.section--contact .wpforms-form input[type="email"],
.section--contact .wpforms-form input[type="tel"],
.section--contact .wpforms-form input[type="url"],
.section--contact .wpforms-form input[type="number"],
.section--contact .wpforms-form textarea {
    color: var(--iqtl-body);
    background-color: rgba(8, 8, 11, 0.9);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.section--contact .wpforms-form input::placeholder,
.section--contact .wpforms-form textarea::placeholder {
    color: var(--iqtl-text-light);
}

.section--contact .wpforms-form .wpforms-required-label {
    color: var(--iqtl-secondary, #FEFF38);
}



/* Center the Simple SMTP Contact Form block */
.contact-form--plugin {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* Force center alignment inside the contact section */
.section--contact .section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ensure the form container centers properly */
.contact-form--plugin {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* Tighter centering for the contact section:
 * make header and form share the same width and center as a block.
 */
.section--contact .section__inner {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}

.section--contact .contact-form--plugin {
    width: 100%;
    max-width: 100%;
}


/* === Simple SMTP Contact Form: success + error message restyle === */
#sscf-success,
#sscf-error,
.sscf-message,
.sscf-success-message,
.sscf-message-success,
.sscf-error-message {
    background-color: #111214 !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 1px solid #5bffc9 !important;
    color: #f5f5f5 !important;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border-radius: 6px !important;
    margin: 0 auto 24px auto !important;
    max-width: 720px;
    letter-spacing: 0.04em;
}

/* Kill any leftover inner highlight strips or spans */
#sscf-success *,
#sscf-error *,
.sscf-message *,
.sscf-success-message *,
.sscf-message-success *,
.sscf-error-message * {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: inherit !important;
}


/* Direct override for Simple SMTP Contact Form success + error wrappers */
body .sscf-success,
body .sscf-errors {
    background-color: #111214 !important;
    background-image: none !important;
    border: 1px solid #5bffc9 !important;
    color: #f5f5f5 !important;
    padding: 14px 18px !important;
    margin: 0 auto 24px auto !important;
    max-width: 720px;
    border-radius: 6px !important;
    box-shadow: none !important;
}
body .sscf-errors ul,
body .sscf-errors li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* =========================
   LISTEN SECTION BACKGROUND
   Match Secondary Pages Motion
   ========================= */

.listen-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    120deg,
    rgba(0,0,0,0.95),
    rgba(20,20,20,0.95),
    rgba(0,0,0,0.95)
  );
}

.listen-section::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,0.02), transparent 50%);
  animation: secondary-style-drift 60s linear infinite;
  transform: translate3d(0,0,0);
  pointer-events: none;
}

@keyframes secondary-style-drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-4%, -6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}