/*
Theme Name: Cat Ivy
Theme URI: https://cativymusic.com
Author: Cat Ivy
Description: Lightweight custom theme for Cat Ivy Music. No page builder, no plugins required.
Version: 1.0
Requires PHP: 7.4
Text Domain: cativy
*/

/* ============================================
   Cat Ivy Music — Design System
   ============================================ */
:root{
  --ivory:#FFFFFF;
  --ivory-deep:#F5F5F4;
  --ink:#262231;
  --ink-soft:#6b6577;
  --blue:#93BDE4;
  --blue-deep:#6E9BC7;
  --rose:#DF9BB5;
  --rose-deep:#C97A9B;
  --line: rgba(38,34,49,0.1);
  --maxw: 1240px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
button{font-family:inherit; cursor:pointer;}

::selection{background:var(--rose); color:var(--ink);}

/* ---------- NAV ---------- */
.site-header{
  position:fixed; top:15px; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}

.site-header.scrolled{
  background:rgba(250,246,240,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  box-shadow:0 1px 0 var(--line);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between;}
.site-logo{display:flex; align-items:center; z-index:101;}
.site-logo img{height:34px; width:auto; display:block;}
footer .site-logo img{height:30px;}
.footer-gcmc-link{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:16px;
  color:var(--rose-deep);
}
.site-header.on-photo:not(.scrolled) .menu-btn span{
  background:#fff;
}
.site-header.on-photo:not(.scrolled) .nav-links a{
  color:var(--blue);
}
.site-header.on-photo:not(.scrolled) .nav-links a:hover,
.site-header.on-photo:not(.scrolled) .nav-links a.current{
  color:#fff;
}

.nav-links{display:flex; align-items:center; gap:32px; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;}
.nav-links li, .mobile-nav li {
  list-style: none;
  margin: 0;
}
.nav-links a{position:relative; padding-bottom:4px; transition:opacity .2s;}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .3s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-links a.current::after{width:100%;}
.nav-links a[href*="thegcmc"]{color:var(--rose-deep); font-weight:600;}
.site-header.on-photo:not(.scrolled) .nav-links a[href*="thegcmc"]{color:var(--rose);}

.menu-btn{
  display:none; flex-direction:column; gap:5px; background:none; border:none; z-index:101;
}
.menu-btn span{width:26px; height:2px; background:var(--ink); transition:all .3s ease;}

.mobile-nav{
  display:none;
  position:fixed; inset:0; background:var(--ink); color:var(--ivory);
  z-index:99; flex-direction:column; align-items:center; justify-content:center; gap:28px;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{font-family:'Fraunces', serif; font-style:italic; font-size:30px;}
.mobile-nav a.gcmc-link{color:var(--rose);}

@media (max-width:860px){
  .nav-links{display:none;}
  .menu-btn{display:flex;}
}

/* ---------- TICKER ---------- */
.ticker{
  background:var(--ink); color:var(--ivory);
  overflow:hidden; white-space:nowrap;
  padding:11px 0;
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
}
.ticker-track{display:inline-flex; gap:60px; animation:ticker 28s linear infinite;}
.ticker-track span{display:inline-flex; align-items:center; gap:60px;}
.ticker-track a{color:inherit;}
.ticker-track a:hover{text-decoration:underline; color:var(--blue);}
.ticker-track span::after{content:'•'; color:var(--rose); margin-left:60px;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none;} }

/* ---------- HERO (full-bleed) ---------- */
.hero{
  position:relative; min-height:92svh; display:flex; align-items:flex-end;
  background:#000;
}

.hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%;
  filter:grayscale(1) contrast(1.05);
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(38,34,49,0.15) 0%, rgba(38,34,49,0.05) 40%, rgba(38,34,49,0.75) 100%),
             linear-gradient(120deg, rgba(147,189,228,0.22), rgba(223,155,181,0.28));
  mix-blend-mode:multiply;
}
.hero-content{
  position:relative; z-index:2; color:#fff; width:100%;
  padding:0 32px 70px; max-width:var(--maxw); margin:0 auto;
}

