/*
 * Cookiemelding en de plaatshouder van ingesloten inhoud (inc/cookies.php).
 *
 * De build vult alleen het :root-blok hieronder met de waarden van het
 * goedgekeurde ontwerp (/wp-build stap 11); de rest van dit bestand is op elke
 * site gelijk. assets/site.css blijft er buiten.
 */
:root {
    --mn-cookie-bg: #101812;
    --mn-cookie-fg: #f2f0e8;
    --mn-cookie-accent: #6f8168;
    --mn-cookie-accent-fg: #ffffff;
    --mn-cookie-radius: 30px 30px 30px 6px;
    --mn-cookie-card-radius: 30px;
    --mn-cookie-font: 'Manrope', sans-serif;
    --mn-cookie-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

/* Een balk onderaan op een telefoon, een kaart linksonder vanaf 640px. Nooit een
   muur: de pagina blijft bruikbaar en scrolt gewoon. */
.mn-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--mn-cookie-bg);
    color: var(--mn-cookie-fg);
    font-family: var(--mn-cookie-font);
    box-shadow: var(--mn-cookie-shadow);
}

.mn-cookie[hidden],
.mn-consent__button[hidden] {
    display: none;
}

.mn-cookie:focus {
    outline: none;
}

.mn-cookie__text,
.mn-consent__placeholder p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.mn-cookie__text a {
    color: inherit;
    text-decoration: underline;
}

.mn-cookie__actions {
    display: flex;
    gap: 8px;
}

/* Accepteren en Weigeren zijn precies even zwaar. */
.mn-cookie__button,
.mn-consent__button {
    flex: 1 1 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--mn-cookie-radius);
    background: var(--mn-cookie-accent);
    color: var(--mn-cookie-accent-fg);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.mn-cookie__button:focus-visible,
.mn-consent__button:focus-visible,
.mn-cookie__text a:focus-visible {
    outline: 2px solid var(--mn-cookie-accent);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .mn-cookie {
        left: 16px;
        right: auto;
        bottom: 16px;
        width: 400px;
        max-width: calc(100vw - 32px);
        /* Eén waarde, de eerste van de knop: een pilknop van het ontwerp maakt van
           de kaart geen pil, en een knop met vier waarden laat min() niet vallen. */
        border-radius: min(var(--mn-cookie-card-radius), 16px);
    }
}

/* Ingesloten inhoud zonder toestemming: de iframe houdt zijn maat, de
   plaatshouder ligt eroverheen. */
.mn-consent {
    position: relative;
}

.mn-consent__placeholder {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    text-align: center;
    background: var(--mn-cookie-bg);
    background: color-mix(in srgb, var(--mn-cookie-fg) 6%, var(--mn-cookie-bg));
    color: var(--mn-cookie-fg);
    font-family: var(--mn-cookie-font);
}

.mn-consent__placeholder .mn-consent__button {
    flex: none;
}

.mn-consent.is-loaded > .mn-consent__placeholder {
    display: none;
}