/* Laag: framework — zie de rangorde in skeleton/templates/page.php. Site-CSS en CMS-opmaak
 * winnen hiervan zonder specificiteits-trucs; binnen de laag telt specificiteit gewoon. */
@layer framework {
@charset "UTF-8";
/*
 * Framework-standaardvoet — structurele layout voor Framework\Cms\FooterRenderer.
 * Merk-neutraal en var-based: kleuren/typografie komen uit de CMS-design-slots
 * (design_footer.*) en de site-tokens; hier staat ALLEEN de opbouw (rijen, kolommen,
 * spacing). Per-file override: heeft een site z'n eigen public/assets/css/footer.css,
 * dan serveert de webserver die i.p.v. deze default (FrameworkCss::tryServe).
 *
 * Opbouw (zoals de renderer 'm uitspuugt):
 *   footer.site-footer
 *     .site-footer__inner            max-width-content
 *       .site-footer__row--top       logo links · socials ("Volg ons") rechts
 *       .site-footer__row--main      contact/adres links · linkkolommen rechts
 *       .site-footer__row--banners   optionele bannerstrook
 *       .site-footer__row--logos     optionele logostrook
 *     .site-footer__credit           volle-breedte onderbalk (eigen achtergrond)
 *       .site-footer__credit-inner   max-width-content, 3-koloms grid
 *         .site-footer__credit-group   merk-logo · keurmerken · footermenu
 *         .site-footer__copyright      copyright rechts
 *         .site-footer__credit-link    MM-logo rechts
 */

.site-footer {
    padding-block-start: var(--space-5, 2rem);
    font-size: 16px; /* compacte voet-typografie (fitnesse-blauwdruk), los van de site-body-grootte */
    /* achtergrond/kleur komen uit design_footer.layer (SiteDesign) — hier niet hardcoden */
}

.site-footer__inner {
    max-width: var(--content-max, var(--maxw, 1200px));
    margin-inline: auto;
    padding-inline: var(--gutter, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1.5rem);
}

/* ── Bovenrij: logo links, socials rechts ─────────────────────────────────── */
.site-footer__row--top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1.5rem);
}

.site-footer__logo {
    display: block;
    max-height: 64px;
    width: auto;
    height: auto;
}

.site-footer__socials-wrap {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3, 1rem);
    margin-inline-start: auto; /* naar rechts, ook als het logo ontbreekt */
}

.site-footer__follow-label {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.site-footer__socials {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.site-footer__social:hover {
    opacity: 0.7;
}

.site-footer__social-icon,
.site-footer__socials img {
    display: block;
    font-size: 1.15rem;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

/* ── Hoofdrij: contact · Menu · Meer · reviews · banners — alle als kolommen ─── */
.site-footer__row--main {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5, 2rem) var(--space-6, 2.5rem);
    align-items: flex-start;
}

/* Contactkolom: kop + adres. */
.site-footer__col--contact {
    flex: 1 1 15rem;
    min-width: 13rem;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.75rem); /* kop strak op het adres (zoals de linkkolommen) */
}

/* Kolomgroepen — Menu/Meer én Beoordelingen/Banners: elk paar staat naast elkaar en
   breekt als eenheid af op smallere schermen. */
.site-footer__col--links {
    flex: 1 1 14rem;
    display: flex;
    flex-flow: row wrap;
    gap: var(--space-3, 1rem) var(--space-4, 1.5rem);
}

/* De extras-groep (reviews/banners) mag iets breder — banner-titels wrappen anders lelijk. */
.site-footer__col--extras {
    flex: 1 1 18rem;
}
.site-footer__col--extras .site-footer__links-col {
    flex: 1 1 10rem;
    min-width: 9rem;
}

.site-footer__links-col {
    flex: 1 1 7rem;
    min-width: 6rem;
}

@media (min-width: 48.0625rem) {
    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) {
        display: grid;
        grid-template-columns: minmax(16rem, 1.25fr) repeat(3, minmax(8rem, 1fr));
        column-gap: var(--space-6, 2.5rem);
        row-gap: var(--space-3, 1rem);
        align-items: start;
    }

    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__row--top {
        grid-column: 1;
        grid-row: 1;
        display: block;
    }

    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__row--main,
    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__col--links {
        display: contents;
    }

    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__col--contact {
        grid-column: 1;
        grid-row: 2;
        max-width: 22rem;
    }

    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__links-col {
        min-width: 0;
    }

    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__links-col:nth-child(1) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__links-col:nth-child(2) {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__links-col:nth-child(3) {
        grid-column: 4;
        grid-row: 1 / span 2;
    }
}

.site-footer__col-title {
    margin: 0 0 var(--space-2, 0.75rem);
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1; /* kop strak — niet de losse body-regelhoogte erven */
}

/* In de contactkolom draagt de flex-gap de kop→adres-ruimte al — geen dubbele marge. */
.site-footer__col--contact .site-footer__col-title {
    margin-bottom: 0;
}

.site-footer__tagline {
    margin: 0 0 var(--space-3, 1rem);
}

.site-footer__address {
    font-style: normal;
    line-height: 1.7;
}

.site-footer__address p {
    margin: 0 0 var(--space-3, 1rem);
}

/* Leidende alinea van het adres-sjabloon strak onder de kop (geen browser-<p>-marge). */
.site-footer__address p:first-child {
    margin-top: 0;
}

.site-footer__address p:last-child {
    margin-bottom: 0;
}

.site-footer__address a {
    color: inherit;
    text-decoration: none;
}

.site-footer__address a:hover {
    text-decoration: underline;
}

.site-footer__links-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.site-footer__links-col a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.site-footer__links-col a:hover {
    opacity: 0.7;
}

/* Banners in hun kolom: onder elkaar (kop + rijen), zoals de linkkolommen. */
.site-footer__banners {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 1rem);
}

