/*
  Aanmeldformulier Valckenborgh.
  Huisstijl: diep paars #270051, lila #9778B5, zacht lila #E2CEED, zalm #EA9888.
  Bewust geen externe fonts of afbeeldingen: dat houdt de pagina snel en zorgt
  ervoor dat er geen gegevens naar derden gaan.
*/

:root {
  --paars: #270051;
  --paars-licht: #9778b5;
  --lila: #e2ceed;
  --oppervlak: #f8f7fc;
  --zalm: #ea9888;
  --zalm-donker: #cc6d6a;
  --tekst: #1f1930;
  --tekst-zacht: #5b5470;
  --rand: #d7d1e4;
  --wit: #ffffff;
  --fout: #b3261e;
  --fout-vlak: #fdeceb;
  --goed: #1c6b45;
  --goed-vlak: #e9f5ef;
  --radius: 10px;
  --schaduw: 0 1px 2px rgba(39, 0, 81, 0.06), 0 8px 24px rgba(39, 0, 81, 0.07);
  --letters: "Inter Tight", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/*
  De pagina is een kolom over de volle hoogte, zodat de voettekst onderaan het
  scherm staat als de inhoud kort is. Zonder dit blijft er bij de bevestiging
  een lege strook onder de voettekst staan.
*/
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--letters);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--oppervlak);
}

.omhulsel {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ------------------------------------------------------- toegankelijkheid */

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wit);
  color: var(--paars);
  padding: 0.75rem 1rem;
  z-index: 10;
  border-radius: 0 0 var(--radius) 0;
}

.overslaan:focus {
  left: 0;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--paars);
  outline-offset: 2px;
}

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- structuur */

.kop {
  background: var(--paars);
  color: var(--wit);
  padding: 2rem 0 2.25rem;
}

/* Het woordmerk is wit en staat daarom alleen op de paarse balk. */
.merk-logo {
  display: block;
  height: 2.5rem;
  width: auto;
  margin: 0 0 1rem;
}

.kop h1 {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 2.1rem);
  line-height: 1.2;
  font-weight: 650;
}

main {
  flex: 1 0 auto;
  padding-bottom: 3rem;
}

.kop,
.voet {
  flex: 0 0 auto;
}

.kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.kaart h2 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  color: var(--paars);
}

.kaart > p:last-child,
.kaart > ul:last-child {
  margin-bottom: 0;
}

.lijst {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.lijst li + li {
  margin-top: 0.35rem;
}

.voet {
  background: var(--paars);
  color: var(--lila);
  padding: 1.5rem 0;
  font-size: 0.95rem;
}

.voet a {
  color: var(--wit);
}

/* --------------------------------------------------------------- velden */

fieldset {
  border: 0;
  border-top: 1px solid var(--rand);
  padding: 1.5rem 0 0;
  margin: 0 0 1.75rem;
}

form > fieldset:first-of-type {
  border-top: 0;
  padding-top: 0;
}

legend {
  padding: 0;
  font-size: 1.2rem;
  font-weight: 650;
  color: var(--paars);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.stap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lila);
  color: var(--paars);
  font-size: 0.95rem;
  font-weight: 700;
}

fieldset.binnenste {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0 0 1.25rem;
  background: var(--oppervlak);
}

fieldset.binnenste legend {
  font-size: 1rem;
  padding: 0 0.4rem;
  margin: 0;
  background: transparent;
}

.rij {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.rij:last-child {
  margin-bottom: 0;
}

.veld {
  flex: 1 1 12rem;
  min-width: 0;
}

.veld-klein {
  flex: 0 1 9rem;
}

.veld-mini {
  flex: 0 1 8.5rem;
}

/* Huisnummer heeft een lang label ("Huisnummer (verplicht)") en moet daarom
   breed genoeg zijn om dat op een regel te houden; anders schuiven de
   invoervelden in de rij ten opzichte van elkaar. */
.veld-huisnummer {
  flex: 0 1 12rem;
}

/*
  In een rij met smalle velden mag een label niet over twee regels lopen: dan
  zakt dat ene invoerveld omlaag en staat de rij niet meer recht. De velden
  hierboven zijn breed genoeg gemaakt voor hun label; op smalle schermen worden
  ze toch volledige breedte.
*/
.rij :where(.veld-klein, .veld-mini, .veld-huisnummer, .veld-postcode, .veld-jaar) > label {
  white-space: nowrap;
}

.veld-jaar {
  flex: 0 1 8rem;
}

.veld-postcode {
  flex: 0 1 12rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.verplicht {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--tekst-zacht);
}


input,
select,
textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--wit);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--paars-licht);
}

