/*
 * EJK footer - alle opmaak op een plek.
 *
 * Stand 17-08-2026.
 *
*/

:root {
    --ejk-ft-icon-dojo: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/dojo-prim.webp");
    --ejk-ft-icon-post: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/location-prim.webp");
    --ejk-ft-icon-mail: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/mail-prim.webp");
    --ejk-ft-icon-phone: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/phone-prim.webp");
    --ejk-ft-icon-bank: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/bank-prim.webp");
    --ejk-ft-icon-kvk: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/kvk-prim.webp");
    --ejk-ft-icon-jbn-new: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/jbn-new-prim.webp");
    --ejk-ft-icon-jbn-old: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/jbn-old-prim.webp");
    --ejk-ft-icon-logo: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/logo-prim.webp");

    /*--ejk-icon-color: var(--ejk-tertiary-l-6, #634700);*/
    --ejk-icon-color: var(--ejk-secondary-l-4, #878105);

    --ejk-footer-link-normal: green; // var(--ejk-secondary-l-4, #878105);
    --ejk-footer-link-hover: var(--ejk-secondary-d-6, #fbf695);
}

/* Wint van :root op specificiteit, dus dit geldt zodra light mode terugkomt. */
html[data-theme="light"] {
    /*--ejk-icon-color: var(--ejk-secondary, #6E6904);*/
    --ejk-icon-color: var(--ejk-tertiary-l-6, #634700);
}

:root .ejk-footer {
    border-block-start: 3px solid var(--ejk-primary);
    flex-direction: column;
    row-gap: 0;
    padding: var(--at-space--l) 0 0;
    position: relative;
    overflow: hidden;
    padding-block-end: var(--at-space--l);

    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -311px;
        width: 935px;
        aspect-ratio: 1;
        background-image: url("https://ejkb5.dev.fam-aerts.nl/wp-content/uploads/2026/08/logo2009_wit-faded-.webp");
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0.03;
        pointer-events: none;
        z-index: 0;
    }

    > * {
        position: relative;
        z-index: 1;
    }

    .ejk-footer__top {
        display: flex;
        flex-direction: row;
        align-items: center;
        align-self: stretch;
        justify-content: flex-end;
        column-gap: var(--at-space--m);
        padding-block-start: var(--at-space--s);
        padding-inline-end: var(--at-space--s);
        padding-block-end: var(--at-space--s);
        padding-inline-start: var(--at-space--s);
        border-block-end: 1px solid var(--at-white-t-5);
        max-width: 70%;

        & .ejk-footer__claim {
            font-family: 'Bebas Neue', sans-serif;
            font-size: var(--at-heading--xs);
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--at-white);
            margin-inline-end: auto;
        }

        /* --------------------------------
          Laptop / kleinere desktop
          -------------------------------- */
        @media (max-width: 1899px) {
            max-width: 70%;
        }

        /* --------------------------------
          Tablet
          -------------------------------- */
        @media (max-width: 1500px) {
            max-width: 85%;
        }

        /* --------------------------------
           Mobile
          -------------------------------- */
        @media (max-width: 768px) {
            max-width: 95%;
        }
    }

    & .ejk-footer__inner {
        display: grid;
        grid-template-columns: minmax(20rem, 0.5fr) auto auto auto;
        column-gap: var(--at-space--xl);
        row-gap: var(--at-space--xl);
        padding-block-start: var(--at-space--xl);
        padding-block-end: var(--at-space--l);
        padding-inline-start: var(--at-space--m);
        padding-inline-end: var(--at-space--m);
        border-block-start-width: 0;
        border-inline-end-width: 0;
        border-block-end-width: 0;
        max-width: 70%;

        /* --------------------------------
           Laptop / kleinere desktop
           -------------------------------- */
        @media (max-width: 1899px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            row-gap: var(--at-space--l);
            padding-block-start: var(--at-space--s);
            padding-inline-end: var(--at-space--s);
            padding-block-end: var(--at-space--s);
            padding-inline-start: var(--at-space--s);
            margin-block-start: 1rem;
            margin-block-end: 1rem;

            max-width: 70%;

            > :first-child {
                grid-column: 1 / -1;
                width: 350px;
            }
        }

        /* --------------------------------
           Tablet
           -------------------------------- */
        @media (max-width: 1500px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            row-gap: var(--at-space--l);
            padding-block-start: var(--at-space--xs);
            padding-inline-end: var(--at-space--xs);
            padding-block-end: var(--at-space--xs);
            padding-inline-start: var(--at-space--xs);
            margin-block-start: 1rem;
            margin-block-end: 1rem;

            max-width: 85%;

            > :first-child {
                grid-column: 1 / -1;
                width: 350px;
            }
        }

        /* --------------------------------
           Mobile
           -------------------------------- */
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            row-gap: var(--at-space--m);
            padding-block-start: var(--at-space--s);
            padding-inline-end: var(--at-space--s);
            padding-block-end: var(--at-space--s);
            padding-inline-start: var(--at-space--s);
            margin-block-start: 1rem;
            margin-block-end: 1rem;

            max-width: 95%;

            > :first-child {
                grid-column: auto;
                width: 350px;
            }
        }


        & .ejk-footer__content-col,
        & .ejk-footer__contact-col,
        & .ejk-footer__leden-col,
        & .ejk-footer__info-col {
            row-gap: var(--at-space--2xs);

            @media (max-width: 768px) {
                row-gap: var(--at-space--xs);
            }

            & .ejk-footer__kop {
                font-family: 'Bebas Neue', sans-serif;
                font-size: var(--at-heading--xs);
                font-weight: 400;
                letter-spacing: .09em;
                text-transform: uppercase;
                color: var(--at-white);
                padding-block-end: .5rem;
                border-block-end: 1px solid var(--at-white-t-6);
                inline-size: 100%;
                -webkit-user-select: none; /* Voor Safari */
                user-select: none;
                pointer-events: none;
            }

            & .ejk-footer__social {
                gap: 0.8rem;

                & a {
                    color: var(--ejk-footer-link-normal, #6E6904);
                    transition: color .18s ease;
                    font-size: 1.8rem;

                    &:hover,
                    &:focus-visible {
                        color: var(--ejk-footer-link-hover);

                        &.icon {
                            font-size: 1.8rem;
                            color: var(--ejk-footer-link-hover);
                        }
                    }

                    &:focus-visible {
                        outline: none;
                    }

                    @media (prefers-reduced-motion: reduce) {
                        transition: none;
                    }
                }
            }

            .ejk-footer__block {
                display: grid;
                grid-template-columns: minmax(0, 2.4rem) minmax(0, 1fr);
                grid-auto-flow: unset;
                justify-items: flex-start;
                align-items: flex-start;
                justify-content: flex-start;
                align-content: flex-start;
                row-gap: 0;
                column-gap: 6px;

                & > * {
                    grid-row: unset;
                    grid-column: unset;
                }
            }

            .ejk-footer__blok {
                & > *:where(:nth-child(3)) {
                    grid-row: 2 / 3;
                    grid-column: 2 / 3;
                }
            }

            & .ejk-footer-col__icon {
                grid-row: 1 / 3;
                grid-column: 1 / 2;
                min-height: 100%;
                height: 100%;

                & .ejk-footer__bullet {
                    width: 100%;
                    height: 100%;
                    min-width: 1.4rem;
                    background-size: contain;
                    background-repeat: no-repeat;

                    background-image: none;
                    background-color: var(--ejk-icon-color);
                    -webkit-mask-size: contain;
                    mask-size: contain;
                    -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
                    -webkit-mask-position: top;
                    mask-position: top;
                }
            }

            & .ejk-footer__label {
                font-size: var(--at-text--2xs);
                font-weight: 600;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: var(--ejk-icon-color);
                white-space: nowrap;
                height: fit-content;
                align-content: start;
                align-self: start;
                padding-block-start: 0.2rem;
                -webkit-user-select: none; /* Voor Safari */
                user-select: none;
                pointer-events: none;


                @media (max-width: 767px) {
                    white-space: normal;
                }
            }
        }
    }

    & .ejk-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--at-space--m, 1rem);
        margin-inline: auto;

        padding-block-start: var(--at-space--s);
        padding-inline-end: var(--at-space--s);
        padding-block-end: var(--at-space--s);
        padding-inline-start: var(--at-space--s);

        border-block-start: 1px solid var(--at-white-t-5);

        color: var(--ejk-grey-d-1);
        font-size: var(--at-text--xs);

        max-width: 70%;

        /* --------------------------------
          Laptop / kleinere desktop
          -------------------------------- */
        @media (max-width: 1899px) {
            max-width: 70%;
        }

        /* --------------------------------
          Tablet
          -------------------------------- */
        @media (max-width: 1500px) {
            max-width: 85%;
        }

        /* --------------------------------
           Mobile
          -------------------------------- */
        @media (max-width: 768px) {
            max-width: 95%;
        }

        & .ejk-footer__legal {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 16px;
            /*margin-inline-start: auto;*/
            font-size: var(--at-text--xs);
        }
    }

    & .ejk-footer__link {
        font-size: var(--at-text--xs);
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 1.3rem;
        color: var(--ejk-footer-link-normal);
        white-space: nowrap;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        background: transparent;
        cursor: pointer;
    }

    & .ejk-footer__value a,
    & .ejk-footer__legal a,
    & .ejk-footer__link a {
        color: var(--ejk-footer-link-normal);
        text-decoration: none;
        transition: color .18s ease;
        padding-block-start: var(--at-space--3xs);


        &:hover,
        &:focus-visible {
            color: var(--ejk-footer-link-hover);
            text-decoration: underline;
            text-underline-offset: 3px;
            outline: none;
        }

        @media (max-width: 767px) {
            white-space: normal;
        }
    }

    & .ejk-icon-dojo {
        -webkit-mask-image: var(--ejk-ft-icon-dojo);
        mask-image: var(--ejk-ft-icon-dojo);
    }

    & .ejk-icon-post {
        -webkit-mask-image: var(--ejk-ft-icon-post);
        mask-image: var(--ejk-ft-icon-post);
    }

    & .ejk-icon-mail {
        -webkit-mask-image: var(--ejk-ft-icon-mail);
        mask-image: var(--ejk-ft-icon-mail);
    }

    & .ejk-icon-phone {
        -webkit-mask-image: var(--ejk-ft-icon-phone);
        mask-image: var(--ejk-ft-icon-phone);
    }

    & .ejk-icon-bank {
        -webkit-mask-image: var(--ejk-ft-icon-bank);
        mask-image: var(--ejk-ft-icon-bank);
    }

    & .ejk-icon-kvk {
        -webkit-mask-image: var(--ejk-ft-icon-kvk);
        mask-image: var(--ejk-ft-icon-kvk);
    }

    & .ejk-icon-jbn-new {
        -webkit-mask-image: var(--ejk-ft-icon-jbn-new);
        mask-image: var(--ejk-ft-icon-jbn-new);
    }

    & .ejk-icon-jbn-old {
        -webkit-mask-image: var(--ejk-ft-icon-jbn-old);
        mask-image: var(--ejk-ft-icon-jbn-old);
    }

    & .ejk-icon-logo {
        -webkit-mask-image: var(--ejk-ft-icon-logo);
        mask-image: var(--ejk-ft-icon-logo);
    }

    @media (prefers-reduced-motion: reduce) {
        & a {
            transition: none;
        }
    }
}


