/* ===== Panelen (PN) =====
   Elk gepubliceerd paneel staat in de DOM; een Toggle, een link
   (#sc-panel-{id}) of een paginatrigger opent er één (panels.js).
   z-index blijft onder de editor-chrome (>= 2147482000); panels.js zet per
   open-index een eigen z-index op de root en zijn backdrop.

   De positionering (--sc-pn-pos-tf) en de transitie (--sc-pn-tr-tf) zijn twee
   losse transform-vars die gecomponeerd worden, zodat een gecentreerd paneel
   zijn -50%-verschuiving niet verliest tijdens het openen (zelfde les als
   --sc-bg-tf). */

.sc-panel {
    --sc-pn-pos-tf: translate(0, 0);
    --sc-pn-tr-tf: translate(0, 0);
    --sc-pn-op: 1;
    position: fixed;
    z-index: 1000000000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    visibility: hidden;
    opacity: var(--sc-pn-op);
    transform: var(--sc-pn-pos-tf) var(--sc-pn-tr-tf);
    transition:
        transform var(--sc-pn-dur, 400ms) var(--sc-pn-ease, cubic-bezier(0.87, 0, 0.13, 1)),
        opacity var(--sc-pn-dur, 400ms) var(--sc-pn-ease, cubic-bezier(0.87, 0, 0.13, 1)),
        visibility 0s linear var(--sc-pn-dur, 400ms);
}

.sc-panel.is-open {
    --sc-pn-tr-tf: translate(0, 0);
    --sc-pn-op: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* De eigen scroll-container van het paneel. container-type maakt hem ook de
   container-query-context, zodat secties binnen een smal paneel niet met de
   viewportbanden van de site rekenen (§27 r.1043). */
.sc-panel-in {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    container-type: inline-size;
}

.sc-panel-in .container,
.sc-panel-in .wrapper {
    max-width: 100%;
}

.sc-panel .sc-section {
    margin: 0;
}

/* ===== Sidebar ===== */
.sc-panel-sidebar {
    top: 0;
    bottom: 0;
    width: min(var(--sc-pn-w, 360px), 100%);
    max-width: var(--sc-pn-max-w, none);
}

.sc-panel-sidebar.sc-panel-side-left {
    left: 0;
}

.sc-panel-sidebar.sc-panel-side-right {
    right: 0;
}

.sc-panel-sidebar.sc-panel-h-auto {
    bottom: auto;
    max-height: 100%;
}

.sc-panel-sidebar.sc-panel-h-auto.sc-panel-va-center {
    top: 50%;
    --sc-pn-pos-tf: translateY(-50%);
}

.sc-panel-sidebar.sc-panel-h-auto.sc-panel-va-bottom {
    top: auto;
    bottom: 0;
}

/* :not(.is-open): these two outrank `.sc-panel.is-open` (0,3,0 vs 0,2,0), so
   without it an OPEN slide sidebar — the default — stayed off-screen. */
.sc-panel-sidebar.sc-panel-tr-slide.sc-panel-side-left:not(.is-open) {
    --sc-pn-tr-tf: translateX(-100%);
}

.sc-panel-sidebar.sc-panel-tr-slide.sc-panel-side-right:not(.is-open) {
    --sc-pn-tr-tf: translateX(100%);
}

/* ===== Modal ===== */
.sc-panel-modal {
    width: min(var(--sc-pn-w, 600px), calc(100% - 2 * var(--sc-pn-m, 16px)));
    max-width: var(--sc-pn-max-w, none);
    max-height: calc(var(--sc-pn-max-h, 100%) - 2 * var(--sc-pn-m, 16px));
}

.sc-panel-modal.sc-panel-h-fixed {
    height: var(--sc-pn-h, 400px);
}

.sc-panel-modal.sc-panel-h-full {
    height: calc(100% - 2 * var(--sc-pn-m, 16px));
}

.sc-panel-modal.sc-panel-pos-tl {
    top: var(--sc-pn-m, 16px);
    left: var(--sc-pn-m, 16px);
}

.sc-panel-modal.sc-panel-pos-tc {
    top: var(--sc-pn-m, 16px);
    left: 50%;
    --sc-pn-pos-tf: translateX(-50%);
}

.sc-panel-modal.sc-panel-pos-tr {
    top: var(--sc-pn-m, 16px);
    right: var(--sc-pn-m, 16px);
}

.sc-panel-modal.sc-panel-pos-ml {
    top: 50%;
    left: var(--sc-pn-m, 16px);
    --sc-pn-pos-tf: translateY(-50%);
}

.sc-panel-modal.sc-panel-pos-mc {
    top: 50%;
    left: 50%;
    --sc-pn-pos-tf: translate(-50%, -50%);
}

.sc-panel-modal.sc-panel-pos-mr {
    top: 50%;
    right: var(--sc-pn-m, 16px);
    --sc-pn-pos-tf: translateY(-50%);
}

.sc-panel-modal.sc-panel-pos-bl {
    bottom: var(--sc-pn-m, 16px);
    left: var(--sc-pn-m, 16px);
}

.sc-panel-modal.sc-panel-pos-bc {
    bottom: var(--sc-pn-m, 16px);
    left: 50%;
    --sc-pn-pos-tf: translateX(-50%);
}

.sc-panel-modal.sc-panel-pos-br {
    bottom: var(--sc-pn-m, 16px);
    right: var(--sc-pn-m, 16px);
}

/* ===== Transities ===== */
.sc-panel-tr-fade,
.sc-panel-tr-zoom,
.sc-panel-tr-slide-up,
.sc-panel-tr-slide-down {
    --sc-pn-op: 0;
}

.sc-panel-tr-zoom {
    --sc-pn-tr-tf: scale(0.92);
}

.sc-panel-tr-slide-up {
    --sc-pn-tr-tf: translateY(24px);
}

.sc-panel-tr-slide-down {
    --sc-pn-tr-tf: translateY(-24px);
}

.sc-panel-tr-none {
    transition: none;
}

/* ===== Sluitknop ===== */
.sc-panel-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sc-pn-close, 44px);
    height: var(--sc-pn-close, 44px);
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
    z-index: 1;
}

