/* Stijl naar de stijlgids van de presentatie: papier, zwarte inkt, één rode lijn,
   rechte hoeken, veel wit. Geen lettertypen van derden: we gebruiken wat op het
   toestel staat en dicht bij Garamond en een humanistische schreefloze ligt. */
:root {
  --paper: #f6f2eb;
  --kraft: #d4c3a8;
  --ink: #1e1b17;
  --ink-muted: #554c43;
  --rood: #7f2a23;
  --hairline: #d8cfc2;
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Alegreya Sans", "Gill Sans", "Gill Sans MT", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.5;
}

main {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

h1 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.ondertitel {
  font-family: var(--sans);
  color: var(--rood);
  font-size: 1.15rem;
  margin: 0 0 2rem;
}

p { margin: 0 0 1rem; }

.inleiding { margin-bottom: 2.5rem; }

.stil, .hulp {
  color: var(--ink-muted);
  font-style: italic;
  font-size: 1rem;
}

/* Vragen */
.vraag {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
  padding: 1.75rem 0 1.5rem;
  min-width: 0;
}
.vraag[hidden] { display: none; }

.vraag legend, .vraag > label.kop {
  display: block;
  padding: 0;
  margin-bottom: 0.9rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.nr {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.25rem;
}

.optie {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  min-height: 2.75rem;
  cursor: pointer;
}
.optie input {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.2rem 0 0;
  accent-color: var(--ink);
}

input[type="text"], input[type="email"], textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fffdf9;
  border: 1px solid var(--ink-muted);
  border-radius: 0;
  padding: 0.65rem 0.75rem;
}
textarea { min-height: 6.5rem; resize: vertical; }
.kort { max-width: 24rem; }

input:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

details.toelichting { margin-top: 0.5rem; }
details.toelichting summary {
  cursor: pointer;
  color: var(--ink-muted);
  font-style: italic;
  font-size: 1rem;
  padding: 0.5rem 0;
}
details.toelichting textarea { min-height: 4.5rem; margin-top: 0.25rem; }

/* Knoppen */
button {
  font-family: var(--sans);
  font-size: 1.05rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.8rem 1.4rem;
  min-height: 3rem;
  cursor: pointer;
}
button[disabled] { opacity: 0.5; cursor: default; }
button.licht, a.licht {
  background: none;
  color: var(--ink-muted);
  border: 0;
  padding: 0.5rem 0;
  min-height: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  text-decoration: underline;
  cursor: pointer;
}

.rij { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.25rem; }

.code {
  font-family: var(--sans);
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  max-width: 13rem;
  text-align: center;
}

.melding {
  border-left: 2px solid var(--rood);
  padding: 0.25rem 0 0.25rem 0.9rem;
  margin: 1.25rem 0;
}

.slot { border-top: 1px solid var(--hairline); padding-top: 1.75rem; }

.status {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  margin: 2rem -1.25rem 0;
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* Paginavoet, zoals in de presentatie */
.voet {
  max-width: 38rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (min-width: 40rem) {
  main { padding-top: 4.5rem; }
  h1 { font-size: 2.4rem; }
}

/* Meekijken */
.breed { max-width: 72rem; }
h2 { font-family: var(--sans); font-weight: 500; font-size: 1.3rem; line-height: 1.25; margin: 2.25rem 0 0.75rem; }
h3 { font-family: var(--serif); font-weight: normal; font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.5rem; }
.voet a, main a { color: inherit; }
.blok { border-top: 1px solid var(--hairline); padding: 1.25rem 0; }
.klein { font-size: 0.95rem; color: var(--ink-muted); }
table { border-collapse: collapse; margin: 0.25rem 0 0.75rem; }
td, th { text-align: left; padding: 0.15rem 1.5rem 0.15rem 0; vertical-align: top; font-weight: normal; }
td.getal { font-family: var(--sans); text-align: right; padding-right: 0; }
ul.teksten { margin: 0.25rem 0 0.75rem; padding-left: 1.1rem; }
ul.teksten li { margin-bottom: 0.25rem; }
.kopje { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: 0.75rem 0 0.25rem; }
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2rem; }
.persoon { border-top: 1px solid var(--ink); padding: 0.75rem 0 1.25rem; font-size: 0.95rem; line-height: 1.35; }
.persoon h3 { font-family: var(--sans); font-size: 1rem; margin-bottom: 0.1rem; overflow-wrap: anywhere; }
.persoon dl { margin: 0.5rem 0 0; }
.persoon dt { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-top: 0.45rem; }
.persoon dd { margin: 0; overflow-wrap: anywhere; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1rem 0 0; }
.tabs button { background: none; color: var(--ink-muted); border: 0; border-bottom: 2px solid transparent; padding: 0.4rem 0; min-height: 0; }
.tabs button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--rood); }
button.rand { background: none; color: var(--ink); }
details.beheer { border-top: 1px solid var(--hairline); padding: 0.75rem 0; }
details.beheer summary { cursor: pointer; font-family: var(--sans); }
details.beheer label { display: block; margin: 0.9rem 0 0.25rem; }
select { font: inherit; padding: 0.55rem 0.5rem; border: 1px solid var(--ink-muted); border-radius: 0; background: #fffdf9; color: var(--ink); max-width: 100%; }
input[type="datetime-local"] { font: inherit; padding: 0.55rem 0.5rem; border: 1px solid var(--ink-muted); border-radius: 0; background: #fffdf9; }
textarea.json { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; min-height: 18rem; }
@media print { .tabs, .voet, button, details.beheer { display: none; } }

/* Vraag per keuze: per programma een eigen rijtje */
.deel { margin-bottom: 0.75rem; }
.deelkop { font-family: var(--sans); font-size: 1rem; margin: 0.75rem 0 0; }

/* Het mailadres in de voet blijft in gewone letters */
#voet-rechts { text-transform: none; letter-spacing: 0.02em; font-size: 0.85rem; }

/* De lijn boven een vraag loopt door, ook waar de vraagtekst (legend) staat */
.vraag legend { float: left; width: 100%; }
.vraag legend + * { clear: both; }