/*
 * Kruidenbuurt Sinterklaas: vallende pepernoten over de kop, een stoomboot die door de logobalk vaart, "Wie zoet is
 * krijgt lekkers!", de mijter op het logo, een gouden boord onder de menubalk en daken met schoorstenen en een schoen
 * boven de voet. theme.php zet de site op licht en geeft de kleuren (mantelrood, crème). Pepernoten en rook bewegen in
 * de SVG zelf (uit bij prefers-reduced-motion). Plaatjes met een absoluut pad (kleine kind.css staat inline).
 */

:root {
    --sk-rood: #b3122e;
    --sk-rood-donker: #7d0c20;
    --sk-goud: #d4a017;
}

/* Warme lucht bovenaan; pepernoten vallen over de hele kop */
body {
    position: relative;
}

/* Achtergrond alleen in licht: 'bg' in theme.php gold ook in de donkere modus (lichte achtergrond, lichte tekst) */
html:not([data-bs-theme=dark]) {
    --page-bg: #fbf5ea;
}

html:not([data-bs-theme=dark]) body {
    background-color: var(--page-bg);
    background-image: linear-gradient(180deg, #fde9d2 0, #fdf2e3 110px, rgba(251, 245, 234, 0) 300px);
    background-repeat: no-repeat;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: url("/themes/kruidenbuurt-sinterklaas/assets/pepernoten.svg") repeat-x left top / 400px 140px;
    pointer-events: none;
    z-index: 3;
}

/* Mijter op het logo (was de seizoensversiering) */
.navbar-brand {
    position: relative;
    z-index: 2;
    --deco-k: 1;
}

.navbar-brand::after {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    background: url("/themes/kruidenbuurt-sinterklaas/assets/mijter.svg") no-repeat center / contain;
    pointer-events: none;
    height: calc(32px * var(--deco-k));
    left: calc(-6px * var(--deco-k));
    top: -8px;
    transform: rotate(-22deg);
}

/* Logobalk: stoomboot vaart van links naar rechts; "Wie zoet is krijgt lekkers!" in het midden (desktop) */
.kop-logobalk {
    position: relative;
    overflow: hidden;
}

.kop-logobalk::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 72px;
    height: 40px;
    background: url("/themes/kruidenbuurt-sinterklaas/assets/stoomboot.svg") no-repeat center bottom / contain;
    pointer-events: none;
    z-index: 0;
    animation: sk-varen 38s linear infinite;
    animation-delay: -12s; /* al onderweg bij het laden, niet eerst buiten beeld */
}

.kop-logobalk::after {
    content: "Wie zoet is krijgt lekkers!";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.35rem;
    white-space: nowrap;
    color: var(--sk-rood);
    text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 1;
}

.header-cta {
    position: relative;
    z-index: 2;
}

.header-cta .btn {
    background: linear-gradient(135deg, var(--sk-rood), var(--sk-rood-donker)) !important;
    box-shadow: 0 0 0 2px var(--sk-goud), 0 4px 14px rgba(179, 18, 46, 0.35) !important;
}

/* Menubalk met een gouden boord (zoals de mantel) */
html .main-nav {
    border-bottom: 5px solid var(--sk-goud);
    box-shadow: 0 2px 0 var(--sk-rood-donker);
}

/* Koppen rood en goud; pictogrammen in rode bolletjes met gouden rand */
:is(h1, .h1) {
    color: var(--sk-rood) !important;
}

:is(h2, .h2, .text-success) {
    color: #9a6b00 !important;
}

.icon-circle.bg-success {
    background: radial-gradient(circle at 35% 30%, #e0405a, var(--sk-rood) 60%, var(--sk-rood-donker)) !important;
    box-shadow: 0 0 0 3px var(--sk-goud);
}

.hover-card:hover {
    box-shadow: 0 0 0 2px var(--sk-goud), 0 8px 22px rgba(0, 0, 0, 0.12) !important;
}

/* Voet: donkerrood, met daken en schoorstenen en een schoen met een wortel erboven */
.footer {
    position: relative;
    margin-top: 86px;
    background-color: #4a0a16 !important;
}

.footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -80px;
    height: 81px;
    background: url("/themes/kruidenbuurt-sinterklaas/assets/daken.svg") repeat-x left bottom / 300px 80px;
    pointer-events: none;
}

.footer::after {
    content: "";
    position: absolute;
    left: max(16px, calc(50% - 540px));
    top: -46px;
    width: 52px;
    height: 44px;
    background: url("/themes/kruidenbuurt-sinterklaas/assets/schoen.svg") no-repeat center bottom / contain;
    pointer-events: none;
}

.footer-kop {
    color: #f3c74f !important;
}

@keyframes sk-varen {
    from { transform: translateX(-90px); }
    to { transform: translateX(calc(100vw + 90px)); }
}

/* Tablet en mobiel: geen aparte menubalk onder het logo (zoals de andere feestdagthema's). De balk (daar staan
   dan alleen het hamburgerknopje en het zoekicoon; het menu zelf is een uitschuifpaneel) schuift omhoog over de
   logobalk, knoppen rechts. 61px = hoogte logobalk (logo 45px in header.css + py-2). Doorzichtig, laat kliks door
   behalve op de knoppen en het paneel. */