.hero-eyebrow{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--blue); margin-bottom:18px;
}
.hero h1{
  font-family:'Fraunces', serif; font-weight:500; font-style:italic;
  font-size:clamp(48px, 9vw, 130px); line-height:0.94; letter-spacing:-0.01em;
}
.hero p{
  margin-top:22px; font-size:18px; max-width:480px; color:rgba(255,255,255,0.85);
}
.hero-actions{display:flex; align-items:center; gap:20px; margin-top:34px; flex-wrap:wrap;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:100px;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  transition:transform .25s ease, background .25s ease, color .25s ease;
  border:1px solid transparent;
}
.btn-solid{background:var(--ink); color:var(--ivory);}
.btn-solid:hover{background:var(--rose-deep); transform:translateY(-2px);}
.btn-ghost{border-color:rgba(255,255,255,0.5); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,0.12); transform:translateY(-2px);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--ivory); transform:translateY(-2px);}

/* ---------- SECTION HEADS ---------- */
.section{padding:110px 0;}
.section-tight{padding:70px 0;}
.eyebrow{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--rose-deep); margin-bottom:18px; display:block;
}
h2.display{
  font-family:'Fraunces', serif; font-weight:500; font-style:italic;
  font-size:clamp(32px, 5vw, 56px); line-height:1.08;
}
.lede{font-size:17px; color:var(--ink-soft); line-height:1.75; max-width:600px; margin-top:20px;}

.about-page-section{
  padding-top: 50px;
}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  padding:130px 0 50px;
  border-bottom:1px solid var(--line);
}

.page-hero h1{
  font-family:'Fraunces', serif; font-weight:500; font-style:italic;
  font-size:clamp(46px,7vw,84px); line-height:0.98;
}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; align-items:center;}
.about-photo{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:4px;}
.about-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1);}
.about-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(147,189,228,0.25), rgba(223,155,181,0.3));
  mix-blend-mode:multiply;
}
.about-body p{font-size:17px; line-height:1.8; color:var(--ink-soft); margin-bottom:18px; max-width:580px;}
.about-body strong{color:var(--ink); font-weight:600;}

/* ---------- MUSIC / RELEASE GRID ---------- */
.release-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:60px;}
.release-card{}
.release-art{position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:4px; margin-bottom:20px; background:var(--ivory-deep);}
.release-art img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.release-card:hover .release-art img{transform:scale(1.04);}
.release-year{font-family:'Space Mono', monospace; font-size:12px; color:var(--rose-deep); letter-spacing:0.08em;}
.release-title{font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:24px; margin-top:8px;}
.release-credit{font-size:14px; color:var(--ink-soft); margin-top:8px;}
.tracklist{margin-top:20px; border-top:1px solid var(--line);}
.tracklist li{
  display:flex; gap:16px; padding:10px 0; border-bottom:1px solid var(--line);
  font-size:14px; color:var(--ink-soft);
}
.tracklist li span.num{font-family:'Space Mono',monospace; color:var(--blue-deep); width:20px;}

.stream-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:50px;}
.stream-row a{
  padding:13px 24px; border:1px solid var(--line); border-radius:100px; font-size:14px; font-weight:500;
  transition:all .25s ease;
}
.stream-row a:hover{background:var(--ink); color:var(--ivory); border-color:var(--ink);}

/* ---------- SHOWS ---------- */
.show-row{
  display:grid; grid-template-columns:120px 1fr auto; gap:26px; align-items:center;
  padding:26px 0; border-top:1px solid var(--line);
}
.show-list{margin-top:20px;}
.show-list .show-row:last-child{border-bottom:1px solid var(--line);}
.show-date{font-family:'Space Mono',monospace; font-size:14px; color:var(--rose-deep);}
.show-venue{font-size:19px; font-weight:500;}
.show-city{font-size:14px; color:var(--ink-soft); margin-top:3px;}
.empty-state{
  padding:50px 0; border-bottom:1px solid var(--line);
}

.empty-state p{font-size:17px; color:var(--ink-soft); max-width:520px;}

.shows-page-section{
  padding-top: 50px;
}

.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:60px;}
.video-embed{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:4px; background:var(--ivory-deep);}
.video-embed iframe{width:100%; height:100%; border:0;}

/* ---------- SERVICES ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:60px;}
.service-card{padding-top:26px;}
.service-photo{aspect-ratio:5/4; overflow:hidden; border-radius:4px; margin-bottom:24px;}
.service-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1);}
.service-card h3{font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:24px; margin-bottom:14px; text-align:center;}
.service-card p{font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:20px;}
.service-card a{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; border-bottom:2px solid var(--blue-deep); padding-bottom:3px;}
.services-page-section{
  padding-top: 50px;
}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px;}
.contact-info p{font-size:17px; color:var(--ink-soft); line-height:1.8; margin-bottom:26px; max-width:420px;}
.contact-info a.email{font-family:'Fraunces',serif; font-style:italic; font-size:26px; color:var(--ink); border-bottom:2px solid var(--rose); padding-bottom:2px;}
.social-list{display:flex; gap:16px; margin-top:36px;}
.social-list a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink-soft);
  transition:all .25s ease;
}
.social-list a:hover{border-color:var(--blue-deep); color:var(--blue-deep); transform:translateY(-2px);}

form.contact-form{display:flex; flex-direction:column; gap:22px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft);}
.field input, .field textarea{
  border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:10px 2px; font-family:inherit; font-size:16px; color:var(--ink);
  transition:border-color .25s ease;
}
.field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--rose-deep);}
.field textarea{resize:vertical; min-height:110px;}
.contact-form .btn{align-self:flex-start; border:none; margin-top:10px;}

/* Newsletter Banner */

.newsletter-banner{
  background:var(--ivory-deep);
  padding:90px 0;
  text-align:center;
}
.newsletter-banner .eyebrow{display:block;}
.newsletter-banner h2{margin-top:10px; margin-bottom:16px;}
.newsletter-banner p{color:var(--ink-soft); max-width:650px; margin:0 auto 30px; white-space:nowrap;}
.newsletter-form-row{display:flex; gap:12px; max-width:420px; margin:0 auto; justify-content:center;}
.newsletter-form-row input{flex:1; border:none; border-bottom:1px solid var(--line); background:transparent; padding:12px 4px; font-family:inherit; font-size:16px; color:var(--ink);}
.newsletter-msg{margin-top:14px; font-size:14px; color:var(--ink-soft);}
.newsletter-msg.error{color:var(--rose-deep);}

/* ---------- CROSS-PROMO / GCMC BANNER ---------- */
.gcmc-banner{
  background:var(--ink); color:var(--ivory);
  padding:70px 0;
}
.gcmc-banner .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:26px;}
.gcmc-banner .eyebrow{color:var(--blue);}
.gcmc-banner h2{font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:clamp(26px,3.4vw,38px);}

/* ---------- FOOTER ---------- */
footer{padding:60px 0 40px;}
.footer-top{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:26px;
  padding-bottom:40px; border-bottom:1px solid var(--line);
}
.footer-top .social-list{margin-top:0;}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:26px; font-size:13px; color:var(--ink-soft);
  flex-wrap:wrap; gap:14px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .about-grid, .contact-grid{grid-template-columns:1fr; gap:40px;}
  .release-grid, .services-grid, .video-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .show-row{grid-template-columns:1fr; gap:6px;}
  .section{padding:70px 0;}
  .page-hero{padding:130px 0 44px;}
  .wrap{ padding:0 24px; }
}

@media (max-width:600px){ 
    .newsletter-form-row{flex-direction:column;} 
    }

@media (max-width:860px){
  .newsletter-banner p{ white-space:normal; max-width:90%; }
  .ticker{ display:none; }
  .hero{ min-height:100svh; }
  .hero-content{ padding-bottom:0px; }
  .hero h1{ font-size:44px; }
  .hero p{ font-size:15px; margin-top:10px; }
  .hero-eyebrow{ font-size:11px; margin-bottom:8px; line-height:1; }
  .hero-actions{ margin-top:18px; justify-content:center; }
  .hero-actions .btn{ padding:12px 20px; font-size:12px; }
  .about-body .btn-outline{ margin-bottom:40px; }
  .shows-head{ padding-top:20px; }
  .site-header{ top:0; padding-top:42px; }
  .page-hero{ padding-top:170px; }
  .page-hero + section{ margin-top:30px; }
  .stream-row{ justify-content:center; }
}