/* N'ART Enquête — opmaak in de stijl van de systeemkaart. Gebruikt de themakleuren als die er zijn. */
.nart-enq {
  --e-papier: var(--wp--preset--color--papier, #f1eadb);
  --e-inkt: var(--wp--preset--color--inkt, #050606);
  --e-label: var(--wp--preset--color--label, #ffffff);
  --e-grijs: var(--wp--preset--color--grijs, #55524b);
  --e-serif: var(--wp--preset--font-family--bodoni, "Bodoni Moda", Didot, Georgia, serif);
  --e-sans: var(--wp--preset--font-family--jost, Jost, Futura, system-ui, sans-serif);
  max-width: 820px;
  margin-top: 48px;
  color: var(--e-inkt);
  font-family: var(--e-sans);
}
.nart-enq * { box-sizing: border-box; }
.nart-enq [hidden] { display: none !important; }

/* ---------- voortgang: de keten ---------- */
.nart-enq-keten { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--e-inkt); }
.nart-enq-keten li { position: relative; margin: 0; padding-top: 14px; font-size: 12px; letter-spacing: .06em; color: var(--e-grijs); min-width: 0; }
.nart-enq-keten .knoop { position: absolute; top: -6px; left: 0; width: 11px; height: 11px; background: var(--e-papier); border: 1.5px solid var(--e-inkt); }
.nart-enq-keten .klaar .knoop, .nart-enq-keten .nu .knoop { background: var(--e-inkt); }
.nart-enq-keten .nu .knoop::after { content: ""; position: absolute; left: 12px; top: 0; width: 9px; height: 8px; background: repeating-linear-gradient(90deg, var(--e-inkt) 0 1.5px, transparent 1.5px 3px); }
.nart-enq-keten .nu { color: var(--e-inkt); font-weight: 500; }
.nart-enq-keten .naam { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
@media (max-width: 640px) {
  .nart-enq-keten .naam { display: none; }
  .nart-enq-keten .nu .naam { display: block; position: absolute; left: 0; white-space: nowrap; overflow: visible; }
  .nart-enq-keten { margin-bottom: 52px; }
}

/* ---------- koppen ---------- */
.nart-enq-titel { font: 700 clamp(1.6rem, 3.4vw, 2.3rem)/1.1 var(--e-serif); margin: 0; outline: none; }
.nart-enq-uitleg { margin: 14px 0 0; max-width: 36em; }
.nart-enq-vragen { display: grid; gap: 44px; margin-top: 36px; }

/* ---------- vragen ---------- */
.nart-enq-vraag { border: 0; margin: 0; padding: 0 0 0 20px; border-left: 1px solid var(--e-inkt); min-width: 0; }
.nart-enq-vraag legend { padding: 0; margin: 0 0 14px; font: 700 1.2rem/1.3 var(--e-serif); }
.nart-enq-vraag .help { margin: -6px 0 14px; font-size: 14.5px; color: var(--e-grijs); max-width: 40em; }
.nart-enq-vraag.is-test { border-left-style: dashed; }
.nart-enq-vraag.is-test legend { font-style: italic; font-weight: 500; }
.nart-enq-vraag .fout { margin: 8px 0 0; font-size: 14px; font-weight: 500; min-height: 0; }
.nart-enq-vraag .fout:empty { display: none; }
.nart-enq-vraag.heeft-fout { border-left-width: 3px; padding-left: 18px; }

.nart-enq-opties { display: grid; gap: 4px; }
.nart-enq-optie { display: flex; align-items: flex-start; gap: 12px; padding: 7px 10px 7px 0; cursor: pointer; line-height: 1.4; max-width: 44em; }
.nart-enq-optie:hover .tekst { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px; }
.nart-enq input[type="radio"], .nart-enq input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nart-enq .vakje { flex: none; width: 16px; height: 16px; margin-top: 3px; border: 1.5px solid var(--e-inkt); background: var(--e-label); position: relative; }
.nart-enq input[type="radio"] + .vakje { border-radius: 50%; }
.nart-enq input:checked + .vakje { background: var(--e-inkt); }
.nart-enq input[type="radio"]:checked + .vakje { box-shadow: inset 0 0 0 3px var(--e-label); }
.nart-enq input[type="checkbox"]:checked + .vakje::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 9px; border: solid var(--e-label); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nart-enq input:focus-visible + .vakje { outline: 2px solid var(--e-inkt); outline-offset: 3px; }
.nart-enq-anders { padding: 4px 0 6px 28px; }

.nart-enq input[type="text"], .nart-enq input[type="email"], .nart-enq textarea {
  width: 100%; max-width: 36em; font: inherit; color: var(--e-inkt); background: var(--e-label);
  border: 0; border-bottom: 1px solid var(--e-inkt); border-radius: 0; padding: 10px 12px;
}
.nart-enq textarea { max-width: 44em; resize: vertical; min-height: 110px; }
.nart-enq input[type="text"]:focus, .nart-enq input[type="email"]:focus, .nart-enq textarea:focus { outline: 2px solid var(--e-inkt); outline-offset: 2px; }
.nart-enq-veld { display: grid; gap: 6px; }
.nart-enq-veld label { font: 700 13px/1 var(--e-serif); letter-spacing: .08em; text-transform: uppercase; }
.nart-enq-veld .fout { margin: 0; font-size: 14px; font-weight: 500; }
.nart-enq-veld .fout:empty { display: none; }

/* ---------- raster ---------- */
.nart-enq-raster { display: grid; gap: 0; overflow-x: auto; }
.nart-enq-raster .kop, .nart-enq-raster .rij { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(var(--kolommen), minmax(60px, 1fr)); align-items: center; }
.nart-enq-raster .kop span { font-size: 12px; letter-spacing: .04em; color: var(--e-grijs); text-align: center; padding: 0 4px 8px; line-height: 1.2; }
.nart-enq-raster .rij { border-top: 1px dashed var(--e-inkt); padding: 6px 0; }
.nart-enq-raster .rij:last-child { border-bottom: 1px dashed var(--e-inkt); }
.nart-enq-raster .rijnaam { font-size: 15px; line-height: 1.3; padding-right: 10px; }
.nart-enq-raster .cel { display: flex; justify-content: center; padding: 8px 0; cursor: pointer; }
.nart-enq-raster .cel .vakje { margin-top: 0; }
.nart-enq-raster .kolnaam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 700px) {
  .nart-enq-raster .kop { display: none; }
  .nart-enq-raster .rij { grid-template-columns: 1fr; padding: 12px 0; }
  .nart-enq-raster .rijnaam { font-weight: 500; margin-bottom: 6px; }
  .nart-enq-raster .cel { justify-content: flex-start; gap: 12px; padding: 5px 0; }
  .nart-enq-raster .cel .vakje { margin-top: 2px; }
  .nart-enq-raster .kolnaam { position: static; width: auto; height: auto; clip: auto; font-size: 15px; }
}

/* ---------- knoppen ---------- */
.nart-enq-knoppen { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--e-inkt); }
.nart-enq-verder { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 220px;
  background: var(--e-inkt); color: var(--e-label); border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  font: 500 14px/1 var(--e-sans); letter-spacing: .16em; text-transform: uppercase; padding: 18px 18px 18px 20px; }
.nart-enq-verder:hover { background: #2b2b28; color: var(--e-label); }
.nart-enq-verder:disabled { opacity: .55; cursor: wait; }
.nart-enq-verder .pijl { display: inline-flex; gap: 2px; align-items: center; }
.nart-enq-verder .pijl::before { content: ""; width: 11px; height: 11px; background: currentColor; }
.nart-enq-verder .pijl::after { content: ""; width: 9px; height: 11px; background: repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 3px); }
.nart-enq-terug { background: none; border: 0; padding: 10px 0; cursor: pointer; color: var(--e-inkt); font: 500 14px/1 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.nart-enq-verder:focus-visible, .nart-enq-terug:focus-visible { outline: 2px solid var(--e-inkt); outline-offset: 3px; }
.nart-enq-melding { margin: 18px 0 0; font-weight: 500; }
.nart-enq-melding:empty { display: none; }

/* ---------- start ---------- */
.nart-enq-start { border-left: 1px solid var(--e-inkt); padding-left: 20px; }
.nart-enq-start .vak { display: inline-block; margin: 0 0 18px; background: var(--e-label); font: 700 12.5px/1 var(--e-serif); letter-spacing: .09em; text-transform: uppercase; padding: 9px 12px 8px; border-bottom: 1px solid var(--e-inkt); }
.nart-enq-feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 38em; }
.nart-enq-feiten li { display: flex; gap: 10px; align-items: baseline; margin: 0; }
.nart-enq-feiten li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--e-inkt); transform: translateY(-2px); }
.nart-enq-testnoot { margin: 18px 0 0; padding: 10px 12px; background: var(--e-label); border-bottom: 1px solid var(--e-inkt); font-size: 14.5px; max-width: 40em; }
.nart-enq-knoppen.start { margin-top: 32px; }
.nart-enq-dicht { font: italic 500 1.3rem/1.3 var(--e-serif); }

/* honingpot */
.nart-enq-pot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
  .nart-enq-verder { min-width: 0; flex: 1; }
  .nart-enq-vraag { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .nart-enq * { scroll-behavior: auto !important; } }

/* tijdens het invullen: de grote kop van de pagina inklappen */
body.nart-enq-bezig .nart-held > h1, body.nart-enq-bezig .nart-held > .nart-intro { display: none; }
body.nart-enq-bezig .nart-enq { margin-top: 8px; }