/*
 * Overlay, modal en lightbox. Werkt samen met WheelWarriors.ui.modal() in
 * assets/js/site.js, maar kan ook met eigen JS via de klasse `is-open`.
 *
 * <div class="ww-c-overlay" data-ww-component="modal" id="voorbeeld" aria-hidden="true">
 *   <div class="ww-c-modal" role="dialog" aria-modal="true" aria-labelledby="...">
 *     <button class="ww-c-modal__close" data-ww-close aria-label="Sluiten">×</button>
 *     ...
 *   </div>
 * </div>
 */

.ww-c-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--ww-space-4);
    background:
        radial-gradient(circle at 84% 22%, var(--ww-orange-a30) 0%, transparent 36%),
        radial-gradient(circle at 12% 80%, rgba(26, 94, 170, 0.30) 0%, transparent 40%),
        linear-gradient(135deg, rgba(8, 15, 32, 0.86), var(--ww-navy-a90));
    -webkit-backdrop-filter: blur(var(--ww-blur));
    backdrop-filter: blur(var(--ww-blur));
    font-family: var(--ww-font-family);
}

.ww-c-overlay.is-open {
    display: flex;
    animation: ww-fade-in 0.2s ease both;
}

.ww-c-overlay--dark {
    background: rgba(10, 21, 48, 0.96);
}

.ww-c-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--ww-modal-width, 640px);
    max-height: min(90vh, 100%);
    overflow: hidden;
    border-radius: var(--ww-radius-xl);
    background: var(--ww-color-surface);
    box-shadow: var(--ww-shadow-modal);
    color: var(--ww-color-navy);
}

.ww-c-overlay.is-open .ww-c-modal {
    animation: ww-scale-in 0.25s var(--ww-ease-out) both;
}

.ww-c-modal--wide {
    --ww-modal-width: 1000px;
}

.ww-c-modal--full {
    --ww-modal-width: 1000px;
    height: 90vh;
}

.ww-c-modal__header {
    display: flex;
    align-items: center;
    gap: var(--ww-space-3);
    padding: 18px 60px 18px 24px;
    border-bottom: 1px solid var(--ww-color-border);
}

.ww-c-modal__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ww-color-navy) !important;
    -webkit-text-fill-color: var(--ww-color-navy) !important;
    font: var(--ww-font-weight-extrabold) var(--ww-text-h3)/1.2 var(--ww-font-family) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    text-shadow: none !important;
    background: none !important;
}

/* Thema-decoraties (bv. oranje vormen op section/pseudo-elementen) horen niet in een modal. */
.ww-c-modal::before,
.ww-c-modal::after,
.ww-c-modal__body::before,
.ww-c-modal__body::after {
    content: none !important;
    display: none !important;
}

.ww-c-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 24px;
}

.ww-c-modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--ww-color-border);
    background: var(--ww-color-soft);
}

/* Thema-bestendig (!important op maat en vorm): thema's zetten grote pills op button. */
.ww-c-modal__close {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid !important;
    place-items: center;
    width: 38px !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ww-color-border) !important;
    border-radius: 50% !important;
    background: var(--ww-color-surface) !important;
    color: var(--ww-color-navy) !important;
    -webkit-text-fill-color: var(--ww-color-navy) !important;
    font: var(--ww-font-weight-regular) 18px/1 var(--ww-font-family) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color var(--ww-transition-fast), color var(--ww-transition-fast);
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.4;
}

.ww-c-modal__close i,
.ww-c-modal__close svg {
    font-size: 16px;
}

.ww-c-modal__close:hover {
    background: var(--ww-color-navy) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Lightbox: afbeelding op een donkere overlay met pijlen. */
.ww-c-lightbox {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
}

.ww-c-lightbox img {
    max-width: 100%;
    max-height: 86vh;
    border-radius: var(--ww-radius-md);
    box-shadow: var(--ww-shadow-modal);
}

.ww-c-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ww-white-a22);
    border-radius: 50%;
    background: var(--ww-white-a10);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--ww-transition-fast);
}

.ww-c-lightbox__nav:hover {
    background: var(--ww-white-a22);
}

.ww-c-lightbox__nav--prev { left: -8px; }
.ww-c-lightbox__nav--next { right: -8px; }

