/**
 * info.css — over-ons, contact en 404 in het affiche (sessie 265, TASKS #85 fase B stap 5)
 *
 * Drie kleine pagina's op één sjabloon (body.info, brief .impeccable/surfaces/info.md). Wat ze met
 * de rest delen (raster, kopgroep, slot, actie, secundaire knop, FAQ, de module) staat in
 * affiche-basis.css. Hier staat alleen wat alleen deze drie hebben: secties met rijen, de
 * leesmaat, het contactformulier en de doorgang op de 404.
 * De klassen van contact-form.js (contact-form, contact-submit, form-status) blijven staan.
 */

body.info {
  background: var(--af-papier);
  color: var(--af-inkt);
}

.in {
  padding-bottom: var(--af-sectie-kort);
}

/* Het attribuut hidden moet winnen van elke display hieronder: contact-form.js verbergt het
   formulier (display: grid) na het versturen (css-layout.md §38, gemeten s265: het bleef staan). */
.in [hidden] {
  display: none;
}

/* ==================== Secties ==================== */
/* Een sectie is een rij op het raster: de kop en de inhoud. Lucht boven de kop is de grote stap,
   onder de kop de kleine (craft floor). */
.in-sectie {
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  padding-top: var(--af-sectie-kort);
}

.in-sectie > * {
  grid-column: 1 / 8;
  min-width: 0;
}

/* Van de kopgroep naar de eerste sectie is de grote stap binnen de groep, geen sectiestap: de
   kopgroep draagt al clamp(28px, 2.8vw, 40px) onder zich (gemeten eerst 112px op 1440). */
.nl-kop + .in-sectie {
  padding-top: 8px;
}

body.info .in h2 {
  margin: 0;
  font-family: var(--af-kop);
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--af-inkt);
  text-wrap: balance;
}

body.info .in h3 {
  margin: 0;
  font-family: var(--af-kop);
  font-size: var(--af-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--af-inkt);
}

.in-inhoud {
  padding-top: 20px;
}

/* De leesmaat van de blog: 48ch, gemeten mediaan 66 tekens per regel (s261). */
.in-inhoud p,
.in-inhoud li {
  max-width: 48ch;
  line-height: 1.6;
  text-wrap: pretty;
}

.in-inhoud p {
  margin: 0 0 16px;
}

.in-inhoud > :last-child {
  margin-bottom: 0;
}

body.info .in-inhoud > h3 {
  margin-top: 32px;
  margin-bottom: 8px;
}

body.info .in-inhoud > h3:first-child {
  margin-top: 0;
}

/* Alleen lopende lijsten springen in; de rijen staan op de lijn van de tekst. */
.in-inhoud ul:not([class]) {
  margin: 0 0 16px;
  padding-left: 1.2em;
}

.in-inhoud li + li {
  margin-top: 8px;
}

/* De kantlijnkop (over-ons, proef s265 B tegen A, de leeskolom van de blog in 1-7): de kop hangt
   in 1-4, de inhoud staat in 5-12 op 48ch, één lijn van 2px inkt per sectie. De koppen vormen een
   kolom die je kunt aflopen, de grammatica van de woordenlijst. A liet 8-12 over 5.000px leeg. */
@media (min-width: 1024px) {
  .in--kantlijn .in-sectie {
    border-top: 2px solid var(--af-inkt);
    margin-top: var(--af-sectie-kort);
    padding-top: 16px;
  }

  .in--kantlijn .nl-kop + .in-sectie {
    margin-top: 8px;
  }

  .in--kantlijn .in-sectie > h2 {
    grid-column: 1 / 5;
    padding-right: var(--af-cel);
  }

  .in--kantlijn .in-sectie > .in-inhoud {
    grid-column: 5 / -1;
    padding-top: 0;
  }

  /* De sectielijn is de bovenlijn: geen tweede lijn eronder (DESIGN.md, Don't). */
  .in--kantlijn .in-sectie :is(.in-rijen, .in-linkrijen) {
    border-top: 0;
  }

  .in--kantlijn .in-sectie .in-rijen > li:first-child {
    padding-top: 0;
  }

  .in--kantlijn .in-sectie .in-linkrijen > li:first-child > .in-linkrij {
    margin-top: -12px;
  }

  /* Actierij en slot hebben geen kop in de kantlijn, maar wel de lijn over 1-12 van elke sectie:
     met een lijn vanaf kolom 5 hingen ze onder de sectie erboven (finish review s265). */
  .in--kantlijn > :is(.nl-slot, .in-actierij) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }

  .in--kantlijn > :is(.nl-slot, .in-actierij) > * {
    grid-column: 5 / -1;
  }

  /* Een knop als rasteritem vult zijn cel (justify-self: stretch): het inkten kader werd 891px
     breed en las als een veld (finish review s265, ronde 2). Eigen breedte. */
  .in--kantlijn > :is(.nl-slot, .in-actierij) > :is(.af-knop, .af-cta) {
    justify-self: start;
  }
}

