: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}
.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;
}