.site-footer__banner-link,
.site-footer__banner {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.75rem);
    color: inherit;
    text-decoration: none;
}

.site-footer__banner-img { max-height: 48px; width: auto; }

/* Logos: compacte strook links in de onderbalk (bij de MM-credit-regel). */
.site-footer__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 1rem);
}
.site-footer__logo-img   { max-height: 28px; width: auto; }
.site-footer__logo-item  { display: inline-flex; }

.site-footer__banner-text { display: flex; flex-direction: column; }
.site-footer__banner-title { font-weight: 600; }
.site-footer__banner-subtitle { font-size: 0.85rem; opacity: 0.8; }

/* ── Reviews: kop + rij compacte badges (secundaire strook) ───────────────── */
.site-footer__reviews {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.75rem);
}

.site-footer__reviews-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 1rem);
}

.site-footer__review { display: inline-flex; }

/* Alle strook-beelden compact begrenzen — nooit volledig formaat de voet in. */
.site-footer__review-img { max-height: 56px; width: auto; border-radius: 4px; }

/* ── Onderbalk: volle breedte, eigen achtergrond, max-width-inhoud ────────── */
.site-footer__credit {
    margin-block-start: var(--space-5, 2rem);
    padding-block: var(--space-3, 1rem);
    /* een subtiele donkere onderbalk; site kan 'm via design_footer overschrijven */
    background: rgba(0, 0, 0, 0.18);
}

/* Drie kolommen i.p.v. space-between: alleen zo staat de © écht in het midden, ongeacht hoe
   breed de groep links en het merk-logo rechts zijn. De plaatsing zit op de kolom (grid-column),
   niet op de volgorde, zodat een ontbrekend kind de rest niet
   verschuift. */
.site-footer__credit-inner {
    max-width: var(--content-max, var(--maxw, 1200px));
    margin-inline: auto;
    padding-inline: var(--gutter, 1.5rem);
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3, 1rem);
}

.site-footer__credit-group {
    grid-column: 1;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.75rem) var(--space-4, 1.5rem);
    font-size: 0.9rem;
}

.site-footer__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.75rem) var(--space-4, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__menu a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.site-footer__menu a:hover {
    opacity: 1;
}

.site-footer__copyright {
    grid-column: 2;
    justify-self: end;
    opacity: 0.7;
}

.site-footer__credit-link {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.site-footer__credit-link:hover {
    opacity: 1;
}

.site-footer__credit-logo {
    display: block;
    width: 1.35rem;
    height: auto;
    /* Het beeldmerk is een inline-SVG met transparante vlakken binnen z'n bounding box.
       Zonder dit vallen kliks in die gaten dóór de link heen, waardoor de credit alleen
       op de letterranden klikbaar is. De link zelf vangt de klik. */
    pointer-events: none;
}

/* Optioneel site-merk-logo linksonder in de creditbalk (brandLogoInCredit). */
.site-footer__credit-site-logo {
    display: block;
    max-height: 40px;
    width: auto;
    height: auto;
}

/* ── Mobiel ───────────────────────────────────────────────────────────────── */
@media (max-width: 48rem) {
    .site-footer__row--top {
        justify-content: center;
        text-align: center;
    }
    .site-footer__socials-wrap {
        margin-inline-start: 0;
    }
    /* Mobiel: de drie kolommen worden een gecentreerde stapel. */
    .site-footer__credit-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .site-footer__credit-inner > * { justify-self: center; }
    .site-footer__credit-group,
    .site-footer__copyright,
    .site-footer__credit-link { grid-column: 1; }
}
}