/* =========================
   Dementers — styles.css
   Dark theme, fast, minimal
========================= */

/* Theme */
:root{
  --bg:#0a0a0a;
  --bg-soft:#111;
  --card:#151515;
  --text:#e8e8e8;
  --muted:#9aa0a6;
  --border:#222;
  --red:#ff2a2a;
  --red-soft:#ff5151;
  --max:1100px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-soft)}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:28px 18px}

/* Utility */
.sr-only{
  position:absolute !important; width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.small{font-size:.9rem}
.muted{color:var(--muted)}

/* =========================
   Header / Nav
========================= */
header{
  position:sticky; top:0; z-index:10;
  background:rgba(10,10,10,.9);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--border);
}
header .wrap, footer .wrap{
  max-width:var(--max); margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand{display:flex; align-items:center; gap:10px}
header .brand img{height:75px; width:auto; display:block}
nav a{margin-left:18px}

/* Mobile hamburger */
.menu-toggle{display:none}
@media (max-width: 820px){
  header .wrap{position:relative}
  .menu-toggle{
    display:block; font-size:24px; line-height:1;
    background:#1a1a1a; color:var(--text);
    border:1px solid var(--border); border-radius:12px;
    padding:10px 14px;
  }
  header nav{
    position:absolute; right:18px; top:58px; display:none;
    flex-direction:column; gap:10px;
    background:#0e0e0e; border:1px solid var(--border);
    border-radius:12px; padding:12px; box-shadow:var(--shadow);
    min-width:160px;
  }
  header.nav-open nav{display:flex}
  header nav a{margin:0}
}

/* =========================
   Hero
========================= */
.hero{padding:14px 0 6px; text-align:center}
.glow{font-size:clamp(36px,6vw,64px); line-height:1; text-shadow:0 0 30px rgba(255,42,42,.25)}
.subtitle{color:var(--muted); margin-top:10px}

/* Index logo beneath slider */
.brand-mark img{ width:300px; height:auto; margin:0 auto; display:block; }

/* =========================
   Buttons
========================= */
.btn{
  display:inline-block;
  border:1px solid var(--red);
  padding:10px 16px;
  border-radius:999px;
  box-shadow:var(--shadow);
  color:var(--text);
  background:transparent;
  cursor:pointer;
}
.btn:hover{background:var(--red); color:#000}
.btn.small{padding:6px 10px; font-size:.9rem}
.btn.secondary{border-color:var(--border)}
.btn.secondary:hover{background:var(--bg-soft)}
.btn.ghost{border-color:var(--border); background:transparent}

/* Shows: Directions/Tickets buttons */
.btn.map,
.btn.tickets{
  border:1px solid var(--red);
  background:#1a1a1a;
  color:var(--text);
  border-radius:8px;
  padding:4px 10px;               /* shorter per request */
}
.btn.map:hover,
.btn.tickets:hover{
  background:var(--red);
  color:#000;
  text-decoration:none;            /* no underline */
}

/* =========================
   Grid / Cards / Forms
========================= */
.grid.two{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:780px){.grid.two{grid-template-columns:1fr 1fr}}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

/* Contact */
.contact .row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:780px){.contact .row{grid-template-columns:1fr 1fr}}
.contact input,.contact textarea{
  width:100%; background:var(--bg-soft); border:1px solid var(--border);
  color:var(--text); padding:10px; border-radius:10px; margin-top:6px
}
.contact button{margin-top:12px}

/* =========================
   Slider
========================= */
.slider{position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--border); background:#0b0b0b}
.slide-track{display:flex; will-change:transform; touch-action:pan-y; transition:transform .45s ease}
.slide{min-width:100%}
.slide img{width:100%; height:auto; display:block}
.slider .nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.slider .btn-nav{pointer-events:auto; background:rgba(0,0,0,.35); border:1px solid var(--border); backdrop-filter:blur(4px); border-radius:999px; padding:8px 12px; margin:10px; color:var(--text)}
.slider .dots{position:absolute; left:0; right:0; bottom:8px; display:flex; gap:6px; justify-content:center}
.slider .dot{width:8px; height:8px; border-radius:50%; border:1px solid var(--border); background:#333}
.slider .dot.active{background:var(--red)}

/* =========================
   Shows
========================= */
.list{display:grid; gap:10px}
.show{
  display:block; padding:12px 14px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
}

/* Full-width lines */
.show-line, .show-notes{width:100%}
.show-line{
  display:flex; flex-wrap:wrap; gap:8px 12px;
  align-items:center; justify-content:flex-start;
}
.show-line1{margin-bottom:6px}

.show .date{font-weight:700}
.show .venue{font-weight:600}
.show .time, .show .price{color:var(--text)}      /* same color as body text */
.show .address{color:var(--text)}
.show a, .show button{cursor:pointer}

/* Website = red text link (not a button) */
a.website{color:var(--red); background:transparent; border:0; padding:0}
a.website:hover{color:var(--red-soft); text-decoration:underline}

/* Notes */
.show-notes{margin-top:8px; color:var(--text); text-align:left}
.show-notes strong{font-weight:700}

/* Map embed (if used) */
.map-wrap{margin-top:8px}
.map-wrap iframe{
  width:100%; height:280px;
  border:1px solid var(--border); border-radius:12px; background:#000
}

/* Desktop keeps left-aligned flex */
@media (min-width:980px){
  .show-line1, .show-line2{
    display:flex; flex-wrap:wrap; gap:8px 12px;
    align-items:center; justify-content:flex-start;
  }
}

/* =========================
   Gallery
========================= */
.masonry{columns:1; column-gap:14px}
@media(min-width:680px){.masonry{columns:2}}
@media(min-width:1024px){.masonry{columns:3}}
.thumb{display:inline-block; margin-bottom:14px; break-inside:avoid}
.thumb img{border-radius:12px; border:1px solid var(--border)}
.video iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:12px}

/* =========================
   Footer
========================= */
footer{border-top:1px solid var(--border); background:#0b0b0b}
footer .wrap.footer-stack{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  gap:4px; padding-top:10px; padding-bottom:12px;
}
footer .wrap.footer-stack > p{margin:0; line-height:1.3}

/* Social row centered, first */
.footer-social{
  display:flex; gap:12px; align-items:center; justify-content:center;
  margin:2px 0 4px 0;
}
.footer-social .social{
  color:var(--text); opacity:.9;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--border); border-radius:999px; background:#111;
  transition:transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.footer-social .social:hover{
  color:#000; background:var(--red); border-color:var(--red); transform:translateY(-1px);
}
.footer-social .social svg{width:30px; height:30px}

/* =========================
   Merch
========================= */

/* Grid: 1 / 2 / 3 columns */
.grid.auto{
  display:grid;
  grid-template-columns:1fr;      /* mobile */
  gap:16px;
}
@media (min-width:680px){ .grid.auto{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid.auto{ grid-template-columns:repeat(3,1fr); } }

/* Product cards */
.product picture{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--border); background:#0b0b0b;
}
.product .product-body{margin-top:10px}
.product-title{margin:0 0 4px 0; font-size:1.05rem}
.product-meta{margin:0 0 8px 0}
.product-meta .price{font-weight:700}
.product-meta .sep{opacity:.6; margin:0 6px}

/* Merch buttons (match Shows pattern) */
.product a.btn, .product button.btn{
  display:inline-block;
  border:1px solid var(--red);
  background:transparent;
  color:var(--text) !important;
  border-radius:8px;
  padding:6px 12px;
  text-decoration:none !important;
}
.product a.btn:hover, .product button.btn:hover{
  background:var(--red);
  color:#000 !important;
}

/* Merch filters (force consistent style on mobile too) */
#merch-filters .card .btn,
#merch-filters .card .btn.ghost,
#merch-filters .card .btn.small.ghost{
  border:1px solid var(--red) !important;
  background:transparent !important;
  color:var(--text) !important;
  border-radius:8px !important;
  padding:6px 12px !important;
  text-decoration:none !important;
}
#merch-filters .card .btn:hover,
#merch-filters .card .btn.active{
  background:var(--red) !important;
  color:#000 !important;
  border-color:var(--red) !important;
}
#merch-filters .card .btn:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}

