/* ==============================================================
   assets/css/pages.css — Eenvoudige inhoudspagina's (cookies, info)
   ============================================================== */
.page-hero{padding-block:clamp(24px,4vw,48px) 8px}
.page-title{font-size:clamp(2.4rem,6vw,4.2rem);margin:14px 0 18px}
.page-title .skew{padding:.06em .3em .1em}
.page-lead{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--text-2);font-weight:600;max-width:60ch;margin-bottom:22px}
.page-grid{display:grid;gap:18px;max-width:900px}

.cookie-group{padding:24px;border-width:2px}
.cookie-lime{border-color:color-mix(in srgb,var(--lime) 60%,transparent)}
.cookie-magenta{border-color:color-mix(in srgb,var(--magenta) 60%,transparent)}
.cookie-cyan{border-color:color-mix(in srgb,var(--cyan) 60%,transparent)}
.cookie-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cookie-head h2{font-size:1.4rem}
.pill-lime{background:var(--lime);color:var(--on-lime);border-color:transparent}
.cookie-intro{color:var(--text-2);font-weight:600;margin-bottom:10px}
.cookie-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.92rem}
.cookie-table th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.cookie-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.cookie-table tr:last-child td{border-bottom:0}
.cookie-table code{font-weight:800;color:var(--accent-text);background:var(--surface-2);padding:.15em .45em;border-radius:6px}
@media (max-width:600px){
  .cookie-table thead{display:none}
  .cookie-table tr{display:grid;gap:4px;padding:10px 0;border-bottom:1px solid var(--line)}
  .cookie-table td{border:0;padding:0}
}

/* ---------- 404 ---------- */
.nf{min-height:62vh;display:grid;place-items:center;text-align:center}
.nf-wrap{display:grid;justify-items:center;gap:18px}
.nf-code{display:flex;gap:10px;font-size:clamp(4.5rem,16vw,9rem);font-weight:900;font-style:italic;line-height:1}
.nf-code .skew{padding:.02em .22em .06em}
.nf-title{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.2}
.nf-text{color:var(--text-2);font-weight:600;max-width:52ch}
.nf-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}

/* ---------- Voor ouders / Privacy ---------- */
.info-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.info-toc a{display:inline-flex;align-items:center;gap:6px;padding:.45em .9em;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:.88rem;color:var(--text)}
.info-toc a:hover{border-color:var(--magenta)}
.info-block{padding:clamp(20px,3vw,32px);border-width:2px;scroll-margin-top:100px}
.info-c0{border-color:color-mix(in srgb,var(--lime) 55%,transparent)}
.info-c1{border-color:color-mix(in srgb,var(--magenta) 55%,transparent)}
.info-c2{border-color:color-mix(in srgb,var(--cyan) 55%,transparent)}
.info-c3{border-color:color-mix(in srgb,var(--yellow) 60%,transparent)}
.info-h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:14px}
.info-ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:var(--lime);color:var(--on-lime)}
.info-c1 .info-ico{background:var(--magenta);color:#fff}
.info-c2 .info-ico{background:var(--cyan);color:#07050c}
.info-c3 .info-ico{background:var(--yellow);color:#07050c}
.info-body{font-size:1.05rem;line-height:1.7;color:var(--text-2);font-weight:500;max-width:70ch}
.info-body > * + *{margin-top:.9em}
.info-body strong{color:var(--text);font-weight:800}
.info-body a{color:var(--accent-text-2,var(--magenta));font-weight:700;text-decoration:underline;text-underline-offset:3px}
.info-body ul{padding-left:1.2em;display:grid;gap:.45em}
.info-body li::marker{color:var(--magenta)}
.info-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px;background:var(--surface-2,var(--surface))}
.info-cta h2{font-size:1.3rem}
.info-cta p{color:var(--text-2);font-weight:600;margin-top:4px}
.info-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.info-updated{color:var(--muted);font-weight:600;font-size:.9rem}

/* ---------- Contact ---------- */
.ct-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start;max-width:1040px}
.ct-form{padding:clamp(20px,3vw,32px);display:grid;gap:18px}
.ct-field{display:grid;gap:8px}
.ct-field > label,.ct-legend{font-weight:800}
.ct-field small{color:var(--muted);font-weight:600}
.ct-field input,.ct-field select,.ct-field textarea{width:100%;min-height:50px;padding:12px 16px;border-radius:14px;font:inherit;font-weight:600;background:var(--bg);color:var(--text);border:2px solid var(--line-strong,var(--line))}
.ct-field textarea{min-height:160px;resize:vertical;line-height:1.5}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{outline:none;border-color:var(--cyan)}
.ct-field .is-invalid{border-color:var(--magenta)}
.ct-roles{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.ct-roles label{position:relative;cursor:pointer}
.ct-roles input{position:absolute;opacity:0}
.ct-roles span{display:inline-flex;align-items:center;gap:6px;padding:.55em 1em;border-radius:999px;border:2px solid var(--line);background:var(--bg);font-weight:700;font-size:.92rem}
.ct-roles input:checked + span{border-color:var(--magenta);background:color-mix(in srgb,var(--magenta) 12%,var(--bg))}
.ct-roles input:focus-visible + span{outline:3px solid var(--cyan);outline-offset:2px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-count{justify-self:end;color:var(--muted);font-size:.8rem;font-weight:700}
.ct-note{font-size:.88rem;color:var(--muted);font-weight:600}
.ct-errors{padding:14px 16px;border-radius:14px;border:2px solid var(--magenta);background:color-mix(in srgb,var(--magenta) 8%,transparent);font-weight:700}
.ct-errors ul{margin:6px 0 0;padding-left:1.2em}
.ct-side{display:grid;gap:16px}
.ct-side .card{padding:20px}
.ct-side h2{font-size:1.15rem;margin-bottom:8px}
.ct-side p{color:var(--text-2);font-weight:600}
.ct-side a{color:var(--accent-text-2,var(--magenta));font-weight:800}
.ct-kids{border:2px dashed color-mix(in srgb,var(--yellow) 70%,transparent)}
.ct-done{padding:clamp(24px,4vw,40px);text-align:center;display:grid;justify-items:center;gap:14px;max-width:640px}
.ct-done .info-ico{width:64px;height:64px}
@media (max-width:860px){.ct-wrap{grid-template-columns:minmax(0,1fr)}.ct-row{grid-template-columns:minmax(0,1fr)}}
fieldset.ct-field{border:0;padding:0;margin:0;min-width:0}
fieldset.ct-field legend{padding:0;margin-bottom:8px}
.ct-side h2{display:flex;align-items:center;gap:8px}
.ct-note{display:flex;align-items:flex-start;gap:8px}
.ct-note .ico{flex-shrink:0;margin-top:3px}
.ct-note a{color:var(--accent-text-2,var(--magenta));font-weight:800}