/* ==========================================================================
   Formulieren

   De vorm hoort bij het project en staat in de eigen stylesheet. Wat hier staat
   zijn de valkuilen: dingen die je niet ziet tot iemand het formulier op een
   telefoon invult, en die we liever één keer oplossen dan per project opnieuw.

   Haal dit bestand binnen vóór de stylesheet van het project, dan kun je alles
   hieronder overschrijven.
   ========================================================================== */

/* Een cel in een grid of flex krimpt standaard niet onder de breedte van zijn
   inhoud: min-width staat daar op auto. Bij een formulier in een grid betekent
   dat één te breed veld en de hele pagina schuift opzij.

   Bij verzijdenclinics.nl gaf dat 65 pixels horizontale scroll over de hele
   intakepagina, veroorzaakt door één datumveld. */
.formulier,
.formulier > *,
.formulier .veld {
  min-width: 0;
}

/* Geen enkel veld mag breder worden dan de kolom waar het in staat. max-width
   wint van een breedte die de browser zelf bedenkt. */
.formulier input,
.formulier select,
.formulier textarea,
.formulier button {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/**
 * De letter van de pagina in plaats van die van het besturingssysteem. Een
 * browser geeft een invoerveld anders zijn eigen schreefloze standaard.
 */
.formulier input,
.formulier select,
.formulier textarea {
  font: inherit;
}

/**
 * Bij een knop erven we alleen de familie en de grootte, en niet het gewicht.
 *
 * `font: inherit` zet álle fonteigenschappen op de erfwaarde, dus ook het
 * gewicht. Een verstuurknop heeft bij ons de klasse `.knop` met `font-weight:
 * 600`, en omdat deze stylesheet ná de onze wordt geladen werd die 600 hier
 * weer platgeslagen: de tekst op "Bel mij terug" stond dun terwijl elke andere
 * knop op de site vet is.
 */
.formulier button {
  font-family: inherit;
  font-size: inherit;
}

/* Een datumveld is op iOS breder dan op de desktop: Safari tekent er zijn eigen
   bediening in, met een eigen minimumbreedte die zich niets van width aantrekt.
   Op kleine schermen zetten we die bediening uit; op de desktop laten we hem
   staan, want daar werkt de kalenderknop wel en is er ruimte genoeg. */
.formulier input[type='date']::-webkit-date-and-time-value {
  text-align: left;
}

@media (max-width: 767px) {
  .formulier input[type='date'] {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Aanraakvlakken van minstens 44 bij 44 pixels. Zie de gedeelde laag. */
.formulier input,
.formulier select,
.formulier button,
.formulier [type='checkbox'] + label,
.formulier [type='radio'] + label {
  min-height: 44px;
}

.formulier [type='checkbox'],
.formulier [type='radio'] {
  min-height: 0;
  width: 20px;
  height: 20px;
}

/* Op iOS zoomt de pagina in zodra een veld kleiner is dan 16 pixels, en daarna
   staat de bezoeker met een uitvergroot formulier. */
@media (max-width: 767px) {
  .formulier input,
  .formulier select,
  .formulier textarea {
    font-size: max(16px, 1em);
  }
}

/* Een fout hoort zichtbaar te zijn zonder alleen op kleur te leunen. */
.formulier [aria-invalid='true'] {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Toetsenbordgebruikers moeten kunnen zien waar ze zijn. */
.formulier :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}