/* Basic, clean, responsive styles */
:root {
  --bg: #0b0b0f;
  --card: #12121a;
  --text: #e9e9f1;
  --muted: #b9b9c9;
  --accent: #ffd54a;
  --accent-2: #ff6a3d;
  --link: #8ab4ff;
  --maxw: 1100px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }
.container { width: min(100% - 2rem, var(--maxw)); margin-inline:auto; }
.small { font-size: .875rem; color: var(--muted); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header { display:flex; align-items:center; gap:1rem; padding:1rem 0; }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--text); }
.site-nav { margin-left:auto; display:flex; gap:1rem; }
.site-nav a { padding:.25rem .5rem; border-radius:.5rem; }
.site-nav a[aria-current="page"] { background: #1b1b26; }
.nav-toggle { display:none; }


.hero { background: radial-gradient(80% 80% at 20% 20%, #1c1c28, #0b0b0f); padding: 3rem 0; text-align:center; }
.hero h1 { font-size: clamp(1.6rem, 2.8vw, 3rem); margin: 0 0 .5rem; }
.btn { display:inline-block; background:var(--accent); color:#000; padding:.7rem 1rem; border-radius:.7rem; font-weight:700; }
.btn.secondary { background:var(--accent-2); color:#fff; }
.link { color: var(--accent); }

.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; padding:2rem 0; }
.card { background:var(--card); border:1px solid #1e1e2a; padding:1rem; border-radius:1rem; }

.video-wrapper { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:1rem; border:1px solid #1e1e2a; }
.video-wrapper iframe { position:absolute; inset:0; width:100%; height:100%; }

.footer-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; padding:2rem 0; }
.site-footer { background:#0a0a12; border-top:1px solid #1e1e2a; margin-top:2rem; }

.form { display:grid; gap:.75rem; max-width: 640px; }
.form label { display:grid; gap:.25rem; }
.form input, .form textarea { background:#0e0e16; color:var(--text); border:1px solid #1e1e2a; padding:.7rem; border-radius:.6rem; }
.form button { margin-top:.5rem; }

.list { padding-left:1rem; }

@media (max-width: 900px) {
  .grid, .footer-grid { grid-template-columns: 1fr; }
  .site-nav { 
    display:none; 
    position:absolute; 
    right:1rem; 
    top:4rem; 
    background:#0f0f17; 
    padding: .75rem; 
    border:1px solid #1e1e2a; 
    border-radius:.75rem; 
    flex-direction:column; 
  }
  .nav-toggle { display:block; margin-left:auto; }
  .site-nav.open { display:flex; }
} /* 👈 this closing brace must come BEFORE the flyer CSS */


/* === Event Flyers centering === */
#event-flyers {
  background: #0e0e16;
  padding: 2rem 0;
  margin-top: 2rem;
}

#event-flyers .container {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Center the flyers regardless of how many there are */
.flyer-grid {
  display: flex;              /* override grid layout */
  flex-wrap: wrap;
  justify-content: center;    /* center the whole row */
  gap: 1rem;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.flyer-grid li {
  background: var(--card);
  border: 1px solid #232337;
  border-radius: .75rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 340px);
}

.flyer-grid a { display: block; }

.flyer-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;           /* prevent giant flyers on big screens */
}