/* Thema's per gelegenheid (body.thema-<thema>, zie gelegenheden() in includes/lijstjes.php en layout.php).
   Kerst is de standaardstijl van general.css/Bootstrap; de andere thema's vervangen de "danger"-kleur (knoppen,
   menubalk, footer, links) door hun eigen kleur en tonen een eigen kop. De merknaam staat dan als tekst in de kop
   (.site-kop-titel), omdat er geen afbeelding met tekst is. */

.site-kop-titel { display: none; }

/* ---------- Sinterklaas: diep rood met goud ---------- */
body.thema-sint { --thema-kleur: #b5121b; --thema-donker: #8c0d14; --thema-accent: #e8b93c; --bs-danger: #b5121b; --bs-danger-rgb: 181, 18, 27; }

/* ---------- Lentefeest / communie: fris groen ---------- */
body.thema-lente { --thema-kleur: #2f8f5b; --thema-donker: #23704a; --thema-accent: #f2a7c3; --bs-danger: #2f8f5b; --bs-danger-rgb: 47, 143, 91; }

/* ---------- Verjaardag: paars-roze ---------- */
body.thema-verjaardag { --thema-kleur: #7b3fb5; --thema-donker: #5f2f8f; --thema-accent: #ffc947; --bs-danger: #7b3fb5; --bs-danger-rgb: 123, 63, 181; }

/* ---------- Neutraal (andere gelegenheid, de bak): petrol ---------- */
body.thema-neutraal { --thema-kleur: #1f7a8c; --thema-donker: #175e6c; --thema-accent: #ffb703; --bs-danger: #1f7a8c; --bs-danger-rgb: 31, 122, 140; }

body.thema-sint .btn-danger, body.thema-lente .btn-danger, body.thema-verjaardag .btn-danger, body.thema-neutraal .btn-danger {
    --bs-btn-bg: var(--thema-kleur); --bs-btn-border-color: var(--thema-kleur);
    --bs-btn-hover-bg: var(--thema-donker); --bs-btn-hover-border-color: var(--thema-donker);
    --bs-btn-active-bg: var(--thema-donker); --bs-btn-active-border-color: var(--thema-donker);
    --bs-btn-disabled-bg: var(--thema-kleur); --bs-btn-disabled-border-color: var(--thema-kleur);
}
body.thema-sint .btn-outline-danger, body.thema-lente .btn-outline-danger, body.thema-verjaardag .btn-outline-danger, body.thema-neutraal .btn-outline-danger {
    --bs-btn-color: var(--thema-kleur); --bs-btn-border-color: var(--thema-kleur);
    --bs-btn-hover-bg: var(--thema-kleur); --bs-btn-hover-border-color: var(--thema-kleur);
    --bs-btn-active-bg: var(--thema-donker); --bs-btn-active-border-color: var(--thema-donker);
}

/* Kop zonder afbeelding met tekst: kleurverloop + merknaam als tekst */
body.thema-lente #header, body.thema-verjaardag #header, body.thema-neutraal #header { min-height: 220px; }
body.thema-lente .site-kop-titel, body.thema-verjaardag .site-kop-titel, body.thema-neutraal .site-kop-titel {
    display: block; text-align: center; color: #fff; padding: 28px 0 36px;
    font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: bold;
    font-size: clamp(2rem, 6vw, 3.6rem); text-shadow: 2px 3px 6px rgba(0, 0, 0, .35);
}
.site-kop-titel small { display: block; font-size: .4em; font-style: normal; font-family: inherit; opacity: .95; margin-top: 4px; }

body.thema-lente #header {
    background-image:
        radial-gradient(circle at 8% 30%, rgba(255, 255, 255, .55) 0 10px, transparent 11px),
        radial-gradient(circle at 22% 78%, rgba(242, 167, 195, .9) 0 14px, transparent 15px),
        radial-gradient(circle at 80% 25%, rgba(255, 236, 140, .9) 0 12px, transparent 13px),
        radial-gradient(circle at 92% 70%, rgba(255, 255, 255, .55) 0 9px, transparent 10px),
        radial-gradient(circle at 60% 85%, rgba(242, 167, 195, .8) 0 8px, transparent 9px),
        linear-gradient(135deg, #7ccf9a 0%, #2f8f5b 55%, #23704a 100%) !important;
    background-color: #2f8f5b;
}
body.thema-verjaardag #header {
    background-image:
        radial-gradient(circle at 6% 25%, #ffc947 0 7px, transparent 8px),
        radial-gradient(circle at 18% 75%, #4cc9f0 0 6px, transparent 7px),
        radial-gradient(circle at 35% 20%, #ff6b9a 0 5px, transparent 6px),
        radial-gradient(circle at 70% 80%, #ffc947 0 6px, transparent 7px),
        radial-gradient(circle at 85% 30%, #4cc9f0 0 8px, transparent 9px),
        radial-gradient(circle at 95% 75%, #ff6b9a 0 6px, transparent 7px),
        linear-gradient(135deg, #e0457b 0%, #7b3fb5 60%, #5f2f8f 100%) !important;
    background-color: #7b3fb5;
}
body.thema-neutraal #header {
    background-image:
        radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .35) 0 8px, transparent 9px),
        radial-gradient(circle at 88% 65%, rgba(255, 183, 3, .8) 0 10px, transparent 11px),
        linear-gradient(135deg, #3aa6b9 0%, #1f7a8c 60%, #175e6c 100%) !important;
    background-color: #1f7a8c;
}

/* Menubalk en footer volgen de themakleur via bg-danger (--bs-danger-rgb). */
body.thema-sint footer.bg-danger, body.thema-sint nav.bg-danger { border-top: 3px solid var(--thema-accent); }