/*
 * Donkere modus voor de publieke site (instelling op /profile, zie
 * Theme::KLEURMODI). Wordt alleen geladen als de gebruiker niet 'licht'
 * heeft gekozen, en werkt alleen onder <html data-bs-theme="dark">
 * (Bootstrap 5.3 kleurt kaarten, formulieren, tabellen e.d. dan zelf).
 *
 * Hier alleen wat Bootstrap niet vanzelf doet: vaste kleuren uit
 * style.css / header.php en "lichte" hulpklassen (bg-light, text-dark ...)
 * die in views en pagina-inhoud gebruikt worden. Themavariabelen
 * (--page-bg, --primary-text, links) komen uit Theme::darkCss(), zodat de
 * primaire kleur en de seizoenskleuren meelopen.
 */

[data-bs-theme=dark] {
    --text-color: var(--bs-body-color);
    --link-color: var(--bs-link-color);
    --secondary-color: var(--bs-tertiary-bg);
    color-scheme: dark;
}

/* Tekst */
[data-bs-theme=dark] h1,
[data-bs-theme=dark] h2,
[data-bs-theme=dark] h3,
[data-bs-theme=dark] h4,
[data-bs-theme=dark] h5 {
    color: var(--bs-emphasis-color);
}
[data-bs-theme=dark] .text-muted {
    color: var(--bs-secondary-color) !important;
}
[data-bs-theme=dark] .text-dark,
[data-bs-theme=dark] .text-body {
    color: var(--bs-body-color) !important;
}
/* text-success = primaire kleur; donkere primaire kleuren (bv. zwart met
   Halloween) zijn anders onleesbaar -> lichtere variant */
[data-bs-theme=dark] .text-success,
[data-bs-theme=dark] .text-primary {
    color: var(--primary-text) !important;
}
[data-bs-theme=dark] [style*="color: var(--primary-hover-color)"],
[data-bs-theme=dark] [style*="color: var(--primary-color)"] {
    color: var(--primary-text) !important;
}

