/**
 * Paperchase Shop — base styles (expand with design system).
 */

:root {
    /* Vervangen door paperchase-tokens.css op this theme — hier alleen layout-rhythm */
    --pcs-space: 1rem;
    --pcs-max-w: 72rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: transparent;
    color: inherit;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: var(--pcs-space);
    left: var(--pcs-space);
    z-index: 100000;
    clip: auto;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    background: #000;
    border: 1px solid var(--pcs-publishing-gold, #ffcb00);
    color: #fff;
    text-decoration: none;
}

.site-header {
    position: relative;
    z-index: 10012;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    /* Mobiel drawer zit buiten header; voorkomt clipping door toekomstige overflow/filters */
    overflow: visible;
}

/* Volle viewportbreedte: achtergrond/blur lopen door tot de randen (niet beperkt tot --pcs-max-w). */
.site-header__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--pcs-space) clamp(1rem, 4vw, 2.5rem);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem 1rem;
    position: relative;
    z-index: 10012;
    overflow: visible;
}

/* Zie theme: background + backdrop-filter — zonder filter op .site-header (fixed nav/backdrop)! */
.site-header__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.site-header__brand,
.site-nav-shell,
.site-nav-toggle,
.site-header__end {
    position: relative;
    z-index: 1;
}

.site-header__brand {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.site-header__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-left: auto;
}

/* Desktop / tablet breed: voorkom dat logo + menu + acties elkaar klemmen */
@media (min-width: 961px) and (max-width: 1320px) {
    .site-header__inner {
        flex-wrap: wrap;
        row-gap: 0.55rem;
        column-gap: 0.75rem;
        padding-left: clamp(0.65rem, 2vw, 1.25rem);
        padding-right: clamp(0.65rem, 2vw, 1.25rem);
    }

    .site-header__brand {
        order: 1;
    }

    .site-header__end {
        order: 2;
        margin-left: auto;
    }

    .site-nav-shell {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
        justify-content: center;
        padding-top: 0.55rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .site-nav__list {
        justify-content: center;
        gap: clamp(0.5rem, 1.5vw, 0.85rem);
    }
}

@media (min-width: 961px) and (max-width: 1100px) {
    .site-header .site-nav__list a {
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
    }
}

/* —— Mobile: hamburger + links slide-in panel (Paperchase subdomein-DNA) —— */
.site-nav-toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--pcs-radius-container, 9px);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--pcs-publishing-gold) 45%, transparent);
    background: rgba(12, 12, 12, 0.75);
    box-shadow: 0 0 18px color-mix(in srgb, var(--pcs-publishing-gold) 12%, transparent);
    outline: none;
}

.site-nav-toggle__box {
    position: relative;
    display: block;
    width: 1.125rem;
    height: 0.875rem;
}

.site-nav-toggle__bar {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition:
        transform 0.22s ease,
        opacity 0.22s ease,
        top 0.22s ease;
}

.site-nav-toggle__bar:nth-child(1) {
    top: 0;
}

.site-nav-toggle__bar:nth-child(2) {
    top: 6px;
}

.site-nav-toggle__bar:nth-child(3) {
    top: 12px;
}

body.pcs-mobile-nav-open .site-nav-toggle__bar:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

body.pcs-mobile-nav-open .site-nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

body.pcs-mobile-nav-open .site-nav-toggle__bar:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

.site-nav-backdrop {
    display: none;
}

