/* Gedeelde stijl voor alle V2-handleidingen (werkgever, admin, arts, verzuimconsulent, gast).
   Design system overgenomen uit de verzuimteam-blog skill: kleuren, fonts, zijnavigatie
   met bolletjes, callouts en stippenachtergrond. Print-regels onderaan leveren een
   bruikbare PDF (zijnavigatie en decoratie vallen dan weg). */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    --vt-blauw: #00346f;
    --vt-roze: #b60056;
    --vt-tekst: #424751;
    --vt-tekst-sterk: #1b1c1c;
    --vt-pagina: #fbf9f8;
    --vt-wit: #ffffff;
    --vt-rij-even: #f5f3f3;
    --vt-hover: #edf2ff;
    --vt-rand: #c2c6d3;
    --vt-rand-licht: #e4e2e2;
    --vt-callout-blauw: #e8eef8;
    --vt-callout-roze: #fce8f2;
    --vt-dempt: #b0b5c0;

    --vt-kop: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif;
    --vt-body: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 24px 80px;
    font-family: var(--vt-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--vt-tekst);
    background: var(--vt-pagina);
}

.wrap { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }

/* ---------- Decoratieve stippenachtergrond ---------- */

.stippen {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(var(--vt-blauw) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.05;
}

/* ---------- Zijnavigatie met bolletjes ---------- */

/* De balk mag nooit breder worden dan de marge links van de tekstkolom
   (.wrap is max. 1000px en staat gecentreerd). Daardoor schaalt hij mee met
   het venster en kan hij per definitie niet over de tekst heen lopen: past
   een label niet, dan kapt het af met puntjes (zie .side-nav-label). */
.side-nav {
    position: fixed;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: calc((100vw - 1000px) / 2 - 2.25rem);
}

.side-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.2rem 0;
    min-width: 0; /* laat het label krimpen i.p.v. de rij op te rekken */
}

.side-nav-dot {
    width: 11px;
    height: 11px;
    border-radius: 9999px;
    background: var(--vt-rand);
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}

.side-nav-item.active .side-nav-dot { background: var(--vt-roze); transform: scale(1.35); }

/* Al gelezen secties krijgen een zachte vulling, zodat je ziet hoever je bent. */
.side-nav-item.gelezen .side-nav-dot { background: var(--vt-blauw); opacity: 0.45; }

