/* content.css — content/legal-laag (.content-*) bovenop raids-ui.css (--rui). Herbruikbaar door juridische pagina's, kennisbank, changelog, contact + hubs. */
.rui .content-wrap{max-width:960px;margin:0 auto;padding:20px 16px calc(112px + env(safe-area-inset-bottom,0px));overflow-x:clip;container-type:inline-size}
.rui .content-wrap.wide{max-width:1120px}
.rui .content-grid{display:grid;grid-template-columns:1fr;gap:22px}
@container(min-width:840px){.rui .content-grid{grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}}

/* Documentkop */
.rui .content-doc-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:22px;border:1px solid var(--rui-line);border-radius:var(--rui-r-4);
  background:radial-gradient(120% 140% at 100% 0%,var(--rui-accent-soft) 0%,transparent 55%),var(--rui-card);
  box-shadow:var(--rui-sh-1);margin-bottom:20px}
.rui .content-doc-head h1{font-size:clamp(22px,5cqi,32px);line-height:1.12;letter-spacing:-.01em;margin:0;font-family:var(--rui-font);font-weight:700;overflow-wrap:break-word;hyphens:auto}
.rui .content-doc-head>div:first-child{min-width:0}
.rui .content-doc-head .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--rui-muted);font-size:var(--rui-fs-sm);margin-top:10px}
.rui .content-doc-head .acts{display:flex;gap:8px;flex-wrap:wrap}

/* Sticky inhoudsopgave (desktop) */
.rui .content-toc{position:sticky;top:76px;align-self:start;font-size:var(--rui-fs-sm)}   /* 60px vaste header + 16px lucht */
.rui .content-toc .toc-lbl{font-family:var(--rui-font);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rui-faint);margin:0 0 8px 10px}
.rui .content-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:toc}
.rui .content-toc li{counter-increment:toc}
.rui .content-toc a{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-radius:var(--rui-r-2);color:var(--rui-muted);text-decoration:none;border-left:2px solid transparent;font-size:var(--rui-fs-sm);line-height:1.35;transition:all var(--rui-dur) var(--rui-ease)}
.rui .content-toc a::before{content:counter(toc);flex:0 0 auto;color:var(--rui-faint);font-family:var(--rui-font);font-weight:700;font-size:11px;min-width:14px}
.rui .content-toc a:hover{color:var(--rui-text);background:var(--rui-card-2)}
.rui .content-toc a.is-active{color:var(--rui-accent-strong);border-left-color:var(--rui-accent);background:var(--rui-accent-soft)}
.rui .content-toc a.is-active::before{color:var(--rui-accent-strong)}

/* Prose */
.rui .content-prose{max-width:72ch;min-width:0;color:var(--rui-text);font-size:var(--rui-fs-base);line-height:1.7;overflow-wrap:break-word}
.rui .content-prose h2{font-size:var(--rui-fs-xl);font-weight:700;margin:34px 0 10px;scroll-margin-top:20px;font-family:var(--rui-font);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rui .content-prose h3{font-size:var(--rui-fs-lg);font-weight:700;margin:22px 0 8px;scroll-margin-top:20px;font-family:var(--rui-font)}
.rui .content-prose h2:first-child{margin-top:0}
.rui .content-prose p{margin:0 0 14px}
.rui .content-prose ul,.rui .content-prose ol{margin:0 0 14px;padding-left:22px}
.rui .content-prose li{margin:4px 0}
.rui .content-prose a{color:var(--rui-accent-strong);text-decoration:none}
.rui .content-prose a:hover{text-decoration:underline}
.rui .content-prose strong{font-weight:700;color:var(--rui-text)}
.rui .content-prose blockquote{margin:14px 0;padding:10px 14px;border-left:3px solid var(--rui-accent-line);background:var(--rui-card-2);border-radius:var(--rui-r-2);color:var(--rui-muted)}
.rui .content-prose blockquote p:last-child{margin-bottom:0}
.rui .content-prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:var(--rui-fs-sm)}
.rui .content-prose th,.rui .content-prose td{border:1px solid var(--rui-line);padding:8px 10px;text-align:left;vertical-align:top}
.rui .content-prose th{background:var(--rui-card-2);font-family:var(--rui-font);font-weight:700}
.rui .content-prose .anchor{opacity:0;color:var(--rui-faint);text-decoration:none;font-weight:400;font-size:.8em;transition:opacity var(--rui-dur) var(--rui-ease)}
.rui .content-prose h2:hover .anchor,.rui .content-prose h3:hover .anchor{opacity:1}

/* Mobiel: ToC als accordion boven de prose; desktop-lijst verborgen */
.rui .content-toc-acc{display:block;margin-bottom:6px}
.rui .content-toc-desktop{display:none}
@container(min-width:840px){
  .rui .content-toc-acc{display:none}
  .rui .content-toc-desktop{display:block}
}

/* Hub-kaarten / kruislinks (bouwen op .rui-feature; extra hover-affordance) */
.rui .content-hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.rui .content-hubcard{display:block;text-decoration:none;color:inherit;transition:border-color var(--rui-dur) var(--rui-ease),transform var(--rui-dur) var(--rui-ease)}
.rui .content-hubcard:hover{border-color:var(--rui-accent-line);transform:translateY(-2px)}
.rui .content-hubcard .go{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:var(--rui-accent-strong);font-size:var(--rui-fs-sm);font-weight:600}
.rui .content-hubcard .go svg{width:14px;height:14px}

.rui .content-related-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:36px 0 2px}
.rui .content-related-head h2{margin:0;font-size:var(--rui-fs-lg);font-weight:700;font-family:var(--rui-font)}
.rui .content-related-head p{margin:2px 0 0;color:var(--rui-muted);font-size:var(--rui-fs-sm)}

/* Contact-CTA band (onderaan document) */
.rui .content-cta{margin-top:28px;border-radius:var(--rui-r-4);border:1px solid var(--rui-accent-line);background:var(--rui-accent-soft);padding:22px;text-align:center}
.rui .content-cta h2{margin:0 0 6px;font-family:var(--rui-font);font-weight:700;font-size:var(--rui-fs-lg)}
.rui .content-cta p{margin:0 0 16px;color:var(--rui-muted);font-size:var(--rui-fs-md)}

@media print{
  body{padding-top:0}
  .content-toc,.content-doc-head .acts,.rui-crumb{display:none!important}
  .rui .content-grid{grid-template-columns:1fr}
  .rui .content-prose a{text-decoration:underline}
}