/*
Theme Name: Sunset Strip Radio
Theme URI: https://sunsetstripradio.com
Author: Bob VanHeuvelen
Description: Custom theme for Sunset Strip Radio — glam, hair metal and sleaze rock. Flyer-poster aesthetic with a persistent Live365 player.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ssr
*/

/* ============================================================
   TOKENS — every colour in the site comes from here.
   Change these six values and the whole site re-skins.
   ============================================================ */
:root{
  --paper:#efe6cf;
  --paper2:#e4d8b8;
  --ink:#1c1710;
  --ink2:#3a2f22;
  --red:#b0121d;
  --red2:#8a0d16;
  --topbar-h:60px;
}

*{ box-sizing:border-box; margin:0 }
html{ scroll-behavior:smooth }
body{
  min-height:100%;
  background:radial-gradient(120% 90% at 50% 20%, #17110c 0%, #0a0705 70%, #050302 100%);
  background-attachment:fixed;
  font-family:'Oswald',sans-serif;
  color:var(--ink);
}
img{ max-width:100%; height:auto }
a{ color:var(--red) }

/* ============================================================
   TOP BAR — site chrome. Nav + player, on every page.
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--ink); border-bottom:3px solid var(--red);
  box-shadow:0 6px 24px rgba(0,0,0,.65);
}
.topbar-in{
  max-width:1060px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:16px; min-height:var(--topbar-h);
}

.brand{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.05em;
  font-size:15px; color:var(--paper); text-decoration:none; white-space:nowrap;
}
.brand:hover{ color:var(--red) }
.brand svg{ width:16px; height:16px; fill:currentColor }

/* --- nav --- */
.nav{ flex:1 1 auto; min-width:0 }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:4px; flex-wrap:wrap }
.nav li{ position:relative }
.nav a{
  display:block; padding:8px 12px; text-decoration:none;
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:11.5px; color:#a89a72;
  border:2px solid transparent; border-radius:2px; transition:color .12s, border-color .12s;
}
.nav a:hover{ color:var(--paper); border-color:rgba(239,230,207,.34) }
.nav .current-menu-item > a,
.nav .current_page_item > a{ color:var(--paper); border-color:var(--red) }

/* dropdowns */
.nav ul ul{
  display:none; position:absolute; top:100%; left:0; z-index:120;
  background:var(--ink); border:2px solid var(--red); min-width:190px;
  flex-direction:column; gap:0; padding:4px;
}
.nav li:hover > ul{ display:flex }
.nav ul ul a{ border-color:transparent }

/* --- player in the bar --- */
.pbar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; margin-left:auto }
.listen-btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:2px solid var(--paper); background:var(--red); color:var(--paper);
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.05em;
  font-size:14px; padding:8px 16px 8px 13px; border-radius:2px; transition:background .12s;
}
.listen-btn:hover{ background:var(--red2) }
.listen-btn:active{ transform:translateY(1px) }
.listen-btn svg{ width:17px; height:17px; fill:currentColor }
.listen-btn .ico-pause{ display:none }
body.playing .listen-btn .ico-play{ display:none }
body.playing .listen-btn .ico-pause{ display:block }
.listen-btn .lbl::after{ content:"Listen Live" }
body.playing .listen-btn .lbl::after{ content:"Stop" }

.pbar-now{
  font-family:'Special Elite',monospace; font-size:12px; color:#a89a72;
  max-width:230px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pbar-now b{ color:var(--paper) }

/* --- mobile nav toggle --- */
.navtoggle{
  display:none; cursor:pointer; background:transparent; border:2px solid rgba(239,230,207,.34);
  color:var(--paper); border-radius:2px; padding:7px 10px; margin-left:auto;
}
.navtoggle svg{ width:18px; height:18px; fill:currentColor; display:block }

@media (max-width:900px){
  .pbar-now{ display:none }
}
@media (max-width:780px){
  .topbar-in{ flex-wrap:wrap; padding:10px 14px }
  .navtoggle{ display:block }
  .pbar{ margin-left:0; order:3 }
  .nav{ order:4; flex-basis:100%; display:none }
  .nav.open{ display:block }
  .nav ul{ flex-direction:column; gap:0; padding-bottom:8px }
  .nav ul ul{ position:static; display:flex; border:none; border-left:2px solid var(--red);
              margin-left:12px; padding:0 }
}

/* ============================================================
   FLYER — the front page hero
   ============================================================ */
.flyer-wrap{ display:grid; place-items:center; padding:30px 14px 50px }
.flyer{
  position:relative; width:min(660px,94vw);
  background:linear-gradient(160deg,var(--paper),var(--paper2));
  padding:clamp(26px,5vw,46px) clamp(20px,5vw,44px) clamp(22px,4vw,36px);
  border:2px solid var(--ink);
  box-shadow:0 0 0 6px var(--paper), 0 0 0 8px var(--ink),
             0 30px 70px rgba(0,0,0,.7), inset 0 0 60px rgba(120,90,40,.16);
  transform:rotate(-1deg);
}
.flyer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.10; mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.flyer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 12% 8%, rgba(90,60,20,.16), transparent 60%),
             radial-gradient(50% 40% at 92% 88%, rgba(90,60,20,.18), transparent 60%);
}
.flyer .inner{
  position:relative; z-index:2; border:1px solid var(--ink);
  padding:clamp(18px,4vw,30px) clamp(14px,4vw,26px); text-align:center;
}
.tape{ position:absolute; width:96px; height:26px; background:rgba(214,198,150,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.3); z-index:5 }
.tape.tl{ top:-12px; left:-18px; transform:rotate(-38deg) }
.tape.tr{ top:-12px; right:-18px; transform:rotate(38deg) }
.tape.bl{ bottom:-12px; left:-18px; transform:rotate(40deg) }
.tape.br{ bottom:-12px; right:-18px; transform:rotate(-40deg) }