@media (max-width: 1023px) {
  .in-sectie > * {
    grid-column: 1 / -1;
  }
}

/* ==================== Rijen: wat eerst kaarten waren ==================== */
/* Het woordenboek van de naslag: 2px inkt erboven, 1px bedieningslijn ertussen, geen icoon. */
.in-rijen {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--af-inkt);
}

.in-rijen > li {
  max-width: none;
  margin: 0;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--af-lijn-sterk);
}

.in-rijen > li + li {
  margin-top: 0;
}

.in-rijen p {
  margin: 6px 0 0;
}

.in-rijen .in-citaat {
  color: var(--af-inkt);
}

.in-rijen .in-citaat + p,
.in-rij-tekst {
  color: var(--af-inkt-2);
}

/* ==================== Over mij ==================== */
.in-rol {
  color: var(--af-inkt-2);
}

.in-inhoud .in-rol {
  margin-top: 4px;
}

.in-links-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.in-links-rij a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* De kanttekening onder de verantwoording: een rij, geen kaart (de blog, DESIGN.md). */
.in-inhoud .in-noot {
  margin-top: 24px;
  padding: 12px 0 14px;
  border-top: 2px solid var(--af-inkt);
  border-bottom: 1px solid var(--af-lijn-sterk);
}

/* ==================== De actierij ==================== */
/* Een aanbod zoals op de blog: kop, één zin, het inkten kader. */
.in-actierij {
  grid-column: 1 / 8;
  margin-top: var(--af-sectie-kort);
  padding: 16px 0 24px;
  border-top: 2px solid var(--af-inkt);
  border-bottom: 1px solid var(--af-lijn-sterk);
}

/* Ná de basisregel: een mediablok voegt geen specificiteit toe (css-layout.md §33; gemeten s265,
   documenter: vóór de basisregel bleef de actierij onder 1024 in 1-7, 450 van 771px op 820). */
@media (max-width: 1023px) {
  .in-actierij {
    grid-column: 1 / -1;
  }
}

body.info .in-actierij h2 {
  font-size: var(--af-h3);
  line-height: 1.2;
  letter-spacing: 0;
}

.in-actierij p {
  max-width: 48ch;
  margin: 8px 0 16px;
  line-height: 1.55;
  color: var(--af-inkt-2);
}

/* ==================== Links als rij ==================== */
/* Een link die een rij is, inverteert als blok (DESIGN.md, Links), met 8px lucht naast de letters. */
.in-linkrijen {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--af-inkt);
}

.in-linkrijen > li {
  max-width: none;
  margin: 0;
  border-bottom: 1px solid var(--af-lijn-sterk);
}

.in-linkrijen > li + li {
  margin-top: 0;
}

body.info a.in-linkrij {
  display: block;
  margin-inline: -8px;
  padding: 12px 8px;
  color: var(--af-inkt);
  text-decoration: none;
}

.in-linkrij-titel {
  display: block;
  font-family: var(--af-kop);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
}

.in-linkrij-tekst {
  display: block;
  margin-top: 2px;
  color: var(--af-inkt-2);
}

body.info a.in-linkrij:hover,
body.info a.in-linkrij:focus-visible {
  background: var(--af-inkt);
  color: var(--af-papier);
}

body.info a.in-linkrij:hover .in-linkrij-tekst,
body.info a.in-linkrij:focus-visible .in-linkrij-tekst {
  color: var(--af-papier);
}

/* ==================== Het slot ==================== */
.nl-slot .af-actie {
  margin-bottom: 4px;
}

body.info .nl-slot .in-slot-verder {
  margin: 16px 0 0;
  font-size: var(--af-klein);
}

body.info .nl-slot .in-slot-verder + .in-slot-verder {
  margin-top: 0;
}

/* Een link die alleen in zijn alinea staat, is een bedieningselement en geen link in een zin:
   tikvlak 44px (gemeten s265: 17px). */
body.info .in-slot-verder > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ==================== De naad: contact en 404 ==================== */
/* Het ding in 1-7, de vervolgstap in 8-12 (DESIGN.md, De naad). Onder 1024 onder elkaar. */
.in-naad {
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}

.in-naad > * {
  grid-column: 1 / 8;
  min-width: 0;
}

