/* Formulieropmaak voor het contactformulier. */

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-3);
  margin: 0;
}

/* Elke rij beslaat standaard de volle breedte; .form__row--half (voor- en
   achternaam) deelt een rij met zijn buur. */
.form__row,
.form__message {
  grid-column: 1 / -1;
  margin-bottom: var(--space-3);
}

.form__row--half {
  grid-column: auto;
}

.form__row label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
}

.form__row input[type='text'],
.form__row input[type='email'],
.form__row input[type='tel'],
.form__row textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form__row textarea {
  resize: vertical;
}

.form__row input::placeholder,
.form__row textarea::placeholder {
  color: #767a82;
}

.form__row input:hover,
.form__row textarea:hover {
  border-color: var(--color-text-muted);
}

.form__row input:focus,
.form__row textarea:focus {
  border-color: var(--color-navy);
  outline: 3px solid var(--color-gold);
  outline-offset: 0;
}

.form__row--consent {
  display: flex;
}

.form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-weight: 400;
  cursor: pointer;
}

.form__row .form__checkbox {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text);
}

.form__checkbox input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--color-navy);
}

.form__row--submit {
  margin-bottom: 0;
}

.form__message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.form__message--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.form__message--error {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
}

/* Honeypot: onzichtbaar voor mensen, maar nog in de DOM voor bots die elk
   veld invullen. Bewust niet display:none, want simpele bots slaan
   verborgen velden over. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Validatiestatus die javascript/modules/forms.js toevoegt. */
.form__row.is-invalid input,
.form__row.is-invalid textarea {
  border-color: var(--color-error-text);
}

/* De rode rand blijft ook zichtbaar terwijl het ongeldige veld focus heeft. */
.form__row.is-invalid input:focus,
.form__row.is-invalid textarea:focus {
  border-color: var(--color-error-text);
}

.form__field-error {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-error-text);
}

/* Google reCAPTCHA v3 zet zelf een zwevende badge (rechtsonder, boven de
   footer). Google staat verbergen toe zolang de verplichte tekst elders op
   de pagina staat; die staat in includes/footer.php. */
.grecaptcha-badge {
  visibility: hidden !important;
}

@media (max-width: 560px) {
  .form {
    grid-template-columns: minmax(0, 1fr);
  }

  .form__row--half {
    grid-column: 1 / -1;
  }
}