@import url("/lettertype.css");

/* Huisstijl VIS Trainingen v2. Bron van waarheid: core.huisstijl in de database.
   Oranje is de vlakkleur, niet de tekstkleur: als tekst op wit haalt het maar
   2,76 op 1. Voor links en accenttekst staat daarom een donkerdere oker. */
:root {
  --oranje: #D98A2C;
  --oranje-donker: #C0761F;
  --oker-tekst: #A5671E;
  --paars: #6B3FA2;
  --paars-mist: #F1EBF8;
  --inkt: #1A1A1A;
  --wit: #FFFFFF;
  --grijsgroen: #3F4A45;
  --gedempt: #5B5B5B;
  --lijn: #E6E1DA;
  --zand: #FBF8F4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--inkt);
  font: 400 17px/1.65 "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 56px 20px 96px; }

header.kop { margin-bottom: 40px; }
.merk {
  display: inline-block; margin: 0; text-decoration: none;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--inkt); background: var(--oranje);
  padding: 7px 16px; border-radius: 999px;
}

h1 { font-size: 42px; font-weight: 300; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.015em; }
h2 { font-size: 22px; font-weight: 500; margin: 40px 0 12px; }
p { margin: 0 0 16px; }
.lead { font-size: 19px; color: var(--gedempt); font-weight: 400; }

a { color: var(--oker-tekst); text-underline-offset: 3px; }
a:hover { color: var(--inkt); }

code {
  font: 500 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--zand); padding: 2px 8px; border-radius: 999px;
}

/* Zachte tekstballon: rond, met een punt linksonder. */
.kaart {
  background: var(--zand); border: 1px solid var(--lijn);
  border-radius: 24px; padding: 26px 28px; margin: 0 0 20px;
  position: relative;
}
.kaart::after {
  content: ""; position: absolute; left: 34px; bottom: -11px;
  width: 22px; height: 22px; background: var(--zand);
  border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
  border-bottom-right-radius: 6px; transform: rotate(45deg);
}
.kaart p:last-child { margin-bottom: 0; }

label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.hint { font-size: 15px; color: var(--gedempt); margin: 0 0 8px; }
.veld { margin: 0 0 18px; }

textarea {
  width: 100%; padding: 16px 18px; font: inherit; font-size: 16px;
  border: 2px solid var(--lijn); border-radius: 20px;
  background: var(--wit); color: inherit; resize: vertical; min-height: 116px;
}
textarea::placeholder { color: #8A8A8A; }
textarea:hover { border-color: #D6CFC5; }

:focus-visible { outline: 3px solid var(--paars); outline-offset: 3px; }

button {
  font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  background: var(--oranje); color: var(--inkt);
  border: none; border-radius: 999px; padding: 13px 30px;
}
button:hover:not(:disabled) { background: var(--oranje-donker); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.knoppen { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.melding {
  padding: 14px 20px; border-radius: 20px; margin: 0 0 20px; font-size: 15px;
  background: var(--paars-mist); color: var(--inkt);
  border-left: 4px solid var(--paars);
}

.bronlijst { list-style: none; padding: 0; margin: 0; }
.bronlijst li {
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
  font-size: 15px; display: flex; gap: 12px; align-items: baseline;
}
.bronlijst li:last-child { border-bottom: none; }
.bronnummer {
  flex: none; width: 26px; height: 26px; line-height: 26px; text-align: center;
  font-weight: 600; font-size: 13px; color: var(--inkt);
  background: var(--oranje); border-radius: 50%;
}
.soort { color: var(--gedempt); font-size: 13px; }
mark.verwijzing {
  background: var(--oranje); color: var(--inkt);
  font-weight: 600; font-size: 12px; padding: 2px 7px; border-radius: 999px;
  vertical-align: 1px;
}

.uitleg { margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--lijn); }
.uitleg h2:first-child { margin-top: 0; }
.uitleg p { font-size: 16px; color: var(--gedempt); }
.stappen { counter-reset: stap; list-style: none; padding: 0; margin: 0 0 8px; }
.stappen li {
  counter-increment: stap; position: relative;
  padding: 0 0 20px 52px; font-size: 16px; color: var(--gedempt);
}
.stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  background: var(--paars); color: var(--wit);
  border-radius: 50%; font-weight: 600; font-size: 15px;
}
.stappen strong { color: var(--inkt); font-weight: 600; }

footer {
  margin-top: 56px; background: var(--grijsgroen); color: var(--wit);
  border-radius: 24px; padding: 24px 28px; font-size: 15px;
}
footer p { margin: 0; }
footer a { color: var(--wit); }

.verborgen { display: none; }

@media (max-width: 560px) {
  h1 { font-size: 32px; }
  .wrap { padding: 36px 18px 72px; }
}

pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font: 400 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--inkt);
}

