/* ===========================================================
   Monster Ents — site styles
   One font throughout (Poppins, with safe fallbacks).
   Monster Ents palette is the default; each night page adds a
   theme class that swaps the accent + hero colours.
   Loud brand colours are used as accents/hero bands over a
   readable dark base, never as text-on-text backgrounds.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

:root{
  /* Monster Ents (umbrella) */
  --me-purple:#0e0116;
  --me-light-purple:#b05ee4;
  --me-teal:#36ccd3;
  --white:#ffffff;
  --black:#000000;

  /* defaults used across the site */
  --bg:var(--me-purple);
  --surface:#1a0a2e;        /* slightly lifted panel on the dark base */
  --text:#f4eef9;
  --muted:#c9b8da;
  --accent:var(--me-light-purple);
  --accent-2:var(--me-teal);
  --hero-bg:#160320;
  --hero-text:var(--white);
  --btn-bg:var(--me-light-purple);
  --btn-text:#160019;
  --border:rgba(176,94,228,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2);}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3{font-weight:800;line-height:1.15;margin:0 0 .4em;}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
.container{max-width:1080px;margin:0 auto;padding:0 20px;}
.section{padding:64px 0;}
.section.tight{padding:40px 0;}
.center{text-align:center;}
.muted{color:var(--muted);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  background:var(--btn-bg);
  color:var(--btn-text);
  font-weight:800;
  text-decoration:none;
  padding:12px 22px;
  border-radius:999px;
  border:2px solid transparent;
  transition:transform .12s ease,filter .12s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
.btn.outline{
  background:transparent;color:var(--accent);border-color:var(--accent);
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(14,1,22,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;max-width:1180px;margin:0 auto;}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav .brand img{height:48px;width:auto;}
.nav .brand span{color:var(--white);font-weight:800;letter-spacing:.5px;}
.nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.nav-links a{
  color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:8px 12px;border-radius:8px;
}
.nav-links a:hover,.nav-links a.active{background:rgba(176,94,228,.18);color:var(--white);}
.nav-toggle{display:none;background:none;border:0;color:var(--white);font-size:1.6rem;cursor:pointer;}

/* ---------- hero ---------- */
.hero{
  background:var(--hero-bg);color:var(--hero-text);
  border-bottom:4px solid var(--accent);
  padding:72px 0;
}
.hero-logo{width:min(460px,80%);height:auto;margin:0 0 22px;}
.hero.centered{text-align:center;}
.hero.centered .hero-logo{margin-left:auto;margin-right:auto;}
.hero.centered .tagline{margin-left:auto;margin-right:auto;}
.hero.centered .btn-row{justify-content:center;}
.hero h1{font-size:clamp(2rem,6vw,4rem);}
.hero .tagline{font-size:clamp(1.05rem,2.5vw,1.4rem);color:var(--hero-text);opacity:.95;max-width:680px;}
.hero .btn-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;}
.hero-figure{margin-top:34px;border:3px solid var(--accent);border-radius:16px;overflow:hidden;background:#0c0118;}
.hero-figure img{width:100%;}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:20px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:14px;
  padding:22px;
}
.card h3{color:var(--accent-2);}
.card .logo-wrap{height:90px;display:flex;align-items:center;margin-bottom:14px;}
.card .logo-wrap img{max-height:90px;width:auto;}

/* night card colour chips */
.night-card .tag{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:10px;}

/* ---------- show list (What's On) ---------- */
.show{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  background:var(--surface);border:2px solid var(--border);
  border-radius:12px;padding:16px 18px;margin-bottom:14px;
}
.show .date{
  flex:0 0 92px;text-align:center;background:var(--accent);color:#160019;
  border-radius:10px;padding:8px 6px;font-weight:800;line-height:1.1;
}
.show .date .d{font-size:1.5rem;display:block;}
.show .date .m{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;}
.show .info{flex:1 1 240px;}
.show .info h3{margin:0 0 2px;font-size:1.1rem;color:var(--white);}
.show .info .meta{color:var(--muted);font-size:.92rem;}
.show .price{font-weight:800;color:var(--accent-2);margin-right:6px;white-space:nowrap;}
.show .actions{flex:0 0 auto;}
.badge-free{background:var(--me-teal);color:#04201f;padding:2px 10px;border-radius:999px;font-weight:800;font-size:.8rem;}

/* ---------- placeholder image slots ---------- */
.placeholder{
  border:2px dashed var(--accent);
  border-radius:12px;
  background:repeating-linear-gradient(45deg,rgba(176,94,228,.07),rgba(176,94,228,.07) 12px,transparent 12px,transparent 24px);
  color:var(--muted);
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:180px;padding:20px;font-weight:600;
}

/* ---------- mailing list ---------- */
.mailing{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#10001a;border-radius:16px;padding:34px;text-align:center;}
.mailing h2{color:#10001a;}
.mailing form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.mailing input[type=email]{padding:12px 16px;border-radius:999px;border:0;min-width:260px;font-size:1rem;}
.mailing .btn{background:#10001a;color:#fff;}

/* ---------- name wall ---------- */
.namewall{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.namewall span{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 16px;font-weight:600;}

/* ---------- act photo grid ---------- */
.acts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.act-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-align:center;}
.act-card img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;display:block;}
.act-card .act-name{padding:12px 10px;font-weight:700;font-size:1rem;color:var(--white);}
.acts-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:700px){.acts-grid{grid-template-columns:repeat(2,1fr);}.acts-grid.cols-4{grid-template-columns:repeat(2,1fr);}}

/* ---------- FAQ ---------- */
details{background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:12px;}
summary{font-weight:700;cursor:pointer;color:var(--white);}

/* ---------- footer ---------- */
.site-footer{background:#08000f;border-top:1px solid var(--border);padding:40px 0;color:var(--muted);font-size:.92rem;}
.footer-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;}
.site-footer a{color:var(--muted);text-decoration:none;display:block;padding:3px 0;}
.site-footer a:hover{color:var(--white);}
.site-footer h4{color:var(--white);margin:0 0 8px;}

/* note banner for preview */
.note{background:#2a0a3d;border:1px dashed var(--accent);color:var(--muted);font-size:.85rem;text-align:center;padding:8px 14px;}

/* ===========================================================
   PER-NIGHT THEMES (hero + accents only; base stays readable)
   =========================================================== */
/* Big Comedy Hammersmith — blue bg, yellow accents */
.theme-bigcomedy{--accent:#eae701;--accent-2:#eae701;--btn-bg:#eae701;--btn-text:#072036;--border:rgba(234,231,1,.5);}
.theme-bigcomedy .hero{--hero-bg:#007bef;--hero-text:#eae701;border-bottom-color:#eae701;}
.theme-bigcomedy .show .date,.theme-bigcomedy .mailing{background:#007bef;}
.theme-bigcomedy .mailing{background:linear-gradient(135deg,#007bef,#eae701);color:#072036;}
.theme-bigcomedy .mailing h2{color:#072036;}

/* Live at the White Hart — maroon bg, soft yellow accents */
.theme-whitehart{--accent:#fee98e;--accent-2:#fee98e;--btn-bg:#fee98e;--btn-text:#3a0808;--border:rgba(254,233,142,.5);--surface:#2a0606;}
.theme-whitehart .hero{--hero-bg:#950101;--hero-text:#fee98e;border-bottom-color:#fee98e;}
.theme-whitehart .show .date{background:#950101;color:#fee98e;}
.theme-whitehart .mailing{background:linear-gradient(135deg,#950101,#400a09);color:#fee98e;}
.theme-whitehart .mailing h2{color:#fee98e;}
.theme-whitehart .mailing .btn{background:#fee98e;color:#3a0808;}

/* Neurospicy — dark purple base, salmon accents (kept calm) */
.theme-neurospicy{--accent:#f55e60;--accent-2:#f55e60;--btn-bg:#f55e60;--btn-text:#1a0010;--border:rgba(245,94,96,.5);}
.theme-neurospicy .hero{--hero-bg:#0e0116;--hero-text:#f55e60;border-bottom-color:#f55e60;}
.theme-neurospicy .show .date{background:#f55e60;color:#1a0010;}
.theme-neurospicy .mailing{background:linear-gradient(135deg,#2a1030,#f55e60);color:#1a0010;}

/* LOLipops (open mics) — vivid colours used as hero/accents with readable text */
.theme-lolipops{--accent:#ff8600;--accent-2:#ff8600;--btn-bg:#ff8600;--btn-text:#1a0d00;--border:rgba(255,134,0,.5);}
.theme-lolipops .hero{--hero-bg:#111;--hero-text:#ff8600;border-bottom-color:#ff8600;}
/* section band helpers for the two open mics */
.band-ham{background:#01fb0f;color:#06270a;border-radius:16px;padding:30px;}
.band-ham h2,.band-ham h3{color:#06270a;}
.band-ham .btn{background:#ff8600;color:#1a0d00;}
.band-south{background:#faed23;color:#2e2a00;border-radius:16px;padding:30px;}
.band-south h2,.band-south h3{color:#2e2a00;}
.band-south .btn{background:#ff8600;color:#1a0d00;}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr;}
  .nav-links{
    display:none;position:absolute;top:62px;left:0;right:0;
    flex-direction:column;background:#0e0116;border-bottom:1px solid var(--border);padding:10px 16px;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .show .actions{flex:1 1 100%;}
  .show .actions .btn{width:100%;text-align:center;}
}

/* ===========================================================
   HOMEPAGE COMPONENTS (added 19 June 2026)
   =========================================================== */
/* banner hero: all-acts image sits behind, dimmed for readability */
.banner-hero{position:relative;}
.banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;z-index:0;display:block;}
.banner-hero .container{position:relative;z-index:1;}

/* credibility line */
.cred-line{font-size:1.05rem;color:var(--text);max-width:780px;margin:0 auto;}

/* Book Now strip */
.book-now{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.bn-tile{display:block;text-decoration:none;color:var(--white);background:var(--surface);border:2px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .12s ease,filter .12s ease;}
.bn-tile:hover{transform:translateY(-3px);filter:brightness(1.07);}
.bn-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#0c0118;}
.bn-date{display:block;text-align:center;font-weight:800;padding:12px 8px;font-size:1.05rem;letter-spacing:.4px;}
.bn-name{display:block;font-weight:800;font-size:1rem;color:var(--muted);letter-spacing:0;margin-top:4px;}
.bn-tile.logo img{object-fit:contain;padding:22px;background:#160320;}
@media(max-width:760px){.book-now{grid-template-columns:repeat(2,1fr);}}

/* The Nights - clickable centred cards */
.night-card{text-decoration:none;color:inherit;display:block;transition:transform .12s ease,filter .12s ease;}
.night-card:hover{transform:translateY(-3px);filter:brightness(1.06);}
.night-card.centered{text-align:center;}
.night-card.centered .logo-wrap{justify-content:center;}

/* CTA blocks (corporate / aspiring comedian) */
.cta-block{text-align:center;display:flex;flex-direction:column;align-items:center;}
.cta-block .logo-wrap{justify-content:center;}
.cta-block .btn{margin-top:auto;}

/* Comedy Fest teaser strip */
.teaser-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;justify-content:center;text-align:center;text-decoration:none;color:#fee98e;background:linear-gradient(135deg,#950101,#400a09);border:2px solid #fee98e;border-radius:14px;padding:20px 24px;font-size:1.05rem;transition:filter .12s ease;}
.teaser-strip strong{color:#fff;font-size:1.15rem;}
.teaser-strip:hover{filter:brightness(1.1);}

/* venue block at bottom of night pages */
.venue-block{background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:22px;margin-top:10px;}
.venue-block iframe{width:100%;border:0;border-radius:10px;margin-top:12px;min-height:240px;}

/* ===========================================================
   UPDATES — 19 June 2026 review pass
   =========================================================== */

/* DON'T MISS animated heading */
@keyframes glow-spark{
  0%,100%{text-shadow:0 0 8px #ffe000,0 0 18px #ffd700;}
  50%{text-shadow:0 0 22px #ffe000,0 0 44px #ffd700,0 0 70px #ff8c00;}
}
.dont-miss{color:#ffe000;animation:glow-spark 1.8s ease-in-out infinite;}

/* Night cards — bigger logos, no title duplication */
.card .logo-wrap{height:130px;display:flex;align-items:center;margin-bottom:14px;}
.card .logo-wrap img{max-height:130px;width:auto;}

/* Night badge types */
.badge-monthly{display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 12px;border-radius:999px;background:var(--me-teal);color:#04201f;margin-bottom:10px;}
.badge-weekly{display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 12px;border-radius:999px;background:#01c40c;color:#04200a;margin-bottom:10px;}
.badge-quarterly{display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 12px;border-radius:999px;background:#ff8c00;color:#1a0800;margin-bottom:10px;}
.badge-special{display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 12px;border-radius:999px;background:#ffe000;color:#1a1000;margin-bottom:10px;}

/* Comedy Fest teaser — logo version */
.teaser-strip img.teaser-logo{max-height:80px;width:auto;margin:0 auto 4px;}

/* Show list headshots (What's On) */
.show-img{flex:0 0 68px;width:68px;height:68px;border-radius:50%;overflow:hidden;border:2px solid var(--border);}
.show-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.show-img.logo-circle{background:var(--surface);display:flex;align-items:center;justify-content:center;padding:8px;}
.show-img.logo-circle img{object-fit:contain;width:100%;height:100%;}

/* LOLipops page photo strip */
.lolipops-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0;}
.lolipops-photos figure{margin:0;border-radius:14px;overflow:hidden;background:var(--surface);}
.lolipops-photos figure img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block;}
.lolipops-photos figcaption{text-align:center;font-size:.85rem;color:var(--muted);padding:8px 6px;font-weight:600;}
@media(max-width:600px){.lolipops-photos{grid-template-columns:1fr;}}

/* ---------- mobile refinements (390px) ---------- */
@media(max-width:600px){
  .hero{padding:44px 0;}
  .section{padding:40px 0;}
  .section.tight{padding:26px 0;}

  /* Show list: price + button share a row instead of stacking separately */
  .show .price{flex:0 0 auto;}
  .show .actions{flex:1 1 auto;}
  .show .actions .btn{width:auto;display:block;text-align:center;}

  /* Mailing form: input fills width */
  .mailing input[type=email]{min-width:0;width:100%;}
  .mailing form{flex-direction:column;align-items:stretch;}
  .mailing .btn{width:100%;}

  /* Book-now tiles: slightly smaller text */
  .bn-date{font-size:.88rem;padding:8px 6px;}
  .bn-name{font-size:.85rem;}

  /* CTA blocks: reduce logo wrap height */
  .card .logo-wrap{height:90px;}
  .card .logo-wrap img{max-height:90px;}
}