/*
 * Water Concepts
 * Site footer
 *
 * Navy vlak (--blue-950), buiten de content-container
 * (generate_footer). Inner lijnt uit met de content:
 * --container / --gutter gelijk aan de categoriekaarten.
 *
 * Kleuren op navy (handout §1):
 *   koppen        --teal-300 (eyebrow-stijl)
 *   links         wit, hover --teal-300
 *   tekst         --blue-300
 *   lijnen        rgba(255,255,255,.15)
 *   focus-ring    --teal-300 (--blue-400 is te zwak op navy)
 *
 * Kolommen:  desktop  = merk breder + 3 kolommen
 *            tablet   = merk bovenaan, 3 kolommen eronder
 *            mobiel   = merk, Assortiment + Geschikt voor
 *                       naast elkaar, Informatie eronder
 *
 * Onderbalk: desktop  = links © + B2B, daaronder juridisch;
 *                       rechts de talen
 *            mobiel   = talen → juridisch → © + B2B
 */


/* ==========================================
   SECTION
========================================== */

.wce-footer {
    --container: 1600px;
    --gutter: 30px;
    --footer-line: rgba(255, 255, 255, .15);

    background: var(--blue-950);
    color: var(--blue-300);

    font-size: 0.9375rem;
    line-height: 1.5;
}

.wce-footer__inner {
    max-width: var(--container);

    margin: 0 auto;
    padding: 0 var(--gutter);
}

.wce-footer a {
    color: var(--white);
    text-decoration: none;

    transition: color .2s ease;
}

.wce-footer a:hover {
    color: var(--teal-300);
}

.wce-footer a:focus-visible {
    outline: 2px solid var(--teal-300);
    outline-offset: 3px;
    border-radius: 2px;
}


/* ==========================================
   MAIN — KOLOMMEN
========================================== */

.wce-footer__main {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: 48px;

    padding: 4.5rem 0 3.5rem;
}

.wce-footer__col {
    display: flex;
    flex-direction: column;
    gap: 18px;

    min-width: 0;
}

.wce-footer .wce-footer__heading {
    margin: 0;

    color: var(--teal-300);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.wce-footer .wce-footer__list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wce-footer .wce-footer__list li {
    margin: 0;
}

.wce-footer__item--all a {
    color: var(--teal-300);

    font-weight: 700;
}

.wce-footer__item--all a:hover {
    color: var(--white);
}

/* Externe link (menu-optie "Link in nieuw tabblad openen") */
.wce-footer__list a[target="_blank"]::after {
    content: "";

    display: inline-block;

    width: 0.8em;
    height: 0.8em;

    margin-left: 0.4em;

    background: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ==========================================
   MERK — LOGO, ZIN, CONTACT
========================================== */

.wce-footer__col--brand {
    gap: 20px;

    max-width: 340px;
}

.wce-footer__logo {
    display: block;

    width: 200px;
}

.wce-footer .wce-footer__logo img {
    display: block;

    width: 200px;
    height: auto;
}

.wce-footer__logo-text {
    color: var(--white);

    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wce-footer .wce-footer__tagline {
    margin: 0;

    font-size: 1rem;
    line-height: 1.65;
}

.wce-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 4px;
}

.wce-footer .wce-footer__contact-item {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;

    font-weight: 600;
}

.wce-footer__icon {
    flex-shrink: 0;

    width: 16px;
    height: 16px;

    color: var(--teal-300);
}


/* ==========================================
   ONDERBALK
========================================== */

/* Desktop + tablet: links twee regels (meta, daaronder
   juridisch), rechts de talen, verticaal gecentreerd.
   Juridisch hoort bij de copyright; de talen zijn
   bediening en staan los. */
.wce-footer__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 32px;
    row-gap: 8px;

    padding: 24px 0;

    border-top: 1px solid var(--footer-line);

    font-size: 0.875rem;
}

.wce-footer__meta {
    grid-column: 1;
    grid-row: 1;

    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 4px;
}

.wce-footer__legal {
    grid-column: 1;
    grid-row: 2;
}

.wce-footer__lang {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.wce-footer .wce-footer__legal-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wce-footer .wce-footer__legal-list li {
    margin: 0;
}

.wce-footer .wce-footer__legal-list a {
    color: var(--blue-300);
}

.wce-footer .wce-footer__legal-list a:hover {
    color: var(--white);
}


/* ==========================================
   TALEN
   Platte lijst (geen dropdown), los van de
   taalkiezer in de utility bar. Huidige taal
   wit en vet, de andere --blue-300.
========================================== */

.wce-footer .wce-footer__lang-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wce-footer .wce-footer__lang-list li {
    margin: 0;
}

.wce-footer .wce-footer__lang-list a {
    color: var(--blue-300);
}

.wce-footer .wce-footer__lang-list a:hover {
    color: var(--white);
}

.wce-footer__lang-current {
    color: var(--white);

    font-weight: 700;
}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .wce-footer a {
        transition: none;
    }
}


/* ==========================================
   TABLET — merk bovenaan, 3 kolommen
========================================== */

@media (max-width: 1024px) {

    .wce-footer__main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 32px;

        padding: 4rem 0 3rem;
    }

    .wce-footer__col--brand {
        grid-column: 1 / -1;

        max-width: 520px;
    }
}


/* ==========================================
   MOBIEL — 2 kolommen, Informatie eronder
========================================== */

@media (max-width: 768px) {

    .wce-footer {
        --gutter: 15px;
    }

    .wce-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;

        padding: 3.5rem 0 2.5rem;
    }

    .wce-footer__col--brand,
    .wce-footer__col--info {
        grid-column: 1 / -1;
    }

    .wce-footer__col--range,
    .wce-footer__col--tags,
    .wce-footer__col--info {
        gap: 10px;

        padding-top: 32px;

        border-top: 1px solid var(--footer-line);
    }

    .wce-footer__col--brand {
        gap: 18px;
    }

    .wce-footer .wce-footer__logo img {
        width: 180px;
    }

    .wce-footer .wce-footer__contact {
        gap: 0;
    }

    .wce-footer .wce-footer__contact-item {
        min-height: 44px;

        font-size: 1rem;
    }

    /* Grotere tikdoelen */
    .wce-footer .wce-footer__list {
        gap: 0;

        font-size: 1rem;
    }

    .wce-footer .wce-footer__list a {
        display: flex;
        align-items: center;

        min-height: 40px;
    }

    .wce-footer__list a[target="_blank"]::after {
        flex-shrink: 0;
    }

    /* Onderbalk: taal → juridisch → meta */
    .wce-footer__bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        padding: 24px 0 32px;
    }

    .wce-footer__lang   { order: 1; }
    .wce-footer__legal  { order: 2; }
    .wce-footer__meta   { order: 3; flex-direction: column; margin-right: 0; }

    .wce-footer .wce-footer__legal-list a {
        display: flex;
        align-items: center;

        min-height: 36px;
    }

    .wce-footer .wce-footer__lang-list a,
    .wce-footer__lang-current {
        display: flex;
        align-items: center;

        min-height: 40px;
    }
}