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