/* ═══════════════════════════════════════════════════════
   04_FOOTER.CSS — Burgerplatform
   Footer, footer-koppen (h2/h3), footer-navigatie (CSS grid, crash-proof)
   en share-knoppen.
   Kleuren volgen nu var(--footer-*) uit 01_colors-and-typography.css
   (was hard gecodeerd — #094a70 e.d. — en volgde het kleurschema niet mee).
   Dark-mode-blok onderaan is hierdoor niet meer nodig: de --footer-*
   tokens veranderen zelf al van waarde in dark mode.
═══════════════════════════════════════════════════════ */

footer {
    padding: 80px 0 40px;
    background: var(--footer-bg);
    color: var(--footer-text);
    /* was alleen in dark mode aanwezig (nodig omdat de footer daar bijna
       gelijk is aan de pagina-achtergrond); nu altijd aan, onopvallend in
       light mode omdat --footer-border daar dicht bij --footer-bg ligt. */
    border-top: 1px solid var(--footer-border);
}

    footer h2 {
        color: var(--footer-heading);
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    footer h3 {
        color: var(--footer-heading);
        font-weight: 700;
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }

    footer a {
        color: var(--footer-text);
        text-decoration: none;
        transition: color 0.2s;
    }

        footer a:hover {
            color: var(--footer-heading);
        }

    footer p {
        color: var(--footer-text);
    }

    footer .border-bottom,
    footer .border-secondary {
        border-color: var(--footer-border) !important;
    }

/* ── Kolomverdeling (merk/nav/share) ───────────────── */
@media (min-width: 992px) {
    footer .row > .col-lg-4 {
        width: 25%;
    }

    footer .row > .col-lg-5 {
        width: 50%;
    }
}

/* ── Footer-navigatie — CSS grid (kan niet uit z'n vak lopen) ──
   3 kolommen desktop, 2 op tablet, 1 op mobiel. */
.bp-footer-nav .navbar-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 991px) {
    .bp-footer-nav .navbar-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .bp-footer-nav .navbar-nav { grid-template-columns: 1fr; }
}

.bp-footer-nav .nav-item {
    display: block;
    margin: 0 0 22px 0;
    min-width: 0;
}

.bp-footer-nav .nav-link {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--footer-heading) !important;
    padding: 0 0 12px 0 !important;
    background: none !important;
}

/* Groepskoppen zijn niet klikbaar; losse links blijven klikbaar. */
.bp-footer-nav .nav-link.dropdown-toggle {
    pointer-events: none;
}

.bp-footer-nav .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    list-style: none;
}

.bp-footer-nav .dropdown-item {
    display: block;
    font-size: 1rem !important;
    color: var(--footer-text) !important;
    padding: 4px 4px !important;
    background: none !important;
    border-radius: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    margin-bottom: 4px;
}

.bp-footer-nav .dropdown-item:hover { color: var(--footer-heading) !important; }
.bp-footer-nav .dropdown-toggle::after { display: none !important; }
.bp-footer-nav .nav-item.activelink > a::after { display: none !important; }

/* Zonder :has() om crashes op oudere engines te voorkomen */
.bp-footer-nav #b478,
.bp-footer-nav li[id="b478"] { display: none !important; }


/* ── Share-knoppen ─────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   BP-SHARE-BTN COMPONENT
   Pill-stijl share buttons voor in de footer
══════════════════════════════════════════════════════ */
.bp-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
 
.bp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    /* achtergrond is weer een gekleurde (oker) band, dus een lichte rand
       is opnieuw zichtbaar genoeg — zelfde logica als de oorspronkelijke
       donkere footer-band. */
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: var(--footer-text) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all .15s;
}

.bp-share-btn:hover {
    border-color: var(--footer-heading);
    /* lichte tint i.p.v. donkere, want de achtergrond (oker) is weer
       medium-donker, niet wit. */
    background: rgba(255, 255, 255, 0.08);
    color: var(--footer-heading) !important;
}
 
.bp-share-btn i {
    font-size: 0.95rem;
}
 
/* Verberg de externe-link icon op share buttons (zou anders dubbel staan met target=_blank) */
.bp-share-btn::after {
    content: none !important;
}
 
/* Mobiel/tablet: alleen iconen tonen, label verbergen */
@media (max-width: 991px) {
    .bp-share-btn span {
        display: none;
    }
    .bp-share-btn {
        padding: 8px 12px;
    }
    .bp-share-btn i {
        font-size: 1.1rem;
    }
}

/* Dark-mode-blok hier weggehaald: alle regels hierboven gebruiken nu
   var(--footer-*), en die tokens veranderen zelf al van waarde in dark
   mode (zie 01_colors-and-typography.css) — geen dubbele definitie nodig. */