:where(.site-footer) {
    background-color: var(--color-brand-blue);
    color: var(--color-primary-white);

    :where(.footer-wrap) {
        max-width: var(--content-width-x-large);
        margin-inline: auto;
        padding-block: 6rem;
        padding-inline: var(--size-small);
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: var(--size-large);
    }

    /* logo.svg ships colored fills inline; force white for the footer. */
    :where(.footer-logo) {
        a {
            display: inline-block;
        }

        svg {
            display: block;
            width: 22rem;
            height: auto;

            path {
                fill: var(--color-primary-white) !important;
            }
        }
    }

    :where(.footer-contact) {
        display: flex;
        flex-flow: column;
        gap: var(--size-x-small);
        font-size: 1.8rem;

        .footer-contact-line {
            margin: 0;
        }

        a {
            color: var(--color-primary-white);
            text-decoration: none;
        }
    }

    :where(.footer-actions) {
        display: flex;
        flex-flow: column;
        align-items: flex-end;
        gap: var(--size-medium);
    }

    /* Editable Apply/Donate CTAs (buttons/button component). */
    :where(.footer-buttons) {
        display: flex;

        /* Each button carries the global 20rem minimum, so a pair needs more width than a phone
           has. Let them drop onto separate lines instead of pushing the footer wider. */
        flex-wrap: wrap;
        gap: var(--size-x-small);
    }

    :where(.footer-facebook) {
        display: inline-flex;
        align-items: center;
        gap: var(--size-x-small);
        color: var(--color-primary-white);
        text-decoration: none;
        font-size: 1.8rem;

        .footer-facebook-icon svg {
            display: block;
            width: 2.8rem;
            height: 2.8rem;
        }
    }
}

/* Beat WordPress' global-styles `a:where(:not(.wp-element-button)){text-decoration:underline}`
   (specificity 0,0,1) — :where()-wrapped rules above tie and lose on source order. */
.site-footer a {
    text-decoration: none;
}

@media screen and (max-width: 980px) {
    .site-footer :where(.footer-wrap) {
        grid-template-columns: 1fr;
        justify-items: start;
        row-gap: var(--size-medium);
    }

    .site-footer :where(.footer-actions) {
        align-items: flex-start;
    }
}