/**
 * R4Y footer (page type global_footer) – port of Elementor footer 4456.
 *
 * Renders on Elementor pages too, so it is scoped on its own root .r4y-footer
 * (not .r4y-template) and sets color/font/size explicitly to beat the Kit
 * (.elementor-kit-3906 a / a:hover / p) and the Hello Elementor reset.
 * Values mirror post-4456.css (2026-11-07); breakpoints: tablet ≤1024, mobile ≤767.
 */

.r4y-footer {
    background-color: var(--r4y-color-surface-dark);
    color: var(--r4y-color-on-dark);
    font-family: var(--r4y-font-body);
    font-size: var(--r4y-fs-base);
    font-weight: var(--r4y-fw-light);
    line-height: var(--r4y-lh-body);
}
.r4y-footer *,
.r4y-footer *::before,
.r4y-footer *::after {
    box-sizing: border-box;
}
.r4y-footer h2,
.r4y-footer p,
.r4y-footer ul {
    margin: 0;
    padding: 0;
}
.r4y-footer ul {
    list-style: none;
}
.r4y-footer img {
    display: block;
    max-width: none;
    height: auto;
}

/* Links: white, no hover change (as in Elementor); visible keyboard focus. */
.r4y-footer .r4y-footer__inner a {
    color: var(--r4y-color-on-dark);
    text-decoration: none;
}
.r4y-footer .r4y-footer__inner a:hover,
.r4y-footer .r4y-footer__inner a:focus {
    color: var(--r4y-color-on-dark);
}
.r4y-footer .r4y-footer__inner a:focus-visible {
    outline: 2px solid var(--r4y-kit-secondary);
    outline-offset: 2px;
}

/* Boxed containers: content max 1400 inside the section padding. */
.r4y-footer__inner {
    width: 100%;
    max-width: var(--r4y-container);
    margin-inline: auto;
}

/* ── Top: logo, Pagina's, HR-tools, Contact ─────────────────────────── */
.r4y-footer__top {
    padding: var(--r4y-space-xl) var(--r4y-space-xl) var(--r4y-space-lg);
}
.r4y-footer__top-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.r4y-footer__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.r4y-footer__col--brand   { width: 46%; padding-right: 20%; }
.r4y-footer__col--pages   { width: 17%; }
.r4y-footer__col--tools   { width: 17%; }
.r4y-footer__col--contact { width: 20%; }

/* Elementor: a 400px image widget, capped at the column width; the image is 60% of it. */
.r4y-footer__logo {
    width: 100%;
    max-width: 400px;
    margin-top: -21px;
}
.r4y-footer__logo img {
    width: 60%;
}

.r4y-footer .r4y-footer__title {
    font-family: var(--r4y-font-heading);
    font-size: var(--r4y-fs-lg-plus);
    font-weight: var(--r4y-fw-light);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--r4y-kit-secondary);
}

.r4y-footer__list li {
    line-height: 1.5;
}
.r4y-footer__list--spaced li + li {
    margin-top: 10px;
}

.r4y-footer__address {
    margin-bottom: -16px;
}
.r4y-footer .r4y-footer__list--contact {
    margin-top: 15px;
}
.r4y-footer__list--contact li + li {
    margin-top: 8px;
}

.r4y-footer__notice {
    font-size: var(--r4y-fs-sm);
    color: var(--r4y-kit-secondary);
}

/* ── Divider ────────────────────────────────────────────────────────── */
.r4y-footer__divider {
    padding: 10px; /* Elementor's default container padding */
}
.r4y-footer__divider hr {
    height: 0;
    margin: 15px 0;
    border: 0;
    border-top: 1px solid var(--r4y-color-divider-on-dark);
}

/* ── Expertises × plaatsen ──────────────────────────────────────────── */
.r4y-footer__locations {
    padding: var(--r4y-space-lg) var(--r4y-space-xl);
}
.r4y-footer__locations-inner {
    display: flex;
    flex-direction: row;
}
.r4y-footer__group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 20%;
}
.r4y-footer .r4y-footer__group-title {
    font-family: var(--r4y-font-body);
    font-size: var(--r4y-fs-base);
    font-weight: var(--r4y-fw-semibold);
    line-height: 1;
}