@media (max-width: 991.98px) {
    html .main-nav {
        margin-top: -61px;
        height: 61px;
        background-color: transparent;
        pointer-events: none;
    }

    html .main-nav > .container {
        justify-content: flex-end;
        align-items: center;
        height: 100%;
    }

    html .main-nav .navbar-toggler,
    html .main-nav .mobile-search-toggle,
    html .main-nav .offcanvas {
        pointer-events: auto;
    }

    html .main-nav .mobile-search-toggle {
        order: 1;
        margin-right: 6px;
        --bs-btn-color: var(--sk-rood);
        --bs-btn-hover-color: var(--sk-rood);
        --bs-btn-active-color: var(--sk-rood);
    }

    html .main-nav .navbar-toggler {
        order: 2;
        background-color: var(--sk-rood);
        border-color: var(--sk-rood);
    }

    .header-cta {
        margin-right: 72px;
    }

    .kop-logobalk::after {
        display: none;
    }

    .navbar-brand { --deco-k: 0.75; }

    html .main-nav {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kop-logobalk::before {
        animation: none;
        left: auto;
        right: 30%;
    }
}

/* ---- Verrassingen (sinds 2.1.0, functions.php) ---- */

/* Schoen zetten: de schoen boven de voet wordt een knop (JS); zonder JS blijft het plaatje (.footer::after) */
.footer.sk-met-schoen::after { display: none; }
.sk-schoen { position: absolute; left: max(16px, calc(50% - 540px)); top: -46px; width: 52px; height: 44px; padding: 0; border: 0;
    background: none; cursor: pointer; z-index: 2; transition: transform .15s; }
.sk-schoen svg { display: block; overflow: visible; }
.sk-schoen:hover, .sk-schoen:focus-visible { transform: rotate(-6deg) scale(1.08); }
.sk-schoen:focus-visible { outline: 2px solid var(--sk-goud); outline-offset: 3px; border-radius: 6px; }
.sk-schoen__wortel { transform-origin: 30px 15px; transition: transform .4s, opacity .4s; }
.sk-schoen--leeg .sk-schoen__wortel { transform: translate(6px, 6px) scale(.2); opacity: 0; }
/* Tekstballon met het cadeautje dat openspringt */
.sk-bubbel { position: absolute; left: max(16px, calc(50% - 540px)); bottom: calc(100% + 52px); z-index: 3; max-width: min(320px, calc(100vw - 32px));
    display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: .75rem; background: #fff; color: #3d2410;
    border: 2px solid var(--sk-goud); box-shadow: 0 6px 18px rgba(77, 10, 22, .25); font-size: .95rem; line-height: 1.35; }
.sk-bubbel::after { content: ""; position: absolute; left: 18px; top: 100%; border: 9px solid transparent; border-top-color: var(--sk-goud); }
.sk-bubbel svg { flex: 0 0 auto; overflow: visible; }
.sk-bubbel--open { animation: sk-bubbel .35s cubic-bezier(.2, 1.4, .5, 1); }
.sk-bubbel--open .sk-cadeau__deksel { transform-origin: 6px 10px; animation: sk-deksel .6s ease-out .2s forwards; }
@keyframes sk-bubbel { from { transform: translateY(12px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sk-deksel { 0% { transform: none; } 50% { transform: translateY(-10px) rotate(-28deg); } 100% { transform: translate(-4px, -6px) rotate(-38deg); } }

/* Pepernoten en chocoladeletters (strooien, regen) */
.sk-pepernoot, .sk-letter { position: fixed; left: 0; top: 0; z-index: 1080; pointer-events: none; will-change: transform; transition: opacity .6s; }
.sk-pepernoot { width: 12px; height: 11px; margin: -6px 0 0 -6px; border-radius: 50% 50% 46% 46%;
    background: radial-gradient(circle at 35% 30%, #c98a4b, #8a5326 55%, #5e3416); box-shadow: inset -1px -1px 1px rgba(0, 0, 0, .25); }
.sk-letter { margin: -14px 0 0 -10px; font: 900 1.6rem/1 Georgia, "Times New Roman", serif; color: #5a3416;
    text-shadow: 1px 1px 0 #3d2410, -1px -1px 0 #f3d36b, 0 0 1px #3d2410; }
.sk-weg { opacity: 0; }

/* Geheim woord: melding bij de stoomboot */
.sk-toet { position: fixed; left: 50%; z-index: 1085; transform: translateX(-50%); padding: .35rem .9rem; border-radius: 1rem; background: var(--sk-rood);
    color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); pointer-events: none; animation: sk-toet 3.2s ease-out forwards; }
@keyframes sk-toet { 0% { opacity: 0; transform: translate(-50%, -8px) scale(.8); } 10%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }

/* Chocoladeletters: eerste letter van een titel in de overzichten (nieuws, FAQ) bij aanwijzen */
:is(.blog-item, .faq-item) .card-title::first-letter { transition: color .2s; }
:is(.blog-item, .faq-item):hover .card-title::first-letter {
    color: #5a3416; font-family: Georgia, "Times New Roman", serif; font-weight: 900; font-size: 1.35em;
    text-shadow: 1px 1px 0 #3d2410, -1px -1px 0 #f3d36b, 2px 2px 3px rgba(61, 36, 16, .35); }

/* Rijmhulp onder het berichtvak van het contactformulier */
.sk-rijmhulp { padding-left: 0; color: var(--sk-rood); font-weight: 600; }
.sk-rijmhulp::before { content: "\270E"; margin-right: .3rem; }

@media (prefers-reduced-motion: reduce) {
    .sk-bubbel--open, .sk-bubbel--open .sk-cadeau__deksel, .sk-toet { animation: none; }
    .sk-schoen, .sk-schoen__wortel { transition: none; }
}
@media print { .sk-schoen, .sk-bubbel, .sk-pepernoot, .sk-letter, .sk-toet, .sk-rijmhulp { display: none !important; } }