/* In de cascade-laag `site` (rangorde: framework < site < theme/type/item; CMS-opmaak wint). */
@layer site {
/*
 * Vlinder-specifieke footer-overrides op de framework-LayerFooter (footer.css).
 * Doel: de framework-voet pixel-gelijk aan vlinder's eigen (oude) voet:
 *  - kolomkoppen in Inter (sans) + uppercase i.p.v. de framework-serif (Playfair);
 *  - dunne scheidingslijntjes onder de socials-rij en boven de onderbalk, exact even
 *    breed als de kolommen (content-breedte 51..1229);
 *  - onderbalk full content-width: logo linksonder (160px, zoals het origineel),
 *    Multiminded-credit rechts — geen donkere band, geen copyright-regel.
 * Presentatie hoort in de site-repo; de framework-default (serif, band) blijft voor demo/463.
 */

.site-footer__col-title {
    color: #fff;
    font-family: var(--font-body, "Inter", sans-serif);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.08em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}
/* Contact-kop direct op "De Vlindertuin" (dat is de eerste adresregel) — geen ruimte. */
.site-footer__col--contact .site-footer__col-title {
    margin-bottom: 0;
}

.site-footer__address {
    line-height: 1.75;
}

.site-footer__social {
    width: 2.25rem;
    height: 2.25rem;
    /* geen ring-border voor deze site; het rondje blijft (faint fill + border-radius). */
    border: none;
}
/* Icoon binnen het rondje ietsje groter (framework 1.15rem ≈ 18px → 20px). */
.site-footer__social-icon,
.site-footer__socials img {
    width: 20px;
    height: 20px;
}

/* Scheidingslijn onder de socials-rij (content-breed, binnen __inner). */
.site-footer__row--top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-bottom: var(--space-4, 1.5rem);
}

/*
 * Onderbalk. Vlinder's eigen `main.css` heeft nog LEGACY footer-regels van de oude voet:
 * `.site-footer__credit{display:flex; border-top:1px solid rgba(255,255,255,.14)}`. Die
 * botsen met de framework-LayerFooter: de `flex` liet `__credit-inner` naar z'n content
 * krimpen (858px, gecentreerd), en de `border-top` gaf een TWEEDE, full-width lijn onderin
 * (naast onze content-brede lijn). Beide hier neutraliseren:
 *  - `display:block` → `__credit-inner` vult weer de volle content-breedte (logo links, MM rechts);
 *  - `border-top:none` → weg met de full-width legacy-lijn;
 *  - gutter-padding naar de buitenste `__credit` zodat de ene overgebleven lijn (op
 *    `__credit-inner`) exact even breed is als de bovenlijn (row--top, 51..1229 = 1178).
 */
.site-footer__credit {
    display: block;
    /* zelfde content-wrapper als __inner, zodat de onderbalk op elke schermbreedte
       exact met de kolommen uitlijnt (niet full-width uitwaaieren > content-max). */
    max-width: var(--content-max, var(--maxw, 1200px));
    margin-inline: auto;
    background: transparent;
    border-top: none;
    margin-block-start: var(--space-4, 1.5rem);
    padding-inline: var(--gutter, 1.5rem);
}
/* De onderbalk is sinds fw 1.58.1153 een 1fr/auto/1fr-grid met de © in het midden; deze site toont
   geen © (zie onderaan), dus die middenkolom blijft leeg en de derde kolom (1fr) zou de groep tot
   halverwege afknijpen. Twee kolommen dus: de groep krijgt alle ruimte tot aan het MM-logo. */
.site-footer__credit-inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: var(--space-4, 1.5rem);
    grid-template-columns: 1fr auto;
}
/* Legal-links horizontaal centreren tussen logo (links) en MM-credit (rechts): de groep vult de
   ruimte, de legal-lijst centreert zichzelf daarbinnen met auto-marges. */
.site-footer__credit-group {
    grid-column: 1;
}
.site-footer__credit-link {
    grid-column: 2;
}
.site-footer__menu {
    margin-inline: auto;
}

/* Logo linksonder op 160px, zoals de oude voet (`<img width="160">`). */
.site-footer__credit-site-logo {
    max-height: none;
    width: 160px;
    height: auto;
}

/* Het origineel toonde geen copyright-regel in de onderbalk. */
.site-footer__copyright {
    display: none;
}

/* ── Oude vlinder-voet herstellen op de nieuwe framework-grid ──────────────
 * Framework 1.58.115x gaf de LayerFooter een 2-rij-grid via `:has()`: socials
 * en contact gestapeld links, de linkkolommen rechts. Vlinder houdt bewust de
 * eigen (oudere) voet: socials rechtsboven op een volle-breedte-rij, daaronder
 * drie gelijke kolommen (Contact | Ga direct naar | Handige links). Framework-CSS
 * zit sinds de cascade-migratie in `@layer framework`, dus deze ongelaagde regels
 * winnen zonder specificiteits-trucs. Alleen vanaf de framework-grid-breakpoint
 * (48.0625rem); mobiel laten we ongemoeid. */
@media (min-width: 48.0625rem) {
    .site-footer__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .site-footer__row--top {
        display: flex;
    }
    .site-footer__socials-wrap {
        margin-inline-start: auto;
    }
    .site-footer__row--main {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        align-items: start;
        /* een beetje lucht tussen de socials-scheidingslijn en de kolomkoppen */
        margin-top: 0.875rem;
    }
    /* de twee linkkolommen als losse grid-cellen naast de contact-kolom */
    .site-footer__col--links {
        display: contents;
    }
    /* de `:has()`-grid blijft matchen en zet grid-column/-row op de kinderen; resetten
       zodat ze in deze eigen 3-koloms-grid van links naar rechts vloeien. */
    .site-footer__col--contact,
    .site-footer__links-col {
        grid-column: auto;
        grid-row: auto;
    }
}

}