.site-nav-shell {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.site-nav-shell .site-nav {
    width: 100%;
}

@media (max-width: 960px) {
    /* Blijft bovenaan zichtbaar; na scrollen transparantere glaslaag (zie body.pcs-header-mobile-scrolled) */
    .site-header {
        position: sticky;
        top: 0;
        align-self: flex-start;
    }

    /* Meer lucht boven hamburger + winkelmand (was gelijk aan --pcs-space; notch via safe-area) */
    .site-header__inner {
        padding-top: calc(env(safe-area-inset-top, 0px) + 1.3rem);
        padding-bottom: var(--pcs-space);
        padding-left: clamp(1rem, 4vw, 2.5rem);
        padding-right: clamp(1rem, 4vw, 2.5rem);
    }

    .site-header__backdrop {
        transition:
            background 0.38s ease,
            backdrop-filter 0.38s ease,
            -webkit-backdrop-filter 0.38s ease;
    }

    body.pcs-header-mobile-scrolled:not(.pcs-mobile-nav-open) .site-header__backdrop {
        background: rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
    }

    body.pcs-header-mobile-scrolled:not(.pcs-mobile-nav-open) .site-header {
        border-bottom-color: rgba(255, 255, 255, 0.07);
        box-shadow: none;
    }

    body.pcs-header-logo-mobile--hidden .site-header__brand {
        display: none;
    }

    .site-nav-toggle {
        display: inline-flex;
        order: 2;
        position: relative;
        z-index: 10020;
    }

    .site-header__brand {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
        z-index: 10020;
    }

    .site-header__end {
        order: 3;
        margin-left: auto;
        position: relative;
        z-index: 10020;
        flex-shrink: 0;
        min-width: 0;
        max-width: 100%;
        justify-content: flex-end;
    }

    .site-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10008;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, 0.58);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.26s ease,
            visibility 0.26s ease;
    }

    body.pcs-mobile-nav-open .site-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .site-nav-backdrop[hidden] {
        display: none !important;
    }

    .site-nav-shell {
        position: fixed;
        z-index: 10010;
        top: 0;
        left: 0;
        /* Geen bottom: 0 — paneelhoogte = inhoud tot onder laatste item (max. schermhoogte). */
        width: min(19.5rem, 88vw);
        height: auto;
        max-height: 100dvh;
        flex: none;
        justify-content: stretch;
        margin: 0;
        padding: calc(4.75rem + env(safe-area-inset-top, 0px)) 1.25rem
            calc(1.25rem + env(safe-area-inset-bottom, 0px)) 1.35rem;
        background: linear-gradient(180deg, rgba(8, 8, 10, 0.97) 0%, rgba(0, 0, 0, 0.98) 100%);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 12px 0;
        box-shadow:
            8px 0 40px rgba(0, 0, 0, 0.55),
            inset 4px 0 0 var(--pcs-publishing-gold, #ffcb00);
        transform: translateX(-102%);
        transition: transform 0.28s cubic-bezier(0.22, 0.82, 0.28, 1);
        /* geen overflow-x: hidden — knipt nav-skew (::after) en labelteksten op smalle viewports */
        overflow-x: visible;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        min-height: 0;
    }

    body.pcs-mobile-nav-open .site-nav-shell {
        transform: translateX(0);
    }

    .site-nav-shell .site-nav__list {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.25rem;
        max-width: 100%;
    }

    .site-nav-shell .site-nav__list > li {
        width: 100%;
    }

    .site-nav-shell .site-nav__list a {
        display: block;
        padding: 0.85rem 0.35rem 0.85rem 0.15rem;
        font-size: 0.8125rem;
        letter-spacing: 0.12em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .site-nav-shell .site-nav__list .sub-menu {
        position: static;
        display: block;
        margin: 0;
        padding: 0 0 0 0.85rem;
        list-style: none;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .site-nav-shell .site-nav__list .sub-menu a {
        font-size: 0.75rem;
        opacity: 0.92;
    }
}

body.pcs-mobile-nav-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-shell,
    .site-nav-backdrop,
    .site-nav-toggle__bar,
    .site-header__backdrop {
        transition-duration: 0.01ms !important;
    }
}

/* Volgorde: (optioneel merk) → socials horizontaal → ruimte t.o.v. CookieAdmin → © + KvK */
.site-footer__social-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    margin: 0 0 0.15rem;
}

.site-footer__social-row .pcs-social--footer {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.45rem;
    column-gap: 0.45rem;
    width: 100%;
    max-width: 100%;
}

/* Extra consent-tekst / links uit hook onder de iconen */
.site-footer__social-row > *:not(.pcs-social--footer) {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.45;
    opacity: 0.85;
    max-width: 22rem;
}

.site-footer__social-row > *:not(.pcs-social--footer) a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Reserveband vóór ©/KvK: vaste CookieAdmin-knop “landt” visueel hier */
.site-footer__cookie-slot {
    display: none;
    width: 100%;
    flex-shrink: 0;
}

.site-footer__legal {
    width: 100%;
    margin: 0;
    text-align: left;
}

