/* =========================================================
   De Lesbrigade, lange teksten: algemene voorwaarden en privacy
   Laadt na stijl.css, alleen op /voorwaarden.html en /privacy.html.
   Leunt op de tokens, labels en knoppen van de homepage. Leesbaar
   op papier: de printstijl onderaan laat alleen de tekst staan.
   ========================================================= */

.jur{padding-top:calc(76px + clamp(28px,4.4vw,68px))}

/* ---------- kop ---------- */
.jur-kop{margin-bottom:clamp(40px,5vw,72px)}
.jur-kop h1{font-size:clamp(36px,4.6vw,60px);line-height:1.05;letter-spacing:-.01em;margin:0 0 18px;max-width:20ch;text-wrap:balance}
.jur-kop .label{color:var(--accent-tekst)}
.jur-kop .lede{max-width:56ch}

/* versie en datum: twee regels op één basislijn, als de praktisch-lijst */
.jur-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;margin:24px 0 0;
  font-size:15px;color:var(--text-secondary);
}
.jur-meta div{display:flex;align-items:baseline;gap:8px}
.jur-meta dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.jur-meta dd{margin:0;font-weight:700;color:var(--text-primary)}

/* Concept: dezelfde gestippelde rand als de plekken die nog ingevuld moeten
   worden (portretten), zodat het leest als "nog niet af", niet als waarschuwing. */
.jur-concept{
  margin-top:28px;max-width:720px;padding:18px 22px;
  background:var(--panel);border:1px dashed var(--text-secondary);border-radius:6px;
}
.jur-concept strong{display:block;font-family:var(--display);font-weight:600;font-size:18px;color:var(--cta);margin-bottom:4px}
.jur-concept p{color:var(--text-secondary);max-width:64ch}

/* ---------- inhoud en tekst naast elkaar ---------- */
.jur-grid{
  display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);
  gap:clamp(36px,6vw,96px);align-items:start;
}

.jur-inhoud{
  position:sticky;top:100px;max-height:calc(100vh - 124px);max-height:calc(100svh - 124px);overflow:auto;
  padding:4px 4px 8px 0;
}
.jur-inhoud-kop{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid var(--cta);
}
.jur-inhoud ol{list-style:none;margin:0;padding:0;counter-reset:inhoud}
.jur-inhoud li{counter-increment:inhoud}
.jur-inhoud a{
  display:grid;grid-template-columns:2.1em 1fr;align-items:baseline;padding:6px 0;
  font-size:15px;line-height:1.35;color:var(--text-secondary);text-decoration:none;
  transition:color .25s var(--ease);
}
.jur-inhoud a::before{content:counter(inhoud) ".";font-weight:700;color:var(--text-secondary)}
.jur-inhoud.zonder-nummers a{grid-template-columns:1fr}
.jur-inhoud.zonder-nummers a::before{content:none}
.jur-inhoud a:hover{color:var(--cta);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--accent)}

/* printen is een bijzaak: dezelfde knop, maar alleen de rand (zoals .btn-rand op de workshoppagina) */
.jur-print{margin-top:20px;background:transparent;color:var(--cta);box-shadow:inset 0 0 0 2px var(--cta)}
.jur-print:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--cta-hover),0 8px 22px rgba(3,40,103,.22)}
.jur-print svg{width:16px;height:16px;margin-right:8px;flex:none;vertical-align:-2px}

/* ---------- lopende tekst ---------- */
.jur-tekst{min-width:0}
.jur-artikel{padding-top:clamp(36px,4vw,52px);margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--lijn)}
.jur-artikel:first-child{padding-top:0;margin-top:0;border-top:0}
/* de kolom voor de nummers: artikelnummer in de kop en lidnummers staan recht onder elkaar */
.jur-tekst{--nr-kolom:52px}
.jur-artikel h2{
  display:flex;align-items:baseline;
  font-size:clamp(24px,2.4vw,30px);line-height:1.18;margin:0 0 20px;max-width:30ch;
}
.jur-nr{
  flex:0 0 var(--nr-kolom);font-family:var(--brood);font-weight:700;font-size:17px;color:var(--accent-tekst);
  font-variant-numeric:tabular-nums;
}
.jur-artikel h3{font-size:20px;line-height:1.25;margin:28px 0 10px;max-width:40ch}

.jur-tekst p,.jur-tekst li,.jur-tekst dd{max-width:62ch;text-wrap:pretty}
/* ruimte tussen blokken: elk blok na het vorige, binnen een artikel en binnen een lid */
.jur-artikel > * + *,.lid > div > * + *{margin-top:14px}
.jur-artikel > h2 + *{margin-top:0}
.jur-artikel > * + h3{margin-top:30px}
.jur-artikel > h3 + *{margin-top:0}
.jur-tekst a{
  color:var(--cta);font-weight:700;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--lijn-sterk);
  transition:text-decoration-color .25s var(--ease);overflow-wrap:anywhere;
}
.jur-tekst a:hover{text-decoration-color:var(--cta)}

