/* =========================================================
   Noventra — legal pages (privacyverklaring and privacy statement).
   Shared light-page blocks are in light.css.
   ========================================================= */

/* ---- hero: title, version and the other language / pdf ---- */
.legal-hero h1{max-width:20ch; font-size:clamp(2.2rem,5vw,3.8rem)}
.legal-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1.6rem}
.legal-version{margin-right:.6rem; font-size:.9rem; color:var(--muted)}
.light-main .legal-chip{display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:999px;
                        font-size:.86rem; font-weight:600; color:var(--ink); text-decoration:none;
                        background:var(--surface); border:1px solid var(--line); transition:border-color .2s, color .2s}
.light-main .legal-chip:hover{border-color:rgba(243,56,1,.4); color:var(--red)}
.legal-chip-pdf::before{content:"↓"; color:var(--red); font-weight:800}

/* ---- contents beside the text ---- */
.legal-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.6rem,3vw,3.4rem)}
@media(min-width:960px){ .legal-layout{grid-template-columns:260px minmax(0,1fr); align-items:start} }
.legal-toc > p{margin:0 0 .7rem; font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.legal-toc ol{list-style:none; margin:0; padding:0; display:grid; gap:.15rem}
.light-main .legal-toc a{display:grid; grid-template-columns:auto 1fr; gap:.7rem; padding:.55rem .75rem; border-radius:12px;
                         font-size:.88rem; font-weight:600; line-height:1.35; color:var(--text); text-decoration:none;
                         transition:background .2s, color .2s}
.legal-toc a span{font-size:.75rem; font-weight:800; color:var(--red)}
.light-main .legal-toc a:hover{background:var(--paper); color:var(--ink)}
@media(min-width:960px){ .legal-toc{position:sticky; top:calc(var(--nav-h) + 1.6rem)} }
@media(max-width:959px){
  .legal-toc{padding:1.2rem; border-radius:18px; background:var(--paper); border:1px solid var(--line)}
}

/* ---- the statement itself ---- */
.legal{max-width:780px}
.legal h2{margin:3.4rem 0 1rem; padding-top:2.2rem; border-top:1px solid var(--line);
          font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.15; letter-spacing:-.03em; font-weight:800; color:var(--ink);
          scroll-margin-top:calc(var(--nav-h) + 1.4rem)}
.legal > h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legal h3{margin:2rem 0 .6rem; font-size:1.08rem; color:var(--ink)}
.legal p{margin:0 0 1rem; line-height:1.78; color:var(--text)}
.legal ul{margin:0 0 1.2rem; padding-left:1.2rem}
.legal li{margin-bottom:.5rem; line-height:1.72; color:var(--text)}
.legal li::marker{color:var(--red)}
.legal strong{color:var(--ink)}

/* ---- tables ---- */
.table-wrap{margin:1.2rem 0 1.6rem; overflow-x:auto; border-radius:16px; background:var(--surface); border:1px solid var(--line)}
.legal table{width:100%; min-width:540px; border-collapse:collapse; font-size:.92rem}
.legal th{padding:.85rem 1rem; text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
          color:var(--ink); background:var(--paper); border-bottom:1px solid var(--line)}
.legal td{padding:.85rem 1rem; vertical-align:top; line-height:1.6; color:var(--text); border-bottom:1px solid var(--line)}
.legal tr:last-child td{border-bottom:0}
.legal td:first-child{font-weight:600; color:var(--ink)}
/* two-column table without header (company details) */
.legal table.details{min-width:0}
.legal table.details td:first-child{width:34%; font-weight:500; color:var(--muted)}
.legal table.details td:last-child{font-weight:600; color:var(--ink)}

.legal-outro{margin:3rem 0 0 !important; padding:1.3rem 1.4rem; border-radius:16px; background:var(--paper);
             border:1px solid var(--line); font-size:.92rem}