/* Marge, geen padding: de bovenlijn van de route begint waar zijn tekst begint, niet op de naad
   tegen het veld ernaast (polish s265, 1024). */
.in-naad > .in-rechts {
  grid-column: 8 / -1;
  margin-left: var(--af-cel);
}

@media (max-width: 1023px) {
  .in-naad > *,
  .in-naad > .in-rechts {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .in-naad > .in-rechts {
    margin-top: 40px;
  }
}

/* ==================== Het contactformulier ==================== */
.form-hidden {
  display: none;
}

.in-formulier {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.in-veld {
  display: grid;
  gap: 6px;
}

body.info .in-veld label {
  font-size: var(--af-klein);
  font-weight: 700;
  color: var(--af-inkt);
}

/* Rust: papier, kader van 1px inkt, 56px, radius 0 (DESIGN.md, Inputs). */
body.info .in-veld :is(input, select, textarea) {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid var(--af-inkt);
  border-radius: 0;
  background: var(--af-papier);
  color: var(--af-inkt);
  font-family: var(--af-tekst);
  font-size: 1rem;
  box-shadow: none;
}

body.info .in-veld textarea {
  min-height: 160px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}

body.info .in-veld :is(input, textarea)::placeholder {
  color: var(--af-inkt-2);
  opacity: 1;
}

/* De keuzelijst tekent zijn eigen pijl in inkt: de pijl van de browser is grijs of blauw. */
.in-keuze {
  position: relative;
}

body.info .in-keuze select {
  padding-right: 48px;
  appearance: none;
  cursor: pointer;
}

.in-keuze::after {
  content: '';
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 20px;
  height: 20px;
  background: var(--af-inkt);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

body.info .in-veld :is(input, select, textarea):focus-visible {
  border-color: var(--af-inkt);
  outline: 2px solid var(--af-focus);
  outline-offset: 2px;
}

/* De verzendknop is de rode actie (zoals op de samples). Wachten: hij houdt zijn kleur, de tekst
   zegt wat er gebeurt. */
body.info .contact-submit {
  justify-self: start;
  cursor: pointer;
}

body.info .contact-submit:disabled {
  opacity: 1;
  cursor: progress;
}

/* Fout: vette inkt met [!] in mono, onder de knop. Gelukt: [✓] in mono 700. Nooit rood of groen. */
.form-status:empty {
  display: none;
}

.form-status-error {
  margin: 0;
  font-weight: 700;
}

.form-status-error::before {
  content: '[!] ';
  font-family: var(--af-mono);
}

.in-gelukt p {
  margin: 20px 0 0;
}

.in-gelukt-melding::before {
  content: '[✓] ';
  font-family: var(--af-mono);
  font-weight: 700;
}

.in-gelukt:focus {
  outline: none;
}

body.info .in-gelukt .in-verstuurd {
  margin-top: 8px;
  font-size: var(--af-klein);
  color: var(--af-inkt-2);
}

.in-opnieuw {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.in-opnieuw:hover {
  text-decoration-thickness: 2px;
}

/* ==================== De andere route (contact, 8-12) ==================== */
.in-route {
  margin: 0;
  border-top: 2px solid var(--af-inkt);
}

.in-route dt {
  padding-top: 12px;
  font-size: var(--af-klein);
  font-weight: 700;
  color: var(--af-inkt-2);
}

.in-route dd {
  margin: 4px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--af-lijn-sterk);
}

.in-route dd p {
  margin: 0;
}

.in-route a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}


/* ==================== De vragen op contact ==================== */
.in-faq {
  border-top: 2px solid var(--af-inkt);
  margin-top: 20px;
}

/* ==================== De 404 ==================== */
body.info .in-module {
  margin: 0;
  padding: 16px var(--af-cel);
  overflow-x: auto;
  background: var(--af-m-grond);
  color: var(--af-m-tekst);
  font-family: var(--af-mono);
  font-size: 0.86rem;
  line-height: var(--af-rij);
}

:root[data-theme="dark"] body.info .in-module {
  box-shadow: inset 0 0 0 1px var(--af-lijn-sterk);
}

/* De actie op haar eigen breedte (DESIGN.md, Buttons); alleen onder 768 over de volle breedte,
   zoals de verzendknop op contact (finish review s265: 537px rood was het zwaarste vlak). */
@media (max-width: 767px) {
  .in-routes .btn-cta.af-cta {
    width: 100%;
  }
}

.in-routes .in-linkrijen {
  margin-top: 20px;
}

@media (max-width: 767px) {
  body.info .contact-submit {
    justify-self: stretch;
  }
}