/* Brikki's kalender. Bouwt voort op home.css. */
.kalender-main{gap:var(--between)}
.kalender-main>*{min-width:0}
.kalender-nav{display:flex;justify-content:flex-end;align-items:center;min-height:58px}
.home-link{position:relative;display:block;width:62px;height:58px;-webkit-tap-highlight-color:transparent}
.home-icon{position:absolute;right:6px;bottom:3px;width:42px;height:34px;background:var(--blue);transition:transform .2s ease}
.home-icon::before{content:'';position:absolute;left:-7px;top:-22px;border-right:28px solid transparent;border-bottom:24px solid var(--blue);border-left:28px solid transparent}
.home-link:hover .home-icon{transform:scale(1.06)}

.kalender-main{gap:16px}
.kalender-blok{padding-top:24px;padding-bottom:24px}
.kalender-blok>h1{margin-bottom:8px;font-size:min(max(24px,5.0563cqw),(100cqw - 60px) / 10.4)}   /* "verrassingskalender" past altijd op één regel */
.kalender-intro{margin:0;text-wrap:balance}
@media (max-width:599px){.kalender-intro{font-size:18px;line-height:1.35}}

/* Een vakje per dag van de maand. home/kalender.js kiest het aantal kolommen en de maat
   (--kol en --tegel), zo dat de hele kalender in beeld past, en maakt het witte blok precies
   zo breed dat de vakjes links gelijk staan met de kop en de witte rand rechts even breed is. */
.kalender-raster{--kol:4;--tegel:64px;--tussen:clamp(8px,2vw,14px);display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--tussen);width:calc(var(--kol) * var(--tegel) + (var(--kol) - 1) * var(--tussen));max-width:100%;margin:27px 0 0}
.kalender-raster>*{width:var(--tegel)}
.vakje{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:calc(var(--tegel) * .2);cursor:pointer;font:700 calc(var(--tegel) * .4)/1 'Futura Bold BT','Futura','Century Gothic',sans-serif;color:var(--white);-webkit-tap-highlight-color:transparent;transition:transform .2s ease}
.vakje.geel{background:var(--yellow);color:var(--black)}
.vakje.blauw{background:var(--blue);color:var(--white)}
.vakje.rood{background:var(--red);color:var(--white)}
.vakje.groen{background:var(--turquoise);color:var(--white)}
.vakje:hover{transform:scale(1.04)}
.vakje:focus-visible{outline:4px solid var(--black);outline-offset:3px}

/* Nog niet aan de beurt: lichter, en even schudden als je erop tikt */
.vakje.dicht{opacity:.38;cursor:default}
.vakje.dicht:hover{transform:none}
.vakje.schud{animation:vakje-schud .4s ease}
@keyframes vakje-schud{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* Vandaag: zachtjes wiebelen, zodat een kind ziet welk vakje open mag */
.vakje.vandaag{box-shadow:0 0 0 4px var(--white),0 0 0 8px var(--black);animation:vakje-wiebel 1.6s ease-in-out infinite}
@keyframes vakje-wiebel{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

/* Al open: Brikki kijkt je aan, de dag staat klein in de hoek */
.vakje.open{background:var(--turquoise) url(app-icoon-maskable-192.png) center/cover no-repeat;color:var(--white)}
.vakje.open .vakje-dag{position:absolute;top:8%;left:10%;font-size:max(11px,calc(var(--tegel) * .18));color:var(--white)}

/* De verrassing */
.verrassing{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgb(0 0 0 / .45)}
.verrassing[hidden]{display:none}
.verrassing-kaart{position:relative;width:min(100%,520px);padding:34px clamp(22px,5vw,40px) 30px;border-radius:var(--radius);background:var(--white);text-align:center;box-shadow:0 18px 40px -10px rgb(0 0 0 / .35);animation:kaart-in .35s ease}
@keyframes kaart-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.verrassing-dag{margin:0 0 6px;color:var(--turquoise);font-weight:700}
.verrassing-titel{font-size:clamp(26px,6vw,36px);margin:0 0 14px}
.verrassing-tekst{margin:0 auto;max-width:none;text-wrap:balance}
.verrassing-knop{margin-top:24px}
.verrassing-knop[hidden]{display:none}
.verrassing-sluit{position:absolute;top:10px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--black);font:400 34px/1 var(--body);cursor:pointer}
html.verrassing-open{overflow:hidden}

/* Liggend scherm: Terug rechts naast de kalender, zodat er niets boven de kalender staat */
@media (orientation:landscape){
  main.kalender-main{width:calc(100% - 2 * var(--side));max-width:1100px;padding-top:16px;grid-template-columns:minmax(0,1fr) 62px;column-gap:clamp(12px,2.5vw,32px);align-items:start}
  .kalender-nav{grid-column:2;grid-row:1;min-height:0;position:sticky;top:16px}
  .kalender-blok{grid-column:1;grid-row:1}
}
@media (orientation:landscape) and (max-height:500px){
  .kalender-blok{padding:16px 20px}
  .kalender-blok>h1{font-size:26px;margin-bottom:4px}
  .kalender-intro{font-size:17px;line-height:1.3}
  .kalender-raster{margin-top:18px}
}

@media (hover:none){.home-link:hover .home-icon,.vakje:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.vakje.vandaag,.vakje.schud,.verrassing-kaart{animation:none}}