/* PN32/PN33: the offsets to the chosen corner. Unset = the 0.75rem default. */
.sc-panel-close-tl > .sc-panel-close {
    top: var(--sc-pn-close-y, 0.75rem);
    left: var(--sc-pn-close-x, 0.75rem);
}

.sc-panel-close-tr > .sc-panel-close {
    top: var(--sc-pn-close-y, 0.75rem);
    right: var(--sc-pn-close-x, 0.75rem);
}

.sc-panel-close-bl > .sc-panel-close {
    bottom: var(--sc-pn-close-y, 0.75rem);
    left: var(--sc-pn-close-x, 0.75rem);
}

.sc-panel-close-br > .sc-panel-close {
    bottom: var(--sc-pn-close-y, 0.75rem);
    right: var(--sc-pn-close-x, 0.75rem);
}

/* Buiten het paneel: de knop mag niet weggeknipt worden. */
.sc-panel-close-outside {
    overflow: visible;
}

/* Modal: outside is above or below the panel — the l/r letter of the corner
   keeps steering the horizontal inset. The vertical rules are scoped to the
   modal, because on a sidebar outside means BESIDE the panel (below). */
.sc-panel-modal.sc-panel-close-outside.sc-panel-close-tl > .sc-panel-close,
.sc-panel-modal.sc-panel-close-outside.sc-panel-close-tr > .sc-panel-close {
    top: calc(-1 * var(--sc-pn-close, 44px) - var(--sc-pn-close-y, 0.75rem));
}

.sc-panel-modal.sc-panel-close-outside.sc-panel-close-bl > .sc-panel-close,
.sc-panel-modal.sc-panel-close-outside.sc-panel-close-br > .sc-panel-close {
    bottom: calc(-1 * var(--sc-pn-close, 44px) - var(--sc-pn-close-y, 0.75rem));
}

/* Sidebar: next to the open side, above the backdrop. The corner rule keeps
   deciding the vertical position (top or bottom).

   r.PN27: a sidebar that fills the whole width — every phone — has no room
   beside it, and an unclamped `calc(100% + …)` puts the only close button
   outside the viewport. The min() clamps the button back over the panel as
   soon as the space runs out, so it stays reachable at every width. */
.sc-panel-sidebar.sc-panel-close-outside.sc-panel-side-left > .sc-panel-close {
    left: min(
        calc(100% + var(--sc-pn-close-x, 0.75rem)),
        calc(100vw - var(--sc-pn-close, 44px) - 8px)
    );
    right: auto;
}

.sc-panel-sidebar.sc-panel-close-outside.sc-panel-side-right > .sc-panel-close {
    right: min(
        calc(100% + var(--sc-pn-close-x, 0.75rem)),
        calc(100vw - var(--sc-pn-close, 44px) - 8px)
    );
    left: auto;
}

/* ===== Overlay =====
   Blur loopt via backdrop-filter op de overlay en niet via filter op .body:
   een filter op de pagina maakt hem het containing block van elk
   position:fixed-element (sticky header, het paneel zelf). */
.sc-panel-backdrop {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 999999999;
    /* PN34-PN36: unset = the panel duration and `ease`, the behaviour of
       before this round. */
    transition: opacity var(--sc-pn-ov-dur, var(--sc-pn-dur, 400ms)) var(--sc-pn-ov-ease, ease);
}

.sc-panel-ov-tr-none {
    transition: none;
}

.sc-panel-backdrop.is-open {
    opacity: var(--sc-pn-ov-op, 0.4);
    pointer-events: auto;
}

.sc-panel-backdrop.sc-panel-fx-blur.is-open {
    backdrop-filter: blur(var(--sc-pn-blur, 6px));
    -webkit-backdrop-filter: blur(var(--sc-pn-blur, 6px));
}

body.sc-panel-lock {
    overflow: hidden;
    padding-right: var(--sc-scrollbar-w, 0);
}