:root{
  --bg:#F1F1F1;
  --surface:#FFFFFF;
  --ink:#1E2A38;
  --ink-soft:#5B6A78;
  --ink-faint:#8B968F;
  --red:#B3242C;
  --red-dark:#8A1B22;
  --red-tint:#FBE9EA;
  --black:#171717;
  --black-tint:#EDEDED;
  --success-bg:#E7F3EC; --success-ink:#1F6E4A; --success-border:#BFE0CD;
  --warn-bg:#FCF3DE; --warn-ink:#8A5A0B; --warn-border:#F3D89A;
  --danger-bg:#FBEAEA; --danger-ink:#9B3A34; --danger-border:#F0C6C3;
  --info-bg:#E9F1F7; --info-ink:#2A5C82; --info-border:#C6DCEC;
  --cat-academic:#4C1D95; --cat-academic-tint:#E9DBFB;
  --cat-arts:#7A4A00; --cat-arts-tint:#FBE4A8;
  --cat-steam:#0B2A3D; --cat-steam-tint:#CFE0EC;
  --cat-sports:#14512E; --cat-sports-tint:#C9EAD5;
  --border:#E4DFD3;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(30,42,56,0.04), 0 4px 14px rgba(30,42,56,0.05);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:700;
  margin:0 0 0.4em;
  color:var(--ink);
}
h1{font-size:2.5rem; line-height:1.15; font-weight:600;}
h2{font-size:1.5rem;}
h3{font-size:1.15rem;}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:var(--red-dark);}
button{font-family:inherit;}
.container{max-width:1080px; margin:0 auto; padding:0 24px;}

/* header */
.site-header{
  border-bottom:1px solid var(--border);
  background:var(--surface);
  position:sticky; top:0; z-index:20;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.brand-mark{width:40px; height:40px; flex-shrink:0; object-fit:contain;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-family:Arial, Helvetica, sans-serif; font-size:1.05rem; font-weight:700;}
.brand-text span{font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.02em;}

.main-nav{display:flex; align-items:center; gap:28px;}
.main-nav a{
  text-decoration:none; color:var(--ink-soft); font-size:0.93rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a.active{color:var(--red-dark); border-bottom-color:var(--red);}

.lang-toggle{
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft);
  font-size:0.82rem; font-weight:500; padding:7px 13px; border-radius:999px; cursor:pointer;
}
.lang-toggle:hover{border-color:var(--red);}

/* hero */
.hero{padding:64px 0 40px;}
.hero .eyebrow{
  display:inline-block; font-size:0.78rem; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--red-dark); background:var(--red-tint);
  padding:5px 12px; border-radius:999px; margin-bottom:18px;
}
.hero h1{max-width:800px;}
.hero p.lead{max-width:760px; font-size:1.08rem;}
.hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  border-radius:999px; padding:11px 22px; font-size:0.93rem; font-weight:600;
  text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform 0.08s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-dark);}
.btn-success{background:var(--success-ink); color:#fff; border-color:var(--success-ink); margin-top:10px;}
.btn-success:hover{background:#164F35;}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--border);}
.btn-secondary:hover{border-color:var(--red);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px; font-size:0.85rem;}

/* filters */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:14px 0 28px;
}
.filters select{
  font-family:inherit; font-size:0.88rem; padding:9px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
}

/* club grid */
.club-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px; padding-bottom:20px;
}
.club-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.club-card.interest-only{
  background:var(--red-tint); border:1.5px dashed var(--red);
}
.club-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.club-card h3{margin:0;}
.badge{
  font-size:0.72rem; font-weight:600; padding:3px 11px; border-radius:999px; white-space:nowrap;
}
.badge-danger{background:var(--danger-bg); color:var(--danger-ink);}
.badge-warn{background:var(--warn-bg); color:var(--warn-ink);}
.badge-success{background:var(--success-bg); color:var(--success-ink);}
.badge-info{background:var(--info-bg); color:var(--info-ink);}

.club-title-col{flex:1; min-width:0;}
.category-row{margin-bottom:5px;}
.club-detail-line{font-size:0.87rem; color:var(--ink-soft); margin:2px 0;}
.club-detail-first{margin-top:8px;}
.club-cost{font-size:0.85rem; color:var(--ink-faint); margin:0 0 12px;}

.capacity{margin:6px 0 12px;}
.capacity-track{background:var(--bg); border-radius:999px; height:6px; overflow:hidden;}
.capacity-fill{height:6px; border-radius:999px;}
.fill-danger{background:#C86A63;}
.fill-warn{background:var(--red);}
.fill-success{background:var(--red);}
.capacity-label{font-size:0.75rem; color:var(--ink-faint); margin:5px 0 0; display:flex; align-items:center; gap:4px;}

.assist-tag{
  display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--success-ink);
  margin:0 0 14px; font-weight:500;
}

.card-actions{display:flex; gap:8px; margin-top:auto;}
.card-actions .btn{flex:1; padding:9px 10px; font-size:0.83rem;}

