/* =========================================================================
   Startpagina — rustiger opzet (sept 2026)

   Laadt alleen op de startpagina, ná site.css, en overschrijft daar de
   regels voor de naad, de opbrengsten, de modules en de scans. Eén
   iconenset (lijn, 24px, één kleur; zie src/site/lucide.ts), minder tekst,
   één primaire oproep per blok. Opbouw: src/content/home.ts.
   ========================================================================= */

/* ---------- Iconen: één stijl, één kleur ---------- */
.icoon {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

/* ---------- Hero: minder ruimte nodig voor de smallere inlogbalk ---------- */
.hero--naad .hero__inner {
  padding-bottom: 5.5rem;
}
.naad {
  margin-top: -3.25rem;
}

@media (min-width: 62em) {
  .hero--naad .hero__inner {
    padding-bottom: 6rem;
  }
  .naad {
    margin-top: -3.5rem;
  }
}

/* ---------- De scanknop: de hoofdoproep van de pagina ---------- */
.button--groot {
  gap: 0.625rem;
  min-height: 56px;
  padding: 1rem 1.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgb(0 0 0 / 22%);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.button--groot:hover {
  transform: translateY(-1px);
}

.button__pijl {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.15s ease;
}

.button--groot:hover .button__pijl {
  transform: translateX(4px);
}

.hero--band .actions--groot {
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.hero__noot-regel {
  margin: 0.875rem 0 0;
  max-width: 34rem;
}

.hero__noot-regel .hero__noot {
  font-size: 0.9375rem;
}

.scans .scans__knop {
  margin-top: 1.5rem;
}

@media (max-width: 30em) {
  .button--groot {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button--groot,
  .button__pijl {
    transition: none;
  }
}

/* ---------- Inlogbalk: compact ---------- */
.inlog--compact {
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 30px rgb(28 40 48 / 14%);
}

.inlog--compact .inlog__kop {
  align-items: baseline;
}

.inlog--compact .inlog__kop h2 {
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}

.inlog--compact .inlog__hulplink {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--colour-text-muted);
}

.inlog--compact .inlog__velden {
  gap: 0.75rem;
}
.inlog--compact .inlog__veld {
  gap: 0.25rem;
}

.inlog--compact label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--colour-text-muted);
}

.inlog--compact input[type="search"],
.inlog--compact input[type="email"] {
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  background-color: var(--colour-fond);
  border-color: transparent;
}

.inlog--compact input[type="search"]:hover,
.inlog--compact input[type="email"]:hover {
  border-color: var(--colour-line);
}

.inlog--compact input::placeholder {
  color: #8a99a4;
}

.inlog--compact .inlog__onthoud-regel {
  gap: 0.5rem;
  min-height: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.inlog--compact .inlog__onthoud-regel input {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
}

.inlog--compact .button {
  min-height: 42px;
  white-space: nowrap;
}

@media (min-width: 62em) {
  /* Eén regel: kop | kerk | e-mail | knop. Vinkje en hulplink klein eronder. */
  .inlog--compact {
    grid-template-columns: 8rem minmax(0, 3fr) minmax(0, 2fr) auto;
    align-items: end;
    column-gap: 1rem;
    row-gap: 0.5rem;
    padding: 0.875rem 1.25rem 0.75rem;
  }

  .inlog--compact .inlog__kop {
    display: contents;
  }

  .inlog--compact .inlog__kop h2 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding-bottom: 0.625rem;
  }

  .inlog--compact .inlog__hulplink {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
    align-self: center;
  }

  .inlog--compact .inlog__velden {
    grid-column: 2 / 4;
    grid-row: 1;
    grid-template-columns: 3fr 2fr;
  }

  .inlog--compact .button {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
  }

  .inlog--compact .inlog__onthoud {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .inlog--compact .melding {
    grid-column: 2 / -1;
    grid-row: 3;
  }
  .inlog--compact .melding:not([hidden]) + .button {
    grid-row: 1;
  }
}

/* ---------- De introductiefilm, direct onder de inlogbalk ---------- */
.naad + #film {
  padding-top: 4rem;
}

#film + .opbrengsten {
  padding-top: 0;
}