/* Product badges / overlays */
.product{ position:relative }
.badge{
  display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:999px;
  border:1px solid var(--border); background:#111; color:var(--text);
}
.badge.low{ border-color:#d9a800; color:#ffd24d; }
.product .soldout-overlay{
  position:absolute; inset:8px; border-radius:12px;
  background:rgba(0,0,0,.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  border:1px solid var(--border);
}

/* Product gallery (main + thumbs) */
.prod-media{ position:relative }
.prod-media .thumbs{
  display:flex !important; gap:8px; margin-top:8px;
  flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:6px 6px 8px;
}
.prod-media .thumbs img{
  flex:0 0 56px; width:56px; height:56px; object-fit:cover;
  border-radius:8px;
  border:2px solid var(--border); background:#0b0b0b; cursor:pointer;
}
.prod-media .thumbs img.active{ border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,42,42,.35); outline-offset:1px }

/* Click-to-zoom cue */
.product picture,
.product picture img,
.product .zoomable{ cursor:pointer }

/* Lightbox / PayPal modals (containers are in HTML) */
#img-lightbox, #paypal-modal{ position:fixed; inset:0; z-index:9999 }
.lb-backdrop, .pp-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7) }
.lb-body, .pp-body{
  position:relative; z-index:1; margin:4vh auto 0; max-width:min(1000px, 92vw);
  background:#0e0e0e; border:1px solid var(--border);
  border-radius:14px; padding:14px;
}
.lb-body img{
  width:100%; height:auto; display:block;
  border-radius:10px; border:1px solid var(--border); background:#000
}
.lb-close, .pp-close{
  position:absolute; right:10px; top:10px;
  background:#1a1a1a; color:var(--text);
  border:1px solid var(--border); border-radius:999px; padding:4px 8px; cursor:pointer;
}
.lb-close:hover, .pp-close:hover{ background:var(--red); color:#000 }
#paypal-buttons{ min-height:45px }