/* Sint Basisschool Dashboard – Factory6 */

.sib-wrap{
    --sib-red:#EC252B;
    --sib-red-dark:#c11d22;
    --sib-gold:#F5B32F;
    --sib-night:#122a4d;
    --sib-night-2:#1d3f6e;
    --sib-paper:#fffdf8;
    font-family:'Original Surfer', cursive;
    max-width:920px;
    margin:0 auto;
    padding:0 16px 60px;
    color:#2b2b2b;
    text-align:center;
}

/* ---------- Header met lucht, boot en golven ---------- */
.sib-header{margin-bottom:26px}
.sib-sky{
    position:relative;
    height:190px;
    border-radius:20px;
    overflow:hidden;
    background:linear-gradient(180deg,var(--sib-night) 0%,var(--sib-night-2) 55%,#2a5a95 100%);
    box-shadow:0 10px 30px rgba(18,42,77,.25);
}
.sib-stars{
    position:absolute;inset:0;
    background-image:
        radial-gradient(2px 2px at 12% 22%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 30% 12%, #ffe9b0 50%, transparent 51%),
        radial-gradient(2px 2px at 55% 25%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 72% 10%, #fff 50%, transparent 51%),
        radial-gradient(2px 2px at 88% 28%, #ffe9b0 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 42% 8%, #fff 50%, transparent 51%);
    animation:sib-twinkle 3.5s ease-in-out infinite alternate;
}
@keyframes sib-twinkle{from{opacity:.55}to{opacity:1}}

.sib-boat-scene{position:absolute;inset:0}
.sib-boat{
    position:absolute;
    bottom:2px;left:-220px;
    width:160px;height:auto;
    animation:sib-sail 26s linear infinite, sib-bob 3.2s ease-in-out infinite;
}
@keyframes sib-sail{from{left:-220px}to{left:110%}}
@keyframes sib-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}

.sib-waves{
    position:absolute;left:0;right:0;height:46px;
    background-repeat:repeat-x;background-size:120px 46px;
}
.sib-waves-back{
    bottom:12px;opacity:.6;
    background-image:radial-gradient(60px 46px at 60px 60px,#3f76b5 48px,transparent 49px);
    animation:sib-wave 7s linear infinite reverse;
}
.sib-waves-front{
    bottom:0;
    background-image:radial-gradient(60px 46px at 60px 58px,#4f8cd0 48px,transparent 49px);
    animation:sib-wave 5s linear infinite;
}
@keyframes sib-wave{from{background-position-x:0}to{background-position-x:120px}}

.sib-greeting{
    font-family:'Original Surfer', cursive;
    font-weight:400;
    color:var(--sib-red);
    font-size:clamp(2rem,6vw,3.2rem);
    margin:22px 0 4px;
    text-shadow:0 2px 0 rgba(0,0,0,.06);
}
.sib-countdown{font-size:clamp(1.05rem,3vw,1.4rem);margin:0}
.sib-countdown strong{color:var(--sib-red);font-size:1.35em}

/* ---------- Dag-navigatie: verticale streepjes links ---------- */
.sib-body{display:flex;gap:26px;align-items:flex-start;text-align:center}
.sib-daynav{
    display:flex;flex-direction:column;gap:12px;
    padding:18px 10px;
    position:sticky;top:16px;
    background:#fff;border-radius:99px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.sib-stage{flex:1;min-width:0}
.sib-day{
    appearance:none;border:0;cursor:pointer;
    width:26px;height:11px;border-radius:99px;
    background:#e3e3e3;
    transition:transform .15s ease, background .2s ease, width .15s ease;
    font-family:inherit;padding:0;
}
.sib-day.is-released{background:var(--sib-gold)}
.sib-day.is-released:hover{transform:scale(1.18)}
.sib-day.is-active{background:var(--sib-red);width:34px}
.sib-day.is-locked{background:#e3e3e3;cursor:not-allowed}
.sib-day:focus-visible{outline:3px solid var(--sib-gold);outline-offset:3px}

@media (max-width:640px){
    .sib-body{flex-direction:column;gap:16px}
    .sib-daynav{
        flex-direction:row;position:static;
        align-self:center;padding:10px 18px;
    }
    .sib-day.is-active{width:26px;height:15px}
}

/* ---------- Speelvlak ---------- */
.sib-daytitle{
    font-family:'Original Surfer', cursive;font-weight:400;
    color:var(--sib-night);font-size:clamp(1.2rem,4vw,1.7rem);
    margin:0 0 14px;min-height:1em;
}
.sib-player{
    position:relative;border-radius:18px;overflow:hidden;
    background:#000;box-shadow:0 12px 34px rgba(0,0,0,.22);
    aspect-ratio:16/9;
}
.sib-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sib-player.is-spotify{aspect-ratio:auto;height:352px;background:transparent;box-shadow:none;border-radius:16px}

/* ---------- Keuzeknoppen: overlay óver de video ---------- */
.sib-playerwrap{position:relative}
.sib-choices{
    position:absolute;inset:0;z-index:5;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(18,42,77,.55),rgba(18,42,77,.82));
    animation:sib-pop .45s cubic-bezier(.34,1.56,.64,1);
    padding:20px;
}
.sib-choices[hidden]{display:none}
/* Geen video op deze dag? Dan is de overlay een eigen paneel. */
.sib-playerwrap.is-solo .sib-choices{
    position:static;background:var(--sib-night);
    aspect-ratio:16/9;box-shadow:0 12px 34px rgba(18,42,77,.3);
}
@keyframes sib-pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.sib-choices-q{
    font-family:'Original Surfer', cursive;
    font-size:clamp(1.3rem,3.6vw,2.1rem);
    color:#fff;margin:0;
    text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.sib-catchup{margin-top:6px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.35)}
.sib-catchup[hidden]{display:none}
.sib-catchup-q{color:#ffe9b0;font-size:clamp(.95rem,2.4vw,1.15rem);margin:0 0 10px}
.sib-catchup-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sib-btn.sib-btn-small{
    font-size:clamp(.85rem,2vw,1rem);
    padding:9px 20px;
    background:var(--sib-gold);color:var(--sib-night);
    box-shadow:0 4px 0 #c98d15, 0 8px 16px rgba(245,179,47,.35);
}
.sib-btn.sib-btn-small:hover{box-shadow:0 7px 0 #c98d15, 0 12px 20px rgba(245,179,47,.4)}
.sib-btn.sib-btn-small:active{box-shadow:0 2px 0 #c98d15}
.sib-choice-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.sib-btn{
    font-family:'Original Surfer', cursive;
    font-size:clamp(1rem,2.6vw,1.25rem);
    color:#fff;background:var(--sib-red);
    border:0;border-radius:99px;cursor:pointer;
    padding:14px 30px;
    box-shadow:0 6px 0 var(--sib-red-dark), 0 12px 22px rgba(236,37,43,.35);
    transition:transform .12s ease, box-shadow .12s ease;
}
.sib-btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--sib-red-dark), 0 16px 26px rgba(236,37,43,.4)}
.sib-btn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--sib-red-dark)}
.sib-btn:focus-visible{outline:3px solid var(--sib-gold);outline-offset:3px}

.sib-back{
    margin-top:20px;
    font-family:'Original Surfer', cursive;font-size:1rem;
    background:transparent;border:2px solid var(--sib-night);color:var(--sib-night);
    border-radius:99px;padding:9px 22px;cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.sib-back:hover{background:var(--sib-night);color:#fff}

/* ---------- Wacht- en lege staten ---------- */
.sib-waiting{
    background:var(--sib-paper);border:3px dashed var(--sib-gold);
    border-radius:20px;padding:50px 24px;
}
.sib-waiting h2{font-family:'Original Surfer',cursive;font-weight:400;color:var(--sib-red);font-size:clamp(1.6rem,5vw,2.4rem);margin:0 0 8px}
.sib-waiting p{font-size:1.15rem;margin:0}
.sib-nocontent{font-size:1.1rem;color:#666;margin-top:22px}

/* ---------- Beeldvullende pagina (digibord) ---------- */
body.sib-fullpage{
    margin:0;padding:0;min-height:100vh;
    background:var(--sib-paper,#fffdf8);
}
body.sib-fullpage #wpadminbar{display:none}
body.sib-fullpage{padding-top:0 !important}
body.sib-fullpage .sib-wrap{
    max-width:1100px;
    padding-top:20px;
}

/* Knop om ook de browserbalk te verbergen (Fullscreen API) */
.sib-fullscreen{
    position:fixed;top:14px;right:14px;z-index:50;
    font-family:'Original Surfer', cursive;
    font-size:.85rem;
    background:rgba(255,255,255,.9);color:var(--sib-night);
    border:2px solid var(--sib-night);border-radius:99px;
    padding:7px 15px;cursor:pointer;
    transition:background .15s ease,color .15s ease,transform .12s ease;
}
.sib-fullscreen:hover{background:var(--sib-night);color:#fff;transform:translateY(-2px)}
.sib-fullscreen:focus-visible{outline:3px solid var(--sib-gold);outline-offset:3px}

/* Het dashboard zelf in fullscreen-modus */
.sib-wrap:fullscreen{
    background:var(--sib-paper);
    max-width:none;width:100%;height:100%;
    overflow-y:auto;
    padding:24px clamp(16px,6vw,80px) 60px;
}
.sib-wrap:fullscreen .sib-stage,
.sib-wrap:fullscreen .sib-header{max-width:1100px;margin-left:auto;margin-right:auto}
.sib-wrap:fullscreen .sib-header{margin-bottom:26px}

@media (prefers-reduced-motion:reduce){
    .sib-boat,.sib-waves,.sib-stars{animation:none}
    .sib-boat{left:35%}
}
@media (max-width:520px){
    .sib-sky{height:150px}
    .sib-boat{width:140px}
}