.stalen { list-style: none; padding: 0; margin: 0 0 8px; }
.staal { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.staal:last-child { border-bottom: none; }
.staal .vlak { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lijn); }
.staal strong { display: block; font-weight: 600; font-size: 16px; }
.staal p { margin: 4px 0 0; font-size: 15px; color: var(--gedempt); }
.kopieer-klein {
  font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--zand); color: var(--inkt); border: 1px solid var(--lijn);
  border-radius: 999px; padding: 5px 12px; margin-top: 6px; cursor: pointer;
}
.kopieer-klein:hover { background: var(--paars-mist); border-color: var(--paars); }

/* De navigatie is het programma van de middag. Op een breed scherm staat het als
   vaste kolom naast de tekst, op een telefoon achter een knop, want daar is geen
   ruimte ernaast. */
.programma-knop {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; margin: 16px 0 0;
  text-align: left; font-size: 15px; font-weight: 600;
  background: var(--zand); color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: 18px; padding: 13px 18px;
}
.programma-knop::after { content: "openen"; font-weight: 400; font-size: 14px; color: var(--gedempt); }
.kop.open .programma-knop::after { content: "sluiten"; }

.tijdlijn { display: none; flex-direction: column; gap: 4px; margin: 10px 0 0; padding: 0; }
.kop.open .tijdlijn { display: flex; }

.blok {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline;
  padding: 9px 14px; border: 1px solid transparent; border-radius: 14px;
  text-decoration: none; color: var(--inkt);
}
a.blok:hover { background: var(--paars-mist); }
.blok-tijd { font-size: 13px; font-weight: 600; color: var(--gedempt); }
.blok-naam { font-size: 15px; font-weight: 600; line-height: 1.35; }
.blok-stil { color: var(--gedempt); }
.blok-stil .blok-naam { font-weight: 500; }
.blok.geweest { opacity: 0.45; }
.blok.nu { background: var(--oranje); border-color: var(--oranje); opacity: 1; }
.blok.nu .blok-tijd { color: var(--inkt); }
.blok.nu .blok-tijd::after { content: " nu"; }
a.blok[aria-current="page"] { border-color: var(--paars); }
a.blok[aria-current="page"] .blok-naam { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 920px) {
  .wrap {
    max-width: 1120px; display: grid; gap: 56px; align-items: start;
    grid-template-columns: 244px minmax(0, 700px);
  }
  .kop { position: sticky; top: 32px; margin-bottom: 0; }
  .programma-knop { display: none; }
  .tijdlijn { display: flex; }
  .blok { padding: 7px 12px; }
  .blok-naam { font-size: 14px; }
}

/* Programma: tijd en blok onder elkaar op een telefoon, naast elkaar zodra het past. */
.programma { list-style: none; padding: 0; margin: 0; }
.programma li { padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.programma li:last-child { border-bottom: none; }
.tijd {
  display: inline-block; margin-bottom: 6px;
  font-weight: 600; font-size: 14px; color: var(--inkt);
  background: var(--oranje); padding: 5px 14px; border-radius: 999px;
}
.programma h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.programma p { margin: 0; font-size: 16px; color: var(--gedempt); }

.stap-kop { display: flex; align-items: baseline; gap: 10px; }

.prompt {
  background: var(--zand); border: 1px solid var(--lijn);
  border-radius: 20px; padding: 20px; margin: 0 0 12px;
}
.prompt pre { font-size: 13.5px; }
.invulveld { color: var(--paars); font-weight: 600; }
button.gelukt { background: var(--paars); color: var(--wit); }

@media (min-width: 620px) {
  .programma li { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
  .tijd { margin-bottom: 0; }
}

@media (max-width: 480px) {
  .nav { gap: 6px; }
  .nav a { padding: 9px 13px; font-size: 14px; }
  .wrap { padding-top: 28px; }
}

.feiten { list-style: none; padding: 0; margin: 0 0 8px; }
.feiten li {
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
  font-size: 16px; color: var(--gedempt);
}
.feiten li:last-child { border-bottom: none; }
.etiket {
  display: inline-block; min-width: 122px;
  font-weight: 600; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--inkt);
}
.programma h3 a { text-decoration: none; }
.programma h3 a:hover { text-decoration: underline; }

.voorbeeld { position: relative; padding-top: 34px; }
.voorbeeld.goed { border-left: 4px solid var(--paars); }
.voorbeeld.fout { border-left: 4px solid var(--source-clay, #A8502B); opacity: 0.85; }
.etiket-klein {
  position: absolute; top: 12px; left: 20px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--gedempt);
}
.voorbeeld pre { font-size: 14px; }
.voorbeeld p { margin: 0; font-size: 16px; color: var(--inkt); }