/* VO-Initiatives — juridische pagina's in het thema van de homepage.
   Laadt NA assets/styles.css (tokens, nav, knoppen komen daaruit). */

/* ---- paginakop ---- */
.page-header{
  text-align:center;background:none;color:var(--ink);
  padding:clamp(3.5rem,2.5rem + 3vw,6rem) clamp(20px,4vw,56px) clamp(2.5rem,2rem + 2vw,4rem);
  border-bottom:1px solid var(--line);
}
.page-header h1{
  font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);max-width:20ch;margin:0 auto .9rem;
}
.page-header p{color:var(--ink-2);font-size:15px;max-width:52ch;margin:0 auto}
.page-header .header-badge{
  display:inline-block;font-size:12px;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:100px;padding:6px 14px;margin-bottom:18px;
}

/* ---- inhoudskolom ---- */
.content{
  max-width:780px;margin:0 auto;padding:clamp(2.5rem,2rem + 2vw,4rem) 20px clamp(4rem,3rem + 3vw,6rem);
  color:var(--ink-2);font-size:15px;line-height:1.7;
}
.content h2{
  font-family:var(--serif);font-weight:600;letter-spacing:-.015em;color:var(--ink);
  font-size:1.5rem;margin:2.4rem 0 .8rem;line-height:1.15;
}
.content h2:first-child{margin-top:0}
.content h3{font-size:1.05rem;font-weight:600;color:var(--ink);margin:1.6rem 0 .5rem}
.content p{margin:.7rem 0}
.content ul,.content ol{margin:.7rem 0 .9rem;padding-left:1.4rem}
.content li{margin:.35rem 0}
.content a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.content a:hover{color:var(--ember)}
.content strong{color:var(--ink);font-weight:600}
.art-num{color:var(--ember);font-weight:600;font-family:var(--sans)}

/* ---- inhoudsopgave ---- */
.toc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 26px;margin:1.6rem 0 2.2rem;
}
.toc h2,.toc h3,.toc strong{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .7rem}
.toc ul,.toc ol{margin:0;padding-left:1.2rem}
.toc li{margin:.3rem 0}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--ember)}

/* ---- meta-kaartjes (versie, datum, …) ---- */
.doc-meta,.doc-meta-grid{display:flex;flex-wrap:wrap;gap:12px;margin:1.4rem 0}
.doc-meta-item{
  flex:1 1 180px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;font-size:13px;color:var(--ink-2);
}
.doc-meta-item strong{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}

/* ---- kaders ---- */
.highlight-box,.warning-box,.contact-box{
  border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:10px;
  background:var(--ember-soft);padding:16px 20px;margin:1.2rem 0;font-size:14px;
}
.contact-box{background:var(--surface-2);border-left-color:var(--line-strong)}
.highlight-box strong,.warning-box strong,.contact-box strong{color:var(--ink)}

/* ---- rechten-grid (privacy) ---- */
.rights-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:1.2rem 0}
.right-item{
  display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:13.5px;
}
.right-icon{color:var(--ember);flex:0 0 auto;font-weight:600}

/* ---- tabellen ---- */
.content table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:13.5px}
.content th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line-strong);
}
.content td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.content tr:last-child td{border-bottom:none}

/* ---- handtekeningblokken (DPA) ---- */
.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6rem 0}
.sig-party{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.sig-line{border-top:1px solid var(--line-strong);margin-top:56px;padding-top:8px;font-size:12.5px;color:var(--ink-3)}
.fill-block{
  background:var(--surface-2);border:1px dashed var(--line-dash);border-radius:8px;
  padding:10px 14px;margin:.5rem 0;font-size:13px;color:var(--ink-3);
}

/* ---- voettekst ---- */
footer,.footer-bottom{
  border-top:1px solid var(--line);text-align:center;
  padding:2rem 20px 2.5rem;font-size:12.5px;color:var(--ink-3);background:none;
}
footer a,.footer-bottom a{color:var(--ink-2);text-decoration:none;margin:0 8px}
footer a:hover,.footer-bottom a:hover{color:var(--ember)}

@media(max-width:700px){
  .rights-grid,.sig-grid{grid-template-columns:1fr}
  .content{font-size:14.5px}
}