/* De kleuren en vormen komen uit wizard.html, zodat de sprong van de site naar
   de wizard niet als een andere website voelt. Wijzig je ze hier, wijzig ze
   daar dan mee. */
:root {
    --primary: #E8734A;
    --primary-light: #FFF0EB;
    --secondary: #5B8EE6;
    --bg: #FFF8F2;
    --card: #FFFFFF;
    --text: #2D3436;
    --text-light: #636E72;
    --border: #E0D6CF;
    --radius: 14px;
    --shadow: 0 4px 24px rgba(0,0,0,0.07);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.overslaan {
    position: absolute; left: -9999px;
    background: var(--card); padding: 12px 16px; border-radius: var(--radius);
}
.overslaan:focus { left: 16px; top: 16px; z-index: 10; }

/* Kop en navigatie */
.kop {
    display: flex; flex-wrap: wrap; gap: 12px 20px;
    align-items: center; justify-content: space-between;
    padding: 16px max(16px, env(safe-area-inset-left)) 16px
             max(16px, env(safe-area-inset-right));
    max-width: 860px; margin: 0 auto;
}
/* Het woordmerk: het logo (assets/logo.png) op één regel, met het hartje op
   de plek van de U zoals in het kruiswoord van het logo. Zwarte letters en het
   rode hartje van het logo. Dezelfde vorm staat in wizard.html (.logo); wijzig
   je hem hier, wijzig hem daar dan mee. */
.merk {
    font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
    color: var(--text); text-decoration: none; white-space: nowrap;
}
.merk svg {
    display: inline-block; width: 0.62em; height: 0.58em;
    margin: 0 0.02em; vertical-align: -0.02em;
}
.kop nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.kop nav a { color: var(--text-light); text-decoration: none; font-size: 15px; }
.kop nav a:hover, .kop nav a[aria-current] { color: var(--text); }
.kop nav a[aria-current] { font-weight: 700; }

.knop-klein, .knop {
    background: var(--primary); color: #fff; text-decoration: none;
    border-radius: 100px; font-weight: 700; display: inline-block;
}
.knop-klein { padding: 8px 16px; font-size: 15px; }
.knop { padding: 15px 28px; font-size: 17px; }
.knop:hover, .knop-klein:hover { filter: brightness(0.95); }
.knop-uitleg { display: block; margin-top: 10px; font-size: 14px;
               color: var(--text-light); }

/* Inhoud */
main { max-width: 860px; margin: 0 auto;
       padding: 8px max(16px, env(safe-area-inset-left)) 48px
                max(16px, env(safe-area-inset-right)); }

section { margin: 40px 0; }
.kaart {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 24px; margin: 24px 0;
}

h1 { font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; margin: 24px 0 12px; }
h2 { font-size: 23px; line-height: 1.25; margin: 32px 0 10px; }
h3 { font-size: 18px; margin: 20px 0 6px; }
p, ul, ol { margin: 12px 0; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
a { color: var(--primary); }
.leid { font-size: 19px; color: var(--text-light); }
.klein { font-size: 14px; color: var(--text-light); }

.stappen { list-style: none; padding: 0; counter-reset: stap; }
.stappen li {
    counter-increment: stap; position: relative;
    padding: 0 0 0 44px; margin: 20px 0;
}
.stappen li::before {
    content: counter(stap);
    position: absolute; left: 0; top: 2px;
    width: 30px; height: 30px; border-radius: 100px;
    background: var(--primary-light); color: var(--primary);
    font-weight: 800; display: grid; place-items: center;
}

/* Veelgestelde vragen: uitklapbaar, en er kan er maar één open staan.
   Dat laatste doet de browser zelf via het `name`-kenmerk op <details> — geen
   JavaScript, wat ook de belofte op de privacypagina heel houdt dat er geen
   enkel script op deze site draait. Een browser die `name` nog niet kent, laat
   er meer dan één openstaan; dan werkt het minder mooi maar niet stuk. */
details.vraag {
    border-bottom: 1px solid var(--border);
}
details.vraag summary {
    cursor: pointer;
    list-style: none;                 /* het standaarddriehoekje weg */
    font-weight: 700;
    padding: 16px 34px 16px 0;
    position: relative;
}
details.vraag summary::-webkit-details-marker { display: none; }
details.vraag summary:hover { color: var(--primary); }
details.vraag summary:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
    border-radius: 4px;
}
/* Eigen teken rechts: een plus die een min wordt. Duidelijker dan een pijl,
   en het zegt "hier zit meer" in plaats van "hier ga je heen". */
details.vraag summary::after {
    content: "+";
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    font-size: 22px; font-weight: 400; line-height: 1;
    color: var(--primary);
}
details.vraag[open] summary::after { content: "–"; }
details.vraag[open] summary { color: var(--primary); }
.antwoord { padding: 0 34px 18px 0; }
.antwoord p { margin: 0; }

/* Voorbeeldplaten op de landingspagina. `beeld-duo` zet er twee naast
   elkaar (voorkant + opdracht); het onderschrift loopt onder beide door. */
figure.beeld { margin: 24px 0; }
figure.beeld img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
figure.beeld figcaption { font-size: 14px; color: var(--text-light); margin-top: 8px; }
figure.beeld-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
figure.beeld-duo figcaption { grid-column: 1 / -1; margin-top: 0; }
figure.beeld-smal { max-width: 420px; }

table { border-collapse: collapse; width: 100%; margin: 16px 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { font-size: 15px; color: var(--text-light); font-weight: 600; }

/* Een besluit dat nog niet genomen is. Alleen zichtbaar in een conceptbouw:
   build_site.py weigert te bouwen zolang dit ergens in de tekst staat. */
mark.open {
    background: #FFE9A8; color: #6b4b00; padding: 1px 6px;
    border-radius: 6px; font-size: 14px; font-weight: 700;
}

/* Voet */
.voet {
    border-top: 1px solid var(--border);
    max-width: 860px; margin: 0 auto;
    padding: 24px max(16px, env(safe-area-inset-left))
             max(24px, env(safe-area-inset-bottom))
             max(16px, env(safe-area-inset-right));
}
.voet nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.voet a { color: var(--text-light); text-decoration: none; font-size: 15px; }
.voet a:hover { color: var(--text); }
.colofon { font-size: 14px; color: var(--text-light); }

@media (max-width: 600px) {
    /* De knop in de kop verdwijnt op een telefoon: hij staat daar boven de
       titel én nog eens in de tekst eronder, en duwt het menu naar twee
       regels. De pagina zelf roept al op tot dezelfde stap. */
    .kop nav .knop-klein { display: none; }
    h1 { font-size: 27px; }
    h2 { font-size: 21px; }
    body { font-size: 16px; }
}