/*
 * Het aanmeldformulier op /startkerk/. Velden zoals bij het inloggen
 * (.inlog input in site.css), keuzes zoals in de scan (scan.css).
 */

.aanmeld {
  display: grid;
  gap: var(--space-m);
  max-width: 44rem;
}

.aanmeld__raster {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 40em) {
  .aanmeld__raster {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-l);
  }
}

.aanmeld__veld {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.aanmeld label,
.aanmeld legend {
  font-size: 0.9375rem;
  font-weight: 700;
}

.aanmeld__verplicht {
  color: var(--colour-accent-strong);
}

.aanmeld__optioneel {
  font-weight: 400;
  color: var(--colour-text-muted);
}

.aanmeld input[type="text"],
.aanmeld input[type="email"],
.aanmeld input[type="tel"],
.aanmeld select,
.aanmeld textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6875rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--colour-ink);
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
}

.aanmeld textarea {
  resize: vertical;
}

.aanmeld input:hover,
.aanmeld select:hover,
.aanmeld textarea:hover {
  border-color: var(--colour-slate-60);
}

.aanmeld input:focus-visible,
.aanmeld select:focus-visible,
.aanmeld textarea:focus-visible {
  outline: 2px solid var(--colour-base);
  outline-offset: 1px;
  border-color: var(--colour-base);
}

.aanmeld input[aria-invalid="true"],
.aanmeld textarea[aria-invalid="true"] {
  border-color: var(--status-verlopen-dot);
}

.aanmeld__vraag {
  margin: 0;
  padding: 0;
  border: 0;
}

.aanmeld__vraag legend {
  padding: 0;
  margin-bottom: var(--space-xs);
}

.aanmeld__keuzes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.aanmeld__keuze {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  font-weight: 400;
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  cursor: pointer;
}

.aanmeld .aanmeld__keuze {
  font-weight: 400;
}

.aanmeld__keuze:hover {
  border-color: var(--colour-slate-60);
}

.aanmeld__keuze input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--colour-base);
}

.aanmeld__keuze:has(input:checked) {
  border-color: var(--colour-base);
  box-shadow: inset 0 0 0 1px var(--colour-base);
}

.aanmeld__keuze:has(input:focus-visible) {
  outline: 2px solid var(--colour-base);
  outline-offset: 2px;
}

.aanmeld__vraag.is-open .aanmeld__keuze {
  border-color: var(--status-verlopen-dot);
}

/* Het veld voor bots: buiten beeld, niet weg, anders vult een bot hem niet in. */
.aanmeld__pot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aanmeld__knoppen {
  margin: 0;
}

.melding--fout {
  border-left-color: var(--status-verlopen-dot);
}

.aanmeld__bedankt {
  border-left-color: var(--status-ok-dot);
}

/* De welkomstpagina (/welkom/): één knop per stap, op de telefoon over de hele breedte. */
.welkom__knop {
  margin-top: var(--space-m);
}

@media (max-width: 40em) {
  .welkom__knop .button,
  #welkom-formulier .button {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

.welkom__onderwerpen {
  margin: var(--space-s) 0 0;
  padding-left: 1.25rem;
}

.welkom__onderwerpen li + li {
  margin-top: var(--space-2xs, 0.25rem);
}

.welkom__persoon {
  display: flex;
  gap: var(--space-m);
  align-items: flex-start;
}

.welkom__foto {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.welkom__naam {
  font-weight: 700;
  margin: 0;
}

/*
 * De welkomstpagina als nieuwsbrief: één smalle kolom, elk onderdeel een witte
 * kaart op het lichte fond.
 */
.welkom {
  background-color: var(--colour-fond);
  padding-bottom: var(--space-xl);
}

.welkom .hero .container,
.welkom .section > .container,
.welkom > .container {
  max-width: 40rem;
}

.welkom .section,
.welkom .section--soft {
  padding-block: var(--space-xs);
  background-color: transparent;
}

.welkom .section:first-of-type {
  padding-top: var(--space-m);
}

.welkom .section > .container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: var(--space-l) var(--space-m);
}

.welkom .section__kop h2 {
  font-size: 1.375rem;
}

.welkom__label {
  margin: 0 0 var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.welkom__voorbeeld {
  margin: var(--space-l) 0 0;
  padding: var(--space-m);
  border: 1px solid var(--colour-soft);
  border-radius: 10px;
  background-color: var(--colour-fond);
}

.welkom__voorbeeld svg {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin-inline: auto;
}

.welkom__voorbeeld figcaption {
  margin-top: var(--space-s);
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.welkom__winst-kop {
  margin: var(--space-m) 0 var(--space-2xs, 0.25rem);
  font-weight: 700;
}

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

.welkom__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.welkom__contact .button {
  flex: 1 1 10rem;
  justify-content: center;
}

.welkom__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.welkom__beeld {
  margin: 0 0 var(--space-m);
}

.welkom__beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}

.welkom__beeld figcaption {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  color: var(--colour-text-muted);
}

.welkom__lead {
  font-weight: 700;
}

.welkom__punten {
  margin: var(--space-s) 0 0;
  padding-left: 1.25rem;
}

.welkom__punten li + li {
  margin-top: var(--space-xs);
}

/* Het menu van de werkruimte, kort, als in de werkruimte zelf. */
.welkom__werkruimte {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 36em) {
  .welkom__werkruimte {
    grid-template-columns: 14rem 1fr;
    align-items: start;
  }
}

.welkom__menu {
  max-width: 16rem;
  padding: var(--space-s) var(--space-s) var(--space-xs);
  border-radius: 10px;
  background-color: var(--colour-base);
  color: #fff;
  font-size: 0.9375rem;
}

.welkom__menu ul {
  margin: 0 0 var(--space-xs);
  padding: 0;
  list-style: none;
}

.welkom__menu li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
}

.welkom__menu-icoon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.welkom__menu-groep {
  display: flex;
  justify-content: space-between;
  margin: var(--space-xs) 0 0.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-accent);
}

.welkom__menu-groep span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: rgb(255 255 255 / 70%);
}

.startkerk__film {
  max-width: 48rem;
}