/* =========================================================
   Footer Section — layout only (typography comes from base.css / .footer-col)
   ========================================================= */

.footer-section {
    background-color: var(--color-teal-900);
}

.footer-section .footer-section-wrapper {
    gap: 56px;
    padding-block: 48px;
}

/* ---------- Brand column ---------- */

/* the four link columns sit at their natural width, so the brand is the one
   that gives when the row runs out of room — it has slack at 1260 and only
   starts to narrow below roughly 1066 */
.footer-section .footer-section-wrapper .footer-section-brand {
    width: 320px;
    gap: var(--space-sm);
}

.footer-section .footer-section-wrapper .footer-section-brand .footer-section-logo {
    width: 158px;
}

.footer-section .footer-section-wrapper .footer-section-brand .footer-section-logo img {
    height: 39px;
    object-fit: contain;
    object-position: left center;
}

.footer-section .footer-section-wrapper .footer-section-brand p {
    max-width: 269px;
    font-size: var(--font-size-h6);
    line-height: var(--line-height-card-body);
    color: var(--color-white-80);
}

.footer-section .footer-section-wrapper .footer-section-brand .footer-section-social {
    gap: 14px;
    list-style: none;
}

.footer-section .footer-section-wrapper .footer-section-brand .footer-section-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.footer-section .footer-section-wrapper .footer-section-brand .footer-section-social li a:hover,
.footer-section .footer-section-wrapper .footer-section-brand .footer-section-social li a:focus-visible {
    opacity: 0.8;
}

.footer-section .footer-section-wrapper .footer-section-brand .footer-section-social li a img {
    width: auto;
    height: auto;
    max-width: 18px;
    max-height: 18px;
    object-fit: contain;
    /* filter: brightness(0) saturate(100%) invert(99%) sepia(25%) saturate(2129%) hue-rotate(171deg) brightness(103%) contrast(84%); */
}

.footer-section .footer-section-wrapper .footer-section-brand .footer-section-badge {
    width: 112px;
    height: 58px;
    border-radius: var(--radius-xs);
    object-fit: contain;
    object-position: left center;
}

/* ---------- Link columns ---------- */

.footer-section .footer-section-wrapper .footer-col {
    flex-shrink: 0;
}

.footer-section .footer-copyright {
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-sm);
    gap: var(--space-xxm);
    flex-wrap: wrap;
}

.footer-section .footer-copyright .copyright-left,
.footer-section .footer-copyright .copyright-right {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-body-sm);
    color: var(--color-white-80);
}

.footer-section .footer-copyright .copyright-right a {
    color: inherit;
}

.footer-section .footer-copyright .copyright-right a:hover,
.footer-section .footer-copyright .copyright-right a:focus-visible {
    color: var(--color-white);
}

/* ---------- Large Desktop / Laptop ---------- */
@media (max-width: 1199px) {

    .footer-section .footer-section-wrapper {
        gap: var(--space-xl);
    }

}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {

    .footer-section .footer-section-wrapper {
        flex-wrap: wrap;
        gap: var(--space-xl) var(--space-lg);
        padding-block: var(--space-xl);
    }

    .footer-section .footer-section-wrapper .footer-section-brand {
        flex: 1 1 100%;
        width: auto;
    }


    .footer-section .footer-section-wrapper .footer-section-brand p {
        max-width: 100%;
    }


    .footer-section .footer-section-wrapper .footer-col {
        flex: 1 1 160px;
    }

}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .footer-section .footer-section-wrapper {
        gap: var(--space-xl) var(--space-md);
    }

    /* two columns all the way down — a single column makes the footer very long */
    .footer-section .footer-section-wrapper .footer-col {
        flex: 1 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }

    .footer-section .footer-copyright .copyright-left,
    .footer-section .footer-copyright .copyright-right {
        font-size: 12px;
    }

}

/* ---------- Small Mobile ---------- */
@media (max-width: 575px) {

    .footer-section .footer-section-wrapper {
        gap: var(--space-lg) var(--space-sm);
    }

    .footer-section .footer-section-wrapper .footer-col {
        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }

}