/* Lichte achtergronden */
[data-bs-theme=dark] .bg-light,
[data-bs-theme=dark] .bg-body-tertiary {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .bg-white {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .alert-light {
    --bs-alert-color: var(--bs-body-color);
    --bs-alert-bg: var(--bs-tertiary-bg);
    --bs-alert-border-color: var(--bs-border-color);
}

/* Header: zoekveld en menubalk hadden vast wit */
[data-bs-theme=dark] .main-navbar,
[data-bs-theme=dark] .search-form .btn {
    background-color: var(--bs-body-bg);
}
[data-bs-theme=dark] .search-form .btn {
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* Logo heeft zwarte en donkergroene delen: lichte ondergrond, zodat het
   leesbaar blijft (box-sizing: blijft 60/45 px hoog) */
[data-bs-theme=dark] .navbar-brand > img:first-child:not(.logo-embleem) {
    box-sizing: border-box;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 4px 10px;
}

/* Sitenaam naast het embleem (Theme::logoHtml()): lichte tekst, groen iets
   lichter voor contrast op donker */
[data-bs-theme=dark] .logo-tekst__boven {
    color: #f8f9fa;
}
[data-bs-theme=dark] .logo-tekst__onder {
    color: color-mix(in srgb, var(--logo-kleur, #00811f) 70%, #fff);
}

/* Menubalk: achtergrond, hover en menutekst komen uit Theme::darkCss()
   (primaire kleur, zo nodig lichter zodat hij afsteekt). */

/* Dropdowns (profielmenu e.d.): iconen wit i.p.v. de primaire kleur, die
   op donker wegvalt (zwart met Halloween) */
[data-bs-theme=dark] .dropdown-item i {
    color: #fff;
}

/* Blog en FAQ (views/posts/*): die pagina's zetten zelf ':root {
   --link-color: #333333 }' (donkergrijs) in een <style> ná deze file.
   'html[data-bs-theme=dark]' weegt zwaarder dan ':root' en wint dus.
   Links (categorie in de meta, "Bewerk", paginering) in de leesbare
   variant van de primaire kleur; titels van kaartjes als gewone tekst. */
html[data-bs-theme=dark] {
    --link-color: var(--primary-text);
    --link-hover-color: var(--bs-link-hover-color);
}
html[data-bs-theme=dark] .card-title a,
html[data-bs-theme=dark] .blog-title {
    color: var(--bs-emphasis-color);
}
html[data-bs-theme=dark] .card-title a:hover {
    color: var(--primary-text);
}
/* Badges: categorielabels in de meta (bg-light + text-dark) en de
   primaire kleur (zwart met Halloween) */
html[data-bs-theme=dark] .badge.bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}
/* Knoppen (ook omlijnd, bv. "Lees meer"): kleuren uit Theme::darkCss(),
   ze volgen de menubalk van het (seizoens)thema */
/* Opmaak in berichten: citaat, code en tabelkoppen hadden vaste lichte kleuren */
html[data-bs-theme=dark] .blog-content blockquote,
html[data-bs-theme=dark] .faq-content blockquote {
    border-left-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}
html[data-bs-theme=dark] .blog-content pre,
html[data-bs-theme=dark] .blog-content code,
html[data-bs-theme=dark] .faq-content pre,
html[data-bs-theme=dark] .faq-content code,
html[data-bs-theme=dark] .blog-content table th,
html[data-bs-theme=dark] .faq-content table th {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
html[data-bs-theme=dark] .blog-content table th,
html[data-bs-theme=dark] .blog-content table td,
html[data-bs-theme=dark] .faq-content table th,
html[data-bs-theme=dark] .faq-content table td {
    border-color: var(--bs-border-color);
}

/* FAQ-artikel: tussenkoppen vast donkergroen (#2c5e2e) */
html[data-bs-theme=dark] .faq-content h1,
html[data-bs-theme=dark] .faq-content h2,
html[data-bs-theme=dark] .faq-content h3,
html[data-bs-theme=dark] .faq-content h4,
html[data-bs-theme=dark] .faq-content h5,
html[data-bs-theme=dark] .faq-content h6 {
    color: var(--primary-text);
}
/* Zijbalk bij berichten/FAQ (kaartkoppen) en het buurtpartner-blok
   (vaste lichtgroene achtergrond #ebf6ef) */
html[data-bs-theme=dark] .col-lg-4 .card-header {
    background-color: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color);
}
html[data-bs-theme=dark] .col-lg-4 .card {
    border-color: var(--bs-border-color);
}
html[data-bs-theme=dark] .company-spotlight .card-body {
    background-color: var(--bs-tertiary-bg);
}
/* Buurtpartners ([buurtpartners]): donkere kaart met een zweem van de
   themakleur; naam en icoontjes in de leesbare variant */
html[data-bs-theme=dark] .buurtpartner {
    background: color-mix(in srgb, var(--primary-text) 8%, var(--bs-body-bg));
    border-color: var(--bs-border-color);
    border-top-color: var(--primary-text);
}
html[data-bs-theme=dark] .buurtpartner__naam a,
html[data-bs-theme=dark] :is(#page-content, .blog-content, .faq-content) .buurtpartner__naam a:not(.btn):not(.badge),
html[data-bs-theme=dark] .buurtpartner__gegevens i,
html[data-bs-theme=dark] :is(#page-content, .blog-content, .faq-content) .buurtpartner__gegevens a:not(.btn):not(.badge):hover {
    color: var(--primary-text);
}
html[data-bs-theme=dark] .buurtpartner__gegevens,
html[data-bs-theme=dark] :is(#page-content, .blog-content, .faq-content) .buurtpartner__gegevens a:not(.btn):not(.badge) {
    color: var(--bs-body-color);
}

/* Links in berichten en pagina's: style.css kleurt ze met de primaire
   kleur (zwart met Halloween) -> leesbare variant. Ook links waar de
   schrijver in de editor een vaste (donkere) kleur aan gaf. */
html[data-bs-theme=dark] .blog-content a:not(.btn):not(.badge):not(:has(img)),
html[data-bs-theme=dark] .faq-content a:not(.btn):not(.badge):not(:has(img)),
html[data-bs-theme=dark] #page-content a:not(.btn):not(.badge):not(:has(img)) {
    color: var(--primary-text);
}
html[data-bs-theme=dark] .blog-content a:not(.btn):not(.badge):not(:has(img)):hover,
html[data-bs-theme=dark] .faq-content a:not(.btn):not(.badge):not(:has(img)):hover,
html[data-bs-theme=dark] #page-content a:not(.btn):not(.badge):not(:has(img)):hover {
    color: var(--bs-link-hover-color);
}
/* ...maar niet binnen/op een lichte markering, zie hieronder */
html[data-bs-theme=dark] .site-content a[style*="color"]:not(.btn):not(.badge):not([style*="background-color"]):not([style*="background-color: #"] a) {
    color: var(--primary-text) !important;
}

/* Pagina-inhoud uit de editor: markeringen en kaders met een vaste lichte
   achtergrond (bv. #bfedd2) houden donkere tekst */
[data-bs-theme=dark] .site-content [style*="background-color: #"],
[data-bs-theme=dark] .site-content [style*="background-color: rgb"] {
    color: #212529;
}
html[data-bs-theme=dark] .site-content [style*="background-color: #"] a,
html[data-bs-theme=dark] .site-content a[style*="background-color: #"] {
    color: #0b5d2a !important;
}

/* Afbeeldingen iets gedempt, minder fel op een donkere pagina */
[data-bs-theme=dark] .site-content img:not(.banner-image) {
    filter: brightness(0.92);
}

/* Nieuwsbrief-knop ([newsletter_subscribe]): wit met tekst in de primaire
   kleur; die wordt in donker lichter gemaakt en viel dan weg op het wit
   (contrast 3.2). Inline style, dus !important. */
[data-bs-theme=dark] .nieuwsbrief-knop {
    color: #1a1a1a !important;
}

/* Broodkruimel op subpagina's: leesbare variant van de themakleur */
html[data-bs-theme=dark] .pagina-kruimel .breadcrumb-item a { color: var(--primary-text); }