/* ================================================================
   Webweek Popups v2 — Frontend CSS
   ================================================================ */

/* ── CSS Reset / Base ──────────────────────────────────────── */
.ww-popup,
.ww-popup * {
    box-sizing: border-box;
}

/* ── Tekst helper classes ──────────────────────────────────── */
.ww-desktop { display: block; }
.ww-mobile  { display: none;  }

/* ── Topbalk ─────────────────────────────────────────────────
   Hoogte past zich automatisch aan op content
   ─────────────────────────────────────────────────────────── */
body.ww-top-active {
    margin-top: var(--ww-top-h, 50px);
}
body.ww-top-active header,
body.ww-top-active .site-header {
    top: var(--ww-top-h, 50px) !important;
}

.ww-popup-top {
    display:   none;
    position:  fixed;
    top:       0;
    left:      0;
    right:     0;
    z-index:   99999;
    background: #197f3e;
    color:      #fff;
    min-height: 50px;
    padding:    12px 60px 12px 20px;
    opacity:    0;
    transition: opacity 0.25s;
}
.ww-popup-top.ww-top-visible {
    opacity: 1;
}
.ww-top-content {
    max-width: 960px;
    margin:    0 auto;
    line-height: 1.5;
}
.ww-top-content .ww-text p { margin: 0; }
.ww-top-close {
    position:    absolute;
    right:       14px;
    top:         50%;
    transform:   translateY(-50%);
    background:  rgba(255,255,255,0.2);
    color:       #fff;
    border:      0;
    width:       32px;
    height:      32px;
    border-radius: 50%;
    font-size:   20px;
    line-height: 32px;
    text-align:  center;
    cursor:      pointer;
    padding:     0;
    transition:  background 0.2s;
}
.ww-top-close:hover { background: rgba(255,255,255,0.4); }


/* ── Overlay ─────────────────────────────────────────────────
   Kleur en opacity komen uit CSS-variabele (ingesteld via PHP)
   ─────────────────────────────────────────────────────────── */
.ww-popup-modal {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    99998;
    /* Centering container voor de modal */
    display:    none;
    align-items:    center;
    justify-content: center;
}
.ww-popup-modal.ww-visible {
    display: flex;
}

.ww-overlay {
    position: fixed;
    inset:    0;
    background: var(--ww-overlay, rgba(0,0,0,0.5));
    z-index:  1;
    cursor:   pointer;
    animation: ww-fade-in 0.25s ease;
}


/* ── Modal basis ─────────────────────────────────────────────
   --ww-width     : breedte in px
   --ww-border-r  : border-radius in px
   --ww-max-h     : max-height in px (optioneel)
   --ww-pos-v     : top | center | bottom
   ─────────────────────────────────────────────────────────── */
.ww-modal {
    position:     relative;
    z-index:      2;
    background:   #fff;
    width:        min(var(--ww-width, 800px), calc(100vw - 40px));
    border-radius: var(--ww-border-r, 4px);
    box-shadow:   0 8px 40px rgba(0,0,0,0.22);
    max-height:   var(--ww-max-h, calc(100vh - 60px));
    overflow-y:   auto;
    animation:    ww-slide-up 0.28s cubic-bezier(0.34,1.1,0.64,1);
    /* Scroll binnen modal, niet de pagina */
    overscroll-behavior: contain;
}

/* Verticale uitlijning via margin op het modal (flex-child) */
.ww-popup-modal[style*="--ww-pos-v:top"] .ww-modal,
.ww-popup-modal .ww-modal[style*="--ww-pos-v:top"] {
    margin-top: 40px;
    align-self: flex-start;
}
.ww-popup-modal[style*="--ww-pos-v:bottom"] .ww-modal,
.ww-popup-modal .ww-modal[style*="--ww-pos-v:bottom"] {
    margin-bottom: 40px;
    align-self: flex-end;
}


