/* ═══════════════════════════════════════
   DC Inhoudsopgave (Table of Contents)
   Inline card by default; fixed rail on the right on wide, hover-capable screens.
   ═══════════════════════════════════════ */
.dc-toc {
    --toc-accent: #A78278;
    --toc-accent-text: #8B6B62;
    --toc-dark: #1a1a2e;
    --toc-text: #3a3a4a;
    --toc-muted: #74748a;
    --toc-light: #f7f5f2;
    --toc-line: rgba(26, 26, 46, 0.08);
    --toc-radius: 14px;
    --toc-progress: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}
.dc-toc *, .dc-toc *::before, .dc-toc *::after { box-sizing: border-box; }

/* Built by JS — hide the empty shell without JS or with < 2 headings */
.dc-toc:not(.is-ready) { display: none; }

/* ── Inline card (mobile / tablet / touch) ── */
.dc-toc {
    width: calc(100% - 2 * clamp(16px, 3vw, 40px));
    max-width: calc(1280px - 2 * 40px);
    margin: clamp(28px, 4vw, 52px) auto 0;
    padding: 20px 22px 8px;
    background: var(--toc-light);
    border: 1px solid rgba(167, 130, 120, 0.18);
    border-radius: var(--toc-radius);
}

.dc-toc .dc-toc__title {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin: 0 0 12px;
    font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--toc-accent-text);
}
.dc-toc .dc-toc__meter {
    font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
    color: var(--toc-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dc-toc .dc-toc__meter b { font-weight: 700; color: var(--toc-dark); }

.dc-toc .dc-toc__progress {
    position: relative; height: 2px; margin-bottom: 6px;
    background: var(--toc-line); border-radius: 2px; overflow: hidden;
}
.dc-toc .dc-toc__progress::after {
    content: ''; position: absolute; inset: 0;
    background: var(--toc-accent);
    transform: scaleX(var(--toc-progress)); transform-origin: left center;
}

.dc-toc .dc-toc__list { list-style: none; margin: 0; padding: 0; }
.dc-toc .dc-toc__item { margin: 0; padding: 0; }
.dc-toc .dc-toc__item + .dc-toc__item { border-top: 1px solid var(--toc-line); }

.dc-toc .dc-toc__link {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    padding: 12px 0;
    color: var(--toc-text); text-decoration: none;
    font-size: 15px; line-height: 1.35;
    transition: color 0.25s ease;
}
.dc-toc .dc-toc__label {
    display: flex; align-items: baseline; gap: 12px;
    flex: 1 1 auto; min-width: 0;
}
.dc-toc .dc-toc__label::before {
    content: attr(data-n);
    flex-shrink: 0; min-width: 1.7em;
    font-family: 'Trajan Pro', 'Cinzel', serif;
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
    color: var(--toc-accent);
}
.dc-toc .dc-toc__link:hover,
.dc-toc .dc-toc__link:focus-visible,
.dc-toc .dc-toc__link[aria-current] { color: var(--toc-accent-text); }
.dc-toc .dc-toc__link[aria-current] { font-weight: 600; }
.dc-toc .dc-toc__link:focus-visible {
    outline: 2px solid var(--toc-accent); outline-offset: 2px; border-radius: 4px;
}

/* Inline card is static, so the scroll indicators carry no meaning there */
.dc-toc .dc-toc__meter,
.dc-toc .dc-toc__progress { display: none; }

/* ── Rail (desktop with a pointer) ── */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .dc-toc.is-rail {
        position: fixed;
        top: 50%; right: clamp(12px, 1.4vw, 28px);
        z-index: 9990; /* under header (10001) and sticky CTA bar (9998) */
        width: auto; max-width: 300px;
        margin: 0;
        padding: 14px 14px 10px;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translate(12px, -50%);
    }
    .dc-toc.is-rail.is-in {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translate(0, -50%);
    }

    .dc-toc.is-rail .dc-toc__meter { display: inline; }
    .dc-toc.is-rail .dc-toc__progress { display: block; }
    .dc-toc.is-rail .dc-toc__title { justify-content: flex-end; margin-bottom: 8px; }

    /* Compact state: only meter + ticks */
    .dc-toc.is-rail .dc-toc__title-text,
    .dc-toc.is-rail .dc-toc__label {
        max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
    }
    .dc-toc.is-rail .dc-toc__progress { max-width: 0; opacity: 0; margin-bottom: 0; }
    .dc-toc.is-rail .dc-toc__item + .dc-toc__item { border-top-color: transparent; }
    .dc-toc.is-rail .dc-toc__link { padding: 7px 0; font-size: 14px; gap: 0; }

    .dc-toc.is-rail .dc-toc__link::after {
        content: ''; flex-shrink: 0;
        width: 14px; height: 2px; border-radius: 2px;
        background: rgba(26, 26, 46, 0.18);
    }
    .dc-toc.is-rail .dc-toc__item.is-past .dc-toc__link::after { background: rgba(167, 130, 120, 0.55); }
    .dc-toc.is-rail .dc-toc__link[aria-current]::after { width: 28px; background: var(--toc-accent); }
    .dc-toc.is-rail .dc-toc__link:hover::after { width: 22px; background: var(--toc-accent); }

    /* Expanded state: hover / keyboard focus */
    .dc-toc.is-rail:hover,
    .dc-toc.is-rail:focus-within {
        width: 290px;
        padding: 20px 20px 10px;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border-color: rgba(167, 130, 120, 0.18);
        box-shadow: 0 18px 50px rgba(26, 26, 46, 0.12);
    }
    .dc-toc.is-rail:hover .dc-toc__title,
    .dc-toc.is-rail:focus-within .dc-toc__title { justify-content: space-between; margin-bottom: 12px; }
    .dc-toc.is-rail:hover .dc-toc__title-text,
    .dc-toc.is-rail:focus-within .dc-toc__title-text,
    .dc-toc.is-rail:hover .dc-toc__label,
    .dc-toc.is-rail:focus-within .dc-toc__label {
        max-width: 260px; opacity: 1; white-space: normal;
    }
    .dc-toc.is-rail:hover .dc-toc__progress,
    .dc-toc.is-rail:focus-within .dc-toc__progress { max-width: none; opacity: 1; margin-bottom: 6px; }
    .dc-toc.is-rail:hover .dc-toc__item + .dc-toc__item,
    .dc-toc.is-rail:focus-within .dc-toc__item + .dc-toc__item { border-top-color: var(--toc-line); }
    .dc-toc.is-rail:hover .dc-toc__link,
    .dc-toc.is-rail:focus-within .dc-toc__link { padding: 10px 0; gap: 12px; }

    /* Motion */
    .dc-toc.is-rail.has-motion {
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s,
                    width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease,
                    background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .dc-toc.is-rail.has-motion .dc-toc__title-text,
    .dc-toc.is-rail.has-motion .dc-toc__label,
    .dc-toc.is-rail.has-motion .dc-toc__progress {
        transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }
    .dc-toc.is-rail.has-motion .dc-toc__link { transition: color 0.25s ease, padding 0.3s ease; }
    .dc-toc.is-rail.has-motion .dc-toc__link::after { transition: width 0.3s ease, background-color 0.3s ease; }
    .dc-toc.is-rail.has-motion .dc-toc__progress::after { transition: transform 0.15s linear; }
}

/* Very wide screens: enough gutter to keep the card open */
@media (min-width: 1840px) and (hover: hover) and (pointer: fine) {
    .dc-toc.is-rail {
        width: 260px;
        padding: 20px 20px 10px;
        background: rgba(255, 255, 255, 0.97);
        border-color: rgba(167, 130, 120, 0.18);
        box-shadow: 0 18px 50px rgba(26, 26, 46, 0.08);
    }
    .dc-toc.is-rail .dc-toc__title { justify-content: space-between; margin-bottom: 12px; }
    .dc-toc.is-rail .dc-toc__title-text,
    .dc-toc.is-rail .dc-toc__label { max-width: 240px; opacity: 1; white-space: normal; }
    .dc-toc.is-rail .dc-toc__progress { max-width: none; opacity: 1; margin-bottom: 6px; }
    .dc-toc.is-rail .dc-toc__item + .dc-toc__item { border-top-color: var(--toc-line); }
    .dc-toc.is-rail .dc-toc__link { padding: 10px 0; gap: 12px; }
}

/* Elementor editor: keep it inline so it stays editable */
.elementor-editor-active .dc-toc.is-rail {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
}