/* ==========================================================================
   Kerkrooster — live meekijken en terugkijken
   Hoort bij de plugin "Kerkrooster" (shortcodes [kerkrooster] en
   [kerkrooster_komend]) en bij de statische pagina live-meekijken.html.

   Eén bronbestand: website/assets/css/kerkrooster.css. De plugin verscheept
   een identieke kopie in assets/kerkrooster.css. Wijzig altijd dit bestand.

   Alle tokens hebben een fallback, zodat het blok er ook goed uitziet als de
   plugin op een thema draait waar style.css van de Andreaskerk niet geladen is.
   Layout is uitsluitend flexbox — geen CSS-grid, conform de bouwafspraken.
   ========================================================================== */

.kr{
  --kr-paars:      var(--paars, #4E1668);
  --kr-paars-diep: var(--paars-diep, #33093F);
  --kr-paars-licht:var(--paars-licht, #7B36A3);
  --kr-oranje:     var(--oranje, #F5821F);
  --kr-rood:       var(--rood, #E63329);
  --kr-rood-tekst: var(--rood-tekst, #C4241B);
  --kr-groen:      var(--groen, #7DC242);
  --kr-wit:        var(--wit, #FFFFFF);
  --kr-zand:       var(--zand, #F9F1E8);
  --kr-lijn:       var(--lijn, #EFE4D8);
  --kr-kop:        var(--kop, #2B1B4B);
  --kr-tekst:      var(--tekst, #5A5570);
  --kr-radius:     var(--radius, 10px);
  --kr-radius-s:   var(--radius-s, 7px);
  --kr-schaduw:    var(--schaduw, 0 10px 30px rgba(43,27,75,.07));
  --kr-font:       var(--font, 'Poppins', 'Segoe UI', system-ui, sans-serif);

  display:flex;flex-direction:column;gap:26px;
  font-family:var(--kr-font);color:var(--kr-tekst);
}
.kr *,.kr *::before,.kr *::after{box-sizing:border-box}
/* Het script stuurt zichtbaarheid met het hidden-attribuut. Een eigen
   display-regel wint van de standaard van de browser, dus dit moet er staan —
   ook als de plugin op een thema draait zonder eigen reset. */
.kr [hidden]{display:none !important}

/* ---------- Meldingen ---------- */
.kr-melding{
  display:flex;flex-direction:row;align-items:flex-start;gap:12px;
  padding:16px 20px;border-radius:var(--kr-radius-s);
  background:#FFF6E8;border:1px solid #F0D3A8;color:#6B4415;font-size:15px;
}
.kr-melding--fout{background:#FDECEA;border-color:#F3B9B4;color:#8C1D16}
.kr-melding p{margin:0}

/* ---------- Nu live ---------- */
.kr-nu{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px;
  padding:26px 30px;border-radius:var(--kr-radius);
  background:linear-gradient(120deg,var(--kr-paars-diep),var(--kr-paars) 55%,var(--kr-paars-licht));
  color:#fff;
}
.kr-nu-tekst{display:flex;flex-direction:column;gap:4px;flex:1 1 300px;min-width:0}
.kr-nu-label{
  display:flex;flex-direction:row;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#FBD433;
}
.kr-nu-titel{margin:0;font-size:22px;font-weight:700;color:#fff;line-height:1.25}
.kr-nu-sub{margin:0;font-size:15px;color:rgba(255,255,255,.86)}
.kr-nu-acties{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;flex:0 1 auto}

/* ---------- Tabs ---------- */
.kr-tabs{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;
  padding:6px;border-radius:var(--kr-radius);background:var(--kr-zand);
  align-self:flex-start;max-width:100%;
}
.kr-tab{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;min-height:48px;border:0;border-radius:var(--kr-radius-s);
  background:transparent;color:var(--kr-kop);
  font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.kr-tab:hover{background:rgba(78,22,104,.08)}
.kr-tab[aria-selected="true"]{background:var(--kr-paars);color:#fff;box-shadow:0 6px 16px rgba(78,22,104,.2)}
.kr-tab[aria-selected="true"]:hover{background:var(--kr-paars-licht);color:#fff}
.kr-tab-aantal{font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}

/* ---------- Filters ---------- */
/* Op een smal scherm zijn de filters ruim 600px hoog; daar staat de bezoeker
   niet op te wachten voordat hij de eerste dienst ziet. Het script klapt ze
   daar dicht en toont deze knop. Zonder JavaScript blijft de knop verborgen
   en staan de filters gewoon open. */
.kr-filterknop{
  display:none;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:13px 20px;min-height:52px;
  border:1.5px solid var(--kr-lijn);border-radius:var(--kr-radius);
  background:var(--kr-wit);color:var(--kr-kop);box-shadow:var(--kr-schaduw);
  font-family:inherit;font-size:16px;font-weight:600;text-align:left;cursor:pointer;
}
.kr-filterknop:hover{border-color:var(--kr-paars);color:var(--kr-paars)}
.kr-filterknop-actief{font-weight:500;color:var(--kr-paars)}
.kr-filterknop .kr-teken{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  background:var(--kr-zand);color:var(--kr-kop);transition:transform .18s ease;
}
.kr-filterknop .kr-teken .kr-ico{width:13px;height:13px}
.kr-filterknop[aria-expanded="true"] .kr-teken{background:var(--kr-oranje);color:#3A1C00;transform:rotate(135deg)}

.kr-filters{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:16px;
  padding:22px 24px;border-radius:var(--kr-radius);
  background:var(--kr-wit);box-shadow:var(--kr-schaduw);
}
.kr-veld{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.kr-veld--kort{flex:0 1 150px}
.kr-veld label{
  font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--kr-kop);
}
.kr-veld input,.kr-veld select{
  width:100%;padding:11px 13px;min-height:46px;
  border:1.5px solid var(--kr-lijn);border-radius:var(--kr-radius-s);
  background:var(--kr-wit);font-family:inherit;font-size:16px;color:var(--kr-kop);
}
.kr-veld input:focus,.kr-veld select:focus{outline:3px solid var(--kr-paars);outline-offset:1px;border-color:var(--kr-paars)}
.kr-vink{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  flex:0 1 auto;min-height:46px;padding:0 2px;
  font-size:15px;font-weight:500;color:var(--kr-kop);cursor:pointer;
}
.kr-vink input{width:20px;height:20px;accent-color:var(--kr-paars);flex:0 0 auto;margin:0}
.kr-wis{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;min-height:46px;
  border:1.5px solid var(--kr-lijn);border-radius:var(--kr-radius-s);
  background:var(--kr-wit);color:var(--kr-paars);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.kr-wis:hover{background:var(--kr-paars);border-color:var(--kr-paars);color:#fff}

.kr-teller{margin:0;font-size:15px;color:var(--kr-tekst)}
.kr-teller strong{color:var(--kr-kop)}

/* ---------- Lijst ---------- */
.kr-lijst{display:flex;flex-direction:column;gap:20px}
.kr-dag{
  display:flex;flex-direction:column;
  border-radius:var(--kr-radius);background:var(--kr-wit);
  box-shadow:var(--kr-schaduw);overflow:hidden;
}
.kr-dagkop{
  margin:0;padding:15px 26px;
  background:var(--kr-zand);border-bottom:1px solid var(--kr-lijn);
  font-size:17px;font-weight:700;color:var(--kr-kop);
}
.kr-dagkop .kr-dagkop-jaar{font-weight:500;color:var(--kr-tekst)}
.kr-diensten{display:flex;flex-direction:column}

.kr-dienst{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:22px;
  padding:22px 26px;border-bottom:1px solid var(--kr-lijn);
}
.kr-dienst:last-child{border-bottom:0}
.kr-dienst:target{background:#FFFBF0;box-shadow:inset 4px 0 0 var(--kr-oranje)}

.kr-wanneer{display:flex;flex-direction:column;align-items:flex-start;gap:7px;flex:0 0 86px}
.kr-tijd{font-size:18px;font-weight:700;color:var(--kr-paars);font-variant-numeric:tabular-nums;line-height:1.2}

.kr-badge{
  display:inline-flex;flex-direction:row;align-items:center;gap:6px;
  padding:3px 9px;border-radius:99px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.kr-badge--live{background:var(--kr-rood-tekst);color:#fff}
.kr-badge--straks{background:var(--kr-zand);color:var(--kr-kop)}
.kr-badge--opname{background:#EAF5DF;color:#37610F}
.kr-stip{width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto}
.kr-badge--live .kr-stip{animation:kr-knipper 1.6s ease-in-out infinite}
@keyframes kr-knipper{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .kr-badge--live .kr-stip{animation:none}
}

.kr-info{display:flex;flex-direction:column;gap:3px;flex:1 1 240px;min-width:0}
.kr-titel{margin:0;font-size:18px;font-weight:700;color:var(--kr-kop);line-height:1.35}
.kr-wie{margin:0;font-size:15px;color:var(--kr-tekst)}
.kr-wie .kr-plaats{color:var(--kr-tekst);opacity:.8}

.kr-acties{display:flex;flex-direction:column;align-items:stretch;gap:9px;flex:0 1 260px}
.kr-knoppen{display:flex;flex-direction:row;flex-wrap:wrap;gap:9px}
.kr-knoppen > *{flex:1 1 auto}
.kr-liturgie{margin:0;font-size:14px}
.kr-liturgie a{color:var(--kr-paars);font-weight:600}
.kr-liturgie a:hover{color:var(--kr-rood-tekst)}
.kr-geen-actie{margin:0;font-size:14px;color:var(--kr-tekst);opacity:.8}

/* Knoppen binnen het rooster: eigen definitie met een fallback op .btn van
   het thema, zodat de plugin ook los van deze site bruikbaar is. */
.kr .knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;min-height:44px;
  border:2px solid transparent;border-radius:var(--kr-radius);
  font-family:inherit;font-size:15px;font-weight:600;line-height:1.15;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.kr .knop:hover{transform:translateY(-2px);text-decoration:none}
.kr .knop--primair{background:var(--kr-paars);color:#fff}
.kr .knop--primair:hover{background:var(--kr-paars-licht);color:#fff}
.kr .knop--live{background:var(--kr-rood-tekst);color:#fff}
.kr .knop--live:hover{background:var(--kr-rood);color:#fff}
.kr .knop--outline{background:transparent;color:var(--kr-paars);border-color:var(--kr-paars)}
.kr .knop--outline:hover{background:var(--kr-paars);color:#fff}
/* Varianten voor op het paarse "Nu live"-blok */
.kr .knop--licht{background:var(--kr-wit);color:var(--kr-paars)}
.kr .knop--licht:hover{background:#FBD433;color:var(--kr-paars-diep)}
.kr .knop--outline-licht{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.kr .knop--outline-licht:hover{background:var(--kr-wit);color:var(--kr-paars)}
.kr .knop .kr-ico{width:1.05em;height:1.05em;flex:0 0 auto}

/* ---------- Lege staat en meer laden ---------- */
.kr-leeg{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:48px 24px;text-align:center;
  border-radius:var(--kr-radius);background:var(--kr-wit);box-shadow:var(--kr-schaduw);
}
.kr-leeg h3{margin:0;font-size:18px;color:var(--kr-kop)}
.kr-leeg p{margin:0;max-width:46ch}
.kr-meer{display:flex;flex-direction:row;justify-content:center}

/* ---------- Speler ---------- */
.kr-speler{
  width:min(960px,94vw);padding:0;border:0;border-radius:var(--kr-radius);
  background:var(--kr-wit);color:var(--kr-tekst);font-family:var(--kr-font);
  box-shadow:0 24px 70px rgba(43,27,75,.45);overflow:hidden;
}
.kr-speler::backdrop{background:rgba(43,27,75,.78)}
.kr-speler[open]{display:flex;flex-direction:column}
.kr-speler-kop{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;background:var(--kr-paars);color:#fff;
}
.kr-speler-titel{margin:0;font-size:17px;font-weight:700;color:#fff;line-height:1.3}
.kr-speler-sub{margin:2px 0 0;font-size:14px;color:rgba(255,255,255,.82)}
.kr-sluit{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;transition:background-color .18s ease;
}
.kr-sluit:hover{background:rgba(255,255,255,.3)}
.kr-sluit .kr-ico{width:18px;height:18px}
.kr-speler-body{display:flex;flex-direction:column;background:#000}
.kr-video{position:relative;width:100%;padding-top:56.25%;background:#000}
.kr-video iframe,.kr-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.kr-audio{
  display:flex;flex-direction:column;align-items:stretch;gap:14px;
  padding:26px 24px;background:var(--kr-wit);
}
.kr-audio audio{width:100%}
.kr-audio-hulp{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--kr-lijn);
}
.kr-audio-hulp p{margin:0;font-size:14px}

/* ---------- Paneel "Deze zondag" ([kerkrooster_komend]) ---------- */
.kr-komend{display:flex;flex-direction:column;gap:0}
.kr-komend-regel{
  display:flex;flex-direction:row;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--kr-zand);
}
.kr-komend-regel:last-of-type{border-bottom:0}
.kr-komend-tijd{font-weight:700;color:var(--kr-paars);font-variant-numeric:tabular-nums;flex:0 0 76px}
.kr-komend-wie{font-size:15px;color:var(--kr-tekst)}

/* ---------- Smal scherm ---------- */
@media (max-width:760px){
  .kr{gap:18px}
  .kr-nu{padding:22px 20px;gap:18px}
  .kr-nu-acties{flex:1 1 100%}
  .kr-nu-acties > *{flex:1 1 auto;justify-content:center}
  .kr-filterknop:not([hidden]){display:flex}
  .kr-filters{padding:18px 18px;gap:14px}
  .kr-veld,.kr-veld--kort{flex:1 1 100%}
  .kr-wis{flex:1 1 100%;justify-content:center}
  .kr-tabs{align-self:stretch}
  /* flex-basis 0 zodat beide tabs naast elkaar passen in plaats van te wikkelen,
     en nowrap zodat het label zelf ook niet over twee regels valt */
  .kr-tab{flex:1 1 0;min-width:0;padding:12px 6px;font-size:14px;white-space:nowrap}
  .kr-tab-aantal{margin-left:2px}
}
/* Onder ~400px past "Komende diensten 15" niet meer op één regel. Het aantal
   is de eerste die mag sneuvelen; het staat toch ook in de teller eronder. */
@media (max-width:400px){
  .kr-tab-aantal{display:none}

  /* In een kolom is flex-basis de HOOGTE. De basiswaarden hierboven zijn voor
     de rij-indeling op breed scherm; hier moet alles zijn natuurlijke hoogte
     krijgen, anders houdt elk dienstblok honderden lege pixels over. */
  .kr-dienst{flex-direction:column;gap:12px;padding:20px}
  .kr-wanneer,.kr-info,.kr-acties{flex:0 0 auto;width:100%}
  .kr-wanneer{flex-direction:row;align-items:center;gap:12px}
  .kr-knoppen > *{flex:1 1 100%;justify-content:center}
  .kr-dagkop{padding:14px 20px}
  .kr-audio-hulp{flex-direction:column;align-items:stretch}
}


/* ----------------------------------------------------------------------
   Twee regels die in het statische ontwerp uit style.css kwamen. In
   WordPress is die er niet, dus neemt de plugin ze zelf mee.
   ---------------------------------------------------------------------- */
.kr .visueel-verborgen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.kr .knop,.kr .knop:hover,.kr .kr-dag a,.kr a.knop{text-decoration:none}


/* De sluitknop erfde de knopopmaak van het thema (padding 20/40), waardoor het
   kruisje werd platgedrukt tot nul breed. Eigen maat, los van het thema. */
.kr .kr-sluit{padding:0 !important;width:44px;height:44px;min-width:0;flex:0 0 44px}
.kr .kr-sluit .kr-ico{width:18px;height:18px;flex:0 0 18px}


/* De filterknop moet zijn eigen kleur ook in de hoverstand opnieuw zetten.
   Astra schrijft zijn knopkleuren in een inline <style> die na dit bestand
   komt; bij gelijke specificiteit wint die dan. Vandaar .kr ervoor.
   (De andere knoppen hier hernoemen hun achtergrond al bij hover.) */
.kr .kr-filterknop{border-width:1.5px;background-color:var(--kr-wit)}
.kr .kr-filterknop:hover,
.kr .kr-filterknop:focus,
.kr .kr-filterknop:focus-visible,
.kr .kr-filterknop[aria-expanded="true"]{background-color:var(--kr-wit)}
.kr .kr-filterknop:hover,
.kr .kr-filterknop:focus-visible{border-color:var(--kr-paars);color:var(--kr-paars)}