/* Het contactformulier. Leunt op de tokens van het thema. */

.wcag-contact { margin-block: var(--wp--preset--spacing--40, 2rem); max-inline-size: 38rem; }

/* ---- foutensamenvatting ---- */
.wcag-contact__fouten {
  background: var(--wcag-rood-100, #FCE8EC);
  border: 2px solid var(--wcag-rood-600, #C2183C);
  border-radius: 12px; padding: 20px 24px; margin-block-end: 28px;
}
.wcag-contact__fouten h2 { margin: 0 0 10px; font-size: 1.15rem; color: var(--wcag-rood-800, #840F24); }
.wcag-contact__fouten ul { margin: 0; padding-inline-start: 20px; }
.wcag-contact__fouten a { color: var(--wcag-rood-800, #840F24); }
/* De samenvatting krijgt de focus na een mislukte poging. Zonder zichtbare
   ring weet een ziende toetsenbordgebruiker niet waar hij beland is. */
.wcag-contact__fouten:focus-visible,
.wcag-contact__gelukt:focus-visible {
  outline: 3px solid var(--wp--preset--color--groen-800); outline-offset: 3px;
}

/* ---- bevestiging ---- */
.wcag-contact__gelukt {
  background: var(--wp--preset--color--groen-100);
  border: 2px solid var(--wp--preset--color--groen-700);
  border-radius: 12px; padding: 26px 28px;
}
.wcag-contact__gelukt h2 { margin-block-start: 0; color: var(--wp--preset--color--groen-800); }
.wcag-contact__gelukt p:last-child { margin-block-end: 0; }

/* ---- velden ---- */
.wcag-contact__veld { margin-block-end: 22px; }
.wcag-contact__veld label {
  display: block; font-weight: 600; margin-block-end: 6px;
  font-family: var(--wp--preset--font-family--lexend);
}
.wcag-contact__uitleg,
.wcag-contact__fout { margin: 0 0 8px; font-size: 0.9rem; }
.wcag-contact__uitleg { color: var(--wp--preset--color--gedempt); }
.wcag-contact__fout { color: var(--wcag-rood-800, #840F24); font-weight: 600; }

.wcag-contact__veld input,
.wcag-contact__veld textarea {
  inline-size: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--wp--preset--color--rand);
  background: var(--wp--preset--color--wit); color: var(--wp--preset--color--inkt);
  font: inherit; font-size: 1rem;
}
.wcag-contact__veld textarea { resize: vertical; min-block-size: 8rem; }

/* De fout is niet alleen rood: de rand wordt ook dikker. Kleur alleen zou
   1.4.1 breken voor wie rood niet ziet. */
.wcag-contact__veld--fout input,
.wcag-contact__veld--fout textarea {
  border-width: 2px; border-color: var(--wcag-rood-600, #C2183C);
}

.wcag-contact__privacy { font-size: 0.9rem; color: var(--wp--preset--color--gedempt); }

.wcag-contact__form button {
  padding: 14px 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--wp--preset--color--groen-700); color: var(--wp--preset--color--wit);
  font: inherit; font-weight: 600; font-size: 1rem;
}
.wcag-contact__form button:hover { background: var(--wp--preset--color--groen-800); }

/* ---- de valstrik ----

   Niet display:none. Sommige scripts slaan juist velden over die zo verstopt
   zijn, en dan vangt de val niets. Zo staat hij buiten beeld maar bestaat hij
   voor het script wel. aria-hidden en tabindex="-1" in de opmaak houden
   schermlezers en het toetsenbord erbuiten. */
.wcag-contact__val {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (forced-colors: active) {
  .wcag-contact__fouten, .wcag-contact__gelukt { border: 2px solid CanvasText; }
  .wcag-contact__veld--fout input,
  .wcag-contact__veld--fout textarea { border: 2px dashed CanvasText; }
}