/* ---------- CSS RESET (trimmed) ---------- */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
img{max-width:100%;display:block;height:auto}
ul[role='list'],ol[role='list']{list-style:none;margin:0;padding:0}

/* ---------- THEME ---------- */
:root{
  --bg: #0e0e11;
  --bg-soft: #15151a;
  --text: #f5f5f7;
  --muted: #b7b7c2;
  --brand: #8b5cf6;   /* violet */
  --brand-2: #ec4899; /* pink accent */
  --card: #101017;
  --border: #262635;
  --ring: #a78bfa;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

body{
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, #0b0b0e 100%);
  color: var(--text);
  line-height: 1.6;
}

a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible {outline: 2px solid var(--ring); outline-offset: 2px;}

.container{width:min(1120px, 92%);margin-inline:auto}

/* ---------- UTIL ---------- */
.btn{display:inline-block;padding:.85rem 1.1rem;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg,#1b1b24,#12121a);
  box-shadow:var(--shadow); transition:transform .2s ease, border-color .2s ease; font-weight:600}
.btn:hover{transform:translateY(-2px); border-color:var(--brand)}
.btn.primary{background: linear-gradient(180deg, var(--brand), #6d28d9); border-color: #6d28d9}
.btn.ghost{background:transparent}

.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.85rem;background:rgba(255,255,255,0.02)}

.section{padding:80px 0}
@media (max-width: 720px){ .section{padding:60px 0} }

.card{background:linear-gradient(180deg,var(--card),#0d0d14);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------- SKIP LINK ---------- */
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:9999;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(10,10,14,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 0}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:800;letter-spacing:.4px}
.brand-logo {
  height: 75px;              /* Adjust depending on your logo size */
  width: auto;
  display: block;
  border-radius: 0;          /* Remove rounded corners if your logo is transparent */
  object-fit: contain;
}
nav ul{display:flex;gap:1.2rem}
nav a{color:var(--muted)}
nav a:hover{color:var(--text)}
.nav-cta{display:flex;gap:.6rem;align-items:center}

.menu-btn{color: white; display:none; background:transparent; border:1px solid var(--border); border-radius:10px; padding:.5rem .65rem}
@media (max-width:860px){
  nav ul{display:none}
  .menu-btn{display:inline-grid;place-items:center}
  #mobileMenu{display:none}
}

/* ---------- MOBILE MENU ---------- */
#mobileMenu{display:hidden;position:absolute;inset:56px 0 auto 0;background:rgba(10,10,14,.95);border-bottom:1px solid var(--border)}
#mobileMenu a{display:block;padding:14px 1rem;border-top:1px solid var(--border);color:var(--muted)}
#mobileMenu a:hover{color:var(--text)}

/* ---------- HERO ---------- */
/*.hero {
  padding: 90px 0 70px;
  text-align: center;
  position: relative;
  overflow: hidden;

  /* Add the background image + gradient overlay */
/*  background: linear-gradient(
      rgba(14, 14, 17, 0.85),
      rgba(14, 14, 17, 0.85)
    ),
    url("../images/img_2969.jpg") center center / cover no-repeat;
  background-attachment: fixed; /* Parallax-like effect on desktop */
/*  border-bottom: 1px solid var(--border);
  background-position: center -50px;
}
/*
.hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  letter-spacing: 0.4px;
}

.hero p {
  color: var(--muted);
  max-width: 700px;
  margin: 0.8rem auto 1.6rem;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(139, 92, 246, 0.3),
    rgba(236, 72, 153, 0.25) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.hero h1, .hero p, .hero .cta {
  position: relative;
  z-index: 1; /* Make sure content sits above glow */
/*}*/
/* Background video styles */
/* HERO — keep prior typography & glow, add video background */
.hero {
  padding: 90px 0 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* Background video fills hero */
.background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* cover without distortion */
  z-index: -2;               /* behind overlays & content */
}

/* Dark gradient overlay ON TOP of the video (keeps text legible) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(14, 14, 17, 0.85),
    rgba(14, 14, 17, 0.85)
  );
  z-index: -1;
  opacity: 50%;
}

/* Violet/pink glow like before */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(139, 92, 246, 0.3),
    rgba(236, 72, 153, 0.25) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Keep the nice font style you had */
.hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  letter-spacing: 0.4px;
}
.hero p {
  color: var(--muted);
  max-width: 700px;
  margin: 0.8rem auto 1.6rem;
}
.hero h1, .hero p, .hero .cta, .hero .badge {
  position: relative;
  z-index: 1; /* above overlays/video */
}

/* Crop from the top if needed (adjust the px value) */
.background-video { object-position: center -50px; }

/* Mobile optimization: hide video and fall back to a still image 
@media (max-width: 768px) {
  .background-video { display: none; }
  .hero {
    background:
      linear-gradient(rgba(14,14,17,.85), rgba(14,14,17,.85)),
      url("../images/img_2969.jpg") center top / cover no-repeat;
  }
}
*/

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.about .blurb{padding:28px; border-radius:var(--radius)}
.about .blurb p{color:#dcdce6}
.about .statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.about .stat{padding:16px;border-radius:14px;border:1px solid var(--border);text-align:center;color:var(--muted)}
.about .stat strong{display:block;font-size:1.3rem;color:var(--text)}
@media (max-width:920px){.about{grid-template-columns:1fr;}}

/* ---------- MUSIC ---------- */
.music-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.music-item{padding:14px}
.music-item h4{margin-top:10px}
.music-embed{aspect-ratio: 1.6 / 1; border:0; width:100%; border-radius:12px; background:#0a0a0f}
.music-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #0a0a0f;
  object-fit: cover;
  display: block;
}

@media (max-width:920px){.music-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.music-grid{grid-template-columns:1fr}}

/* ---------- SHOWS ---------- */
.shows{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:16px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--muted);font-weight:600}
td .tag{font-size:.8rem;border:1px solid var(--border);border-radius:999px;padding:.2rem .5rem;color:var(--muted)}
tr:hover td{background:rgba(255,255,255,0.02)}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery figure{overflow:hidden;border-radius:14px;border:1px solid var(--border)}
.gallery img{transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.05)}
@media (max-width:920px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem}
.contact-card{padding:18px}
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.socials a{border:1px solid var(--border);border-radius:999px;padding:.5rem .8rem;color:var(--muted)}
.socials a:hover{color:var(--text);border-color:var(--brand)}
form{display:grid;gap:.8rem}
input, textarea{width:100%;background:#0b0b10;border:1px solid var(--border);border-radius:12px;padding:.9rem;color:var(--text)}
textarea{min-height:120px}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border);padding:28px 0;color:var(--muted);text-align:center}

/* Hide the text on smaller screens */
@media (max-width: 640px) {
  .brand-text {
    display: none;
  }

  .brand-logo {
    height: 100px;    /* Slightly larger for better visibility on mobile */
    width: auto;
  }
}

.alert-banner {
  background-color: white;
  color: black;
  text-align: center;
  padding: 15px;
  font-weight: bold;
  font-size: 1.1rem;
  position: relative;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border: 3px solid black;
}