/* Geof-Fest — Theme (Index poster lower + Album + Instagram + Quiz fields) */
:root{
  --bg:#0b0a14;
  --bg-2:#0e0d1c;
  --text:#e8e8f3;
  --muted:#a6a6bf;
  --neon1:#23f1ff;
  --neon2:#ff3bff;
  --neon3:#7cff5e;
  --card:#121128;
  --accent:#8a7dff;
  --radius:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -20%, #1a1740 0%, rgba(26,23,64,0) 60%),
    radial-gradient(1200px 800px at 110% 20%, #2a0d35 0%, rgba(42,13,53,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  line-height:1.6;
}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px;}

/* Layout */
.container{width:min(1100px, 92%);margin-inline:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(11,10,20,.7);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;}
.logo{display:flex;align-items:center;gap:.6rem}
.logo-text{font-family:Orbitron,Inter,system-ui,sans-serif;font-weight:700;letter-spacing:.02em}
.glow-dot{width:10px;height:10px;border-radius:999px;background:var(--neon1);box-shadow:0 0 12px var(--neon1),0 0 24px var(--neon2)}
.nav-link{color:var(--text);text-decoration:none;opacity:.9;padding:.4rem .75rem;border-radius:12px;border:1px solid transparent}
.nav-link:hover{border-color:rgba(255,255,255,.12)}

/* Neon grid */
.neon-grid{
  position:absolute;inset:-2px;z-index:0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 30%, transparent 30%),
    repeating-linear-gradient(to right, rgba(35,241,255,.12) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, rgba(255,59,255,.12) 0 1px, transparent 1px 80px);
  background-size: 100% 100%, 160px 160px, 160px 160px;
  animation: drift 40s linear infinite;
  filter: drop-shadow(0 0 12px rgba(35,241,255,.4));
}
@keyframes drift{0%{background-position: 0 0, 0 0, 0 0}100%{background-position: 0 0, 800px 0, 0 800px}}

/* Home hero */
.hero{
  position:relative;min-height:70vh;display:grid;place-items:center;
  padding:4rem 0 5rem 0;overflow:hidden;
}
.hero-inner{position:relative;z-index:1;text-align:center}
.title{font-family:Orbitron,Inter,system-ui,sans-serif;font-size:clamp(2.4rem, 6vw, 5rem);margin:0 0 .5rem 0;}
.neon-text{text-shadow:0 0 8px var(--neon1),0 0 18px var(--neon2),0 0 32px var(--neon2);}
.tagline{margin:.25rem 0 1.25rem 0;font-size:clamp(1rem, 2.4vw, 1.25rem);color:var(--muted)}

/* Home hero with poster background */
.hero-with-poster{
  background:
    linear-gradient(180deg, rgba(11,10,20,.62), rgba(11,10,20,.58)),
    url("assets/poster.png") center / cover no-repeat;
}
.hero-with-poster .neon-grid{ opacity:.12; pointer-events:none; }

/* Countdown */
.countdown{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:1rem auto 1.5rem auto}
.timebox{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:88px;padding:.6rem .8rem;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:0 0 24px rgba(35,241,255,.08), inset 0 0 32px rgba(138,125,255,.04);}
.timebox span{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;font-variant-numeric:tabular-nums}
.timebox small{font-size:.75rem;color:var(--muted);margin-top:.2rem}

