/* =========================
   THEME / TOKENS
   ========================= */
:root{
  --bg:#0b0b0d;--fg:#f5f5f7;--muted:#a1a1aa;
  --accent:#ff2b6a;--accent-2:#6ae3ff;
  --card:#131318;--border:#1f1f23;
}

/* =========================
   BASE / RESET
   ========================= */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none}
a:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* =========================
   LAYOUT
   ========================= */
.container{width:min(1100px,92%);margin:0 auto}
.section{padding:72px 0;border-top:1px solid var(--border)}
h2{font-size:clamp(28px,4vw,42px);margin:0 0 24px}

/* Give every top-level section vertical rhythm */
main>section{padding:72px 0;border-top:1px solid var(--border)}
/* Keep Shows tighter */
#shows{padding:40px 0}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative;
  /* keep hero content closer to the top while remaining responsive */
  padding: clamp(28px, 8vh, 96px) 0 48px;
  background:
    radial-gradient(1200px 600px at 70% -20%,rgba(106,227,255,.08),transparent 60%),
    radial-gradient(1400px 700px at -10% 0%,rgba(255,43,106,.10),transparent 60%);
}
.hero .container{
  display:flex;
  flex-direction:column;
  align-items:center; /* center horizontally */
  justify-content:flex-start;
  text-align:center; /* center text inside */
  gap:12px;
}

.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;margin:0 0 12px}
.hero p{margin:0 0 24px;color:var(--muted);font-size:clamp(16px,2.3vw,20px)}

/* =========================
   BUTTONS / CTA
   ========================= */
.cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 18px;border:none;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0b0b0d;font-weight:800;cursor:pointer;
  box-shadow:0 8px 24px rgba(255,43,106,.25),0 4px 16px rgba(106,227,255,.15);
}
.btn{
  display:inline-block;padding:8px 12px;border:none;border-radius:10px;
  background:#18181f;color:var(--fg);font-weight:600;cursor:pointer;
  transition:background .2s ease,transform .15s ease,opacity .15s ease;
}
.btn:hover{background:#262636;transform:translateY(-1px)}
.btn:focus{outline:none;box-shadow:0 0 0 2px var(--accent-2)}

/* =========================
   GRID / CARD
   ========================= */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{background:var(--card);border:1px solid #22222a;border-radius:16px;padding:18px}
.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}

/* =========================
   SHOWS (poster grid)
   ========================= */
.shows-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;margin-top:10px;
}
.show-card{
  background:var(--card);border:1px solid #22222a;border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.show-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.show-media{position:relative;aspect-ratio:3/4;margin:0;overflow:hidden}
@media(max-width:480px){.show-media{aspect-ratio:1/1.2}}
.show-media img{width:100%;height:100%;object-fit:cover;display:block}
.show-meta{padding:8px 10px 0;display:grid;gap:4px}
.show-meta time{font-weight:700;letter-spacing:.2px}
.show-meta span{color:var(--muted);font-size:.9rem}
.show-actions{padding:8px 10px 10px;display:flex;gap:8px;flex-wrap:wrap}
.btn-tickets{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0b0b0d;font-weight:700;border:none;border-radius:999px;padding:10px 14px;
}
.btn-map,.btn-details{background:#18181f;border-radius:999px}

/* =========================
   MUSIC EMBEDS
   ========================= */
.music-embeds{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px
}
.music-embeds iframe{width:100%;height:400px;border:0;border-radius:12px}

/* =========================
   FORMS
   ========================= */
input,textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid #2a2a34;background:#0f0f14;color:var(--fg);
}
textarea{min-height:120px;resize:vertical}
.mc-form{margin:0 auto;max-width:640px}
.mc-row{
  display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap
}
.mc-form input[type="email"]{
  flex:1 1 280px;min-width:240px;padding:12px 14px;border-radius:10px;
  border:1px solid #2a2a34;background:#0f0f14;color:var(--fg);
}
.mc-form .cta{white-space:nowrap}
.mc-responses .response{color:var(--muted);font-size:.95rem;margin-top:8px}
.mc-hp{position:absolute;left:-5000px}
@media(max-width:520px){
  .mc-row{flex-direction:column;align-items:stretch}
  .mc-form .cta{width:100%}
}

/* Modal / Mailchimp: better mobile sizing */
@media (max-width:640px) {
  .modal-panel {
    /* Make sure the panel never overflows the viewport and counts padding */
    width: min(92vw, 520px);
    max-width: 92vw;
    box-sizing: border-box;
    margin: 6vh auto;
    padding: 12px;
    border-radius: 12px;
    gap: 12px;
  }

  /* Allow the form to fill the available space rather than forcing a large min-width */
  .mc-form { max-width: 100%; width: 100%; }
  .mc-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .mc-form input[type="email"]{ flex: 1 1 auto; min-width: 0; padding:10px 12px; }
  .mc-form .cta{ width:100%; padding:12px 14px; }

  /* Slightly smaller close button so it doesn't look huge on tiny screens */
  .modal-close{ font-size:24px; top:8px; right:10px }
}


/* =========================
   MODAL (Mailchimp)
   ========================= */
.modal[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:1000}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.modal-panel{
  position:relative;max-width:680px;margin:8vh auto;background:var(--card);
  border:1px solid #22222a;border-radius:16px;padding:18px;display:grid;
  grid-template-columns:1fr;gap:18px;
}
.modal-close{
  position:absolute;top:6px;right:8px;border:none;background:transparent;
  color:var(--fg);font-size:28px;line-height:1;cursor:pointer;
}

/* =========================
   FOOTER
   ========================= */
footer,.site-footer{
  padding:40px 0;color:var(--muted);border-top:1px solid var(--border)
}
.footer-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap
}
.socials{display:flex;gap:14px}
.muted{color:var(--muted)}
section{scroll-margin-top:80px}

/* =========================
   UTILITIES / HERO IMG
   ========================= */
.text-center{text-align:center}
.no-mt{margin-top:0}
.col-span-all{grid-column:1 / -1}
.hero.has-image{overflow:hidden}
.hero.has-image::before{
  content:"";position:absolute;inset:0;
  background:url('assets/hero.jpg') center/cover no-repeat;
  opacity:.55;z-index:0;transform:scale(1.05);pointer-events:none;
}
.hero.has-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(11,11,13,.65),rgba(11,11,13,.25));
  z-index:0;pointer-events:none;
}
.hero.has-image>.container{position:relative;z-index:1}
@media(max-width:520px){
  /* bring things slightly higher on small screens */
  .hero{ padding-top:22px; padding-bottom:36px }
  .hero h1{ font-size: clamp(28px,7vw,44px) }
}
@media(prefers-reduced-motion:reduce){
  .show-card,.btn{transition:none}
  .show-card:hover{transform:none}
}

/* === Mobile dropdown (needed for the .open class your JS toggles) === */
/* Mobile menu styles removed (markup deprecated). Keep social icon rules above. */

/* === Social icons: keep icons white, only tint on hover === */
.socials a { color: var(--fg); }
.socials a:hover { color: var(--accent); }