/*
 * Inhoudspagina's — Wietzadenshop
 * ----------------------------------------
 * Keuzehulp, Over ons en Contact.
 *
 * Bron: docs/design/wietzadenshop-keuzehulp.html, -over-ons.html, -contact.html
 *
 * De verhaal-split, de icoonkaarten en het slotblok staan in components.css:
 * die deelt Over ons met de Green Nuggets-merkpagina.
 */

.keuzehulp-pagina,
.over-ons,
.contact {
  background-color: var(--color-bg-lite);
  color:            var(--color-text-lite);
}

/* ----------------------------------------
 * KEUZEHULP
 * ---------------------------------------- */

.keuzehulp-pagina__head {
  padding-top: 70px;
  text-align:  center;
}

.keuzehulp-pagina__title {
  /* Zoals in het ontwerp over twee regels, niet één lange balk. */
  max-width:      20ch;
  margin:         0 auto var(--space-4);
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(34px, 5.4vw, 62px);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.keuzehulp-pagina__lead {
  max-width: 56ch;
  margin:    0 auto;
  font-size: var(--text-md);
  color:     var(--color-text-muted-lite);
}

/* De quiz staat hier zonder eigen kop en zonder achtergrondfoto. */
.finder--kaal {
  padding-top: var(--space-8);
}

/* ----------------------------------------
 * OVER ONS — kop
 * ---------------------------------------- */

.about-hero {
  padding:          80px 0 76px;
  background-color: var(--color-bg);
  color:            var(--color-text);
  text-align:       center;
}

.over-ons .about-hero__eyebrow {
  margin-bottom: var(--space-4);
  color:         var(--color-primary-hover);
}

.about-hero__title {
  margin-bottom:  18px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(40px, 7vw, 88px);
  line-height:    0.92;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.about-hero__intro {
  max-width: 56ch;
  margin:    0 auto;
  font-size: 19px;
  color:     rgba(244, 245, 240, 0.82);
}

/* Het eerste verhaal sluit direct op de donkere kop aan. */
.over-ons .verhaal {
  padding: 90px 0;
}

/* ----------------------------------------
 * OVER ONS — cijferband
 * ---------------------------------------- */

.stats {
  background-color: var(--color-bg);
  color:            var(--color-text);
}

.stats__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   30px;
  padding-top:           64px;
  padding-bottom:        64px;
  text-align:            center;
}

.stat__getal {
  font-family: var(--font-heading);
  font-weight: var(--font-black);
  font-size:   clamp(38px, 5vw, 58px);
  line-height: var(--leading-tight);
  color:       var(--color-primary-hover);
}

.stat__label {
  margin-top:     var(--space-2);
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
}

/* ----------------------------------------
 * CONTACT
 * ---------------------------------------- */

.page-head--contact {
  padding-top: 34px;
}

.page-head__lead {
  max-width:  56ch;
  margin-top: var(--space-3);
  font-size:  var(--text-base);
  color:      var(--color-text-muted-lite);
}

.contact-wrap {
  padding: 34px 0 90px;
}

.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1.2fr;
  gap:                   48px;
  align-items:           start;
}

.contact-info {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.contact-card {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-4);
  padding:          22px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    12px;
}

.contact-card__icon {
  display:          grid;
  place-items:      center;
  width:            44px;
  height:           44px;
  flex-shrink:      0;
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
  border-radius:    11px;
}

.contact-card__title {
  margin-bottom:  var(--space-1);
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.contact-card__text {
  font-size:   14.5px;
  line-height: 1.6;
  color:       var(--color-text-muted-lite);
}

.contact-card__text a {
  color: var(--color-primary-dark);
}

/* ----------------------------------------
 * CONTACT — formulier
 * ---------------------------------------- */

.contact-form {
  padding:          34px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-band);
}

.contact-form__title {
  margin-bottom:  var(--space-5);
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      20px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.contact .fields {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
}

.contact .form-row {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin:         0;
}

.contact .form-row-wide {
  grid-column: 1 / -1;
}

.contact .fields label {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color:          var(--color-text-muted-lite);
}

.contact .fields input,
.contact .fields textarea {
  padding:          12px 14px;
  background-color: var(--color-bg-lite);
  border:           1.5px solid var(--color-line-strong-lite);
  border-radius:    var(--radius-input);
  font-family:      var(--font-body);
  font-size:        15px;
  color:            var(--color-text-lite);
  transition:       border-color var(--transition-fast);
}

.contact .fields input {
  height: 50px;
}

.contact .fields textarea {
  min-height: 130px;
  resize:     vertical;
}

.contact .fields input:focus,
.contact .fields textarea:focus {
  outline:      none;
  border-color: var(--color-primary);
}

.contact .fields input::placeholder,
.contact .fields textarea::placeholder {
  color: var(--color-text-faint-lite);
}

.contact-form__submit {
  width: 100%;
}

.contact-form__note {
  margin-top: 14px;
  font-size:  12.5px;
  color:      var(--color-text-faint-lite);
}

.contact-form__bedankt {
  padding:          18px 20px;
  background-color: var(--color-primary-soft);
  border-radius:    var(--radius-card);
  font-size:        var(--text-base);
  color:            var(--color-text-lite);
}

.contact-form__fouten {
  margin-bottom:    var(--space-5);
  padding:          16px 20px;
  background-color: var(--color-bg-lite);
  border-left:      3px solid #c0392b;
  border-radius:    var(--radius-card);
  font-size:        var(--text-sm);
  color:            var(--color-text-lite);
}

/*
 * Honeypot buiten beeld in plaats van display:none — sommige bots slaan
 * verborgen velden over, en dan werkt de val niet.
 */
.contact-form__honey {
  position: absolute;
  left:     -9999px;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 960px) {

  .stats__grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap:                   28px;
  }
}

@media (max-width: 560px) {

  .contact .fields {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 24px;
  }
}