/* KansKlik · cv-bouwer: het cv zelf (.cvblad) en het scherm om het te maken (.cvb-...) */

/* ---------- Het cv: altijd wit papier, ook in donkere modus ---------- */
.cvblad{
  --acc:#183153; --tk:#1B2230; --zij:#F2F4F5; --vorm:#FFE445; --gr:#545D6B; --lijn:#D5DAE0;
  width:210mm; min-height:297mm; background:#fff; color:var(--tk); font-family:var(--body,"Inter",sans-serif);
  font-size:11pt; line-height:1.5; font-style:normal; box-sizing:border-box; position:relative;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; text-align:left;
}
.cvblad.t-inkt{--acc:#183153; --tk:#1B2230; --zij:#F2F4F5; --vorm:#FFE445; --gr:#545D6B; --lijn:#D5DAE0}
.cvblad.t-petrol{--acc:#145E63; --tk:#1B2427; --zij:#F2F4F5; --vorm:#145E63; --gr:#525D60; --lijn:#D3DCDD}
.cvblad.t-paars{--acc:#5A18C8; --tk:#251738; --zij:#EDE4FC; --vorm:#FFE445; --gr:#5E5470; --lijn:#D9D0E8}
.cvblad *{box-sizing:border-box}
.cvblad h1,.cvblad h2,.cvblad h3,.cvblad p,.cvblad ul{margin:0;font-family:inherit;letter-spacing:normal;text-wrap:wrap}
.cvblad ul{padding-left:4.5mm}
.cvblad .cvlabel{font-size:9.5pt;font-weight:700;letter-spacing:.14em;color:var(--acc);margin-bottom:1.5mm;line-height:1.2}
.cvblad .naam{font-size:26pt;font-weight:700;line-height:1.08;letter-spacing:-.01em;color:var(--tk)}
.cvblad .rol{margin-top:2mm;font-size:11.5pt;font-weight:600;color:var(--acc)}
.cvblad .tekst{font-size:11pt;line-height:1.5}
.cvblad .item{margin-bottom:4mm;break-inside:avoid}
.cvblad .item h3{font-size:11pt;font-weight:700;color:var(--tk);line-height:1.35}
.cvblad .item .meta{font-size:9.5pt;color:var(--gr);margin:.5mm 0 1.2mm}
.cvblad .item ul{font-size:10.5pt;line-height:1.45}
.cvblad .vaard{display:grid;gap:2.5mm}
.cvblad .vaard div{font-size:10.5pt;line-height:1.45;break-inside:avoid}
.cvblad .rij{display:block}
.cvblad .foto{display:block;object-fit:cover;border-radius:50%}

/* Kleur: lichte zijbalk, een schuine vorm bovenaan */
.cvblad.kleur{display:grid;grid-template-columns:62mm 1fr;background:linear-gradient(to right,var(--zij) 62mm,#fff 62mm)}
.cvblad.kleur .zij{padding:16mm 8mm 12mm;position:relative;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cvblad.kleur .zij::before{content:"";position:absolute;left:0;right:0;top:0;height:9mm;background:var(--vorm);clip-path:polygon(0 0,100% 0,100% 35%,0 100%)}
.cvblad.kleur .zij .foto{width:32mm;height:32mm;margin:0 auto 7mm}
.cvblad.kleur .zij h2{font-size:10pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin:7mm 0 2.5mm}
.cvblad.kleur .zij .foto + h2,.cvblad.kleur .zij > h2:first-child{margin-top:0}
.cvblad.kleur .zij p{font-size:10pt;line-height:1.5;overflow-wrap:anywhere}
.cvblad.kleur .zij .rij{margin-bottom:2mm}
.cvblad.kleur .zij .lbl{display:block;font-size:8.5pt;color:var(--gr)}
.cvblad.kleur .hoofd{padding:16mm 14mm 12mm 12mm;min-width:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cvblad.kleur .hoofd > h2{font-size:11pt;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--acc);margin:8mm 0 3mm;display:flex;align-items:center;gap:3mm;break-after:avoid}
.cvblad.kleur .hoofd > h2::after{content:"";flex:1;height:.4mm;background:var(--lijn)}

/* Rustig: wit, koppen links, een kort schuin accent */
.cvblad.rustig{padding:18mm 20mm 14mm;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cvblad.rustig .naam{font-size:22pt}
.cvblad.rustig .cvkop{display:flex;gap:6mm;align-items:center}
.cvblad.rustig .cvkop .foto{width:24mm;height:24mm;flex:none}
.cvblad.rustig .contact{margin-top:2mm;font-size:10pt;color:var(--gr)}
.cvblad.rustig .contact span + span::before{content:" · "}
.cvblad.rustig .vorm{height:3mm;width:24mm;background:var(--vorm);clip-path:polygon(0 0,100% 0,100% 35%,0 100%);margin:5mm 0 2mm}
.cvblad.rustig section{display:grid;grid-template-columns:38mm 1fr;gap:0 6mm;padding:5mm 0;border-top:.3mm solid var(--lijn)}
.cvblad.rustig .vorm + section{border-top:0}
.cvblad.rustig section > h2{font-size:10pt;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--acc);padding-top:.6mm;line-height:1.4}
.cvblad.rustig section .item:last-child{margin-bottom:0}

/* Eenvoudige export: een kolom, voor automatisch uitlezen */
.cvblad.export{padding:18mm 22mm;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cvblad.export .naam{font-size:18pt}
.cvblad.export .rol{margin-bottom:2mm}
.cvblad.export p.c{font-size:10.5pt;margin-top:1mm}
.cvblad.export h2{font-size:12pt;font-weight:700;margin:6mm 0 2mm;color:var(--tk)}

/* ---------- Afdrukken: alleen het cv ---------- */
#cvPrint{display:none}
@media print{
  @page{size:A4;margin:0}
  body.cv-print{background:#fff!important}
  body.cv-print > *:not(#cvPrint){display:none!important}
  body.cv-print #cvPrint{display:block}
  body.cv-print .cvblad{min-height:297mm}
  /* Kleur: de zijbalk loopt op elke pagina door; de achtergrond van de pagina zelf wordt op iedere pagina getekend */
  html.cvp-kleur{background:linear-gradient(to right,var(--cvzij,#F2F4F5) 62mm,#fff 62mm)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html.cvp-kleur body.cv-print{background:transparent!important}
  body.cv-print .cvblad.kleur{background:transparent}
}

/* ---------- Het scherm van de cv-bouwer ---------- */
.cvb{display:grid;gap:22px}
.cvb-kop{display:grid;gap:8px}
.cvb-lay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:980px){.cvb-lay{grid-template-columns:1fr}}
.cvb-form{display:grid;gap:16px;min-width:0}
.cvb-blok{border:1px solid var(--line);border-radius:var(--r-klein,12px);padding:16px;display:grid;gap:12px;background:var(--surface)}
.cvb-blok > h3{margin:0}
.cvb-blok .cvb-uitleg{font-size:15px;color:var(--muted);margin:0}
.cvb-item{border-top:1px dashed var(--line);padding-top:12px;display:grid;gap:10px}
.cvb-item:first-of-type{border-top:0;padding-top:0}
.cvb-twee{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.cvb-twee{grid-template-columns:1fr}}
.cvb-itemknoppen{display:flex;gap:8px;flex-wrap:wrap}
.cvb-check{display:flex!important;gap:10px;align-items:center;font-weight:400!important}
.cvb-check input{width:auto}
.cvb-keuze{display:flex;gap:8px;flex-wrap:wrap}
.cvb-keuze label{display:flex;gap:8px;align-items:center;border:2px solid var(--line);border-radius:999px;padding:7px 14px;font-size:15px;cursor:pointer}
.cvb-keuze input{width:auto;margin:0}
.cvb-keuze label:has(input:checked){border-color:var(--accent);background:var(--veld)}
.cvb-stip{width:14px;height:14px;border-radius:50%;display:inline-block}
.cvb-voorbeeld{position:sticky;top:12px;display:grid;gap:10px;min-width:0}
.cvb-papier{background:#d9d6df;border-radius:12px;padding:12px;overflow:hidden;position:relative;min-width:0;max-width:100%}
.cvb-schaal{transform-origin:top left;width:210mm;position:absolute;top:12px;left:12px}
.cvb-schaal .cvblad{box-shadow:0 2px 10px rgba(0,0,0,.18)}
.cvb-paginalijn{position:absolute;left:0;right:0;border-top:2px dashed #c0392b;pointer-events:none}
.cvb-paginalijn span{position:absolute;right:4mm;top:-7mm;font:600 9pt/1 var(--body,sans-serif);color:#c0392b;background:#fff;padding:1mm 2mm;border-radius:2mm}
.cvb-melding{border-radius:12px;padding:12px 14px;font-size:15px;margin:0}
.cvb-melding.let-op{background:#fff4d6;color:#4a3700}
.cvb-melding.fout{background:#fde7e7;color:#7a1414}
.cvb-melding.ok{background:#e6f4ea;color:#14532d}
.cvb-tabs{display:none;gap:8px}
@media (max-width:980px){
  .cvb-tabs{display:flex}
  .cvb[data-weergave="bewerken"] .cvb-voorbeeld{display:none}
  .cvb[data-weergave="bekijken"] .cvb-form{display:none}
  .cvb-voorbeeld{position:static}
}
.cvb-versies{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cvb-versies li{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px}
.cvb-versies .rij{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.cvb-versies small{display:block;color:var(--muted);font-weight:400;font-size:14px}
.cvb-deel{display:grid;gap:8px;background:var(--veld);border-radius:12px;padding:12px}
.cvb-hint{margin:0;padding-left:20px;font-size:15px}
.cvb-download{display:grid;gap:10px}

/* Meekijken: gedeeld cv, alleen lezen */
.cv-gedeeld{min-width:0;display:grid;gap:10px}
.cv-gedeeld .cvb-papier{max-width:520px}
.cvb-tabs button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}