/* ==================================================
   CONTACT

   Eén sectie met de foto als achtergrond en een donkere
   overlay. Daarop staat een kolom van 580px met het
   formulier en daaronder de contactgegevens, precies
   zoals op de oude site.
================================================== */

.contact {
  background-image:
    linear-gradient(rgb(0 0 0 / 36%), rgb(0 0 0 / 36%)),
    url('/assets/images/puntzakken-friet-op-bank.jpg');
  background-size: cover;
  background-position: top center;
}

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxl);
}

.contact__blok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap-s);

  width: 100%;
  max-width: 580px;
}

.contact__blok h1,
.contact__blok h2 {
  line-height: 1;

  color: var(--white);
}

.contact__intro {
  color: var(--white);
  font-size: var(--h4);
  line-height: 1.3;
}


/* --------------------------------------------------
   Formulier

   Vier velden van een halve breedte (2x2), daaronder
   het bericht, de akkoordregel en de knop.
-------------------------------------------------- */

.contact .form {
  gap: var(--content-gap-m);

  margin-top: var(--content-gap-s);
}

.contact .form input:not([type="checkbox"]),
.contact .form textarea {
  border: none;
}

.contact .form ::placeholder {
  color: var(--tekst);
  opacity: 1;
}

.contact .form textarea {
  min-height: 9rem;
}

.contact .form__privacy label {
  color: var(--white);
}

.contact .form__privacy a {
  color: var(--groen);
}

/* De knop is even breed als een veld, niet de volle rij */

.contact .form__submit {
  grid-column: auto;

  color: var(--tekst);
}

.contact .form__submit:hover {
  color: var(--tekst);
}

.contact .form__error {
  color: var(--white);
}


/* --------------------------------------------------
   Ook te bereiken via
-------------------------------------------------- */

.contact__gegevens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--content-gap-m);

  width: 100%;
}

.contact__kaart {
  flex: 1 1 15rem;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--content-gap-xs);

  /* krap genoeg dat het e-mailadres op één regel past */
  padding: 0.7rem 0.75rem;

  background-color: var(--white);
  color: var(--tekst);

  font-size: 0.8125rem;
  letter-spacing: -0.4px;
  overflow-wrap: anywhere;
}

.contact__kaart--groen {
  background-color: var(--groen);
}

.contact__kaart:hover {
  background-color: var(--groen-hover);
  color: var(--white);
}

.contact__kaart svg {
  flex: 0 0 auto;

  width: 1.15em;
  height: 1.15em;
}

@media (max-width: 600px) {

  .contact .form__submit {
    grid-column: 1 / -1;
  }

}

/* 'Contactformulier' is één lang woord en past hier anders niet */

@media (max-width: 480px) {

  .contact__blok h1 {
    font-size: 2.25rem;
  }

}