/* assistance banner */
.assist-banner{
  background:var(--success-bg); border:1px solid var(--success-border); border-radius:var(--radius);
  padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap; margin:8px 0 40px;
}
.assist-banner h3{color:var(--success-ink); margin:0 0 4px;}
.assist-banner p{color:var(--success-ink); margin:0; font-size:0.9rem; max-width:480px;}
.assist-banner .btn{white-space:nowrap;}

/* form pages */
.page-head{padding:56px 0 8px;}
.page-head .eyebrow{
  display:inline-block; font-size:0.78rem; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--red-dark); background:var(--red-tint);
  padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.page-head p.lead{max-width:560px;}

.form-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow); margin:24px 0;
}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:0.85rem; font-weight:500; color:var(--ink-soft); margin-bottom:6px;}
.form-row input[type=text], .form-row input[type=email], .form-row select, .form-row textarea{
  width:100%; font-family:inherit; font-size:0.92rem; padding:10px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--bg); color:var(--ink);
}
.form-row textarea{min-height:80px; resize:vertical;}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.checkbox-row{display:flex; gap:20px; flex-wrap:wrap;}
.checkbox-row label{display:flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--ink-soft); font-weight:400;}
.checkbox-row input{width:auto;}

.contact-note{
  background:var(--info-bg); border:1px solid var(--info-border); border-radius:var(--radius);
  padding:14px 18px; display:flex; gap:10px; align-items:flex-start; margin:0 0 20px;
}
.contact-note p{color:var(--info-ink); font-size:0.87rem; margin:0;}

.policy-list{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 26px; margin:20px 0 28px;
}
.policy-list li{margin-bottom:10px; color:var(--ink-soft); font-size:0.92rem;}

/* tally */
.tally-row{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.tally-label{font-size:0.83rem; color:var(--ink-faint); width:100px; flex-shrink:0;}
.tally-track{flex:1; background:var(--bg); border-radius:999px; height:8px;}
.tally-fill{background:var(--red); height:8px; border-radius:999px;}
.tally-count{font-size:0.83rem; color:var(--ink-soft); width:24px; text-align:right;}

.confirm-msg{
  display:none; background:var(--success-bg); border:1px solid var(--success-border);
  color:var(--success-ink); border-radius:var(--radius-sm); padding:12px 16px; font-size:0.88rem;
  margin-top:14px;
}
.confirm-msg.show{display:block;}

.demo-note{
  font-size:0.78rem; color:var(--ink-faint); text-align:center; padding:10px 0 30px;
}

/* footer */
.site-footer{border-top:1px solid var(--border); margin-top:40px; padding:32px 0; background:var(--surface);}
.site-footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center;}
.site-footer p{margin:0; font-size:0.83rem; color:var(--ink-faint);}
.site-footer a{color:var(--ink-soft); text-decoration:none; font-size:0.83rem;}

@media (max-width:640px){
  .main-nav{display:none;}
  h1{font-size:2rem;}
  .form-grid-2{grid-template-columns:1fr;}
}

/* session tag, dates, pickup */
.session-tag{
  display:inline-block; font-size:0.68rem; font-weight:600; color:var(--black);
  background:var(--black-tint); padding:1px 8px; border-radius:999px; vertical-align:middle;
}
.club-pickup{
  font-size:0.78rem; color:var(--ink-soft); background:var(--bg); border-radius:var(--radius-sm);
  padding:8px 10px; margin:0 0 12px; display:flex; gap:6px; align-items:flex-start;
}

/* trust line */
.trust-line{
  display:flex; align-items:center; gap:8px; font-size:0.83rem; color:var(--ink-soft);
  padding:0 0 18px;
}
.trust-line span:first-child{color:var(--red);}

/* footer signup */
.footer-signup{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--border);
}
.footer-signup p{margin:0; font-size:0.88rem; color:var(--ink-soft); font-weight:500;}
.footer-signup form{display:flex; gap:8px;}
.footer-signup input[type=email]{
  font-family:inherit; font-size:0.85rem; padding:9px 13px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg); color:var(--ink); width:220px;
}
.footer-signup .confirm-msg{margin:0; flex-basis:100%;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center;}

/* faq */
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 24px; margin-bottom:14px;
}
.faq-item h3{font-size:1.05rem; margin-bottom:8px;}
.faq-item p{margin:0; font-size:0.92rem;}

/* flyer, screen preview */
.flyer-wrap{display:flex; justify-content:center; padding:20px 0 50px;}
.flyer{
  width:640px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:36px 40px;
}
.flyer-header{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--red); padding-bottom:16px; margin-bottom:18px;}
.flyer-header h1{font-size:1.8rem; margin-bottom:4px;}
.flyer-header p{margin:0; font-size:0.9rem;}
.flyer-list{list-style:none; padding:0; margin:0 0 20px;}
.flyer-list li{
  display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.9rem;
}
.flyer-list li span.f-name{font-weight:600;}
.flyer-list li span.f-meta{color:var(--ink-faint); font-size:0.82rem;}
.flyer-footer{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:10px;}
.flyer-footer p{font-size:0.8rem; margin:0; max-width:380px;}
#flyer-qr{width:120px; height:120px;}
.print-actions{text-align:center; padding:10px 0 6px;}