.rule{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; font-size:12px; color:var(--ink2) }
.rule.star{ display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 }
.rule.star::before,.rule.star::after{ content:""; height:2px; flex:1; max-width:70px; background:var(--ink) }
.present{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(12px,2.4vw,15px); font-weight:600; margin-top:8px }
.venue{ font-family:'Rye',serif; font-size:clamp(26px,6.5vw,46px); line-height:1;
  color:var(--ink); margin:4px 0 2px; text-shadow:1px 1px 0 rgba(0,0,0,.12) }
.dash{ font-family:'Oswald',sans-serif; letter-spacing:.24em; text-transform:uppercase;
  font-size:12px; color:var(--ink2); margin-bottom:6px }
.headliner{ font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(46px,13vw,104px); line-height:.84; letter-spacing:.005em;
  margin:6px 0; color:var(--ink); text-shadow:2px 2px 0 rgba(176,18,29,.18) }
.genres{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:clamp(12px,2.7vw,17px); color:var(--ink) }
.era{ font-family:'Rye',serif; font-size:clamp(15px,3.4vw,22px); color:var(--red); margin:4px 0 2px }

.stage{ margin-top:18px; padding-top:16px; border-top:1px solid var(--ink) }
.onair{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.2em;
  font-size:12px; color:var(--ink2); display:flex; align-items:center; justify-content:center;
  gap:8px; margin-bottom:12px; min-height:16px }
.onair .dot{ width:9px; height:9px; border-radius:50%; background:#9a9082 }
body.playing .onair .dot{ background:var(--red); box-shadow:0 0 8px var(--red); animation:blink 1.4s infinite }
.onair .txt::after{ content:"Tune In" }
body.playing .onair .txt::after{ content:"On Air — Live Now" }

.listen-big{ display:inline-flex; align-items:center; gap:14px; cursor:pointer;
  border:2px solid var(--ink); background:var(--ink); color:var(--paper);
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(18px,4vw,26px); padding:14px 32px 14px 26px; border-radius:2px;
  box-shadow:4px 4px 0 rgba(28,23,16,.35); transition:transform .06s }
.listen-big:hover{ background:var(--red); border-color:var(--red) }
.listen-big:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(28,23,16,.35) }
.listen-big svg{ width:22px; height:22px; fill:var(--paper) }
.listen-big .ico-pause{ display:none }
body.playing .listen-big .ico-play{ display:none }
body.playing .listen-big .ico-pause{ display:block }
.listen-big .lbl::after{ content:"Listen Live" }
body.playing .listen-big .lbl::after{ content:"Stop" }

.now{ font-family:'Special Elite',monospace; font-size:14px; color:var(--ink2);
  margin-top:14px; min-height:18px }
.now b{ color:var(--ink) }
.deets{ font-family:'Special Elite',monospace; font-size:clamp(12px,2.5vw,14px);
  color:var(--ink2); line-height:1.7; margin-top:18px }
.foot{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; font-size:clamp(13px,2.8vw,16px); margin-top:16px; color:var(--ink) }