.ww-c-lightbox .ww-c-modal__close {
    top: -8px;
    right: -8px;
    border-color: var(--ww-white-a22) !important;
    background: var(--ww-white-a10) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/*
 * Blob-morph: de modal groeit uit de hoekblob van een kaart (en krimpt er weer in).
 * Aangestuurd door WheelWarriors.ui.modal(): open(trigger) met een trigger die
 * data-ww-morph heeft (of optie morph: true). De overlay krijgt ww-c-overlay--morph;
 * de startvorm staat in --ww-morph-* op de modal; JS voegt twee lagen toe
 * (.ww-c-modal__morph-base = kaartachtergrond, .ww-c-modal__morph-skin = blobkleur).
 * Alleen transform/opacity/border-radius animeren – geen layout, geen blur.
 */
.ww-c-overlay--morph {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    transition: opacity 0.45s ease;
}

.ww-c-overlay--morph.is-open {
    animation: none;
}

.ww-c-overlay--morph.is-morph-start,
.ww-c-overlay--morph.is-closing {
    opacity: 0;
}

.ww-c-overlay--morph.is-closing {
    transition-delay: 0.1s;
}

.ww-c-overlay--morph .ww-c-modal {
    transform-origin: 50% 50%;
    will-change: transform, border-radius;
    transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.2, 1), border-radius 0.6s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.24s ease;
}

.ww-c-overlay--morph.is-open .ww-c-modal {
    animation: none;
}

.ww-c-overlay--morph.is-morph-instant,
.ww-c-overlay--morph.is-morph-instant .ww-c-modal,
.ww-c-overlay--morph.is-morph-instant .ww-c-modal > * {
    transition: none !important;
}

.ww-c-overlay--morph.is-morph-start .ww-c-modal {
    transform: translate(var(--ww-morph-tx, 0px), var(--ww-morph-ty, 0px)) rotate(var(--ww-morph-rot, 18deg)) scale(var(--ww-morph-sx, 0.2), var(--ww-morph-sy, 0.4));
    border-radius: var(--ww-morph-rx, 120px) / var(--ww-morph-ry, 60px);
}

.ww-c-overlay--morph.is-closing .ww-c-modal {
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
}

.ww-c-overlay--morph.is-handoff .ww-c-modal {
    opacity: 0;
}

/* Inhoud gepositioneerd (z 2) zodat de morph-lagen (z 5) erover kunnen; lage specificiteit
   zodat de eigen positionering van bv. de sluitknop blijft gelden. */
:where(.ww-c-overlay--morph .ww-c-modal > :not(.ww-c-modal__morph-layer)) {
    position: relative;
    z-index: 2;
}

/* Inhoud verschijnt zodra de vorm er (bijna) is; bij sluiten meteen weg. */
.ww-c-overlay--morph .ww-c-modal > :not(.ww-c-modal__morph-layer) {
    transition: opacity 0.3s ease 0.4s;
}

.ww-c-overlay--morph.is-morph-start .ww-c-modal > :not(.ww-c-modal__morph-layer) {
    opacity: 0;
    transition-delay: 0s;
    transition-duration: 0.12s;
}

/* Lagen die de kaartachtergrond en de blobkleur meenemen en dan vervagen. */
.ww-c-modal__morph-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease 0.2s;
}

.ww-c-overlay--morph.is-morph-start .ww-c-modal__morph-layer {
    opacity: 1;
    transition-delay: 0s;
    transition-duration: 0.3s;
}

.ww-c-overlay--morph.is-closing .ww-c-modal__morph-layer {
    transition-delay: 0.1s;
}

/* De modal krijgt zelf een hoekblob (dezelfde plek als op kaarten). */
.ww-c-overlay--morph .ww-c-modal::after {
    content: "" !important;      /* wint van de thema-guard hierboven (content: none) */
    display: block !important;
    position: absolute;
    right: -34px;
    bottom: -38px;
    z-index: 3;             /* boven de inhoud (lichte tint, pointer-events none), onder de morph-lagen */
    width: 130px;
    height: 120px;
    border-radius: 28px;
    background: var(--ww-morph-skin, var(--ww-gradient-blob));
    transform: rotate(18deg) scale(1);
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.5s;
}

.ww-c-overlay--morph.is-morph-start .ww-c-modal::after,
.ww-c-overlay--morph.is-closing .ww-c-modal::after {
    transform: rotate(18deg) scale(0);
    transition-delay: 0s;
    transition-duration: 0.15s;
}

/* Scroll-lock op <html> door WheelWarriors.ui.lockScroll(). */
.ww-scroll-locked {
    overflow: hidden !important;
    padding-right: var(--ww-scrollbar-width, 0px);
}

@media (max-width: 650px) {
    .ww-c-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .ww-c-modal {
        max-height: 94vh;
        border-radius: var(--ww-radius-lg) var(--ww-radius-lg) 0 0;
    }

    .ww-c-modal--full {
        height: 94vh;
    }

    .ww-c-modal__header,
    .ww-c-modal__body,
    .ww-c-modal__footer {
        padding-inline: 18px;
    }

    .ww-c-lightbox__nav--prev { left: 6px; }
    .ww-c-lightbox__nav--next { right: 6px; }
}