.startfilm {
  max-width: 48rem;
}

/* ---------- Wat het oplevert: alleen de kern ---------- */
.naad + .opbrengsten {
  padding-top: 4rem;
}

.opbrengsten__lijst {
  gap: 0;
  border-top: 1px solid var(--colour-line);
}

.opbrengst {
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--colour-line);
}

.opbrengst__icoon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--colour-base);
  background-color: var(--colour-fond);
  border-radius: 50%;
}

.opbrengst h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

@media (min-width: 40em) {
  .opbrengsten__lijst {
    column-gap: 2rem;
  }
}

@media (min-width: 62em) {
  .opbrengsten__lijst {
    gap: 0;
    border-bottom: 1px solid var(--colour-line);
  }
  .opbrengst {
    padding: 1.5rem 1.5rem 1.5rem 0;
    border-bottom: 0;
  }
  .opbrengst + .opbrengst {
    padding-left: 1.5rem;
    border-left: 1px solid var(--colour-line);
  }
}

/* ---------- Modules: drie groepen, lijst met lijnen (geen tegels) ---------- */
.modules__groepen {
  display: grid;
  gap: 2rem;
}

.modules__groepkop {
  margin: 0 0 0.25rem;
  padding-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-accent-strong);
  border-bottom: 2px solid var(--colour-base);
}

.modules__regels {
  margin: 0;
  padding: 0;
  list-style: none;
}

.modules__regels > li {
  border-bottom: 1px solid var(--colour-soft-on-fond);
}

.module-regel {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 0.5rem 1rem 0;
  color: var(--colour-ink);
  text-decoration: none;
}

.module-regel__icoon {
  flex: none;
  padding-top: 0.125rem;
  color: var(--colour-base);
}

.module-regel__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.module-regel__naam {
  font-weight: 700;
  line-height: 1.3;
}

.module-regel__uitleg {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--colour-text-muted);
}

.module-regel:hover .module-regel__naam {
  text-decoration: underline;
  text-decoration-color: var(--colour-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.module-regel:focus-visible {
  outline: 2px solid var(--colour-base);
  outline-offset: 2px;
}

@media (min-width: 62em) {
  .modules__groepen {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* ---------- Scans: genummerde regels op de donkere band ---------- */
.scans {
  padding-block: 5rem;
}

.scans .scans__slot {
  margin-top: 1.5rem;
}

.scans__regels {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(255 255 255 / 18%);
}

.scans__regels > li {
  border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.scan-regel {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.25rem 1rem;
  padding: 1.375rem 0.75rem;
  color: var(--colour-surface);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.scan-regel:hover {
  background-color: rgb(255 255 255 / 6%);
}

.scan-regel:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 2px;
}

.scan-regel__nummer {
  grid-row: span 3;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--colour-accent);
}

.scan-regel__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.scan-regel__titel {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}

.scan-regel__uitleg {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--colour-on-dark-muted);
}

.scan-regel__duur {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--colour-on-dark-muted);
}

.scan-regel__klok {
  width: 0.9375rem;
  height: 0.9375rem;
}

.scan-regel__start {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  color: var(--colour-accent);
}

.scan-regel__pijl {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.15s ease;
}

.scan-regel:hover .scan-regel__pijl {
  transform: translateX(4px);
}

@media (min-width: 48em) {
  .scan-regel {
    grid-template-columns: 3rem 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
  }
  .scan-regel__nummer {
    grid-row: auto;
  }
}

@media (min-width: 62em) {
  .scans__inner {
    display: grid;
    grid-template-columns: 22rem 1fr;
    gap: 4rem;
    align-items: start;
  }
  .scans__inner .section__kop {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scan-regel,
  .scan-regel__pijl {
    transition: none;
  }
}

/* Lege statusregel onder het zoekveld neemt geen ruimte in. */
.inlog--compact .inlog__telling:empty {
  display: none;
}