/* flyer call-to-action buttons */
.flyer-cta{ margin-top:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.fbtn{ display:inline-block; text-decoration:none; font-family:'Anton',sans-serif;
  text-transform:uppercase; letter-spacing:.05em; font-size:14px; padding:11px 20px;
  border:2px solid var(--ink); color:var(--ink); background:transparent; border-radius:2px;
  transition:background .12s, color .12s }
.fbtn:hover{ background:var(--ink); color:var(--paper) }
.fbtn.primary{ background:var(--red); border-color:var(--red); color:var(--paper) }
.fbtn.primary:hover{ background:var(--red2); border-color:var(--red2) }

@keyframes blink{ 50%{ opacity:.3 } }
@media (max-width:480px){ .flyer{ transform:none } .tape{ display:none } }

/* --- Last Spun --- */
.setlist{ margin-top:22px; padding-top:16px; border-top:1px dashed var(--ink); text-align:left }
.setlist h3{ font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.1em;
  font-size:clamp(15px,3.6vw,20px); color:var(--red); text-align:center; margin:0 0 2px }
.setlist .sub{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; font-size:10px; color:var(--ink2); text-align:center; margin:0 0 12px }
.setlist ol{ list-style:none; margin:0; padding:0; counter-reset:spin }
.setlist li{ counter-increment:spin; display:flex; gap:10px; align-items:baseline;
  font-family:'Special Elite',monospace; font-size:clamp(12px,2.6vw,14px); color:var(--ink);
  padding:5px 0; border-bottom:1px dotted rgba(28,23,16,.28) }
.setlist li:last-child{ border-bottom:0 }
.setlist li::before{ content:counter(spin,decimal-leading-zero); color:var(--red);
  font-weight:700; flex:0 0 26px }
.setlist li .s-artist{ font-weight:700; color:var(--ink) }
.setlist li .s-title{ color:var(--ink2) }
.setlist .empty{ font-family:'Special Elite',monospace; font-size:13px; color:var(--ink2);
  text-align:center; padding:8px 0; margin:0 }

/* ============================================================
   INTERIOR PAGES — paper card on the dark ground
   ============================================================ */
.page-wrap{ max-width:860px; margin:0 auto; padding:34px 14px 60px }
.page-head{ text-align:center; margin-bottom:24px }
.page-eyebrow{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; font-size:12px; color:#cbb98a }
.page-title{ font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(36px,8vw,64px); line-height:.9; color:var(--paper);
  text-shadow:2px 2px 0 var(--red2); margin:6px 0 4px }
.page-sub{ font-family:'Rye',serif; font-size:clamp(15px,3.2vw,22px); color:var(--red) }

.sheet{ position:relative; background:linear-gradient(160deg,var(--paper),var(--paper2));
  border:2px solid var(--ink);
  box-shadow:0 0 0 6px var(--paper), 0 0 0 8px var(--ink),
             0 30px 70px rgba(0,0,0,.7), inset 0 0 60px rgba(120,90,40,.14);
  padding:clamp(20px,4vw,36px) }
.sheet::before{ content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.10; mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.sheet > *{ position:relative; z-index:2 }

.sheet h1,.sheet h2,.sheet h3{ font-family:'Anton',sans-serif; text-transform:uppercase;
  letter-spacing:.02em; color:var(--ink); margin:22px 0 10px; line-height:1.15 }
.sheet h1{ font-size:30px } .sheet h2{ font-size:24px } .sheet h3{ font-size:19px }
.sheet h1:first-child,.sheet h2:first-child,.sheet h3:first-child{ margin-top:0 }
.sheet p,.sheet li{ font-family:'Oswald',sans-serif; font-weight:400; font-size:16px;
  line-height:1.75; color:var(--ink2); margin-bottom:14px }
.sheet a{ color:var(--red); text-decoration:none; border-bottom:1px solid rgba(176,18,29,.4) }
.sheet a:hover{ color:var(--red2) }
.sheet ul,.sheet ol{ padding-left:22px; margin-bottom:14px }
.sheet blockquote{ border-left:3px solid var(--red); padding:8px 0 8px 16px; margin:18px 0;
  font-family:'Special Elite',monospace; font-size:14px; line-height:1.7 }
.sheet img{ border:2px solid var(--ink) }
.sheet hr{ border:none; border-top:1px dashed var(--ink); margin:24px 0 }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-foot{ text-align:center; padding:30px 14px 46px }
.site-foot .mark{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; font-size:14px; color:var(--paper) }
.site-foot .mark a{ color:var(--paper); text-decoration:none }
.site-foot .tag{ font-family:'Special Elite',monospace; font-size:11.5px;
  color:#8a7c5e; margin-top:8px; line-height:1.7 }
.site-foot nav ul{ list-style:none; margin:14px 0 0; padding:0;
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
.site-foot nav a{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:11px; color:#a89a72; text-decoration:none }
.site-foot nav a:hover{ color:var(--paper) }

/* screen-reader helper */
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap }