/*
 * Kruidenbuurt Sint Maarten: als laatste geladen, na Kruidenbuurt, de kern en donker.css. theme.php zet de site op
 * donker ('kleurmodus' => 'donker'): een avond in november, verlicht door lampionnen. Alles hangt daarom aan
 * [data-bs-theme=dark]; 'html[...]' weegt even zwaar als de donkere regels van de kern en wint omdat dit bestand later
 * komt. Plaatjes met een absoluut pad (dit bestand staat vaak inline in de pagina). Verrassingen: onderaan (.sm-*).
 */

html[data-bs-theme=dark] {
    --sm-avond: #14122a;
    --sm-kaart: #1f1c38;
    --sm-indigo: #2a2552;
    --sm-oranje: #ff9a2e;
    --sm-oranje-licht: #ffc070;
    --sm-geel: #ffd23f;
    --sm-rood: #c8102e;

    --primary-color: var(--sm-oranje);
    --primary-rgb: 255, 154, 46;
    --primary-hover: #f07f0e;
    --primary-hover-color: #f07f0e;
    --hover-color: #f07f0e;
    --primary-light: rgba(255, 154, 46, 0.12);
    --primary-gradient-end: #ff6a00;
    --primary-contrast: #1d1100;
    --primary-text: var(--sm-oranje-licht);
    --bs-success: var(--sm-oranje);
    --bs-success-rgb: 255, 154, 46;
    --bs-success-text-emphasis: var(--sm-oranje-licht);

    --page-bg: var(--sm-avond);
    --bs-body-bg: var(--sm-kaart);
    --bs-body-bg-rgb: 31, 28, 56;
    --bs-tertiary-bg: #26224a;
    --bs-tertiary-bg-rgb: 38, 34, 74;
    --bs-secondary-bg: #2c2852;
    --bs-secondary-bg-rgb: 44, 40, 82;
    --bs-body-color: #ece8f8;
    --bs-border-color: #3a3566;

    --bs-link-color: var(--sm-oranje-licht);
    --bs-link-color-rgb: 255, 192, 112;
    --bs-link-hover-color: #ffd9a3;
    --bs-link-hover-color-rgb: 255, 217, 163;

    --menu-text: #f1edfc;
    --dark-nav-bg: var(--sm-indigo);
    --dark-nav-hover: var(--sm-oranje);
    --dark-nav-hover-text: #1d1100;
    --footer-bg: #0e0c1f;
    --footer-text: #d6d1ec;
    --notice-color: var(--sm-oranje);
    --notice-bg: #2a2140;
    --notice-text: #f1edfc;
}