/* =========================================================================
   3. Onderdelen - verplaatst uit de Bricks global classes (17-08-2026)
      Volgorde = zoals Bricks ze uitstuurde. Niet herschikken.
   ========================================================================= */

:root {
    .ejk-footer__anno {
        font-size: var(--at-text--2xs);
        font-weight: 600;
        letter-spacing: .2em;
        color: var(--ejk-secondary);
    }


    .ejk-footer__claim {
        font-family: 'Bebas Neue', sans-serif;
        font-size: var(--at-heading--xs);
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--at-white);
        margin-inline-end: auto;
    }

    .ejk-footer__claimtekst {
        font-size: var(--at-text--xs);
        max-inline-size: 30ch;
        color: var(--ejk-grey-d-1);
        line-height: 1.6;
    }

    .ejk-footer__content {
        font-size: var(--at-text--xs);
        color: var(--ejk-text);
        line-height: 1.5;
        white-space: nowrap;
        grid-row: 2 / 3;
        grid-column: 2 / 3;

        @media (max-width: 767px) {
            white-space: normal;
        }
    }

    .ejk-footer__content--num {
        font-variant-numeric: tabular-nums;
        letter-spacing: .02em;
        -webkit-user-select: none; /* Voor Safari */
        user-select: none;
        pointer-events: none;

    }


    .ejk-footer__merknaam {
        font-family: 'Bebas Neue', sans-serif;
        font-size: var(--at-heading--xs);
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--at-white);
        line-height: 1.05;
    }


}