/* ============================================================================
 * Tirolia-Express - v3 layout (modern, responsive, 2026)
 * Bewust grote, goed leesbare typografie voor onze (wat oudere) luisteraars.
 * Werkt op alle "evergreen" browsers die nog op Windows 7 draaien
 * (Chrome <=109, Firefox ESR, ...). Internet Explorer wordt door de router
 * naar de klassieke v1-layout gestuurd, dus daar hoeven we hier geen rekening
 * mee te houden.
 * ==========================================================================*/

:root{
  /* Hoofdkleur van het thema ("Alpine rood"). Deze drie waarden sturen de
     header, de footer, de "Nu op de radio"-hero en de accenten aan. Wil je een
     ander thema? Pas dan alleen deze drie regels aan, bijvoorbeeld:
       blauw : #283c51 / #1b2a3a / #37526e
       groen : #2c5440 / #1e3b2d / #3a6b52  */
  --tir-blue:#28415e;
  --tir-blue-2:#1d3047;
  --tir-blue-3:#3a5a7d;
  --tir-gold:#e0a32e;
  --tir-gold-2:#c8860f;
  --tir-red:#c0392b;
  --tir-bg:#eef1f4;
  --tir-card:#ffffff;
  --tir-ink:#1f2933;
  --tir-muted:#5b6770;
  --tir-line:#e2e8f0;
  --tir-radius:14px;
  --tir-shadow:0 6px 24px rgba(20,30,48,.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* ⚠ Zet de rem-basis terug op 16px, alleen voor v3.
 *
 * bootstrapV331/css/bootstrap.min.css zet html{font-size:10px} en wordt in
 * html/header.php één regel eerder geladen dan dit bestand. Alle rem-maten
 * hieronder zijn echter geschreven alsof de basis 16px is, dus ze kwamen er
 * 37,5% te klein uit: h1 op 19px in plaats van 30px, de "vandaag"-badge op
 * 7px. Dit zet dat in één keer recht.
 *
 * Dit raakt uitsluitend v3: v3.css wordt alleen door v3/html/header.php
 * geladen. En het raakt alleen ONZE rem-maten - de vier bootstrap-stylesheets
 * bevatten samen 0 rem-waarden (Bootstrap 3.3.1 is volledig px-gebaseerd, die
 * 10px-regel is er een restant zonder gebruikers) en Font Awesome rekent in
 * em, wat aan de eigen font-size hangt en niet aan de root. */
html{font-size:16px;}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:18px;            /* groot & leesbaar */
  line-height:1.6;
  color:var(--tir-ink);
  background:var(--tir-bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;     /* sticky footer: #v3-main groeit, footer blijft onderaan */
}

/* achtergrondfoto (zelfde sfeer als v1/v2) subtiel achter alle content */
#v3-bg{
  position:fixed; left:0; right:0; top:0; bottom:0; z-index:-1;
  background:#ffffff url('/v1/include/images/background.jpg') no-repeat center center fixed;
  background-size:cover;
  opacity:.18;
}

a{color:var(--tir-blue); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; height:auto;}
h1{font-size:1.9rem; margin:.2em 0 .5em;}
h2{font-size:1.3rem;}

/* ---------- Topbar ---------- */
#v3-top{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,var(--tir-blue),var(--tir-blue-2));
  color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.v3-top-inner{position:relative; max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 16px;}
/* 20px in px, niet 1.8rem. Met de rem-basis op 16px zou dit 28,8px worden, en
 * dan breekt de navigatie ernaast over DRIE regels af in plaats van twee en
 * wordt de balk 89px -> 125px hoog. Gemeten: 20px houdt de balk exact op de
 * 89px en 2 regels van nu, en is toch groter dan de 18px van eerst. Vanaf
 * 22px kost het een derde regel. */
.v3-brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:#fff; white-space:nowrap;}
.v3-brand:hover{text-decoration:none; color:#fff;}
.v3-brand i{color:var(--tir-gold);}
.v3-nav{display:flex; flex-wrap:wrap; gap:2px; flex:1;}
.v3-nav a{color:#dce6f1; padding:6px 12px; border-radius:8px; font-weight:600; line-height:1.2;}
.v3-nav a:hover,.v3-nav a.active{background:rgba(255,255,255,.14); color:#fff; text-decoration:none;}
.v3-top-actions{display:flex; align-items:center; gap:8px;}
.v3-lang img{display:block; border-radius:3px;}
/* 15px in plaats van 1.35rem (= 13,5px): de navigatielinks ernaast erven de
 * 18px van body, dus deze knoppen stonden zichtbaar klein in dezelfde balk.
 * Bewust NIET op 18px - ze blijven ondergeschikt aan de gouden play-knop. */
.v3-kies{color:#fff; border:1px solid rgba(255,255,255,.45); padding:8px 14px; border-radius:8px; font-weight:600; font-size:15px; white-space:nowrap;}
.v3-kies:hover{background:rgba(255,255,255,.14); text-decoration:none; color:#fff;}
.v3-menu-toggle{display:none; background:none; border:0; color:#fff; font-size:1.6rem; cursor:pointer; padding:4px 10px; line-height:1;}

/* gebruikersmenu (ingelogd): dropdown onder de naam-chip */
.v3-user{position:relative;}
.v3-user-toggle{background:none; cursor:pointer; font-family:inherit; font-size:inherit;}
.v3-user-menu{display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:250px; background:var(--tir-card); border:1px solid var(--tir-line); border-radius:12px; box-shadow:0 12px 30px rgba(20,30,48,.3); padding:6px; z-index:70;}
.v3-user.open .v3-user-menu{display:block;}
.v3-user-menu a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--tir-ink); font-weight:600; white-space:nowrap;}
.v3-user-menu a:hover{background:#fdf6e7; color:#1c1304; text-decoration:none;}
.v3-user-menu a i{width:18px; text-align:center; color:var(--tir-blue);}

/* play-knop (opent de radiospeler in een popup / nieuwe pagina) */
/* font-size bewust in px, niet rem: deze knop is op maat gezet toen de
 * rem-basis nog 10px was (1.2rem gaf 12px) en hoort niet mee te groeien nu de
 * basis op 16px staat. Zie de notitie bij html{font-size:16px} bovenaan. */
.btn-play{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(180deg,var(--tir-gold),var(--tir-gold-2)); color:#1c1304; font-weight:800; font-size:18px; padding:10px 18px; border-radius:999px; cursor:pointer; border:0; box-shadow:0 3px 10px rgba(0,0,0,.25); text-decoration:none;}
.btn-play:hover{filter:brightness(1.06); text-decoration:none; color:#1c1304;}

/* ---------- Hoofd-layout ---------- */
#v3-main{max-width:1180px; width:100%; margin:0 auto; padding:22px 16px 10px; flex:1 0 auto;}

/* nette, duidelijke paginatitels (geldt voor alle contentpagina's) */
#v3-main h1{font-size:2rem; font-weight:800; line-height:1.2; color:var(--tir-blue-2); margin:0 0 .55em; padding-bottom:.28em; border-bottom:3px solid var(--tir-gold);}
.v3-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:start;}
@media (max-width:900px){ .v3-grid{grid-template-columns:1fr;} }

.card{background:var(--tir-card); border:1px solid var(--tir-line); border-radius:var(--tir-radius); box-shadow:var(--tir-shadow); overflow:hidden; margin-bottom:22px;}
.card > h2{margin:0; padding:14px 18px; font-size:1.4rem; background:#f4f7fa; border-bottom:1px solid var(--tir-line); display:flex; align-items:center; gap:10px;}
.card > h2 i{color:var(--tir-blue);}
.card .card-body{padding:16px 18px;}

/* algemene content (ook gebruikt door hergebruikte v2-pagina's binnen de v3-shell) */
.v3-page{background:var(--tir-card); border:1px solid var(--tir-line); border-radius:var(--tir-radius); box-shadow:var(--tir-shadow); padding:20px 24px; margin-bottom:22px;}

/* ---------- "Nu op de radio" hero ---------- */
.np-hero{background:linear-gradient(135deg,var(--tir-blue),var(--tir-blue-3)); color:#fff; border:0;}
.np-hero > h2{background:transparent; color:#fff; border-bottom:1px solid rgba(255,255,255,.15);}
.np-hero > h2 i{color:var(--tir-gold);}
.np-flex{display:flex; gap:18px; align-items:center; padding:18px;}
.np-cover{flex:0 0 130px; width:130px; height:130px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.3);}
.np-cover img{width:100%; height:100%; object-fit:cover;}
.np-cover i{font-size:3rem; color:rgba(255,255,255,.6);}
.np-meta{flex:1; min-width:0;}
.np-dj{font-size:1.05rem; color:var(--tir-gold); font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.np-song{font-size:1.6rem; font-weight:800; line-height:1.25; margin:4px 0 8px; overflow-wrap:break-word;}
.np-listeners{font-size:1.05rem; color:#cdd9e6;}
.np-cta{padding:0 18px 18px;}
/* De grote knop onder "Nu op de radio" overschrijft .btn-play, dus die heeft
 * zijn eigen px-maat nodig - anders bleef hij op 12,5px staan. */
.np-cta .btn-play{font-size:20px; padding:15px 26px; width:100%; justify-content:center;}
.np-loading,.np-off,.np-err{padding:26px 18px; text-align:center; color:#cdd9e6;}

/* ---------- Programma vandaag ---------- */
.prog-list{list-style:none; margin:0; padding:0;}
.prog-list li{display:flex; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px dashed var(--tir-line);}
.prog-list li:last-child{border-bottom:0;}
.prog-list .ptime{flex:0 0 58px; font-weight:800; color:var(--tir-blue); font-variant-numeric:tabular-nums;}
.prog-list .pdj{font-weight:700;}
.prog-list li.now{background:#fff7e6; margin:0 -18px; padding:10px 18px; border-bottom:1px dashed #f0d9a8;}
.prog-list li.now .ptime{color:var(--tir-red);}
.prog-list li.now::after{content:"NU"; margin-left:auto; align-self:center; background:var(--tir-red); color:#fff; font-size:.72rem; font-weight:800; padding:2px 9px; border-radius:999px;}
.prog-foot{margin-top:12px;}

/* ---------- Berichtjes ---------- */
.ber-list{list-style:none; margin:0; padding:0;}
.ber-list li{padding:12px 0; border-bottom:1px solid var(--tir-line);}
.ber-list li:last-child{border-bottom:0;}
.ber-list .bnaam{display:block; font-weight:800; color:var(--tir-blue);}
.ber-list .bmsg{display:block; color:var(--tir-ink);}
.ber-empty{color:var(--tir-muted);}
.ber-list .cpemoji{width:18px; vertical-align:middle;}
.ber-list{transition:opacity .25s ease;}
.ber-list.ber-fade{opacity:0;}

/* ---------- Footer ---------- */
/* De maten hieronder staan bewust in px en horen dat te blijven.
 *
 * Deze rij stond op `font-size:.92rem`, en toen was de rem-basis nog 10px
 * (bootstrap zette html{font-size:10px} en v3.css zette dat niet terug), dus
 * dit rendeerde op 9,2px naast een body van 18px - vandaar dat het als
 * "mini-linkjes" overkwam. De basis staat nu op 16px (zie de notitie bij
 * html{font-size:16px} bovenaan), maar deze waarden zijn daarna op het oog
 * afgeregeld en moeten dus NIET meegroeien: 16px voor de links en 14px voor de
 * copyright-regel zijn de bedoelde maten, niet een restant. */
#v3-foot{background:var(--tir-blue-2); color:#aebccd; margin-top:30px; flex-shrink:0;}
.v3-foot-inner{max-width:1180px; margin:0 auto; padding:26px 16px;}
/* De gap is kleiner dan de oude 8px/18px omdat de links nu zelf padding
 * dragen: de klikbare vlakken zouden anders tegen elkaar aan liggen. */
.v3-foot-links{display:flex; flex-wrap:wrap; gap:2px 4px; margin-bottom:14px; font-size:16px;}
.v3-foot-links a{white-space:nowrap; font-weight:600; line-height:1.2; padding:9px 12px; border-radius:8px;}
/* Zelfde "hover-pil" als de hoofdnavigatie (.v3-nav a:hover) in plaats van een
 * onderstreping: v3 onderstreept nergens een link in ruststand, dus dit is de
 * manier waarop deze site al "klikbaar" zegt. */
.v3-foot-links a:hover{background:rgba(255,255,255,.14); text-decoration:none;}
.v3-foot-meta{color:#9fb0c2; font-size:14px; padding:0 12px;}
#v3-foot a{color:#dce6f1;}
#v3-foot a:hover{color:#fff;}

/* ---------- Mobiel ---------- */
@media (max-width:820px){
  body{font-size:17px;}
  .v3-menu-toggle{display:block; order:3; margin-left:auto;}
  .v3-nav{display:none; order:5; position:absolute; left:0; right:0; top:100%; background:var(--tir-blue-2); flex-direction:column; padding:8px; gap:2px; box-shadow:0 8px 16px rgba(0,0,0,.3);}
  body.v3-menu-open .v3-nav{display:flex;}
  .v3-nav a{padding:12px;}
  /* flex-wrap is hier het hele punt. .v3-top-inner brak al af, maar
   * .v3-top-actions stond zelf op nowrap, dus die rij KON niet afbreken: op
   * 375px was hij 471px breed (playknop 163 + vlag 28 + Inloggen 108 +
   * Website-versie 148 + 3x8 gap) in een vak van 343px, en dus liep de hele
   * bovenbalk 112px buiten het scherm met een horizontale schuifbalk. */
  .v3-top-actions{order:4; flex-wrap:wrap; width:100%;}
  .np-flex{flex-direction:column; text-align:center;}
  .np-cover{flex-basis:auto;}
}

/* ---------- Telefoon ---------- */
@media (max-width:560px){
  /* De layout-kiezer gaat van de bovenbalk af. Hij is met 148px de breedste
   * knop van de rij en juist op een telefoon de minst nuttige: v3 IS daar de
   * standaard. Zonder hem meet de rij 315px (playknop 163 + vlag 28 +
   * Inloggen 108 + 2x8 gap) en dat past in de 343px van een 375px-scherm, dus
   * dit alleen is al genoeg - de rij blijft één regel en de balk blijft even
   * hoog als hij nu is, alleen zonder schuifbalk.
   *
   * Hij verdwijnt niet: /kies-versie staat ook in de footer. De markup blijft
   * bovendien staan (alleen display:none), zodat txt_website_versie in
   * header.php blijft - tests/smoke.php eist dat in zes layoutbestanden.
   *
   * Een playknop over de volle breedte stond hier eerst ook. Dat las lekker,
   * maar het kostte een derde regel en maakte de sticky balk 110px -> 168px:
   * op een telefoon van 812px hoog is dat blijvend een vijfde van het scherm,
   * en de knop is op 163px al ruim een duim breed. Niet waard. */
  .v3-kies-versie{display:none;}
}

/* ============================================================================
 * Contentpagina's (programma, gastenboek, formulieren) - Fase 2
 * ==========================================================================*/
.v3-page-head{background:var(--tir-card); border:1px solid var(--tir-line); border-radius:var(--tir-radius); box-shadow:var(--tir-shadow); padding:18px 22px; margin:0 0 22px;}
.v3-page-head h1{margin:0 0 8px;}
.v3-head-action{margin-top:14px;}
.v3-page-actions{margin:0 0 18px;}
.v3-cards-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; align-items:start;}
@media (max-width:760px){ .v3-cards-2{grid-template-columns:1fr;} }

/* formulieren binnen .v3-page (de basis-.v3-page staat al hierboven) */
.v3-page h1{margin-top:0;}
.v3-page .form-group{margin-bottom:16px;}
.v3-page label{display:block; font-weight:600; margin-bottom:4px;}
.v3-page .form-control{width:100%; padding:10px 12px; border:1px solid var(--tir-line); border-radius:8px; font-size:1.15rem; font-family:inherit; background:#fff;}
.v3-page .form-control:focus{outline:none; border-color:var(--tir-blue); box-shadow:0 0 0 3px rgba(40,65,94,.12);}

/* "vandaag"-badge in het programma */
.prog-today{display:inline-block; background:var(--tir-gold); color:#1c1304; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 9px; border-radius:999px; vertical-align:middle;}

/* v3-knop (formulieren, gastenboek) */
.v3-btn, .v3-page input[type="submit"], .v3-page button[type="submit"]{display:inline-block; background:linear-gradient(180deg,var(--tir-gold),var(--tir-gold-2)); color:#1c1304; font-weight:800; padding:12px 24px; border:0; border-radius:999px; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.2); text-decoration:none; font-size:1.15rem;}
.v3-btn:hover, .v3-page input[type="submit"]:hover, .v3-page button[type="submit"]:hover{filter:brightness(1.06); text-decoration:none; color:#1c1304;}

/* statusmeldingen (callouts) - v3 overschrijft de Bootstrap-versie */
.callout{padding:12px 16px; border-radius:8px; border-left:4px solid #ccc; background:#f4f7fa; margin:0 0 16px;}
.callout p{margin:0;}
.callout-success{border-left-color:#2e7d32; background:#eaf6ea;}
.callout-warning{border-left-color:#e0a32e; background:#fdf6e7;}
.callout-danger{border-left-color:#c0392b; background:#fbecea;}
.callout-info{border-left-color:#2c6fb3; background:#eaf2fb;}

/* paginering */
.v3-pagination{margin:14px 0;}
.v3-pagination .pagination{display:inline-flex; flex-wrap:wrap; gap:4px; padding:0; margin:0; list-style:none;}
.v3-pagination .pagination > li{display:inline-block;}
.v3-pagination .pagination > li > a{display:inline-block; padding:6px 12px; border:1px solid var(--tir-line); border-radius:8px; color:var(--tir-blue); background:#fff; text-decoration:none;}
.v3-pagination .pagination > li.active > a{background:var(--tir-blue); color:#fff; border-color:var(--tir-blue);}
.v3-pagination .pagination > li.disabled > a{color:#bcc6d0;}

/* gastenboek-berichten */
.gb-entry{background:var(--tir-card); border:1px solid var(--tir-line); border-radius:var(--tir-radius); box-shadow:var(--tir-shadow); padding:14px 18px; margin-bottom:16px;}
.gb-entry-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-bottom:1px solid var(--tir-line); padding-bottom:8px; margin-bottom:10px;}
.gb-name{font-weight:800; color:var(--tir-blue);}
.gb-date{color:var(--tir-muted); font-size:.85rem; white-space:nowrap;}
.gb-body{overflow-wrap:break-word;}

/* het team - DJ-kaartjes */
.team-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:6px;}
.team-card{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--tir-card); border:1px solid var(--tir-line); border-radius:12px; box-shadow:var(--tir-shadow); color:var(--tir-ink); font-weight:700; text-decoration:none; transition:transform .12s ease, border-color .12s ease;}
.team-card:hover{text-decoration:none; border-color:var(--tir-blue); transform:translateY(-1px);}
.team-card i{font-size:1.7rem; color:var(--tir-blue);}
.team-card span{color:var(--tir-ink);}

/* een uitgelichte kaart (bv. "Onlangs gedraaid" op /luistermee) */
.team-card-accent{background:linear-gradient(135deg,var(--tir-gold),var(--tir-gold-2)); border-color:var(--tir-gold-2); box-shadow:0 6px 18px rgba(200,134,15,.35);}
.team-card-accent i,.team-card-accent span{color:#1c1304;}
.team-card-accent:hover{border-color:#1c1304;}

/* snelkoppelingen (pillen) - bv. op /team en /luistermee */
.v3-sublinks{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px;}
.v3-sublinks a{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:var(--tir-card); border:1px solid var(--tir-line); box-shadow:var(--tir-shadow); color:var(--tir-blue); font-weight:700; text-decoration:none; transition:transform .12s ease, border-color .12s ease;}
.v3-sublinks a:hover{border-color:var(--tir-blue); text-decoration:none; transform:translateY(-1px);}
.v3-sublinks a i{color:var(--tir-gold);}

/* statistieken */
.stats{margin:0;}
.stats > div{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--tir-line);}
.stats > div:last-child{border-bottom:0;}
.stats dt{margin:0; color:var(--tir-muted);}
.stats dd{margin:0; font-weight:800; color:var(--tir-blue); font-variant-numeric:tabular-nums;}

/* verjaardagen */
.bday-card{margin-bottom:0;}
.bday-row{padding:5px 0; border-bottom:1px dashed var(--tir-line);}
.bday-row:last-child{border-bottom:0;}
.bday-day{display:inline-block; min-width:2em; font-weight:800; color:var(--tir-blue); font-variant-numeric:tabular-nums;}

/* DJ-profielpagina (v3) */
.dj-profile{display:flex; gap:24px; align-items:flex-start; background:var(--tir-card); border:1px solid var(--tir-line); border-radius:var(--tir-radius); box-shadow:var(--tir-shadow); padding:20px 24px; margin-bottom:22px;}
.dj-photo{flex:0 0 250px; max-width:250px;}
.dj-photo img{width:100%; border-radius:12px; display:block;}
.dj-info{flex:1 1 auto; min-width:0;}
.dj-row{padding:9px 0; border-bottom:1px dashed var(--tir-line); overflow-wrap:break-word;}
.dj-row:last-child{border-bottom:0;}
.dj-label{font-weight:800; color:var(--tir-blue); margin-right:8px;}
@media (max-width:680px){ .dj-profile{flex-direction:column;} .dj-photo{flex-basis:auto; max-width:100%; align-self:center;} }

/* Onlangs gedraaid (uitzending gemist) */
.v3-btn.v3-btn-sm{padding:10px 18px; font-size:1.05rem;}
.gemist-search{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px;}
.gemist-search .form-control{width:auto; display:inline-block; min-width:130px;}
#responseContent h2{font-size:1.2rem; margin:16px 0 8px; color:var(--tir-blue-2);}
.gemist_table{width:100%; border-collapse:collapse; margin:6px 0 18px;}
.gemist_table td{padding:8px 10px; border-bottom:1px solid var(--tir-line); vertical-align:middle;}
.gemist_table tr:last-child td{border-bottom:0;}
.played_time{text-align:center; width:70px; white-space:nowrap; border-right:3px solid var(--tir-blue); color:var(--tir-muted); font-weight:700; font-variant-numeric:tabular-nums;}
.played_title{text-align:left;}

.v3-loginlinks{margin-top:18px; padding-top:14px; border-top:1px solid var(--tir-line); text-align:center; font-size:1.2rem;}
.v3-loginlinks a{font-weight:700; color:var(--tir-blue);}

/* ============================================================================
 * Feestlogica (kerst, nieuwjaar, Pasen, carnaval, verjaardagen, jubilea)
 * De vlaggen komen uit /core/seasonal.php; de homepage zet één feestkaart
 * boven de grid en een body-class (season-<feest>) voor het balk-accent.
 * ==========================================================================*/

/* --- de feestkaart --- */
.season-card{position:relative; text-align:center; padding:26px 20px; background-size:cover; background-position:center;}
.season-card .season-inner{position:relative; z-index:1; font-size:1.3rem; line-height:1.5; color:var(--season-txt,var(--tir-ink));}
.season-card.has-bg{border:0;}
.season-card.has-bg::before{content:""; position:absolute; inset:0; background:var(--season-ovl,rgba(255,255,255,.35));}
.season-card canvas{pointer-events:none;} /* het vuurwerk-canvas mag geen links blokkeren */
.season-naam{font-weight:800; font-size:1.6rem; white-space:nowrap;}
.season-img{max-height:200px; width:auto; margin-top:10px;}
.season-img-klein{max-height:120px;}
.season-imgs{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;}
.season-bdays{margin-top:14px; font-size:1.1rem;}
.season-bday-naam{display:inline-block; font-weight:800; font-size:1.8rem; color:#ffd97a; text-shadow:#fff 0 -1px 4px, #ff0 0 -2px 10px; margin:4px 0;}

/* goud-glinsterende tekst voor het trouwjubileum (CSS in plaats van v2's
 * canvas-sparkles plugin) */
.season-goud-txt{display:inline-block; font-weight:800; font-size:1.35rem; background:linear-gradient(90deg,#a8720a,#e0a32e,#fff0c0,#e0a32e,#a8720a); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;}
@media (prefers-reduced-motion: no-preference){
  .season-goud-txt{animation:season-shimmer 3.5s linear infinite;}
}
@keyframes season-shimmer{ to{ background-position:-200% 0; } }

/* --- accentkleur op de bovenbalk, per feest --- */
body.season-kerst_dag #v3-top, body.season-kerst_tijd #v3-top{background:linear-gradient(180deg,#1e5a34,#123b21);}
body.season-nieuwjaar_dag #v3-top, body.season-nieuwjaar_tijd #v3-top{background:linear-gradient(180deg,#1a1a2e,#0d0d1c);}
body.season-paas_tijd #v3-top{background:linear-gradient(180deg,#3e7c4f,#2a5737);}
body.season-carnaval #v3-top, body.season-elfde_elfde #v3-top{background:linear-gradient(180deg,#5b2a86,#3d1c5c);}
body.season-verjaardag #v3-top, body.season-bday_tiny_sjors #v3-top,
body.season-gouden_feest #v3-top, body.season-jubi_aanloop #v3-top{background:linear-gradient(180deg,#8a6410,#5f450b);}

/* --- sneeuw (alleen op kerstavond/eerste/tweede kerstdag) ---
 * Puur CSS: drie lagen stipjes die met verschillende snelheden vallen. Geen
 * jquery.snow meer (v2 gebruikt die nog); geen JS, GPU-vriendelijk, en uit
 * voor wie liever geen beweging heeft. */
.season-snow{position:fixed; left:0; top:0; right:0; bottom:0; pointer-events:none; z-index:60; overflow:hidden; display:none;}
.season-snow::before, .season-snow::after{
  content:""; position:absolute; left:0; top:-100vh; width:100%; height:200vh;
  background-image:
    radial-gradient(3px 3px at 20% 15%, #fff 50%, transparent 55%),
    radial-gradient(2px 2px at 45% 40%, #fff 50%, transparent 55%),
    radial-gradient(4px 4px at 70% 10%, #fff 50%, transparent 55%),
    radial-gradient(2px 2px at 85% 55%, #fff 50%, transparent 55%),
    radial-gradient(3px 3px at 10% 70%, #fff 50%, transparent 55%),
    radial-gradient(2px 2px at 60% 85%, #fff 50%, transparent 55%);
  background-size:340px 340px;
  opacity:.8;
}
.season-snow::after{
  background-size:240px 240px;
  opacity:.5;
}
@media (prefers-reduced-motion: no-preference){
  .season-snow{display:block;}
  .season-snow::before{animation:season-snowval 14s linear infinite;}
  .season-snow::after{animation:season-snowval 9s linear infinite;}
}
@keyframes season-snowval{ to{ transform:translateY(100vh); } }