/* =========================================
   ASMC GLOBAL FOOTER
========================================= */


/* =========================================
   1. FOOTER SHELL
========================================= */

.site-footer {

    background:
        #1E1424;

    color:
        var(--color-white);

    padding-top:
        clamp(
            1.5rem,
            2.2vw,
            2.25rem
        );

    padding-bottom:
        0.75rem;
}



/* =========================================
   2. FOOTER CONTAINER
========================================= */

.footer-container {

    width:
        min(
            calc(
                100% -
                (
                    var(--page-gutter) * 2
                )
            ),
            1320px
        );

    margin-inline:
        auto;
}



/* =========================================
   3. MAIN FOOTER GRID
========================================= */

.footer-main {

    display:
        grid;

    grid-template-columns:
        minmax(
            320px,
            390px
        )
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    column-gap:
        clamp(
            1rem,
            1.5vw,
            1.5rem
        );

    row-gap:
        1rem;

    align-items:
        start;

    width:
        100%;
}



/* =========================================
   4. FOOTER BRAND
========================================= */

.footer-brand {

    width:
        100%;

    max-width:
        390px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}



/* =========================================
   5. FOOTER LOGO
========================================= */

.footer-logo-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        0.65rem;
}


.footer-logo {

    display:
        block;

    width:
        auto;

    height:
        96px;

    max-width:
        300px;

    object-fit:
        contain;
}



/* =========================================
   6. FOOTER BRAND TEXT
========================================= */

.footer-brand-text {

    max-width:
        380px;

    margin:
        0 auto;

    text-align:
        center;

    font-size:
        1rem;

    line-height:
        1.5;

    color:
        rgba(
            255,
            255,
            255,
            0.80
        );
}



/* =========================================
   7. FOOTER COLUMNS
========================================= */

.footer-column {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}



/* =========================================
   8. DESKTOP VERTICAL ALIGNMENT
========================================= */

/*
    The logo + paragraph creates the tallest
    block in the footer.

    These three information columns are
    vertically centered against that height
    instead of sitting at the very top.

    Because Navigate and Join ASMC contain
    less content than Contact, they naturally
    move slightly lower and become visually
    balanced with the Contact column.
*/

@media (min-width: 1025px) {

    .footer-main > .footer-column {

        align-self:
            center;
    }

}



/* =========================================
   9. FOOTER HEADINGS
========================================= */

.footer-heading {

    margin-bottom:
        0.75rem;

    font-family:
        var(--font-display);

    font-size:
        1.05rem;

    font-weight:
        var(--fw-medium);

    line-height:
        1.25;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    text-align:
        center;

    color:
        var(--color-orange);
}



/* =========================================
   10. FOOTER LINKS
========================================= */

.footer-links {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.45rem;

    text-align:
        center;
}


.footer-links a,
.footer-contact-links a {

    position:
        relative;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

    font-family:
        var(--font-body);

    font-size:
        1rem;

    line-height:
        1.35;

    text-decoration:
        none;

    text-align:
        center;

    transition:
        color
        var(--motion-fast)
        ease;
}


.footer-links a:hover,
.footer-contact-links a:hover {

    color:
        var(--color-orange);
}



/* =========================================
   11. FOOTER CONTACT
========================================= */

.footer-contact {

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


.footer-address {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.1rem;

    margin-bottom:
        0.55rem;

    font-family:
        var(--font-body);

    font-size:
        1rem;

    line-height:
        1.35;

    font-style:
        normal;

    text-align:
        center;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
}


.footer-contact-links {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.35rem;

    text-align:
        center;
}



/* =========================================
   12. FOOTER DIVIDER
========================================= */

.footer-divider {

    width:
        100%;

    height:
        1px;

    margin-top:
        clamp(
            0.85rem,
            1.25vw,
            1.25rem
        );

    margin-bottom:
        0.7rem;

    background:
        rgba(
            255,
            255,
            255,
            0.16
        );
}



/* =========================================
   13. FOOTER BOTTOM
========================================= */

.footer-bottom {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        0.5rem
        1.1rem;

    text-align:
        center;
}


.footer-bottom p {

    margin:
        0;

    font-size:
        0.875rem;

    line-height:
        1.35;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );
}



/* =========================================
   14. BOTTOM SEPARATOR
========================================= */

.footer-bottom-note::before {

    content:
        "•";

    margin-right:
        1.1rem;

    color:
        var(--color-orange);
}



/* =========================================
   15. ACCESSIBILITY
========================================= */

.footer-logo-link:focus-visible,
.footer-links a:focus-visible,
.footer-contact-links a:focus-visible {

    outline:
        3px solid
        rgba(
            247,
            148,
            29,
            0.55
        );

    outline-offset:
        5px;
}



/* =========================================
   16. TABLET
========================================= */

@media (max-width: 1024px) {

    .site-footer {

        padding-top:
            2rem;

        padding-bottom:
            0.8rem;
    }


    .footer-main {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        column-gap:
            var(--space-lg);

        row-gap:
            1.5rem;
    }


    .footer-brand {

        width:
            100%;

        max-width:
            100%;
    }


    .footer-logo {

        height:
            90px;

        max-width:
            280px;
    }


    .footer-column {

        align-self:
            auto;

        align-items:
            center;

        justify-content:
            flex-start;

        text-align:
            center;
    }


    .footer-links,
    .footer-address,
    .footer-contact-links {

        align-items:
            center;

        text-align:
            center;
    }


    .footer-divider {

        margin-top:
            1.25rem;
    }

}



/* =========================================
   17. MOBILE
========================================= */

@media (max-width: 768px) {

    .site-footer {

        padding-top:
            1.75rem;

        padding-bottom:
            0.75rem;
    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap:
            1.4rem;
    }


    .footer-brand {

        width:
            100%;

        max-width:
            100%;
    }


    .footer-logo {

        height:
            82px;

        max-width:
            260px;
    }


    .footer-brand-text {

        max-width:
            420px;
    }


    .footer-heading {

        margin-bottom:
            0.6rem;

        font-size:
            1rem;
    }


    .footer-divider {

        margin-top:
            1.1rem;

        margin-bottom:
            0.65rem;
    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            0.2rem;
    }


    .footer-bottom-note::before {

        content:
            none;
    }

}



/* =========================================
   18. SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .site-footer {

        padding-top:
            1.5rem;
    }


    .footer-logo {

        height:
            76px;

        max-width:
            235px;
    }


    .footer-brand-text {

        max-width:
            320px;

        font-size:
            0.95rem;

        line-height:
            1.45;
    }

}