/*!
 * KOOS — footer
 *
 * Blauw vlak met vier linkkolommen en een afsluitende balk met juridische
 * links. De kopjes zijn wit: de lichtblauwe huisstijltint haalde op dit vlak
 * maar 1,7:1 en was nauwelijks leesbaar.
 */

.koos-footer {
    background-color: var(--koos-blauw);
    color: var(--koos-wit);
    padding-top: 64px;
    padding-bottom: 32px;
}

.koos-footer__inner {
    max-width: var(--koos-siteinner);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--koos-siteinner-padding, 20px);
    padding-right: var(--koos-siteinner-padding, 20px);
}

/* ==================================================================
   Kolommen
   ================================================================== */

.koos-footer__kolommen {
    display: grid;
    /* Het aantal komt uit footer.php: een kolom per gevuld footermenu. */
    grid-template-columns: repeat(var(--koos-footer-kolommen, 4), minmax(0, 1fr));
    gap: 32px;
}

.koos-footer__kop {
    color: var(--koos-wit);
    font-family: var(--koos-font-kop);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 20px;
}

.koos-footer__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.koos-footer__lijst li {
    margin-bottom: 10px;
}

.koos-footer__lijst a {
    color: var(--koos-wit);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
}

.koos-footer__lijst a:hover,
.koos-footer__lijst a:focus {
    color: var(--koos-wit);
    text-decoration: underline;
}

/*
 * Telefoonnummers en mailadressen krijgen een icoon. Zo hoeft er geen apart
 * veld te zijn: je zet ze als menu-item met een tel:- of mailto:-link en de
 * opmaak volgt.
 */
.koos-footer__lijst a[href^="tel:"],
.koos-footer__lijst a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.koos-footer__lijst a[href^="tel:"]::before,
.koos-footer__lijst a[href^="mailto:"]::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: currentColor;
    -webkit-mask: var(--koos-icoon-telefoon) center / contain no-repeat;
            mask: var(--koos-icoon-telefoon) center / contain no-repeat;
}

.koos-footer__lijst a[href^="mailto:"]::before {
    -webkit-mask-image: var(--koos-icoon-mail);
            mask-image: var(--koos-icoon-mail);
}

/*
 * Een mailadres is langer dan de kolom breed is: het mag dan na de @ op een
 * nieuwe regel verder (in de menutitel staat daar een onzichtbaar
 * afbreekpunt), in plaats van over de kolom ernaast heen te lopen.
 */
.koos-footer__lijst a[href^="mailto:"] {
    align-items: flex-start;
    max-width: 100%;
}

.koos-footer__lijst a[href^="mailto:"]::before {
    margin-top: 3px;
}


/* ==================================================================
   Social
   ================================================================== */

.koos-footer__social {
    margin-top: 24px;
}

.koos-footer__social .boxsocialshare {
    display: flex;
    gap: 14px;
    align-items: center;
    line-height: 0;
}

/* De iconen staan standaard in blauw; op het blauwe vlak moeten ze wit. */
.koos-footer__social .boxsocialshare svg path {
    fill: var(--koos-wit);
}

.koos-footer__social .boxsocialshare a {
    display: inline-flex;
    width: 22px;
    height: 22px;
    transition: opacity var(--koos-transitie);
}

.koos-footer__social .boxsocialshare a:hover {
    opacity: 0.75;
}

/* ==================================================================
   Onderbalk
   ================================================================== */

/* Legal-rij: 12px Medium, zoals in het prototype. */
.koos-footer__onder,
.koos-footer__copyright,
.koos-footer__onder-lijst,
.koos-footer__onder-lijst a {
    font-size: 12px;
    font-weight: 500;
}

.koos-footer__onder {
    margin-top: 56px;
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
    font-size: 13px;
}

.koos-footer__copyright {
    opacity: 0.9;
}

.koos-footer__onder-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}

.koos-footer__onder-lijst a {
    color: var(--koos-wit);
    font-size: 13px;
    text-decoration: none;
    opacity: 0.9;
}

.koos-footer__onder-lijst a:hover {
    color: var(--koos-wit);
    opacity: 1;
    text-decoration: underline;
}

/*
 * Keurmerken als eigen rij onder de vier kolommen, gecentreerd, elk op een
 * wit vlakje met afgeronde hoeken.
 */
.koos-footer__keurmerken {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 16px 24px;
}

.koos-footer__keurmerken li {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--koos-radius-klein);
    background-color: var(--koos-wit);
}

.koos-footer__keurmerk {
    display: block;
    width: auto;
    height: 104px;
}

/* ==================================================================
   Responsive
   ================================================================== */

/*
 * Met vijf kolommen naast elkaar is "Praktische informatie" net te breed
 * voor één regel. Daarom op één regel, en de kopjes krimpen mee met de
 * kolommen: 17px vanaf 1200px, tot 14px bij 1000px breed.
 */
@media (min-width: 1001px) {

    .koos-footer__kop {
        white-space: nowrap;
        font-size: clamp(14px, calc(1.7vw - 3px), 17px);
    }
}

@media (max-width: 1000px) {

    .koos-footer__kolommen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 36px 24px;
    }
}

@media (max-width: 600px) {

    .koos-footer {
        padding-top: 44px;
    }

    .koos-footer__inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .koos-footer__kolommen {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .koos-footer__onder {
        margin-top: 36px;
        justify-content: flex-start;
    }
}

/*
 * Op de telefoon minimaal 44px tikgebied. Zo blijven de links en de iconen op
 * dezelfde plek staan: het extra vlak valt om het icoon heen.
 */
@media (max-width: 767px) {

    .koos-footer__lijst li {
        margin-bottom: 0;
    }

    .koos-footer__lijst a,
    .koos-footer__onder-lijst a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .koos-footer__social .boxsocialshare {
        gap: 0;
        margin-left: -11px;
    }

    .koos-footer__social .boxsocialshare a {
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
    }

    .koos-footer__social .boxsocialshare svg {
        width: 22px;
        height: 22px;
    }
}