textarea {
  resize: vertical;
  min-height: 7rem;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paars) 50%),
    linear-gradient(135deg, var(--paars) 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) 1.25rem,
    calc(100% - 0.75rem) 1.25rem;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.datumrij {
  display: flex;
  gap: 0.75rem;
}

.hulp {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  color: var(--tekst-zacht);
}

.teller {
  font-variant-numeric: tabular-nums;
}

.aankruis {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.aankruis input {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  margin-top: 0.25rem;
  accent-color: var(--paars);
}

.aankruis label {
  margin: 0;
  font-weight: 500;
}

/* ---------------------------------------------------------------- fouten */

.fout {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fout);
}

.fout-algemeen {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--fout-vlak);
  border-left: 4px solid var(--fout);
  border-radius: 0 8px 8px 0;
  font-weight: 500;
}

[aria-invalid="true"] {
  border-color: var(--fout);
  border-width: 2px;
}

.foutsamenvatting {
  border-left: 5px solid var(--fout);
}

.foutsamenvatting h2 {
  color: var(--fout);
}

.foutsamenvatting ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.foutsamenvatting li + li {
  margin-top: 0.3rem;
}

.foutsamenvatting a {
  color: var(--fout);
  font-weight: 600;
}

/* --------------------------------------------------------- contactpersoon */

.contactpersoon {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.15rem;
  margin-bottom: 1.25rem;
  background: var(--oppervlak);
}

.contactpersoon-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.contactpersoon-kop h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--paars);
}

.verwijderen {
  border: 0;
  background: none;
  padding: 0.25rem 0.35rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--zalm-donker);
  text-decoration: underline;
  cursor: pointer;
  border-radius: 6px;
}

.verwijderen:hover {
  color: var(--fout);
}

/* --------------------------------------------------------------- knoppen */

.knop {
  font: inherit;
  font-weight: 650;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  border: 2px solid var(--paars);
  transition: background-color 120ms ease, color 120ms ease;
}

.knop-eerste {
  background: var(--paars);
  color: var(--wit);
  width: 100%;
}

.knop-eerste:hover:not(:disabled) {
  background: #35006e;
}

.knop-tweede {
  background: var(--wit);
  color: var(--paars);
}

.knop-tweede:hover:not(:disabled) {
  background: var(--lila);
}

.knop:disabled {
  cursor: progress;
  opacity: 0.72;
}

.afsluiting {
  border-top: 1px solid var(--rand);
  padding-top: 1.5rem;
}

.afsluiting .hulp {
  margin-bottom: 1rem;
}

/* ---------------------------------------------------- uitkomst van sturen */

.bevestiging {
  border-left: 5px solid var(--goed);
  background: var(--goed-vlak);
}

.bevestiging h2 {
  color: var(--goed);
}

.vinkje {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--goed);
}

.kenmerk {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
  font-variant-numeric: tabular-nums;
}

/* Alleen het kenmerk zelf mag afbreken, niet de tekst eromheen. */
.kenmerk strong {
  word-break: break-all;
}

.storing {
  border-left: 5px solid var(--zalm-donker);
}

.storing h2 {
  color: var(--zalm-donker);
}

/* ------------------------------------------------------------- schermmaat */

@media (max-width: 30rem) {
  .merk-logo {
    height: 1.9rem;
  }

  .kaart {
    padding: 1.15rem;
    border-radius: 8px;
  }

  .rij {
    gap: 0.85rem;
  }

  .veld,
  .veld-klein,
  .veld-mini,
  .veld-huisnummer,
  .veld-postcode,
  .veld-jaar {
    flex: 1 1 100%;
  }

  .datumrij .veld-mini {
    flex: 1 1 4rem;
  }

  .datumrij .veld-jaar {
    flex: 1 1 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}