/* patch-2026-10-20-agenda (taak 259): de knop Zet in je agenda en het abonneerblok in een artikel. Gaat inline mee in de
   head, alleen op een pagina met een agendablok (mu-plugin kd-agenda.php). Vorm volgens 08-vormstelsel.md, in de lijn van
   de toolkaart: licht vlak (#f6f8fa), witte tegel, geen scheidingslijnen, Mulish uit het thema, blauw is klikken. Elk
   tikdoel minstens 44 px; de keuzelijst staat in de tekst (niet zwevend), dus niets steekt uit op 320 px. */
.kd-agenda { box-sizing: border-box; max-width: var(--kd-kolom-tekst, 34em); margin: 28px 0 32px; padding: 20px 22px; background: #f6f8fa; border-radius: var(--kd-radius, 4px); font-family: var(--kd-mulish, inherit); text-align: left; }
.kd-agenda *, .kd-agenda *::before, .kd-agenda *::after { box-sizing: border-box; }
.kd-agenda [hidden] { display: none !important; }
.kd-agenda-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 16px; align-items: start; }
.kd-agenda-item + .kd-agenda-item { margin-top: 22px; }

/* De tegel: dag en maand van de datum, of het icoon bij een abonnement. Alleen beeld; de datum staat ook in de tekst. */
.kd-agenda-tegel { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; background: #fff; border-radius: var(--kd-radius, 4px); color: var(--kd-inkt, #16202b); line-height: 1; }
.kd-agenda-tegel-dag { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.kd-agenda-tegel-maand { margin-top: 3px; font-size: var(--kd-fs-label, 11.5px); font-weight: 800; letter-spacing: var(--kd-ls-label, 0.1em); text-transform: uppercase; color: var(--kd-zacht, #55606d); }
.kd-agenda-tegel-icoon .kd-agenda-svg { width: 26px; height: 26px; }

/* Tekst. Sterker dan .generic-content p (marge 22 px, leesmaat), zodat het blok overal gelijk is. */
.kd-agenda p.kd-agenda-wanneer, .kd-agenda p.kd-agenda-titel, .kd-agenda p.kd-agenda-zin, .kd-agenda p.kd-agenda-noot, .kd-agenda p.kd-agenda-melding, .kd-agenda p.kd-agenda-regio, .kd-agenda p.kd-agenda-kopie { max-width: none; margin: 0; font-family: inherit; }
.kd-agenda p.kd-agenda-wanneer { font-size: var(--kd-fs-meta, 13.5px); font-weight: 700; line-height: 1.4; color: var(--kd-zacht, #55606d); }
.kd-agenda p.kd-agenda-titel { margin-top: 2px; font-size: 17px; font-weight: 800; line-height: 1.35; letter-spacing: var(--kd-ls-klein, -0.01em); color: var(--kd-inkt, #16202b); overflow-wrap: anywhere; }
.kd-agenda p.kd-agenda-zin { margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--kd-lead, #414b56); }
.kd-agenda p.kd-agenda-noot { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--kd-zacht, #55606d); }
.kd-agenda-actie { margin-top: 12px; }

/* De knop: zonder script een link, met script een <button>; beide dezelfde maat. */
.kd-agenda .kd-agenda-knop, .generic-content .kd-agenda a.kd-agenda-knop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 18px; font: inherit; font-size: 15px; font-weight: 800; line-height: 1.25; text-align: left; color: var(--kd-blauw, #1263ae); background: #fff; border: 2px solid var(--kd-blauw, #1263ae); border-radius: var(--kd-radius, 4px); text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; }
.kd-agenda .kd-agenda-knop .kd-agenda-svg { flex: 0 0 auto; width: 20px; height: 20px; }
.kd-agenda button.kd-agenda-knop::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 2px 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.kd-agenda button.kd-agenda-knop[aria-expanded="true"] { color: #fff; background: var(--kd-blauw, #1263ae); }
.kd-agenda button.kd-agenda-knop[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
.kd-agenda .kd-agenda-knop:focus-visible, .kd-agenda-keuze a:focus-visible, .kd-agenda-kopieer:focus-visible, .kd-agenda select:focus-visible, .kd-agenda input:focus-visible { outline: 2px solid var(--kd-blauw, #1263ae); outline-offset: 2px; }
@media (hover: hover) {
  .kd-agenda .kd-agenda-knop:hover, .generic-content .kd-agenda a.kd-agenda-knop:hover { color: #fff; background: var(--kd-blauw, #1263ae); text-decoration: none; }
  .kd-agenda button.kd-agenda-knop[aria-expanded="true"]:hover { background: #0e4f8a; border-color: #0e4f8a; }
}

/* De keuzelijst: wit vlak onder de knop, in de tekst. */
.kd-agenda .kd-agenda-keuze, .generic-content .kd-agenda ul.kd-agenda-keuze { max-width: 23em; margin: 8px 0 0; padding: 6px 0; list-style: none; background: #fff; border-radius: var(--kd-radius, 4px); }
.kd-agenda .kd-agenda-keuze ul, .generic-content .kd-agenda .kd-agenda-keuze ul { max-width: none; margin: 0; padding: 0; list-style: none; }
.kd-agenda .kd-agenda-keuze li, .generic-content .kd-agenda .kd-agenda-keuze li { max-width: none; margin: 0; padding: 0; font-size: 16px; line-height: 1.3; }
.generic-content .kd-agenda .kd-agenda-keuze li::before, .kd-agenda .kd-agenda-keuze li::before { content: none; display: none; }
.kd-agenda .kd-agenda-keuze li::marker { content: ""; }
.kd-agenda .kd-agenda-keuze a, .generic-content .kd-agenda .kd-agenda-keuze a { display: flex; align-items: center; min-height: 44px; padding: 10px 16px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--kd-blauw, #1263ae); text-decoration: none; }
@media (hover: hover) {
  .kd-agenda .kd-agenda-keuze a:hover, .generic-content .kd-agenda .kd-agenda-keuze a:hover { color: var(--kd-blauw, #1263ae); background: var(--kd-vlak-zacht, #f2f5f9); text-decoration: underline; text-underline-offset: 3px; }
}

/* Abonneren: regio, en het adres om te kopiëren. */
.kd-agenda .kd-agenda-keuze-abo { padding-bottom: 14px; }
.kd-agenda p.kd-agenda-regio { padding: 8px 16px 6px; }
.kd-agenda p.kd-agenda-regio label, .kd-agenda p.kd-agenda-kopie label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--kd-inkt, #16202b); }
.kd-agenda p.kd-agenda-regio select { display: block; width: 100%; max-width: 14em; min-height: 44px; margin: 0; padding: 8px 34px 8px 12px; font: inherit; font-size: 16px; color: var(--kd-inkt, #16202b); background-color: var(--kd-vlak-zacht, #f2f5f9); background-image: linear-gradient(45deg, transparent 50%, #16202b 50%), linear-gradient(135deg, #16202b 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 12px) 19px; background-size: 6px 6px; background-repeat: no-repeat; border: 0; border-bottom: 2px solid var(--kd-groen-tekst, #277d3e); border-radius: 4px 4px 0 0; -webkit-appearance: none; appearance: none; }
.kd-agenda p.kd-agenda-kopie { padding: 8px 16px 0; }
.kd-agenda p.kd-agenda-kopie label { font-weight: 400; color: var(--kd-zacht, #55606d); }
.kd-agenda-kopie-rij { display: flex; gap: 8px; }
.kd-agenda .kd-agenda-kopie-rij input { flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 8px 10px; font: inherit; font-size: 16px; color: var(--kd-inkt, #16202b); background: var(--kd-vlak-zacht, #f2f5f9); border: 0; border-bottom: 2px solid var(--kd-groen-tekst, #277d3e); border-radius: 4px 4px 0 0; }
.kd-agenda .kd-agenda-kopieer { flex: 0 0 auto; min-height: 44px; min-width: 44px; margin: 0; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 800; color: var(--kd-blauw, #1263ae); background: #fff; border: 2px solid var(--kd-blauw, #1263ae); border-radius: var(--kd-radius, 4px); cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .kd-agenda .kd-agenda-kopieer:hover { color: #fff; background: var(--kd-blauw, #1263ae); } }

/* Wat er gebeurde na een keuze; leeg neemt het geen ruimte. */
.kd-agenda p.kd-agenda-melding { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--kd-groen-tekst, #277d3e); }
.kd-agenda p.kd-agenda-melding:empty { margin: 0; }

/* Alleen voor een schermlezer (geen display: none, regel G2). */
.kd-agenda-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 599px) {
  .kd-agenda { padding: 16px; }
  .kd-agenda-item { grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; }
  .kd-agenda-tegel { width: 44px; height: 44px; }
  .kd-agenda-tegel-dag { font-size: 18px; }
  .kd-agenda-tegel-maand { margin-top: 2px; }
}
/* Smalle telefoon: de tegel herhaalt alleen de datum; de tekst en de knop krijgen de hele breedte. */
@media (max-width: 379px) {
  .kd-agenda-item { grid-template-columns: minmax(0, 1fr); }
  .kd-agenda-tegel { display: none; }
  .kd-agenda .kd-agenda-knop, .generic-content .kd-agenda a.kd-agenda-knop { width: 100%; justify-content: center; }
  .kd-agenda .kd-agenda-keuze, .generic-content .kd-agenda ul.kd-agenda-keuze { max-width: none; }
}