@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: voet-links links · 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: flex;
    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;
    width: 1.15rem;
    height: 1.15rem;
    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);
}

.site-footer__credit-inner {
    max-width: var(--content-max, var(--maxw, 1200px));
    margin-inline: auto;
    padding-inline: var(--gutter, 1.5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 1rem);
}

.site-footer__credit-left {
    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__legal {
    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__legal a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}

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

.site-footer__copyright {
    opacity: 0.7;
}

.site-footer__credit-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-inline-start: auto;
    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;
}

/* 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;
    }
    .site-footer__credit-inner {
        justify-content: space-between;
        text-align: center;
    }
}