/* Scheiding alleen als er iets boven staat (socials / cookie-ruimte / logo) */
.site-footer__inner > :not(.site-footer__legal) ~ .site-footer__legal {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.site-footer__legal .site-footer__copy,
.site-footer__legal .site-footer__credits {
    margin: 0;
}

.site-footer__legal .site-footer__tagline--footer-meta {
    margin: 0.3rem 0 0;
    max-width: 44rem;
}

/* Mobiel: © + KvK gecentreerd en netjes onder elkaar */
@media (max-width: 767px) {
    .site-footer__legal {
        text-align: center;
    }

    .site-footer__legal .site-footer__copy,
    .site-footer__legal .site-footer__credits {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: min(34rem, 100%);
    }

    .site-footer__legal .site-footer__tagline--footer-meta {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: min(34rem, 100%);
    }
}

@media (max-width: 640px) {
    .site-footer__inner {
        padding: 1.05rem clamp(0.85rem, 4vw, 1.1rem)
            calc(1.1rem + env(safe-area-inset-bottom, 0px));
    }

    .site-footer__copy,
    .site-footer__credits {
        font-size: 0.8125rem;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .site-footer__legal .site-footer__tagline--footer-meta {
        font-size: 0.75rem;
        line-height: 1.5;
    }

    .site-footer__brand-mark {
        margin-bottom: 0.55rem;
    }

    .site-footer__brand-img {
        max-height: 44px;
        max-width: min(6.5rem, 42vw);
    }

    .site-footer__social-row {
        margin-bottom: 0.1rem;
    }
}

/* CookieAdmin: onderzijde footer + zichtbare band boven ©/KvK op smalle schermen */
@media (max-width: 767px) {
    body:has(.cookieadmin_re_consent) .site-footer .site-footer__inner {
        padding-bottom: calc(3.15rem + env(safe-area-inset-bottom, 0px));
    }

    body:has(.cookieadmin_re_consent) .site-footer__cookie-slot {
        display: block;
        min-height: 2.85rem;
    }
}

.site-footer__tagline {
    margin: 0;
    font-size: 0.8125rem;
    opacity: 0.72;
    line-height: 1.55;
}

.site-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

/* Plat logo (Customizer) — intrinsieke afmetingen van WP/PNG kunnen enorm zijn zonder cap */
.site-header .site-branding:not(.site-branding--glb) .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    max-height: 56px;
}

.site-header .site-branding:not(.site-branding--glb) .custom-logo-link img,
.site-header .site-branding:not(.site-branding--glb) img.custom-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 52px;
    max-width: min(240px, 52vw);
    object-fit: contain;
}

/* GLB-site-logo (Customizer → Paperchase ecosysteem, pad /glb/) */
.site-branding--glb {
    flex: 0 0 auto;
    min-width: 0;
}

.site-branding--glb .site-branding__glb-link {
    display: block;
    line-height: 0;
    text-decoration: none;
    vertical-align: middle;
    max-width: min(168px, 42vw);
    overflow: hidden;
}

.site-logo-glb {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
    min-height: 44px;
    max-height: 64px;
    aspect-ratio: 2.8 / 1;
    background: transparent;
    --poster-color: transparent;
}

.site-logo-glb__poster {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    background: rgba(0, 0, 0, 0.45);
    color: var(--pcs-text-primary, #f2f2f2);
    font-family: var(--pcs-font-display, "Jost", system-ui, sans-serif);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.site-logo-glb__poster-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-nav__list a {
    color: inherit;
    text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a:focus {
    text-decoration: none;
}

.site-main {
    max-width: var(--pcs-max-w);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
}

.site-footer__inner {
    max-width: var(--pcs-max-w);
    margin: 0 auto;
    padding: 1.15rem clamp(1rem, 4vw, 1.25rem) 1.25rem;
}

/* Customizer: compacte footer-afbeelding (logo / merkteken) */
.site-footer__brand-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 0.65rem;
    line-height: 0;
}

.site-footer__brand-link {
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.site-footer__brand-link:hover,
.site-footer__brand-link:focus-visible {
    opacity: 0.92;
    box-shadow: 0 0 0 2px rgba(255, 203, 0, 0.35);
    outline: none;
}

.site-footer__brand-img {
    display: block;
    width: auto;
    height: auto;
    max-height: 52px;
    max-width: min(7.5rem, 36vw);
    object-fit: contain;
    vertical-align: middle;
}

.site-footer__copy,
.site-footer__credits {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.85;
}

.site-footer__credits .site-footer__credit-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--pcs-publishing-gold) 35%, transparent);
}

.site-footer__credits .site-footer__credit-link:hover,
.site-footer__credits .site-footer__credit-link:focus-visible {
    color: var(--pcs-publishing-gold);
    border-bottom-color: color-mix(in srgb, var(--pcs-publishing-gold) 65%, transparent);
}

/* Blog / archief / zoeken — 2 kolommen mobiel, 3 kolommen brede desktop (zelfde ritme als .pcs-bento). */
.pcs-posts-archive-grid {
    display: grid;
    gap: clamp(0.85rem, 2.5vw, 1.35rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

@media (min-width: 1100px) {
    .pcs-posts-archive-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pcs-posts-archive-grid > article {
    min-width: 0;
}

.entry-title {
    margin-top: 0;
}

.entry-content > *:first-child {
    margin-top: 0;
}