/* ── Bottom: certificate + legal links ──────────────────────────────── */
.r4y-footer__bottom {
    padding: var(--r4y-space-md) var(--r4y-space-xl);
}
.r4y-footer__bottom-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 45px;
}
/* Elementor: a 100px widget next to a 100% container; both shrink to fit. */
.r4y-footer__certificate {
    flex: 0 1 100px;
    min-width: 0;
}
.r4y-footer__certificate img {
    width: 80px;
    margin-inline: auto;
}
.r4y-footer .r4y-footer__legal {
    padding: 10px; /* Elementor's default container padding */
}
.r4y-footer__legal {
    flex: 0 1 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--r4y-space-lg);
}
.r4y-footer .r4y-footer__legal a {
    font-family: var(--r4y-font-ui);
    font-size: var(--r4y-fs-xs);
    font-weight: var(--r4y-fw-light);
    line-height: 1.8;
    transition: color var(--r4y-transition);
}
.r4y-footer .r4y-footer__legal a:hover,
.r4y-footer .r4y-footer__legal a:focus {
    color: var(--r4y-kit-secondary);
}

/* ── Tablet ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Elementor: row-reverse + wrap; the logo moves to its own row at the bottom. */
    .r4y-footer__top {
        padding: 7.2% 5%; /* Elementor: 8% of the inner width (90%) vertically, 5% sides */
    }
    .r4y-footer__top-inner {
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }
    .r4y-footer__col--brand   { order: 99999; width: 100%; margin-top: 8%; padding-right: 35%; gap: 30px; }
    .r4y-footer__col--pages   { width: 25%; }
    .r4y-footer__col--tools   { width: 25%; }
    .r4y-footer__col--contact { width: 50%; padding-right: 15%; }

    .r4y-footer__col--pages,
    .r4y-footer__col--tools,
    .r4y-footer__col--contact {
        font-size: var(--r4y-fs-sm);
    }

    .r4y-footer__bottom {
        padding: 0 var(--r4y-space-xl) var(--r4y-space-md);
    }
    .r4y-footer .r4y-footer__legal {
        padding: 0;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Order top to bottom: logo, Contact, then HR-tools | Pagina's. */
    .r4y-footer__top {
        padding: 0 var(--r4y-space-md);
    }
    .r4y-footer__col--brand   { order: -99999; margin-top: 25%; padding-right: 0; }
    .r4y-footer__col--contact { order: -99999; width: 100%; margin: 30px 0; padding-right: 0; }
    .r4y-footer__col--pages   { width: 50%; }
    .r4y-footer__col--tools   { width: 50%; }

    .r4y-footer__logo {
        max-width: 100%;
    }

    .r4y-footer .r4y-footer__title {
        font-size: var(--r4y-fs-md);
    }
    .r4y-footer__list--spaced li + li {
        margin-top: 8px;
    }

    .r4y-footer__locations {
        padding: var(--r4y-space-lg) var(--r4y-space-md);
    }
    .r4y-footer__locations-inner {
        flex-direction: column;
    }
    .r4y-footer__group {
        width: 100%;
    }
    .r4y-footer__group:not(:last-child) .r4y-footer__list {
        margin-bottom: 30px;
    }

    .r4y-footer__bottom {
        padding: 0 var(--r4y-space-md) var(--r4y-space-md);
    }
    .r4y-footer__bottom-inner {
        align-items: flex-end;
    }
    .r4y-footer__legal {
        /* Deviation: Elementor used 64% without a gap, so it read "voorwaardenPrivacyverklaring".
           Filling the remaining width leaves room for a gap on the same two lines. */
        flex: 1 1 64%;
        column-gap: 10px;
    }
    .r4y-footer .r4y-footer__legal a {
        line-height: 2;
    }
}