/* ================================================================
   Wonderwall – style.css (v2)
   - Sterke leesbaarheid: hero-panel (glass), donkere overlay
   - Palette: #f7c137 #ad6ed7 #81bdb9 #669fcb #e17795
   ================================================================ */

:root{
    --yellow: #f7c137;
    --purple: #ad6ed7;
    --cyan:   #81bdb9;
    --blue:   #669fcb;
    --pink:   #e17795;
    --bg:     #05060d;
    --text:   #F5F5F5;
    --muted:  rgba(245,245,245,0.78);
    --glass:  rgba(12,12,18,0.55);   /* donker glas */
    --card:   rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.12);
    --maxw:   1140px;
}

/* Reset / basis */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:
            radial-gradient(1200px 600px at 10% 20%, rgba(173,110,215,0.10), transparent 8%),
            radial-gradient(900px 500px at 90% 80%, rgba(129,189,185,0.08), transparent 10%),
            var(--bg);
    color:var(--text);
    font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
.container{width:calc(100% - 40px); max-width:var(--maxw); margin:0 auto; padding:20px}
.mt-2{margin-top:16px}
.u-yellow{color:var(--yellow)} .u-pink{color:var(--pink)} .u-cyan{color:var(--cyan)} .u-blue{color:var(--blue)}

/* ---------- Header ---------- */
.site-header{
    position:sticky; top:0; z-index:1000;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(5,5,10,0.85), rgba(5,5,10,0.45));
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.header-inner{display:flex; gap:16px; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-logo{display:block; width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 0 16px rgba(247,193,55,0.35))}
.brand-name{font-weight:900; font-size:1.25rem; color:var(--yellow); text-shadow:0 0 16px rgba(247,193,55,0.28)}
.main-nav{display:flex; gap:12px; align-items:center}
.nav-link {
    color: var(--muted);
    font-weight: 800;
    font-size: 0.96rem;
    padding: 8px 12px;
    border-radius: 999px;
    transition: transform .18s ease, box-shadow .18s ease, color .18s;
    text-decoration: none; /* 🔹 verwijdert het lijntje */
}

.nav-link:hover {
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(255,255,255,0.06) inset;
    text-decoration: none; /* 🔹 voorkomt lijntje bij hover */
}
.menu-toggle{display:none; background:none; border:none; color:var(--text); font-size:1.4rem}

/* ---------- Hero ---------- */
.hero{
    position:relative; overflow:hidden; padding:42px 0 20px 0;
    /* JOUW AFBEELDING ALS START-ACHTERGROND */
    background:
            linear-gradient(180deg, rgba(5,6,13,0) 0%, rgba(5,6,13,0.25) 40%, rgba(5,6,13,0.92) 100%),
            url("images/achtergrondwebsite.png") center/cover no-repeat; background-size: cover;
    background-position: center;
}

.hero-overlay{position:absolute; inset:0; background: radial-gradient(1200px 800px at 15% 25%, rgba(0,0,0,0.45), transparent 35%), radial-gradient(1200px 800px at 85% 70%, rgba(0,0,0,0.35), transparent 40%); pointer-events:none}
.hero-grid{display:grid; grid-template-columns: 1.15fr 0.85fr; gap:28px; align-items:center}

/* Glaspaneel voor heldere tekst */
.hero-panel{
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(247,193,55,0.06) inset;
    backdrop-filter: blur(12px);
}
.title-xl{font-size:clamp(2.2rem,5.6vw,4rem); margin:0 0 8px}
.accent{color:var(--yellow); text-shadow:0 0 22px rgba(247,193,55,0.35)}
.sub-xl{font-size:clamp(1.06rem,2.3vw,1.28rem); color:var(--muted); max-width:70ch}

/* Heldere scheiding Tickets vs Rewards */
.badge-row{display:flex; gap:8px; margin:10px 0 6px}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-weight:900; font-size:0.86rem; letter-spacing:.2px}
.badge-tickets{background:var(--yellow); color:#17171d}
.badge-rewards{background:var(--pink); color:#1c0f13}
.badge {
    text-decoration: none; /* 🔹 verwijdert het lijntje */
}

.badge:hover {
    text-decoration: none; /* 🔹 zorgt dat het ook bij hover wegblijft */
}

/* Kerninfo */
.event-points{list-style:none; padding:0; margin:14px 0; color:var(--text)}
.event-points li{margin:6px 0; border-left:3px solid rgba(255,255,255,0.14); padding-left:10px}

/* CTA split kaarten */
.cta-split{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:12px}
.cta-card{
    display:block; text-decoration:none; border-radius:14px; padding:14px;
    border:1px solid rgba(255,255,255,0.14);
    color:var(--text); background:rgba(255,255,255,0.04);
    transition:transform .18s ease, box-shadow .18s ease;
}
.cta-card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.45)}
.cta-title{font-weight:900; margin-bottom:6px}
.cta-tickets{box-shadow:0 0 30px rgba(247,193,55,0.10) inset}
.cta-rewards{box-shadow:0 0 30px rgba(225,119,149,0.12) inset}

/* Beeld */
.hero-art{border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.55)}
.hero-art img{display:block; width:100%; height:auto}

