/* Formulieren: inschrijven (deel 1), bedankt (deel 2), contact en werken-bij.
   Aanvulling op site.css (dat bestand niet wijzigen). Geladen via `styles:` in de front matter. */

/* Honeypot tegen spam: onzichtbaar voor bezoekers en schermlezers, niet bereikbaar met Tab */
.hp-veld{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Keuzekaart met een echte radioknop erin: <label class="pick-card"><input class="pick-inp" type="radio" …>
   Zo gaat de keuze als gewoon formulierveld mee en werken de pijltjestoetsen vanzelf. */
.pick-card .pick-inp{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pick-card:has(.pick-inp:focus-visible){outline:3px solid var(--midnight);outline-offset:3px}
.pick-card:has(.pick-inp:checked){background:var(--midnight);border-color:var(--midnight);color:#fff}
.pick-card:has(.pick-inp:checked) .ring::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
/* .field label (site.css) zet padding:0 en vet; een keuzekaart binnen .field houdt zijn eigen opmaak */
.field label.pick-card{padding:22px;font-weight:inherit}

/* Foutstatus van een groep keuzekaarten en van een los vinkje */
.pick[aria-invalid="true"] .pick-card:not(.on){border-color:var(--red)}
.choice input[type="checkbox"][aria-invalid="true"]{outline:2px solid var(--red);outline-offset:2px}

/* Foutensamenvatting: links naar de velden */
.fout-lijst{list-style:none;display:flex;flex-direction:column;gap:6px}
.fout-lijst a{font-size:16px;font-weight:600;text-decoration-color:var(--red)}

/* Een alert die focus krijgt (tabindex="-1") hoeft geen focusrand te tonen */
.alert[tabindex="-1"]:focus{outline:none}
.alert[tabindex="-1"]:focus-visible{outline:3px solid var(--midnight);outline-offset:3px}
.alert-ok[tabindex="-1"]:focus-visible{outline-color:var(--midnight)}

/* Datumveld (contact: geboortedatum). iOS Safari zet de datum anders in het midden en laat het veld
   soms breder worden dan zijn kolom. */
.inp[type="date"]{min-width:0;display:block;line-height:normal}
.inp[type="date"]::-webkit-date-and-time-value{text-align:left}

/* Knop in de verzendtoestand */
.btn[aria-busy="true"]{cursor:progress}

@media (prefers-reduced-motion: reduce){
  .err-msg{animation:none}
}