@media print{
  .site-header, .page-head .eyebrow, .print-actions, .site-footer, .demo-note{display:none !important;}
  body{background:#fff;}
  .flyer{border:none; box-shadow:none; width:100%; padding:0;}
  .flyer-wrap{padding:0;}
}

/* club details modal */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(30,42,56,0.45);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--surface); border-radius:var(--radius); max-width:480px; width:100%;
  padding:32px 30px 28px; position:relative; box-shadow:0 10px 40px rgba(30,42,56,0.2);
  max-height:85vh; overflow-y:auto;
}
.modal-close{
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.6rem;
  line-height:1; color:var(--ink-faint); cursor:pointer; padding:4px;
}
.modal-close:hover{color:var(--ink);}
.modal-meta{font-size:0.85rem; color:var(--ink-faint); margin-bottom:14px;}
.modal-instructor{font-size:0.85rem; color:var(--ink-soft); font-style:italic; margin-bottom:14px;}
.modal-cost{font-weight:600; color:var(--ink); margin-bottom:18px;}
#modal-link{width:100%; text-align:center;}

/* category tags, color-coded so the category is visible at a glance */
.category-tag{
  display:inline-block; font-size:0.75rem; font-weight:700;
  padding:2px 10px; border-radius:999px; vertical-align:middle;
}
.category-tag.cat-academic-enrichment{color:var(--cat-academic); background:var(--cat-academic-tint);}
.category-tag.cat-art{color:var(--cat-arts); background:var(--cat-arts-tint);}
.category-tag.cat-stem{color:var(--cat-steam); background:var(--cat-steam-tint);}
.category-tag.cat-active-sports{color:var(--cat-sports); background:var(--cat-sports-tint);}

/* season tabs */
.season-tabs{display:flex; gap:8px; margin-bottom:18px;}
.season-tab{
  font-family:inherit; font-size:0.92rem; font-weight:600; padding:9px 20px;
  border-radius:999px; border:1px solid var(--border); background:var(--surface);
  color:var(--ink-soft); cursor:pointer;
}
.season-tab.active{background:var(--red); border-color:var(--red); color:#fff;}
.season-tab:hover:not(.active){border-color:var(--red);}

/* coming-soon note (e.g. pending ADM-24 approval) */
.coming-soon-note{
  font-size:0.8rem; color:var(--info-ink); background:var(--info-bg);
  border:1px solid var(--info-border); border-radius:var(--radius-sm);
  padding:7px 10px; margin:0 0 10px; display:flex; gap:6px; align-items:flex-start;
}

/* special note (e.g. volunteer needed) */
.special-note{
  font-size:0.8rem; color:var(--warn-ink); background:var(--warn-bg);
  border:1px solid var(--warn-border); border-radius:var(--radius-sm);
  padding:7px 10px; margin:0 0 10px; display:flex; gap:6px; align-items:flex-start;
}

/* season date range note (legacy, kept for JS compatibility) */
.season-dates-note{
  font-size:0.98rem; color:var(--ink); font-weight:700; margin:-2px 0 4px;
}

/* prominent date-discrepancy notice */
.date-notice{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--warn-bg); color:var(--warn-ink);
  border:2px solid var(--warn-border); border-radius:var(--radius-sm);
  padding:12px 14px; margin:0 0 14px;
}
.date-notice-icon{
  font-size:1.3rem; line-height:1; flex-shrink:0;
}
.date-notice p{
  margin:0; font-size:0.95rem; font-weight:700; line-height:1.4;
}
.date-notice-info{
  background:var(--info-bg); color:var(--info-ink); border-color:var(--info-border);
}

/* top-of-page urgency banner */
.urgent-banner{
  background:var(--red); color:#fff;
}
.urgent-banner-inner{
  display:flex; gap:10px; align-items:center; justify-content:center;
  padding:10px 16px; text-align:center;
}
.urgent-banner-icon{
  font-size:1.1rem; line-height:1; flex-shrink:0;
}
.urgent-banner p{
  margin:0; font-size:1.1rem; font-weight:700; letter-spacing:0.01em; color:#fff;
}
@media (max-width:480px){
  .urgent-banner p{font-size:0.95rem;}
}
.club-times-note{
  font-size:0.85rem; color:var(--ink-soft); margin:0 0 16px;
}

/* public interest count shown on each club card */
.interest-count{font-size:0.82rem; color:var(--ink-soft); font-weight:600; margin:0 0 10px;}

.badge-link{text-decoration:none; cursor:pointer; display:inline-block;}
.badge-link:hover{opacity:0.85;}