/* Sterrenveld */
.starfield{position:absolute; inset:0; pointer-events:none}
.star{position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:0.8; box-shadow:0 0 14px rgba(255,255,255,0.8); animation: twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0.45}50%{opacity:1}}
.s1{top:10%; left:15%} .s2{top:30%; left:25%} .s3{top:20%; left:70%}
.s4{top:60%; left:80%} .s5{top:75%; left:35%} .s6{top:12%; left:88%}
.s7{top:46%; left:12%} .s8{top:82%; left:65%} .s9{top:55%; left:50%}

/* Buttons (algemeen) */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:999px; font-weight:900; cursor:pointer; text-decoration:none}
.btn-cta{background:var(--yellow); color:#121218; box-shadow:0 10px 26px rgba(247,193,55,0.35), 0 0 40px rgba(247,193,55,0.18)}
.btn-cta:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(247,193,55,0.45)}
.btn-ghost{border:1px solid rgba(255,255,255,0.22); color:var(--text); background:transparent}
.btn-sm{padding:8px 12px; font-size:0.92rem; border:1px solid rgba(255,255,255,0.16); background:transparent; color:var(--text)}

/* Kleurstalen */
.palette { display:flex; gap:8px; margin-top:10px }
.palette .swatch{ width:18px; height:18px; border-radius:50%; background:var(--sw); box-shadow: 0 0 14px var(--sw); border: 1px solid rgba(255,255,255,0.22)}

/* ---------- Secties ---------- */
.section{padding:48px 0}
.dark-section{
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.section-title{margin:0 0 8px; font-size:clamp(1.5rem,3vw,2.4rem); text-shadow:0 0 14px rgba(173,110,215,0.25)}
.lead{color:var(--muted); max-width:72ch}

/* Features */
.feature-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:14px}
.feature-card{background:var(--card); border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:16px; box-shadow:0 18px 45px rgba(0,0,0,0.35)}
.feature-icon{font-size:1.6rem; margin-bottom:6px; color:var(--purple)}

/* Timeline (4 delen) */
.timeline{display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top:12px}
.time-card{background:var(--card); border:1px solid rgba(255,255,255,0.10); padding:16px; border-radius:14px; position:relative}
.time-card .dot{position:absolute; top:12px; right:12px; width:10px; height:10px; border-radius:50%; background:var(--c, var(--yellow)); box-shadow:0 0 12px var(--c, var(--yellow))}
.time-card h3{margin:0 0 6px}

/* Kids preview */
.kids-row{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:12px}
.kid-card{background:var(--card); border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.10)}
.kid-photo{aspect-ratio:3/4; background-size:cover; background-position:center}
.kid-body{padding:12px}
.kid-name{margin:0 0 4px}
.kid-role{margin:0 0 8px; color:var(--muted)}
.kid-blurb{margin:0 0 10px}
.pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.8rem; color:#101217; background:var(--yellow)}
.pill-blue{background:var(--blue); color:#041018}
.pill-purple{background:var(--purple); color:#0e0715}
.pill-pink{background:var(--pink); color:#1c0b11}

/* Footer */
.site-footer{padding:28px 0 56px; border-top:1px solid rgba(255,255,255,0.10)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.logo-footer{font-weight:900; color:var(--yellow)}
.muted{color:var(--muted)}
.link{color:var(--text); text-decoration:underline}

/* ---------- Responsive ---------- */
@media (max-width:980px){
    .hero-grid{grid-template-columns: 1fr}
    .hero-art{order:-1}
    .feature-grid{grid-template-columns: repeat(2,1fr)}
    .timeline{grid-template-columns: repeat(2,1fr)}
    .kids-row{grid-template-columns: repeat(2,1fr)}
    .main-nav{display:none}
    .menu-toggle{display:inline-block}
}
@media (max-width:540px){
    .feature-grid{grid-template-columns:1fr}
    .timeline{grid-template-columns:1fr}
    .kids-row{grid-template-columns:1fr}
}

/* Mobiel menu (≤980px): standaard verbergen, tonen bij .open */
@media (max-width: 980px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 64px;                 /* onder de header */
        right: 20px;
        left: 20px;
        padding: 10px;
        gap: 6px;
        flex-direction: column;
        background: rgba(20,20,28,0.96);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        z-index: 1100;
    }
    .main-nav.open { display: flex; }
    .menu-toggle { display: inline-block; }
    body.no-scroll { overflow: hidden; }
}

@media (max-width: 540px) {
    /* eerste waarde = gradient, tweede = image */
    .hero {
        background-size: auto, contain;
        background-position: center, center top;
        background-repeat: no-repeat, no-repeat;
        background-color: #000; /* optioneel, vult eventuele balkjes */
    }
}

/* --- Mobiel menu: zichtbaar maken als .open (super-robuust) --- */
@media (max-width: 980px) {
    .main-nav {
        display: none !important;
        position: absolute;
        top: 64px; left: 20px; right: 20px;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        background: rgba(20,20,28,0.96);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        z-index: 1100;
    }
    .main-nav.open { display: flex !important; }
    .menu-toggle { display: inline-block !important; }
    body.no-scroll { overflow: hidden !important; }
}