/* Buttons */
.cta-row{margin-top:.5rem}
.btn{display:inline-block;text-decoration:none;color:#061015;font-weight:700;padding:.8rem 1.2rem;border-radius:999px;background:linear-gradient(90deg,var(--neon1),var(--neon2));box-shadow:0 0 18px rgba(35,241,255,.45), 0 0 28px rgba(255,59,255,.35);transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;}
.btn:hover{transform:translateY(-2px);filter:saturate(120%);}
.cta-row .btn{margin:.25rem .35rem;}
li .btn{display:inline-block;margin:.25rem 0;}

/* Equal CTA width (Program + Music + Quiz) */
#music-toggle.btn, #submit-quiz.btn, .btn.btn-neon{ min-width:260px; text-align:center; }
@media (max-width:560px){ #music-toggle.btn, #submit-quiz.btn, .btn.btn-neon{ min-width:auto; width:100%; } }

/* Highlights */
.highlights{padding:3rem 0 4rem 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width: 820px){.grid-3{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:1.1rem 1rem;box-shadow:inset 0 0 24px rgba(35,241,255,.05);}
.card-title{margin:.1rem 0 .25rem 0}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 0;}
.footer-link{color:var(--text);opacity:.8;text-decoration:none}
.footer-link:hover{text-decoration:underline}

/* Infos hero */
.page-hero{position:relative;overflow:hidden;padding:3rem 0 2.5rem 0;margin-bottom:1.4rem;}
.page-title{font-family:Orbitron,Inter,system-ui,sans-serif;font-size:clamp(1.8rem,4.5vw,3rem);margin:0 0 .4rem;}
.page-sub{margin:0;color:var(--muted)}

/* Poster on Infos */
.page-hero.with-poster{
  background:
    linear-gradient(180deg, rgba(11,10,20,.62), rgba(11,10,20,.58)),
    url("assets/poster.png") center / cover no-repeat;
  min-height: clamp(240px, 35vh, 420px);
}
.page-hero.with-poster .neon-grid{ opacity:.12; pointer-events:none; }
@media (max-width: 640px){
  .page-hero.with-poster{ background-position: center center, center 25%; }
}

/* Album section */
.album-section{padding: 2.2rem 0 3rem 0;border-top: 1px solid rgba(255,255,255,.08);background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));}
.album-section .section-title{ margin: .2rem 0 .4rem 0; }
.album-sub{ color: var(--muted); margin: 0 0 1.1rem 0; }
.stream-logos{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:.8rem}
@media (max-width:560px){ .stream-logos{grid-template-columns:1fr} }
.stream-link{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;color:var(--text);text-decoration:none;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));box-shadow:inset 0 0 24px rgba(35,241,255,.05);transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;}
.stream-link:hover{transform:translateY(-2px);filter:saturate(120%);box-shadow:0 0 18px rgba(35,241,255,.18);}
.stream-link .icon{width:28px;height:28px;flex:0 0 28px;color:var(--neon1);}
.stream-link .label{font-weight:700}

/* Social / Instagram section */
.social-section{padding:2rem 0 2.6rem 0;border-top:1px solid rgba(255,255,255,.08);}
.ig-link{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:16px;border:1px solid rgba(255,255,255,.12);text-decoration:none;color:var(--text);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));box-shadow:inset 0 0 24px rgba(35,241,255,.05);transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;}
.ig-link:hover{transform:translateY(-2px);filter:saturate(120%);box-shadow:0 0 18px rgba(35,241,255,.18);}
.ig-icon{width:26px;height:26px;color:var(--neon2);}
.ig-link .handle{font-weight:700}

/* Quiz page styles */
.form-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius: var(--radius);padding: 1.2rem 1rem;box-shadow: inset 0 0 24px rgba(35,241,255,.05);margin: 0 0 2rem 0;}
.form-row{margin-bottom:.8rem}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:700px){ .form-row.two{grid-template-columns:1fr} }
.form-card label{display:block;font-weight:600;margin:.2rem 0 .25rem 0}
.form-card input[type="text"], .form-card select{
  width:100%;padding:.7rem .8rem;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);color:var(--text);
}
.hp{position:absolute; left:-9999px; opacity:0;}
.q{margin: .8rem 0 1rem 0; border:0; padding:0;}
.q legend{font-weight:700; margin:.2rem 0 .4rem 0;}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media (max-width:560px){ .options{grid-template-columns:1fr} }
.opt{display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem;border-radius:12px;border:1px solid rgba(255,255,255,.12); cursor:pointer;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));}
.opt input{accent-color: var(--neon2);}
.actions{display:flex;align-items:center;gap:.8rem;margin-top:.8rem;flex-wrap:wrap;justify-content:center}
.form-msg{margin:0;font-weight:600}
.form-msg.warn{color:#ffd166}
.form-msg.error{color:#ff7b7b}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:1rem;z-index:50}
.modal.open{display:flex;}
.modal-content{background:#121128;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1rem 1.1rem;max-width:520px;width:100%;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.4);}

/* Index poster framing + height (ONLY on Index hero) */
.hero.hero-with-poster{background-position: center center, center 25% !important;min-height: clamp(520px, 78vh, 980px);}

.page-hero.with-poster{
  /* first = gradient, second = image */
  background-position: center center, center 25% !important;
}

/* Dark style for the T-shirt size dropdown (Quiz only) */
#quiz-form #size{
  color: var(--text);
  background-color: #121128;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.5rem;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 14px 14px;
  color-scheme: dark; /* hint for some browsers */
}
#quiz-form #size:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(35,241,255,.35);
  border-color: rgba(35,241,255,.6);
}
/* Colors for the dropdown list itself (desktop browsers) */
#quiz-form #size option{
  background-color: #0b0a14;
  color: var(--text);
}