/* Avondlucht met een paar sterren en de gloed van lampionnen bovenaan */
html[data-bs-theme=dark] body {
    position: relative;
    background-color: var(--sm-avond);
    background-image:
        radial-gradient(1px 1px at 9% 9%, #fff8 50%, transparent 51%),
        radial-gradient(1px 1px at 27% 4%, #fff6 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 63% 7%, #fff9 50%, transparent 51%),
        radial-gradient(1px 1px at 86% 12%, #fff7 50%, transparent 51%),
        radial-gradient(ellipse 60% 120px at 50% 0, rgba(255, 154, 46, 0.18), transparent 70%),
        linear-gradient(180deg, #221c45 0, var(--sm-avond) 320px);
    background-repeat: no-repeat;
}

/* Slinger met lampionnen boven de kop (beweging en flakkeren zitten in de SVG). Achter logo, knop en menu
   (z-index 1 tegen 2): anders hangen de lampionnen over "Kruidenbuurt" en "Word Vrijwilliger". */
html[data-bs-theme=dark] body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background: url("/themes/kruidenbuurt-sintmaarten/assets/lampionnen.svg") repeat-x left top / 320px 88px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
}

/* Logobalk: Sint Maarten rijdt met zijn lampion van links naar rechts */
html[data-bs-theme=dark] .kop-logobalk {
    position: relative;
    overflow: hidden;
}

html[data-bs-theme=dark] .kop-logobalk::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 84px;
    height: 56px;
    background: url("/themes/kruidenbuurt-sintmaarten/assets/ruiter.svg") no-repeat center bottom / contain;
    pointer-events: none;
    z-index: 0;
    /* Lichtrand van de lampion: anders valt het donkere silhouet weg tegen de avondlucht */
    filter: drop-shadow(0 0 1px rgba(255, 214, 150, 0.9)) drop-shadow(0 0 8px rgba(255, 154, 46, 0.5));
    animation: sm-rijden 46s linear infinite;
    animation-delay: -15s;
}

html[data-bs-theme=dark] .navbar-brand,
html[data-bs-theme=dark] .header-cta {
    position: relative;
    z-index: 2;
}

/* Zacht avondvlak achter de logotekst: de lampionnen erachter schijnen dan niet door de letters */
html[data-bs-theme=dark] .navbar-brand .logo-tekst {
    background: radial-gradient(closest-side, var(--sm-avond) 75%, rgba(20, 18, 42, 0));
    padding: 4px 14px;
    margin: -4px -14px;
}

html[data-bs-theme=dark] .header-cta .btn {
    background: linear-gradient(135deg, var(--sm-oranje), #ff6a00) !important;
    color: #1d1100 !important;
    font-weight: 600;
    box-shadow: 0 0 18px rgba(255, 154, 46, 0.45) !important;
}

/* Menubalk: indigo met een warme gloeirand */
html[data-bs-theme=dark] .main-nav {
    background-color: var(--sm-indigo);
    border-bottom: 3px solid var(--sm-oranje);
    box-shadow: 0 6px 18px -8px rgba(255, 154, 46, 0.6);
}

/* Koppen: lampiongeel en -oranje */
html[data-bs-theme=dark] :is(h1, .h1) {
    color: var(--sm-geel) !important;
}

html[data-bs-theme=dark] :is(h2, .h2, .text-success) {
    color: var(--sm-oranje-licht) !important;
}

/* Icoonbolletjes als lampion */
html[data-bs-theme=dark] .icon-circle.bg-success {
    background: url("/themes/kruidenbuurt-sintmaarten/assets/lampion-icoon.svg") no-repeat center / contain !important;
    box-shadow: 0 0 16px rgba(255, 171, 61, 0.55);
    color: #3b1d00 !important;
}

html[data-bs-theme=dark] .hover-card:hover {
    box-shadow: 0 0 0 2px var(--sm-oranje), 0 8px 24px rgba(255, 154, 46, 0.25) !important;
}

/* Knoppen: lampionoranje in plaats van Kruidenbuurt-groen; hover rood als de mantel */
html[data-bs-theme=dark] .btn-primary,
html[data-bs-theme=dark] .btn-success {
    color: #1d1100 !important;
    background-color: var(--sm-oranje) !important;
    border-color: var(--sm-oranje) !important;
}

html[data-bs-theme=dark] .btn-primary:hover,
html[data-bs-theme=dark] .btn-success:hover {
    color: #fff !important;
    background-color: var(--sm-rood) !important;
    border-color: var(--sm-rood) !important;
}

html[data-bs-theme=dark] .btn-outline-primary,
html[data-bs-theme=dark] .btn-outline-success {
    color: var(--sm-oranje-licht) !important;
    border-color: var(--sm-oranje) !important;
}

html[data-bs-theme=dark] .btn-outline-primary:hover,
html[data-bs-theme=dark] .btn-outline-success:hover {
    color: #1d1100 !important;
    background-color: var(--sm-oranje) !important;
}

/* Voet: daken in de avond met verlichte ramen */
html[data-bs-theme=dark] .footer {
    position: relative;
    margin-top: 86px;
    background-color: #0e0c1f !important;
}

html[data-bs-theme=dark] .footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -80px;
    height: 81px;
    background: url("/themes/kruidenbuurt-sintmaarten/assets/daken.svg") repeat-x left bottom / 300px 80px;
    pointer-events: none;
}

html[data-bs-theme=dark] .footer-kop {
    color: var(--sm-geel) !important;
}

@keyframes sm-rijden {
    from { transform: translateX(-100px); }
    to { transform: translateX(calc(100vw + 100px)); }
}

@keyframes sm-rijden-kort {
    0% { transform: translateX(-100px); }
    25%, 100% { transform: translateX(calc(100vw + 100px)); }
}

/* Tablet en mobiel: zoals de andere feestdagthema's schuift de menubalk (hamburger en zoekicoon) over de logobalk.
   61px = hoogte van de logobalk. Doorzichtig; laat kliks door behalve op de knoppen en het paneel. */
@media (max-width: 991.98px) {
    html[data-bs-theme=dark] .main-nav {
        margin-top: -61px;
        height: 61px;
        background-color: transparent;
        border-bottom: 0;
        box-shadow: none;
        pointer-events: none;
        position: relative;
        z-index: 2;
    }

    html[data-bs-theme=dark] .main-nav > .container {
        justify-content: flex-end;
        align-items: center;
        height: 100%;
    }

    html[data-bs-theme=dark] .main-nav .navbar-toggler,
    html[data-bs-theme=dark] .main-nav .mobile-search-toggle,
    html[data-bs-theme=dark] .main-nav .offcanvas {
        pointer-events: auto;
    }

    html[data-bs-theme=dark] .main-nav .offcanvas {
        background-color: var(--sm-indigo);
        border-left: 3px solid var(--sm-oranje);
    }

    html[data-bs-theme=dark] .main-nav .mobile-search-toggle {
        order: 1;
        margin-right: 6px;
        --bs-btn-color: var(--sm-oranje-licht);
        --bs-btn-hover-color: var(--sm-oranje-licht);
        --bs-btn-active-color: var(--sm-oranje-licht);
    }

    html[data-bs-theme=dark] .main-nav .navbar-toggler {
        order: 2;
        background-color: var(--sm-oranje);
        border-color: var(--sm-oranje);
    }

    html[data-bs-theme=dark] .header-cta {
        margin-right: 72px;
    }

    /* Op mobiel en tablet vullen logo en hamburger de hele logobalk; de slinger krijgt daarom een eigen strook
       erboven (lampionnen tot ca. 33px) in plaats van erachter weg te vallen. */
    html[data-bs-theme=dark] body::before {
        height: 50px;
        background-size: 180px 50px;
    }

    html[data-bs-theme=dark] .kop-logobalk {
        margin-top: 28px;
    }

    /* Logo en hamburger vullen hier de hele balk: Sint Maarten draaft vóór het logo langs (in ca. 11 s), daarna
       een halve minuut niet, zodat het logo niet lang bedekt is. Kliks gaan erdoorheen (pointer-events: none). */
    html[data-bs-theme=dark] .kop-logobalk::before {
        z-index: 3;
        width: 66px;
        height: 44px;
        animation-name: sm-rijden-kort;
        animation-delay: -3s;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-bs-theme=dark] .kop-logobalk::before {
        animation: none;
        left: auto;
        right: 28%;
    }
}

/* ---- Verrassingen (functions.php) ---- */

/* Knoppen boven de voet: de mantel (links) en de deurbel (rechts) */
.sm-knop { position: absolute; top: -50px; width: 46px; height: 46px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2;
    transition: transform .15s; }
.sm-knop svg { display: block; overflow: visible; }
.sm-knop:hover, .sm-knop:focus-visible { transform: scale(1.1); }
.sm-knop:focus-visible { outline: 2px solid var(--sm-oranje); outline-offset: 3px; border-radius: 8px; }
.sm-mantel { left: max(16px, calc(50% - 540px)); }
.sm-bel { right: max(16px, calc(50% - 540px)); }
.sm-mantel__links, .sm-mantel__rechts { transition: transform .6s cubic-bezier(.2, 1.2, .4, 1); }
.sm-mantel--gedeeld .sm-mantel__links { transform: translateX(-7px) rotate(-8deg); }
.sm-mantel--gedeeld .sm-mantel__rechts { transform: translateX(7px) rotate(8deg); }
.sm-bel--rinkel svg { animation: sm-rinkel .5s ease-in-out 2; transform-origin: 50% 10%; }
@keyframes sm-rinkel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }

/* Tekstballon boven de knoppen */
.sm-bubbel { position: absolute; bottom: calc(100% + 58px); z-index: 3; max-width: min(340px, calc(100vw - 32px)); padding: .6rem .85rem;
    border-radius: .8rem; background: #fff8ec; color: #2a1a05; border: 2px solid var(--sm-oranje); box-shadow: 0 6px 22px rgba(255, 154, 46, .35);
    font-size: .95rem; line-height: 1.4; white-space: pre-line; }
.sm-bubbel--links { left: max(16px, calc(50% - 540px)); }
.sm-bubbel--rechts { right: max(16px, calc(50% - 540px)); }
.sm-bubbel::after { content: ""; position: absolute; top: 100%; border: 9px solid transparent; border-top-color: var(--sm-oranje); }
.sm-bubbel--links::after { left: 16px; }
.sm-bubbel--rechts::after { right: 16px; }
.sm-bubbel--open { animation: sm-bubbel .35s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes sm-bubbel { from { transform: translateY(12px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* Lichtjes (klik op een lege plek) en snoepjes (deurbel) */
.sm-lichtje, .sm-snoep, .sm-confetti { position: fixed; left: 0; top: 0; z-index: 1080; pointer-events: none; will-change: transform; transition: opacity .7s; }
.sm-lichtje { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 8px 3px rgba(255, 171, 61, .8); }
.sm-snoep { font-size: 1.3rem; margin: -10px 0 0 -10px; }
.sm-confetti { width: 8px; height: 12px; margin: -6px 0 0 -4px; border-radius: 2px; }
.sm-weg { opacity: 0; }

/* De gans die over de daken waggelt */
.sm-gans { position: absolute; top: -40px; left: -60px; width: 46px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2;
    animation: sm-waggel 22s linear forwards; }
.sm-gans svg { display: block; overflow: visible; animation: sm-wiebel .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.sm-gans--weg { animation: sm-wegvliegen 1.6s ease-in forwards; }
@keyframes sm-waggel { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 120px)); } }
@keyframes sm-wiebel { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes sm-wegvliegen { to { transform: translate(var(--sm-x, 0), -60vh) rotate(-20deg) scale(.4); opacity: 0; } }

/* Lampionnenoptocht (geheim woord) */
.sm-optocht { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1075; pointer-events: none; overflow: hidden; }
.sm-loper { position: absolute; bottom: 4px; left: -60px; animation: sm-lopen 14s linear forwards; }
.sm-loper svg { display: block; animation: sm-wiebel .45s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes sm-lopen { to { transform: translateX(calc(100vw + 140px)); } }
.sm-lied { position: fixed; left: 50%; bottom: 100px; z-index: 1085; transform: translateX(-50%); max-width: min(520px, calc(100vw - 32px)); padding: .6rem 1rem;
    border-radius: 1rem; background: var(--sm-indigo, #2a2552); color: #fff; text-align: center; font-weight: 600; white-space: pre-line;
    box-shadow: 0 0 0 2px var(--sm-oranje, #ff9a2e), 0 6px 22px rgba(0, 0, 0, .4); pointer-events: none; animation: sm-lied 12s ease-out forwards; }
@keyframes sm-lied { 0% { opacity: 0; transform: translate(-50%, 10px); } 6%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .sm-gans, .sm-gans svg, .sm-loper, .sm-loper svg, .sm-bel--rinkel svg, .sm-bubbel--open, .sm-lied { animation: none; }
    .sm-mantel__links, .sm-mantel__rechts { transition: none; }
}
@media (max-width: 575.98px) { .sm-gans { display: none; } }
@media print { .sm-knop, .sm-bubbel, .sm-lichtje, .sm-snoep, .sm-confetti, .sm-gans, .sm-optocht, .sm-lied { display: none !important; } }