/*
 * Footer (partials/footer.php). Dark navy surface: text colors are set as
 * local custom properties so contrast against --color-primary is verified
 * once here, not re-picked per element.
 *
 * `.footer__wrapper`/`.footer__bottom` flex direction and alignment come
 * from Bootstrap utility classes in the template. `.footer__columns` is a
 * Bootstrap `row`/`col-md-3` grid instead of the old CSS grid; its gutter is
 * tuned to the site's vw scale via `--bs-gutter-x`/`--bs-gutter-y` because
 * Bootstrap's fixed rem gap steps can't reproduce that value.
 */

.footer {
    --footer-heading: #fff;
    --footer-text: #C9D6EC;
    background: var(--color-primary);
    color: var(--footer-text);
    margin-top: 4.5vw;
}

.footer__wrapper {
    gap: 2.5vw;
    padding: 3.33vw 0 1.67vw;
}

/*
 * The footer runs the wordmark WITH its "TRAINING COACHING CAREER" subline
 * (`assethr-lockup-light.png` - white "HR" and subline, brand red kept),
 * where there is room to show it near its natural 193px width and the
 * subline stays readable. The header crop is the wordmark only, see
 * 02-header.css.
 */
.footer__brand .logo {
    width: 9.4vw;
}

.footer__tagline {
    max-width: 26em;
    color: var(--footer-text);
    margin: 0.83vw 0 0;
}

.footer__partner {
    max-width: 26em;
    font-size: 0.83vw;
    color: var(--footer-text);
    opacity: 0.8;
    margin: 0.42vw 0 0;
}

.footer__columns {
    --bs-gutter-x: 1.67vw;
    --bs-gutter-y: 1.67vw;
}

.footer__column-title {
    color: var(--footer-heading);
    font-size: 0.94vw;
    font-weight: 700;
    margin: 0 0 0.94vw;
}

.footer__column-list {
    display: flex;
    flex-direction: column;
    gap: 0.63vw;
}

.footer__column-list a {
    color: var(--footer-text);
}

.footer__column-list a:hover,
.footer__column-list a:focus-visible {
    color: #fff;
}

.footer__bottom {
    gap: 1.25vw;
    padding: 1.25vw 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.73vw;
}

.footer__bottom p {
    color: var(--footer-text);
}

.footer__policy-link {
    color: var(--footer-text);
    text-decoration: underline;
}

.footer__policy-link:hover,
.footer__policy-link:focus-visible {
    color: #fff;
}

@media only screen and (max-width: 767.98px) {
    .footer {
        margin-top: 9vw;
    }

    .footer__wrapper {
        gap: 6.4vw;
        padding: 9vw 0 5.33vw;
    }

    /* 375px reference: 180px, close to the crop's natural 193px, so the
       subline stays legible on a phone too. */
    .footer__brand .logo {
        width: 48vw;
    }

    .footer__columns {
        --bs-gutter-x: 6.4vw;
        --bs-gutter-y: 6.4vw;
    }

    .footer__column-title {
        font-size: 4.27vw;
        margin: 0 0 3.2vw;
    }

    .footer__column-list {
        gap: 2.67vw;
    }

    .footer__bottom {
        gap: 2.67vw;
        font-size: 3.2vw;
    }
}