/* een lid van een artikel: nummer in de marge, tekst op dezelfde basislijn */
.lid{display:grid;grid-template-columns:var(--nr-kolom) minmax(0,62ch);align-items:baseline}
.lid-nr{font-size:14px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.lid > :last-child{min-width:0}

.jur-lijst{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.jur-lijst li{position:relative;padding-left:20px}
.jur-lijst li::before{
  content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;
  background:var(--perzik);box-shadow:inset 0 0 0 1.5px var(--lijn-sterk);
}

/* nog te controleren door jurist, boekhouder of Saskia: klein, zichtbaar, rustig */
.jur-check{
  display:inline-block;margin-left:6px;padding:0 7px;border:1px dashed var(--text-secondary);border-radius:4px;
  font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.6;color:var(--text-secondary);
  white-space:nowrap;vertical-align:1px;
}

/* ---------- tabel: annuleren ---------- */
.jur-tabel-plek{overflow-x:auto;max-width:62ch}
.lid .jur-tabel-plek{margin-top:18px}
.jur-tabel{width:100%;border-collapse:collapse;font-size:16px}
.jur-tabel caption{text-align:left;font-family:var(--display);font-weight:600;font-size:17px;color:var(--cta);padding-bottom:8px}
.jur-tabel th{
  text-align:left;padding:10px 16px 10px 0;border-bottom:2px solid var(--cta);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);
}
.jur-tabel td{padding:14px 16px 14px 0;border-bottom:1px solid var(--lijn);vertical-align:baseline}
.jur-tabel td:first-child{min-width:14ch}
.jur-tabel td:last-child{font-weight:700;color:var(--text-primary)}

/* ---------- modelformulier: een vel dat je kunt printen en invullen ---------- */
.jur-formulier{
  max-width:62ch;padding:clamp(20px,3vw,30px);
  background:var(--panel);border:1px solid var(--lijn);border-radius:6px;
}
.jur-formulier h3{margin-top:0}
.jur-formulier .klein{font-size:15px;color:var(--text-secondary)}
.jur-formulier ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.jur-formulier li{max-width:none}
.jur-formulier .invul{display:block;margin-top:2px;min-height:1.6em;border-bottom:1px dotted var(--lijn-sterk)}

/* ---------- privacy: per doel een blok met een lijst op de basislijn ---------- */
.jur-doel{padding:22px 0 20px;border-top:1px solid var(--lijn)}
.jur-doel:first-of-type{border-top:2px solid var(--cta)}
.jur-doel h3{margin:0 0 12px}
.jur-dl{margin:0;display:grid;gap:10px}
.jur-dl div{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:4px 20px;align-items:baseline}
.jur-dl dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.jur-dl dd{margin:0}

/* ---------- smalle schermen ---------- */
@media (max-width:900px){
  .jur-grid{grid-template-columns:1fr;gap:40px}
  .jur-inhoud{
    position:static;max-height:none;overflow:visible;
    padding:18px 20px 12px;background:var(--panel);border:1px solid var(--lijn);border-radius:6px;
  }
  .jur-inhoud ol{columns:2;column-gap:28px}
  .jur-inhoud li{break-inside:avoid}
}
@media (max-width:600px){
  .jur-inhoud ol{columns:1}
  .jur-tekst{--nr-kolom:44px}
  .lid{grid-template-columns:var(--nr-kolom) minmax(0,1fr)}
  .jur-dl{gap:16px}
  .jur-dl div{grid-template-columns:1fr;gap:2px}
}
@media (pointer:coarse){
  .jur-inhoud a{min-height:44px;align-content:center}
}

/* ---------- printen en bewaren ----------
   Alleen de tekst: geen nav, voet, korrel, zweefsel of inhoudsopgave. De
   entrees van site.js staan op papier altijd in hun eindstand. */
@media print{
  @page{margin:18mm 16mm}
  html,body{background:#fff !important;color:#000}
  body{font-size:11pt;line-height:1.5}
  .nav,.skip,.korrel,.zweefsel,.zweefsel-gloed,.voortgang,.sla-over,.voet,.jur-inhoud,.jur-print{display:none !important}
  .op{opacity:1 !important;transform:none !important}
  .sectie{padding:0 !important;background:none !important;border:0 !important}
  .sectie > *:not(.sr){max-width:none}
  .jur-grid{display:block}
  .jur-kop{margin-bottom:10mm}
  .jur-kop h1{font-size:24pt;max-width:none}
  .jur-kop .lede{font-size:12pt;color:#000}
  .jur-concept{background:none;border:1px solid #000}
  h1,h2,h3{color:#000;break-after:avoid}
  .jur-artikel{padding-top:6mm;margin-top:6mm;border-top-color:#999}
  .jur-artikel h2{font-size:15pt}
  .jur-nr,.lid-nr,.label,.jur-meta,.jur-check,.jur-concept p,.jur-dl dt{color:#000}
  .jur-tekst p,.jur-tekst li,.jur-tekst dd{max-width:none}
  .jur-tekst{--nr-kolom:12mm}
  .lid{grid-template-columns:var(--nr-kolom) minmax(0,1fr)}
  .jur-nr{font-size:11pt}
  .lid,.jur-tabel tr,.jur-doel,.jur-formulier{break-inside:avoid}
  .jur-tekst a{color:#000;text-decoration:underline;font-weight:400}
  .jur-tekst a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
  .jur-tabel-plek{overflow:visible;max-width:none}
  .jur-formulier{background:none;border:1px solid #000}
  .jur-formulier .invul{min-height:2.2em;border-bottom-color:#000}
}