.side-nav-label {
    font-family: var(--vt-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--vt-dempt);
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.25s ease;
    /* Kapt af met puntjes zodra de balk smaller wordt dan de tekst;
       de volledige titel blijft beschikbaar via de title-tooltip. */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.side-nav-item.active .side-nav-label { color: var(--vt-roze); }
.side-nav-item:not(.active):hover .side-nav-label { color: var(--vt-tekst); }
.side-nav-item:not(.active):hover .side-nav-dot { background: #737783; }

/* Onder ~1300px blijft er te weinig marge over om een afgekapt label nog
   leesbaar te houden; dan alleen de bolletjes tonen. */
@media (max-width: 1300px) {
    .side-nav-label { display: none; }
    .side-nav { max-width: none; }
}

/* Past ook dat niet meer, dan valt de balk helemaal weg — de inhoudsopgave
   bovenaan de pagina blijft dan de navigatie. */
@media (max-width: 1120px) {
    .side-nav { display: none; }
}

/* ---------- Titelblok ---------- */

.titelblok {
    padding: 44px 0 26px;
    margin-bottom: 34px;
    border-bottom: 3px solid var(--vt-roze);
}

.titelblok .logo {
    display: block;
    height: 54px;
    width: auto;
    margin-bottom: 26px;
}

.titelblok .rol {
    display: inline-block;
    background: var(--vt-blauw);
    color: var(--vt-wit);
    font-family: var(--vt-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 9999px;
    margin-bottom: 16px;
}

h1 {
    font-family: var(--vt-kop);
    font-size: 40px;
    line-height: 1.15;
    margin: 0 0 6px;
    color: var(--vt-blauw);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.titelblok .ondertitel {
    font-family: var(--vt-kop);
    font-size: 24px;
    font-weight: 700;
    color: var(--vt-roze);
    margin: 0 0 18px;
    line-height: 1.3;
}

.titelblok .onder {
    color: var(--vt-tekst);
    margin: 0;
    font-size: 16px;
    max-width: 46rem;
}

/* ---------- Koppen ---------- */

h2 {
    font-family: var(--vt-kop);
    font-size: 27px;
    color: var(--vt-blauw);
    margin: 52px 0 8px;
    padding-top: 22px;
    border-top: 1px solid var(--vt-rand-licht);
    font-weight: 700;
    line-height: 1.25;
}

h2:first-of-type { border-top: 0; padding-top: 0; }

h3 {
    font-family: var(--vt-kop);
    font-size: 19px;
    color: var(--vt-tekst-sterk);
    margin: 32px 0 8px;
    font-weight: 700;
}

/* h4 = substap binnen een h3 (bijv. "Stap 1: …"); ingesprongen met een
   roze streepje zodat de volgorde visueel duidelijk is. */
h4 {
    font-family: var(--vt-kop);
    font-size: 16px;
    color: var(--vt-blauw);
    margin: 24px 0 6px;
    font-weight: 700;
    padding-left: 12px;
    border-left: 3px solid var(--vt-roze);
}

p { margin: 0 0 14px; }
strong { color: var(--vt-tekst-sterk); font-weight: 600; }

/* ---------- Inhoudsopgave ---------- */

.inhoud {
    background: var(--vt-wit);
    border: 1px solid var(--vt-rand);
    border-radius: 12px;
    padding: 22px 28px;
    margin-bottom: 44px;
}

.inhoud h2 {
    font-family: var(--vt-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
    border: 0;
    padding: 0;
    color: var(--vt-dempt);
    font-weight: 600;
}

.inhoud ol { margin: 0; padding-left: 22px; }
.inhoud li { margin-bottom: 5px; }
.inhoud a { color: var(--vt-blauw); text-decoration: none; font-weight: 500; }
.inhoud a:hover { color: var(--vt-roze); text-decoration: underline; }

/* ---------- Stappen en lijsten ---------- */

/* "Voor wie is dit hoofdstuk" - regel direct onder een H2, en kleine toelichting in tabelcellen. */
.voor-wie { font-size: 13.5px; color: var(--vt-roze); font-weight: 600; margin: -6px 0 16px; }
.klein { font-size: 12.5px; font-weight: 400; color: var(--vt-tekst); }

ol.stappen { padding-left: 24px; margin: 0 0 20px; }
ol.stappen > li { margin-bottom: 10px; padding-left: 4px; }
ul { margin: 0 0 16px; padding-left: 24px; }
ul li { margin-bottom: 7px; }

/* ---------- Schermafbeeldingen ---------- */

figure {
    margin: 26px 0 34px;
    border: 1px solid var(--vt-rand);
    border-radius: 12px;
    overflow: hidden;
    background: var(--vt-wit);
}

figure img { display: block; width: 100%; height: auto; }

figcaption {
    font-size: 13.5px;
    color: var(--vt-tekst);
    padding: 11px 18px;
    background: var(--vt-rij-even);
    border-top: 1px solid var(--vt-rand-licht);
}

/* ---------- Kaders (callouts) ---------- */

.kader {
    border-left: 4px solid var(--vt-blauw);
    background: var(--vt-callout-blauw);
    padding: 15px 20px;
    margin: 22px 0;
    border-radius: 0 8px 8px 0;
}

.kader.let-op {
    border-left-color: var(--vt-roze);
    background: var(--vt-callout-roze);
}

.kader.niet-zichtbaar {
    border-left-color: var(--vt-dempt);
    background: var(--vt-rij-even);
}

.kader p:last-child { margin-bottom: 0; }

.kader .kop {
    font-family: var(--vt-kop);
    font-weight: 700;
    font-size: 14.5px;
    display: block;
    margin-bottom: 5px;
    color: var(--vt-blauw);
}

.kader.let-op .kop { color: var(--vt-roze); }
.kader.niet-zichtbaar .kop { color: var(--vt-tekst); }

/* ---------- Tabellen ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 30px;
    font-size: 14.5px;
    border: 1px solid var(--vt-rand);
    border-radius: 12px;
    overflow: hidden;
}

th {
    background: var(--vt-blauw);
    color: var(--vt-wit);
    font-family: var(--vt-kop);
    font-weight: 700;
    text-align: left;
    padding: 11px 14px;
}

td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--vt-rand-licht);
    vertical-align: top;
}

tbody tr:nth-child(odd) { background: var(--vt-wit); }
tbody tr:nth-child(even) { background: var(--vt-rij-even); }
tbody tr:hover { background: var(--vt-hover); transition: background-color 0.15s; }
tbody tr:last-child td { border-bottom: none; }

td ul { margin: 0; padding-left: 20px; }
td ul li { margin-bottom: 4px; }

/* ---------- Klein grut ---------- */

code {
    background: var(--vt-rij-even);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 0.88em;
    color: var(--vt-tekst-sterk);
}

.knop-naam {
    display: inline-block;
    background: var(--vt-roze);
    color: var(--vt-wit);
    padding: 1px 9px;
    border-radius: 5px;
    font-size: 0.86em;
    font-weight: 600;
    white-space: nowrap;
}

.menu-naam {
    display: inline-block;
    background: var(--vt-blauw);
    color: var(--vt-wit);
    padding: 1px 9px;
    border-radius: 5px;
    font-size: 0.86em;
    font-weight: 600;
    white-space: nowrap;
}

footer {
    margin-top: 64px;
    padding-top: 20px;
    border-top: 1px solid var(--vt-rand-licht);
    font-size: 13.5px;
    color: var(--vt-dempt);
}

footer .logo-klein { height: 30px; width: auto; margin-bottom: 12px; display: block; opacity: 0.75; }

/* ---------- Print / PDF ---------- */

@page { size: A4; margin: 16mm 14mm; }

@media print {
    body { padding: 0; font-size: 10.5pt; background: #fff; }
    .wrap { max-width: none; }
    .side-nav, .stippen { display: none !important; }
    h2 { break-before: page; break-after: avoid; padding-top: 0; border-top: 0; }
    .inhoud h2, h2:first-of-type { break-before: avoid; }
    h3, h4 { break-after: avoid; }
    figure, .kader, table { break-inside: avoid; }
    figure img { max-height: 14.5cm; object-fit: contain; }
    a { color: inherit; text-decoration: none; }
    tbody tr:hover { background: inherit; }
}