/**
 * Developercode — opmaak van de widget toc.
 *
 * Geen lijstje in een kader, maar een leesbalk: het label links, de teller
 * rechts, daaronder een lijn die meeloopt met hoever de lezer is, en dan de
 * secties als één doorlopende reeks. Dat scheelt de helft aan hoogte en het
 * is meteen de enige inhoudsopgave op internet die eruitziet als de flow uit
 * de merkfilm.
 *
 * De voortgang, de teller en de balk komen uit assets/js/widgets/toc.js: die
 * elementen zijn decoratie, dus ze staan niet in de HTML van de pagina. De
 * lijst zelf wordt op twee plekken gerenderd (widget en DC_TOC_Collector) met
 * exact dezelfde li/a-structuur en blijft hier ongemoeid.
 */

.dcw-toc {
    /* Merkwaarden met terugval, zodat de balk er buiten Elementor — in een
       blogpost — net zo uitziet als erbinnen. */
    --toc-ink: var(--dc-ink, #12151c);
    --toc-faint: var(--dc-faint, #8d97a5);
    --toc-line: var(--dc-line, #e6eaf1);
    --toc-line-soft: var(--dc-line-soft, #eff2f7);
    --toc-surface: var(--dc-surface, #ffffff);
    --toc-tint: var(--dc-bg-tint, #f4f7fc);
    --toc-blue: var(--dc-blue, #147be1);
    --toc-blue-rgb: var(--dc-blue-rgb, 20, 123, 225);
    --toc-font-body: var(--dc-font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --toc-font-mono: var(--dc-font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace);
    --toc-ease: var(--dc-ease, cubic-bezier(.22, .61, .36, 1));
    --toc-fast: var(--dc-fast, .18s);

    /* Hoever de lezer is, van 0 tot 1. Het script schrijft deze waarde. */
    --toc-progress: 0;

    position: relative;
    display: grid;
    gap: 13px;
    margin: clamp(24px, 3.5vw, 40px) auto;

    /* Dezelfde breedte en dezelfde kaart als de blokken van het content block
       eronder: samen lezen ze als één vel, niet als twee losse onderdelen. */
    max-width: var(--dc-shell, 1320px);
    padding: 16px clamp(18px, 2.2vw, 24px) 15px;
    border: 1px solid var(--toc-line);
    border-radius: var(--dc-r-lg, 20px);
    background: var(--toc-surface);
    box-shadow: var(--dc-shadow, 0 4px 16px -4px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .04));
}

/* ------------------------------------------------------- kop en teller */

.dcw-toc .dc-toc__title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    font-family: var(--toc-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--toc-blue);
}

.dcw-toc .dc-toc__title::before {
    content: "";
    flex: none;
    width: 22px;
    height: 1px;
    background: currentColor;
}

/* De teller staat rechts op dezelfde regel als het label. */
.dcw-toc .dc-toc__meter {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
    color: var(--toc-faint);
}

.dcw-toc .dc-toc__meter b {
    font-weight: 500;
    color: var(--toc-blue);
}

/* ---------------------------------------------------------- de balk */

.dcw-toc .dc-toc__progress {
    position: relative;
    height: 2px;
    border-radius: 2px;
    background: var(--toc-line);
    overflow: hidden;
}

.dcw-toc .dc-toc__progress::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--toc-blue-rgb), .55), var(--toc-blue));
    transform: scaleX(var(--toc-progress));
    transform-origin: left;
    transition: transform .22s linear;
}

/* --------------------------------------------------------- de secties */

.dcw-toc .dc-toc__list {
    counter-reset: dc-toc;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    /* Ruimte in plaats van streepjes: bij het afbreken naar een tweede regel
       zou een streepje anders los vooraan blijven hangen. */
    gap: 6px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dcw-toc .dc-toc__item {
    counter-increment: dc-toc;
    display: flex;
    align-items: baseline;
    margin: 0;
    padding: 0;
}

.dcw-toc .dc-toc__link {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 0;
    font-family: var(--toc-font-body);
    font-size: 15px;
    line-height: 1.35;
    color: var(--toc-ink);
    text-decoration: none;
    transition: color var(--toc-fast) var(--toc-ease);
}

.dcw-toc .dc-toc__link::before {
    content: counter(dc-toc, decimal-leading-zero);
    font-family: var(--toc-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .14em;
    color: var(--toc-faint);
    transition: color var(--toc-fast) var(--toc-ease);
}

/* De onderstreping groeit vanaf links mee met de aanwijzer. */
.dcw-toc .dc-toc__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--toc-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s var(--toc-ease);
}

.dcw-toc .dc-toc__link:hover,
.dcw-toc .dc-toc__link:focus-visible {
    color: var(--toc-blue);
}

.dcw-toc .dc-toc__link:hover::before,
.dcw-toc .dc-toc__link:focus-visible::before {
    color: var(--toc-blue);
}

.dcw-toc .dc-toc__link:hover::after,
.dcw-toc .dc-toc__link:focus-visible::after {
    transform: scaleX(1);
}

.dcw-toc .dc-toc__link:focus-visible {
    outline: 2px solid rgba(var(--toc-blue-rgb), .5);
    outline-offset: 4px;
    border-radius: 3px;
}

/* De sectie waar de lezer nu is. */
.dcw-toc .dc-toc__item.is-current .dc-toc__link {
    color: var(--toc-blue);
    font-weight: 600;
}

.dcw-toc .dc-toc__item.is-current .dc-toc__link::before {
    color: var(--toc-blue);
}

.dcw-toc .dc-toc__item.is-current .dc-toc__link::after {
    transform: scaleX(1);
    opacity: .35;
}

/* ------------------------------------------------------- binnenkomst */

/* Alleen verborgen als het script draait; anders staat alles er meteen. */
.dcw-toc.has-motion .dc-toc__item {
    opacity: 0;
    transform: translateY(6px);
}

.dcw-toc.has-motion.is-in .dc-toc__item {
    opacity: 1;
    transform: none;
    transition: opacity .4s var(--toc-ease), transform .4s var(--toc-ease);
}

.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(1) { transition-delay: .04s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(2) { transition-delay: .08s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(3) { transition-delay: .12s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(4) { transition-delay: .16s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(5) { transition-delay: .20s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(6) { transition-delay: .24s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(7) { transition-delay: .28s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(8) { transition-delay: .32s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(9) { transition-delay: .36s; }
.dcw-toc.has-motion.is-in .dc-toc__item:nth-child(10) { transition-delay: .40s; }

/* ==========================================================================
   DE RAIL — vast rechts in beeld, secties onder elkaar
   --------------------------------------------------------------------------
   Vanaf een breed scherm is de inhoudsopgave geen blok in de tekst meer maar
   een vaste kolom tegen de rechterrand: streepjes onder elkaar, rechts
   uitgelijnd, met een lijn ernaast die volloopt terwijl je leest. Van de
   sectie waar je nu bent staat de titel er voluit naast; de rest verschijnt
   zodra je de rail aanwijst.

   De class is-rail wordt door assets/js/widgets/toc.js gezet. Zonder script
   blijft het dus gewoon het blok hierboven — er verdwijnt niets.
   ========================================================================== */

@media (min-width: 1280px) {

    .dcw-toc.is-rail {
        position: fixed;
        right: clamp(18px, 2vw, 34px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 40;

        display: grid;
        justify-items: end;
        gap: 10px;

        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;

        /* De rail zelf vangt geen klikken; de links erin wel. */
        pointer-events: none;
    }

    /* Het label boven de rail: alleen zichtbaar als je de rail aanwijst. */
    .dcw-toc.is-rail .dc-toc__title {
        gap: 8px;
        padding-right: 2px;
        font-size: 10px;
        letter-spacing: .2em;
        opacity: 0;
        transform: translateX(6px);
        transition: opacity var(--toc-fast) var(--toc-ease),
                    transform var(--toc-fast) var(--toc-ease);
    }

    .dcw-toc.is-rail:hover .dc-toc__title {
        opacity: 1;
        transform: none;
    }

    .dcw-toc.is-rail .dc-toc__title::before {
        width: 14px;
    }

    .dcw-toc.is-rail .dc-toc__meter {
        margin-left: 6px;
    }

    /* De balk staat rechtop, tegen de rand, en loopt vol tijdens het lezen. */
    .dcw-toc.is-rail .dc-toc__progress {
        position: absolute;
        top: 26px;
        bottom: 0;
        right: 0;
        width: 2px;
        height: auto;
        border-radius: 2px;
    }

    .dcw-toc.is-rail .dc-toc__progress::after {
        background: linear-gradient(180deg, rgba(var(--toc-blue-rgb), .55), var(--toc-blue));
        transform: scaleY(var(--toc-progress));
        transform-origin: top;
    }

    .dcw-toc.is-rail .dc-toc__list {
        display: grid;
        justify-items: end;
        gap: 2px;
        padding-right: 12px;
    }

    .dcw-toc.is-rail .dc-toc__item {
        display: block;
        border: 0;
    }

    /* Elke sectie is een streepje met daarnaast, naar links, zijn titel. */
    .dcw-toc.is-rail .dc-toc__link {
        position: relative;
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        width: auto;
        padding: 5px 0;
        text-align: right;
    }

    /* Het nummer staat áltijd in de marge: daaraan zie je zonder meer waar
       je bent, ook als de titel zich heeft teruggetrokken. */
    .dcw-toc.is-rail .dc-toc__link::before {
        font-size: 10px;
        letter-spacing: .12em;
        opacity: .55;
        transition: color var(--toc-fast) var(--toc-ease),
                    opacity var(--toc-fast) var(--toc-ease);
    }

    .dcw-toc.is-rail .dc-toc__link:hover::before {
        opacity: 1;
    }

    .dcw-toc.is-rail .dc-toc__item.is-current .dc-toc__link::before {
        opacity: 1;
        font-weight: 600;
        color: var(--toc-blue);
    }

    /* De titel zit in een wit chipje, zodat hij leesbaar blijft over de
       tekst van de pagina heen. Hij staat buiten de flow: zo houden de
       nummers en de streepjes één rechte kolom, hoe lang een titel ook is.
       Klikken gaat via de link zelf, niet via het chipje. */
    .dcw-toc.is-rail .dc-toc__label {
        position: absolute;
        right: 100%;
        top: 50%;
        margin-right: 10px;
        pointer-events: none;
        display: block;
        width: max-content;
        max-width: 260px;
        padding: 6px 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid var(--toc-line);
        border-radius: var(--dc-r-pill, 999px);
        background: var(--toc-surface);
        box-shadow: var(--dc-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04));
        font-size: 13.5px;
        line-height: 1.3;
        color: var(--toc-ink);

        opacity: 0;
        transform: translate(8px, -50%);
        transition: opacity var(--toc-fast) var(--toc-ease),
                    transform var(--toc-fast) var(--toc-ease),
                    color var(--toc-fast) var(--toc-ease),
                    border-color var(--toc-fast) var(--toc-ease);
    }

    /* Het streepje rechts van de titel. */
    .dcw-toc.is-rail .dc-toc__link::after {
        content: "";
        position: static;
        justify-self: end;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--toc-line);
        transform: none;
        transition: width var(--toc-mid, .34s) var(--toc-ease),
                    background var(--toc-fast) var(--toc-ease);
    }

    /* Aanwijzen: alle titels erbij. */
    .dcw-toc.is-rail:hover .dc-toc__label {
        opacity: 1;
        transform: translate(0, -50%);
    }

    .dcw-toc.is-rail .dc-toc__link:hover .dc-toc__label,
    .dcw-toc.is-rail .dc-toc__link:focus-visible .dc-toc__label {
        border-color: rgba(var(--toc-blue-rgb), .35);
        color: var(--toc-blue);
    }

    .dcw-toc.is-rail .dc-toc__link:hover::after,
    .dcw-toc.is-rail .dc-toc__link:focus-visible::after {
        width: 26px;
        background: var(--toc-blue);
    }

    /* Waar je nu bent: het streepje is langer en blauw. De titel meldt zich
       zodra je de sectie binnenkomt en trekt zich daarna terug, zodat de rail
       niet over de tekst blijft liggen. Op een breed scherm (hieronder) is er
       ruimte genoeg en blijft hij gewoon staan. */
    .dcw-toc.is-rail.is-announcing .dc-toc__item.is-current .dc-toc__label {
        opacity: 1;
        transform: translate(0, -50%);
    }

    .dcw-toc.is-rail .dc-toc__item.is-current .dc-toc__label {
        font-weight: 600;
        color: var(--toc-ink);
        border-color: rgba(var(--toc-blue-rgb), .3);
        box-shadow: var(--dc-shadow, 0 4px 16px -4px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .04));
    }

    .dcw-toc.is-rail .dc-toc__item.is-current .dc-toc__link::after {
        width: 34px;
        background: var(--toc-blue);
    }

    /* Zonder muis in de buurt blijven de andere titels weg; dat houdt de rail
       rustig naast de tekst. */
    .dcw-toc.is-rail .dc-toc__link:focus-visible {
        outline: none;
    }

    .dcw-toc.is-rail .dc-toc__link:focus-visible .dc-toc__label {
        opacity: 1;
        transform: translate(0, -50%);
        outline: 2px solid rgba(var(--toc-blue-rgb), .5);
        outline-offset: 2px;
    }
}

/* Genoeg ruimte naast de tekst? Dan mag de rail verder van de rand af staan
   en blijft de titel van de sectie waar je bent gewoon in beeld. */
@media (min-width: 1900px) {
    .dcw-toc.is-rail .dc-toc__label {
        max-width: 240px;
    }

    .dcw-toc.is-rail .dc-toc__item.is-current .dc-toc__label {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

/* --------------------------------------------------- koppen op de pagina */

/* Zonder deze marge landt een sprong precies onder een vaste balk. Dit blad
   staat alleen op pagina's mét inhoudsopgave, dus de regel raakt niets
   anders. */
h2[id] {
    scroll-margin-top: clamp(84px, 12vh, 132px);
}

/* ------------------------------------------------------- kleiner scherm */

@media (max-width: 700px) {
    .dcw-toc {
        gap: 11px;
        padding: 14px 16px 13px;
    }

    .dcw-toc .dc-toc__list {
        display: grid;
        gap: 0;
    }

    .dcw-toc .dc-toc__item + .dc-toc__item {
        border-top: 1px solid var(--toc-line-soft);
    }

    .dcw-toc .dc-toc__link {
        width: 100%;
        padding: 9px 0;
        font-size: 14.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dcw-toc .dc-toc__link,
    .dcw-toc .dc-toc__link::before,
    .dcw-toc .dc-toc__link::after,
    .dcw-toc .dc-toc__label,
    .dcw-toc .dc-toc__title,
    .dcw-toc .dc-toc__progress::after {
        transition: none;
    }
}