/* ── Header ─────────────────────────────────────────────────  */
.ww-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         22px 28px;
    border-bottom:   1px solid #eee;
    background:      #fff;
    border-radius:   var(--ww-border-r, 4px) var(--ww-border-r, 4px) 0 0;
    gap:             12px;
}
.ww-title {
    margin:     0;
    font-size:  1.2rem;
    font-weight: 600;
    line-height: 1.3;
    flex:       1;
}
.ww-close {
    flex-shrink: 0;
    background:  none;
    border:      0;
    color:       #aaa;
    font-size:   28px;
    line-height: 1;
    cursor:      pointer;
    padding:     0 4px;
    transition:  color 0.15s;
}
.ww-close:hover { color: #333; }

/* Sluitknop zwevend (zonder header) */
.ww-close-float {
    position: absolute;
    top:    14px;
    right:  14px;
    z-index: 5;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    width:  36px;
    height: 36px;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.ww-close-float:hover { background: #fff; color: #333; }


/* ── Body / Content ─────────────────────────────────────────  */
.ww-body { padding: 0; }
.ww-content {
    padding: 36px 44px;
}
.ww-text p:last-child { margin-bottom: 0; }
.ww-text .iframe-wrap {
    position:    relative;
    padding-bottom: 56.25%;
    height:      0;
    overflow:    hidden;
}
.ww-text .iframe-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
}


/* ── Alleen afbeelding modus ─────────────────────────────────
   Modal heeft geen vaste breedte — past op de foto
   ─────────────────────────────────────────────────────────── */
.ww-modal-imgonly {
    background:    transparent;
    box-shadow:    none;
    width:         auto;
    max-height:    none;
    border-radius: 0;
    padding:       0;
    overflow:      visible;
    animation:     ww-fade-scale 0.28s cubic-bezier(0.34,1.1,0.64,1);
}
.ww-solo-img {
    display:       block;
    /* max-width/height komen als inline style uit PHP */
    width:         auto;
    height:        auto;
    border-radius: 4px;
    box-shadow:    0 8px 40px rgba(0,0,0,0.35);
}
.ww-close-imgonly {
    position:      absolute;
    top:           10px;
    right:         10px;
    z-index:       10;
    background:    rgba(0,0,0,0.55);
    color:         #fff;
    border:        0;
    border-radius: 50%;
    width:         38px;
    height:        38px;
    font-size:     22px;
    line-height:   38px;
    text-align:    center;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s;
}
.ww-close-imgonly:hover { background: rgba(0,0,0,0.8); }


/* ── Split layout (afbeelding naast tekst) ───────────────────
   --ww-img-w   : breedte afbeelding (bijv. 40% of 350px)
   --ww-img-h   : hoogte afbeelding (bijv. 100% of 400px)
   --ww-img-fit : object-fit waarde
   --ww-img-pos : object-position waarde
   ─────────────────────────────────────────────────────────── */
.ww-modal-split { overflow: hidden; }

.ww-split-body {
    display: flex;
    min-height: 300px;
}
.ww-img-right .ww-split-body { flex-direction: row; }
.ww-img-left  .ww-split-body { flex-direction: row-reverse; }

.ww-split-text {
    flex:     1 1 auto;
    min-width: 0;
    padding:  36px 44px;
    overflow-y: auto;
}
.ww-split-img {
    flex:     0 0 var(--ww-img-w, 40%);
    position: relative;
    overflow: hidden;
    min-height: var(--ww-img-h, 100%);
}
.ww-split-img-el {
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    object-fit:     var(--ww-img-fit, cover);
    object-position: var(--ww-img-pos, center center);
    display:        block;
}


/* ── Animaties ───────────────────────────────────────────────  */
@keyframes ww-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ww-slide-up {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes ww-fade-scale {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes ww-slide-out {
    from { opacity: 1; transform: translateY(0)    scale(1); }
    to   { opacity: 0; transform: translateY(12px) scale(0.97); }
}
.ww-modal.ww-closing {
    animation: ww-slide-out 0.2s ease forwards;
}


/* ── Responsive ──────────────────────────────────────────────  */
@media (max-width: 768px) {

    /* Tekst desktop/mobiel wisselen */
    .ww-desktop { display: none;  }
    .ww-mobile  { display: block; }

    /* Topbalk */
    body.ww-top-active { margin-top: var(--ww-top-h, 42px); }
    .ww-popup-top { min-height: 42px; padding: 10px 52px 10px 16px; font-size: 0.9rem; }

    /* Modal: full-width, beetje marge rondom */
    .ww-popup-modal { align-items: flex-end; }
    .ww-modal {
        width:         100% !important;
        max-width:     100%;
        border-radius: 12px 12px 0 0 !important;
        max-height:    90vh !important;
        margin:        0 !important;
        animation:     ww-slide-up-mob 0.28s cubic-bezier(0.34,1.1,0.64,1);
    }

    /* Split → stapelen op mobiel */
    .ww-split-body { flex-direction: column !important; }
    .ww-split-img {
        flex:       0 0 var(--ww-img-mob-h, 220px);
        height:     var(--ww-img-mob-h, 220px);
        min-height: unset;
        order:      -1; /* altijd bovenaan op mobiel */
        width:      100%;
    }
    .ww-split-img.ww-img-mob-hide { display: none; }
    .ww-split-text { padding: 24px 20px; }
    .ww-content { padding: 24px 20px; }
    .ww-header  { padding: 16px 20px; }

    /* Alleen-img: scherm-vullend maar met marge */
    .ww-popup-modal.ww-popup-imgonly { align-items: center; }
    .ww-solo-img { max-width: 95vw !important; max-height: 90vh !important; }
}

@keyframes ww-slide-up-mob {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
}