
:root{
  --bg:#0b0f1a;--panel:#101728;--panel2:#0d1422;--text:#f7f9ff;--muted:#a9b7d6;
  --brand:#ffd43b;--brand2:#ffef9b;--line:#1b2340;
}
*{box-sizing:border-box}html,body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(11,15,26,.95),rgba(11,15,26,.7) 60%,rgba(11,15,26,0));backdrop-filter: blur(6px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;gap:.7rem;align-items:center}
.brand img.small77{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);background:#0b0f1a;object-fit:contain}
.brand-title{font-weight:900;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:-4px}
.nav a{margin-left:18px;color:var(--text);opacity:.9}.nav a:hover,.nav a.active{color:var(--brand)}
.section{padding:64px 0;border-bottom:1px solid var(--line)}
h1{font-size:clamp(40px,6.8vw,66px);margin:0 0 10px}
h2{font-size:clamp(26px,4vw,34px);margin:0 0 18px}
.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:980px){.grid-2{grid-template-columns:1.1fr .9fr}}
.btn{appearance:none;border:none;border-radius:14px;padding:14px 18px;font-weight:800;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#111;box-shadow:0 6px 24px rgba(255,212,59,.25)}
.btn-ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
@media (max-width:540px){.btn-row .btn{flex:1 1 100%; text-align:center}}
.hero{padding:80px 0;background:radial-gradient(1200px 500px at 20% 10%, rgba(255,212,59,.16), transparent 60%), linear-gradient(180deg, var(--panel), transparent 60%)}
.hero-tag{display:inline-block;background:rgba(255,212,59,.15);color:var(--brand);border:1px solid rgba(255,212,59,.35);padding:6px 10px;border-radius:999px;font-weight:800;letter-spacing:.3px;margin-bottom:10px}
.hero-sub{font-size:clamp(16px,2.5vw,20px);color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;padding:18px}

/* Community page: centre cards and text */
.community-cards{justify-items:center}
.community-cards .card{width:100%;max-width:320px;text-align:center}
.footer{padding:34px 0;text-align:center;color:var(--muted)}
.hours{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.hours td{padding:10px 12px;border-bottom:1px solid var(--line)}
.notice{padding:12px;border:1px dashed var(--line);border-radius:12px;background:#0c1323;color:var(--muted)}
/* Events */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.input{background:#0c1323;border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.event-card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease}
.event-card:hover{transform:translateY(-2px)}
.event-card img{width:100%;height:220px;object-fit:cover;background:#0c1323;border-bottom:1px solid var(--line)}
.event-card .body{padding:14px}
.event-card .title{font-size:20px;font-weight:900;margin:0}
.event-card .date{font-size:14px;color:var(--muted);margin:4px 0 6px}
.event-card .desc{color:#fff;white-space:pre-wrap}
.club-hero{display:block;margin:20px auto -10px auto;max-width:520px;width:60%;height:auto;filter:drop-shadow(0 6px 18px rgba(255,212,59,.18))}
/* Forms */
.form label{display:block;margin-bottom:14px}
.form input,.form textarea,.form select{width:100%;padding:10px 12px;background:#0c1323;border:1px solid var(--line);color:var(--text);border-radius:12px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:680px){.form .row{grid-template-columns:1fr}}
/* Sponsors */
.sponsor-hero{display:grid;grid-template-columns:1fr;gap:18px}
.highlight{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.highlight{grid-template-columns:1fr 1.1fr;align-items:center}}
.logo-wrap{display:flex;align-items:center;justify-content:center;background:#0c1323;border:1px solid var(--line);border-radius:16px;padding:18px}
.logo{max-width:440px;width:100%;height:auto;filter:none!important;mix-blend-mode:normal}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.partner{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;padding:18px}
.partner .logo{max-width:440px;width:100%;height:auto;filter:none!important;mix-blend-mode:normal}
.badge{display:inline-block;background:rgba(255,212,59,.15);border:1px solid rgba(255,212,59,.35);padding:6px 10px;border-radius:999px;color:var(--brand);font-weight:800;margin-bottom:8px}

/* Prevent unintended horizontal scrolling on mobile */
html, body { max-width: 100%; overflow-x: hidden; }
img, .container, .wrapper, .section, .row { box-sizing: border-box; }

/* Global hamburger menu (all viewports) */
nav { position: relative; }
.nav-toggle { display: inline-flex; cursor: pointer; gap: 6px; padding: 8px; border: 0; background: transparent; position: absolute; right: 1rem; top: 1rem; }
.nav-toggle span { display: block; width: 28px; height: 3px; background: currentColor; }
nav .menu { display: none; position: absolute; right: 1rem; top: 3.25rem; background: white; padding: 0.75rem 1rem; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,.15); z-index: 999; flex-direction: column; gap: 0.5rem; }
nav.open .menu { display: flex; }
nav .menu a, nav .menu li a { white-space: nowrap; }

/* FORCE: hide top navigation links until toggle is clicked */
nav { position: relative; }
.nav-toggle { display: inline-flex; cursor: pointer; gap: 6px; padding: 8px; border: 0; background: transparent; position: absolute; right: 1rem; top: 1rem; }
.nav-toggle span { display: block; width: 28px; height: 3px; background: currentColor; }
nav .menu { display: none !important; position: absolute; right: 1rem; top: 3.25rem; background: white; padding: .75rem 1rem; border-radius: .5rem; box-shadow: 0 10px 25px rgba(0,0,0,.15); z-index: 999; flex-direction: column; gap: .5rem; list-style: none; margin: 0; }
nav.open .menu { display: flex !important; }
nav .menu li { margin: 0; }
nav .menu a { display: block; text-decoration: none; }

/* Hide all navigation page links at top; show only when menu is opened */
nav a { display: none !important; }
.nav-toggle { display: inline-flex !important; }
nav.open .menu a { display: block !important; }
nav.open a { display: block !important; }

/* === HAMBURGER DROPDOWN NAV (VISIBLE & CLICKABLE) === */
nav { position: relative; }
.nav-toggle {
  appearance: none; background: #111; color: #fff; border: 0;
  width: 44px; height: 44px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  position: absolute; right: 12px; top: 12px; z-index: 1000;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.nav-toggle .bar { width: 26px; height: 3px; background: #fff; border-radius: 2px; display: block; margin: 3px 0; }
nav .menu {
  display: none; position: absolute; right: 12px; top: 64px;
  background: #fff; color: #111; list-style: none; margin: 0;
  padding: 8px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,.15);
  min-width: 220px; z-index: 999;
}
nav.open .menu { display: block; }
nav .menu li { margin: 0; padding: 0; }
nav .menu a {
  display: block; padding: 10px 12px; text-decoration: none;
}
/* Hide links in header until menu opens */
nav > ul a, nav > div > ul a { display: none !important; }
nav.open > ul a, nav.open > div > ul a { display: block !important; }
/* ===================================================== */

/* === MOBILE TAP FIX: fixed, tappable hamburger and dropdown === */
.nav-toggle {
  position: fixed; right: 12px; top: 12px; z-index: 9999;
  width: 52px; height: 52px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; pointer-events: auto;
}
.nav-toggle .bar { width: 28px; height: 3px; margin: 4px 0; }
nav .menu {
  position: fixed; right: 12px; top: 72px; z-index: 9998;
  max-height: 70vh; overflow: auto;
}
@media (max-width: 640px) {
  nav .menu { left: 12px; right: 12px; min-width: auto; }
}
/* Ensure nothing overlays the button */
header, .header, .hero, .banner { position: relative; }

/* === Compact Right-Side Dropdown (readable, blends with page) === */
.nav-toggle {
  position: fixed; right: 12px; top: 12px; z-index: 9999;
  width: 52px; height: 52px; border-radius: 9999px;
  background: #0c0f14; color: #fff; border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; pointer-events: auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.nav-toggle .bar { width: 28px; height: 3px; margin: 4px 0; background:#fff; border-radius: 2px; display:block; }

/* Neat list panel */
nav .menu {
  display: none;
  position: fixed; right: 12px; top: 72px; z-index: 9998;
  width: 280px; max-height: 70vh; overflow: auto;
  background: rgba(12,15,20,.96); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 8px;
}
nav.open .menu { display: block; }

nav .menu li { list-style: none; margin: 0; }
nav .menu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: #fff !important; text-decoration: none;
}
nav .menu a:hover, nav .menu a:focus { background: rgba(255,255,255,.08); outline: none; }

/* Hide any inline header nav text so only the dropdown is used */
nav > ul:not(.menu), nav > ol:not(.menu), nav .nav, nav .nav-links, nav .primary-nav { display: none !important; }
/* ================================================================ */

/* Hide header page links (those anchors with empty class) so only dropdown is used */
nav a[class=""] { display: none !important; }
nav .menu a { display: block !important; }

/* Venue Hire form layout */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.form-grid input, .form-grid textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.2); }
@media (prefers-color-scheme: dark) {
  .form-grid input, .form-grid textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
}

/* Ensure only dropdown menu shows (hide inline header links) */
.nav-inner > div > a:not(.menu a) { display: none !important; }

/* Normalise sponsor card logos (keep Maple hero larger) */
.sponsor-grid .partner .logo{
  height: 120px;
  max-height: 120px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: none !important;
  mix-blend-mode: normal;
}


/* Comedy Beats CTA */
.comedy-beats-cta{padding-top:0}
.comedy-beats-btn{display:flex;justify-content:center}
.comedy-beats-btn img{width:min(360px,100%);height:auto;display:block}
.comedy-beats-ad{text-align:center;margin-top:12px}
.comedy-beats-ad-title{font-size:1.1rem}
.comedy-beats-ad-date{margin-top:4px}
.comedy-beats-ad-link{margin-top:6px}
.comedy-beats-ad-link a{text-decoration:underline}

/* Comedy poster */
.comedy-poster{display:block;width:100%;max-width:720px;height:auto;margin:0 auto 16px;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.18)}



/* ===============================
   Refresh theme layer (Feb 2026)
   Visual-only: no content changes
   =============================== */

:root{
  --bg: #0b0e14;
  --panel: rgba(255,255,255,0.06);
  --panel-strong: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --line: rgba(255,255,255,0.12);
  --shadow: 0 16px 50px rgba(0,0,0,0.35);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1100px;
}

html { scroll-behavior: smooth; }

body{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,0.08), transparent 60%),
              radial-gradient(900px 500px at 85% 0%, rgba(255,255,255,0.06), transparent 55%),
              var(--bg) !important;
  color: var(--text) !important;
  letter-spacing: 0.2px;
  line-height: 1.55;
}

a{
  color: var(--text);
  text-decoration: none;
}
a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* Constrain sections for readability */
section, .container, .content, main{
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

/* Header / nav: cleaner and sticky-like feel without changing structure */
header, .header, nav, .navbar{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(10,12,18,0.60) !important;
  border-bottom: 1px solid var(--line);
}

/* Typography polish */
h1,h2,h3{
  letter-spacing: 0.2px;
  line-height: 1.15;
}
h1{ font-size: clamp(2rem, 3.5vw, 3rem); }
h2{ font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
p, li, label{ color: var(--muted); }

/* Buttons: consistent, inviting */
button, .btn, input[type="submit"], .button, a.button{
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
  padding: 12px 18px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover, .button:hover, a.button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.14) !important;
}

/* Cards / boxes: unify look across events + community boxes */
.card, .box, .event, .event-card, .community-box, .service-box, .feature, .panel{
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
}

/* Images inside cards: soften edges */
img{
  border-radius: var(--radius-sm);
}

/* Forms: modern inputs */
input, select, textarea{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  padding: 12px 12px !important;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,0.55) !important; }

/* Tables/lists spacing */
ul, ol{ padding-left: 1.25rem; }

/* Event listings: ensure consistent spacing */
.event, .event-card{
  overflow: hidden;
}
.event img, .event-card img{
  width: 100%;
  height: auto;
  display: block;
}

/* Comedy Beats home block: keep centered and tidy */
.comedy-beats-btn,
.comedy-beats-btn *{
  text-align: center;
}
.comedy-beats-btn{
  padding: 8px 0 6px;
}

/* Mobile: slightly larger tap targets and calmer spacing */
@media (max-width: 768px){
  body{ padding-bottom: 20px; }
  section{ padding-left: 14px; padding-right: 14px; }
  button, .btn, input[type="submit"], .button, a.button{
    padding: 12px 16px !important;
  }
}


/* Comedy Beats: phone size refinement */
@media (max-width: 768px){
  .comedy-beats-btn img{ max-width: 180px !important; }
}


/* --- Menu button (3 dots) visibility --- */
.nav .menu-btn{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  line-height: 1;
}
.nav .menu-btn:hover{
  background: rgba(255,255,255,0.10);
}
@media (max-width: 768px){
  .nav .menu-btn{
    padding: 10px 14px;
    font-size: 22px;
    border-radius: 14px;
  }
}

/* --- Forms: ensure readable text --- */
input, textarea, select{
  color: #000 !important;
  background: #fff !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(0,0,0,0.55) !important;
}


/* ===== Light theme refresh (auto-generated) ===== */
:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#0b0f1a;
  --muted:rgba(11,15,26,0.70);
  --line:rgba(11,15,26,0.10);
  --brand:#ffd43b;
  --brand2:#ffef9b;
}
html,body{background:var(--bg)!important;color:var(--text)!important;}
a{color:rgba(11,15,26,0.92)!important;}
a:hover{opacity:.85;}
/* Ensure section panels/cards read well on light background */
.card,.panel,.box,.section,.content-card{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:0 10px 25px rgba(0,0,0,.06)!important;}
/* Header/nav on light */
header,.nav,.topbar{background:var(--panel2)!important;border-bottom:1px solid var(--line)!important;}
/* Menu button */
.nav .menu-btn{
  background:rgba(11,15,26,0.06)!important;
  border:1px solid rgba(11,15,26,0.14)!important;
  color:rgba(11,15,26,0.92)!important;
}
.nav .menu-btn:hover{background:rgba(11,15,26,0.10)!important;}
/* Pills/badges */
.badge,.pill{border:1px solid rgba(11,15,26,0.12)!important;background:rgba(255,212,59,0.20)!important;color:rgba(11,15,26,0.92)!important;}
/* Buttons keep brand but readable */
.btn,.button,button{
  color:rgba(11,15,26,0.95)!important;
}
/* ===== Forms: always readable ===== */
input, textarea, select{
  background:#ffffff!important;
  color:#111!important;
  border:1px solid rgba(0,0,0,0.18)!important;
}
input::placeholder, textarea::placeholder{color:rgba(0,0,0,0.50)!important;}
label{color:rgba(11,15,26,0.92)!important;}
/* If hero overlay exists, keep it subtle on light */
.hero::before,.page-hero::before,.banner::before{background:linear-gradient(180deg, rgba(246,247,251,0.35), rgba(246,247,251,0.85))!important;}
/* ===== End light theme refresh ===== */

/* Light theme fix: notice box */
.notice{background:rgba(255, 212, 59, 0.18)!important;color:var(--text)!important;border:1px solid rgba(11,15,26,0.14)!important;}

/* Light theme fix: event cards (ensure text is readable) */
.event-card{background:var(--panel)!important;border:1px solid var(--line)!important;}
.event-card .title{color:rgba(11,15,26,0.95)!important;}
.event-card .date{color:rgba(11,15,26,0.70)!important;}
.event-card .desc{color:rgba(11,15,26,0.88)!important;}

/* Lemonrock follow button */
.lemonrock-follow{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0 18px;}
.lemonrock-btn{display:inline-block;}
.lemonrock-btn img{max-width:320px;width:100%;height:auto;border-radius:12px;border:1px solid rgba(11,15,26,0.12);box-shadow:0 10px 25px rgba(0,0,0,.08);}
.lemonrock-text{color:rgba(11,15,26,0.75);font-weight:600;text-align:center;}
@media (max-width: 768px){
  .lemonrock-btn img{max-width:260px;}
}


/* ===== FORCE Light Dropdown Menu ===== */

/* Target the actual dropdown container */
.nav div:last-child,
.nav-links,
.mobile-menu,
.menu,
.dropdown {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,0.12) !important;
}

/* All links inside dropdown */
.nav div:last-child a,
.nav-links a,
.mobile-menu a,
.menu a,
.dropdown a {
  color: #111111 !important;
}

/* Hover states */
.nav div:last-child a:hover,
.nav-links a:hover,
.mobile-menu a:hover,
.menu a:hover,
.dropdown a:hover {
  background: rgba(0,0,0,0.06) !important;
}

/* Ensure toggle button stays visible */
.nav-toggle,
.menu-btn {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
}


/* ===== Menu + Brand final light fixes ===== */
.nav-toggle{
  color:#111111 !important;
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.18) !important;
  border-radius:999px !important;
  box-shadow:0 10px 25px rgba(0,0,0,0.12) !important;
}
.nav-toggle span{ background: currentColor !important; }

nav .menu{
  background:#ffffff !important;
  color:#111111 !important;
}
nav .menu a{
  color:#111111 !important;
}
nav .menu a:hover{
  background:rgba(0,0,0,0.06) !important;
}

/* Remove any "boxed" look behind the brand text */
.brand-title, .brand-sub, .brand > div{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

