/* --------------------------------------------------
   Wide Open Windows — Shared header controls
-------------------------------------------------- */

/* --------------------------------------------------
   Keyboard accessibility
-------------------------------------------------- */

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 10px;
    left: 10px;

    padding: 10px 14px;
    border: 2px solid #fff;
    border-radius: 3px;

    background: #111;
    color: #fff !important;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;

    transform: translateY(-160%);
    transition: transform var(--wow-transition-fast, 180ms ease);
}

.skip-link:focus {
    transform: translateY(0);
    outline: none;
}

#main-content:focus {
    outline: none;
}

/* --------------------------------------------------
   Compacte vaste donkere headerbalk
-------------------------------------------------- */

.site-header-bar {
    position: fixed;
    z-index: 32000;

    top: 0;
    right: 0;
    left: 0;

    min-height: 64px;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #222;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.85),
        0 5px 16px rgba(0, 0, 0, 0.28);
}

/* De header blijft donker in paper mode. */
html.reading-paper .site-header-bar {
    background: #222;
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------
   Reading controls — links
-------------------------------------------------- */

.reading-controls {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* --------------------------------------------------
   Rhizome controls — rechts
-------------------------------------------------- */

.site-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --------------------------------------------------
   Gemeenschappelijke knopstijl
-------------------------------------------------- */

.reading-control,
.menu-toggle,
.rhizome-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    min-height: 40px;
    padding: 0 4px;

    border: 0;
    background: transparent;
    box-shadow: none;

    appearance: none;
    -webkit-appearance: none;

    color: rgba(255, 255, 255, 0.96);
    font: inherit;

    cursor: pointer;
    opacity: 0.9;

    transition:
        color var(--wow-transition-fast, 180ms ease),
        opacity var(--wow-transition-fast, 180ms ease),
        transform var(--wow-transition-fast, 180ms ease);
}

.reading-control:hover,
.reading-control:focus-visible,
.menu-toggle:hover,
.menu-toggle:focus-visible,
.rhizome-close:hover,
.rhizome-close:focus-visible {
    color: #fff;
    opacity: 1;
    transform: translateY(-1px);
}

.reading-control:focus-visible,
.menu-toggle:focus-visible,
.rhizome-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.reading-control--placeholder,
.reading-control--placeholder:disabled {
    color: rgba(255, 255, 255, 0.8);
    cursor: default;
    opacity: 1;
    transform: none;
}

.reading-control--text {
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.reading-control--fullscreen {
    min-width: 38px;
    font-size: 1.08rem;
}

/* --------------------------------------------------
   Wisselende mode-iconen
-------------------------------------------------- */

.reading-mode-icon--dark {
    display: none;
}

html.reading-paper .reading-mode-icon--paper {
    display: none;
}

html.reading-paper .reading-mode-icon--dark {
    display: inline;
}

.reading-control--mode[aria-pressed="true"] {
    color: #fff;
    opacity: 1;
}


/* --------------------------------------------------
   Rhizome
-------------------------------------------------- */

.menu-toggle {
    gap: 8px;
    padding: 4px 0 4px 6px;
}

.menu-toggle > span:first-child {
    font-size: 1.25rem;
    line-height: 1;
}

.menu-toggle__label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------
   Sluiten
-------------------------------------------------- */

.rhizome-close {
    display: none;

    width: 30px;
    height: 40px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.55rem;
    font-weight: 300;
    line-height: 1;
}

body.rhizome-panel-open .rhizome-close,
body.rhizome-open .rhizome-close {
    display: inline-flex;
}

/* --------------------------------------------------
   Mobiel
-------------------------------------------------- */

@media (max-width: 700px) {
    .site-header-bar {
        min-height: 56px;
        padding: 0 10px 0 8px;
    }

    .reading-controls {
        gap: 0;
    }

    .site-controls {
        gap: 6px;
    }

    /*
     * Op mobiel blijft Paper Mode direct beschikbaar.
     * De fijnregeling van lettergrootte, regelafstand en reset
     * verdwijnt uit de vaste balk om voldoende touchruimte te houden.
     */
    .reading-control--text,
    .reading-control--spacing,
    .reading-control--reset,
    .reading-control--fullscreen {
        display: none;
    }

    .reading-control--mode,
    .menu-toggle,
    .explore-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .reading-control--mode {
        padding: 0 6px;
    }

    .menu-toggle {
        padding: 4px 2px;
    }

    .menu-toggle__label {
        display: none;
    }

    .rhizome-close {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 380px) {
    .site-header-bar {
        padding-right: 6px;
        padding-left: 6px;
    }

    .site-controls {
        gap: 2px;
    }
}

/* --------------------------------------------------
   Home link remains unchanged in Paper Mode
-------------------------------------------------- */

.site-header-bar > a {
    color: #ccc !important;
    text-decoration: none;
}

.site-header-bar > a:hover,
.site-header-bar > a:focus-visible {
    color: #fff !important;
    outline: none;
}

html.reading-paper .site-header-bar > a {
    color: #ccc !important;
}

html.reading-paper .site-header-bar > a:hover,
html.reading-paper .site-header-bar > a:focus-visible {
    color: #fff !important;
}

/* BWP 8C.12.4 — responsive masonry gallery */
.bwp-gallery{position:relative;margin:1.75rem 0;min-height:2rem}
.bwp-gallery__item{position:absolute;top:0;left:0;margin:0;overflow:hidden;border-radius:8px;box-sizing:border-box}
.bwp-gallery__item img{display:block;width:100%;height:auto;margin:0}
.bwp-gallery__caption{box-sizing:border-box;padding:.45rem .65rem;font-size:.9rem;line-height:1.3}
@media (hover:hover){.bwp-gallery__caption{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.82);color:#fff;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}.bwp-gallery__item:hover .bwp-gallery__caption{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bwp-gallery__caption{transition:none}}

/* BWP 8C.12.5 — gallery polish + accessible lightbox */
.bwp-gallery{margin:2rem .35rem}
.bwp-gallery__item{cursor:zoom-in}
.bwp-gallery__item:focus-visible{outline:3px solid currentColor;outline-offset:3px}
html.bwp-lightbox-open,html.bwp-lightbox-open body{overflow:hidden}
.bwp-lightbox[hidden]{display:none!important}
.bwp-lightbox{position:fixed;inset:0;z-index:100000;color:#fff}
.bwp-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(2px)}
.bwp-lightbox__stage{position:absolute;inset:0;display:grid;grid-template-columns:minmax(3.25rem,8vw) minmax(0,1fr) minmax(3.25rem,8vw);grid-template-rows:1fr;align-items:center;padding:max(1rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left));box-sizing:border-box}
.bwp-lightbox__figure{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;max-height:100%}
.bwp-lightbox__image{display:block;max-width:min(100%,1400px);max-height:82vh;width:auto;height:auto;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.45)}
.bwp-lightbox__caption{max-width:min(92vw,1400px);margin:.75rem auto 0;padding:.45rem .7rem;background:rgba(0,0,0,.72);border-radius:.3rem;text-align:center;font-size:.95rem;line-height:1.35;color:#fff}
.bwp-lightbox__close,.bwp-lightbox__prev,.bwp-lightbox__next{position:relative;z-index:2;border:0;border-radius:999px;background:rgba(0,0,0,.38);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;font:400 2.4rem/1 system-ui,sans-serif}
.bwp-lightbox__close{position:absolute;right:max(1rem,env(safe-area-inset-right));top:max(1rem,env(safe-area-inset-top));font-size:2rem}
.bwp-lightbox__prev{grid-column:1;justify-self:center}
.bwp-lightbox__next{grid-column:3;justify-self:center}
.bwp-lightbox__close:hover,.bwp-lightbox__prev:hover,.bwp-lightbox__next:hover,.bwp-lightbox__close:focus-visible,.bwp-lightbox__prev:focus-visible,.bwp-lightbox__next:focus-visible{background:#fff;color:#000;outline:none}
@media(max-width:640px){.bwp-gallery{margin:1.5rem 0}.bwp-lightbox__stage{grid-template-columns:3rem minmax(0,1fr) 3rem}.bwp-lightbox__image{max-height:78vh}.bwp-lightbox__close,.bwp-lightbox__prev,.bwp-lightbox__next{width:3rem;height:3rem;font-size:2rem}.bwp-lightbox__caption{font-size:.88rem}}
@media(prefers-reduced-motion:reduce){.bwp-lightbox *{scroll-behavior:auto!important;transition:none!important}}