/* 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, 1280px));
    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);
}

/* Géén vaste `max-height` meer (punt 1168): `LayerFooter::buildTopRow()` zet nu de echte
   breedte/hoogte van de upload als HTML-attrs (voorkomt CLS), zelfde patroon als
   `.site-footer__logo-img`/`.site-footer__banner-img` hieronder -- de redacteur bepaalt de
   weergavegrootte dus via wat 'ie uploadt. */
/* Bewust GEEN `width: auto`: dat overschrijft het `width`-attribuut hierboven, en een SVG zonder
   eigen afmeting (alleen een viewBox) vult dan de hele footerbreedte. Op autorijschoolnewyork
   (463) werd een logo van 160x48 zo 1152px breed. Het attribuut geeft de breedte, `height: auto`
   houdt de verhouding en `max-width: 100%` (critical.css) houdt hem binnen de kolom. */
.site-footer__logo {
    display: block;
    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;
}

/* Bewust GEEN aparte desktop-indeling meer (was een :has()/grid/nth-child-
 * constructie die twee sites al moesten omzeilen om er goed uit te zien --
 * Noorthey met een eigen override die de kolommen liet instorten, ARSNY met
 * een eigen override die 'm juist weer uitzette. De simpele flex-basis
 * hierboven (rij-brede wrap, kolommen die zelf breken) is op alle breedtes
 * de bedoelde indeling; zie punt 989 (17-09-2026). */

.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 */
    /* Een LEGE kop (bewust: LayerFooter::buildColumns() rendert altijd een <p>, ook zonder
       tekst, zodat kolommen op de kopruimte uitlijnen) krijgt zonder tekstinhoud geen
       line-box: hoogte 0 i.p.v. dezelfde 1em als een gevulde kop, ook al zijn line-height
       en font-size identiek (gemeten: 0px vs 18.4px). min-height dwingt 'm af. */
    min-height: 1em;
}

/* 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;
}

/* Géén vaste `max-height` meer: LayerFooter::buildImage() zet nu de echte
   breedte/hoogte van de upload als HTML-attrs (voorkomt CLS), en de redacteur
   bepaalt de weergavegrootte dus via wat 'ie uploadt -- niet code die elke
   banner/elk logo op dezelfde hoogte forceert. */
.site-footer__banner-img { width: auto; height: 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   { width: auto; height: 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, 1280px));
    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;
}

/* Linktekst van de credit: uit beeld, wel leesbaar voor zoekmachines en schermlezers. */
.site-footer__credit-link .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.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; }
}
}