#footer {
    background-color: var(--color-dark-petrol);
    --color-text: var(--color-light);
    --outline-color: var(--color-light);

    padding-top: 3.5rem;
    padding-bottom: 1.25rem;
    padding-bottom: calc( 1.25rem + env(safe-area-inset-bottom) );

    position: relative;

    overflow: hidden;
}

#footer::before {
    content: ' ';
    display: block;
    width: 20.25rem;
    aspect-ratio: 1 / 1;
    background-image: url('../assets/images/CARO_O.svg');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;

    transform: translate(40%, 20%);
}

.footer-wrapper {
    position: relative;
    z-index: 2;
}

.footer-container {
    width: var(--container-width);
    margin-inline: auto;
}

#footer-logo {
    margin-bottom: 1.875rem;
}

#footer-logo .logo {
    width: 12.5rem;
    height: auto;
}

#footer a {
    text-decoration: none;
}

#footer :not(.social-media-links) a:is(:hover, :focus-visible):not(.btn) {
    color: var(--color-text);
    --color-text: var(--color-danger);
    opacity: 1;
}

#footer .social-media-links {
    font-size: 1.5rem;
}

#footer-widgets a:is(:hover, :focus-visible):not(.btn) {
    font-weight: bold;
}

#footer-widgets {
    display: grid;
    grid-template-areas: 
        "info"
        "social"
        "menu-1"
        "menu-2";

    position: relative;
}

.footer-widgets-info-1 {
    grid-area: info;
}

.footer-widgets-info-4 {
    grid-area: social;
    margin-bottom: 4rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-widgets-info-2 {
    grid-area: menu-1;
}

    #footer ul.menu {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

.footer-widgets-info-3 {
    grid-area: menu-2;
}

#footer-copyright {
    display: grid;
    grid-template-areas: 
        "menu"
        "partner";
}

#footer-copyright-partner {
    grid-area: partner;
}

#footer-copyright-menu {
    grid-area: menu;
    margin-top: 0.5rem;
}

#footer-copyright-menu a:is(:hover, :focus-visible) {
    text-decoration: underline;
}

#footer-copyright-partner-wrapper::before {
    content: ' ';
    display: block;
    height: 1px;
    width: 100%;
    background-color: var(--color-light);
    position: absolute;
    left: 0;
}

#footer-copyright-partner-wrapper {
    margin-top: 2rem;
}

#footer-copyright-partner {
    padding-top: 1rem;
}

#footer-copyright-partner img {
    height: 1rem;
    width: auto;
    display: inline-block;
}

#footer-copyright-partner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}

#footer-copyright-partner > a {
    text-align: center;
    display: block;
}

#footer-copyright-partner > a:first-child {
    width: 100%;
}

#footer-copyright-partner a:is(:hover, :focus-visible) img {
    filter: brightness(0) saturate(100%) invert(41%) sepia(64%) saturate(1541%) hue-rotate(316deg) brightness(97%) contrast(89%);
}




@media screen and (min-width: 62rem) {
    #footer-widgets {
        grid-template-areas: "info menu-1 menu-2 social";
        grid-template-columns: 2fr 1fr 1fr 2fr;
        gap: 2rem;
    }

    #footer-logo .logo { 
        width: 16.75rem;
    }

    #footer::before {
        width: 45.3125rem;
        transform: translate(-21%, 73%);
    }

    #footer-widgets {
        margin-bottom: 7rem;
    }

    #footer-copyright {
        display: grid;
        grid-template-areas: "partner menu";
        justify-items: stretch;
        align-items: center;
    }

    #footer-copyright-partner {
        justify-content: flex-start;
        align-items: center;
        gap: 1.5625rem;

        padding-top: 1.5rem;
    }

    #footer-copyright-partner > a:first-child {
        width: auto;
        border-right: 0.1875rem solid var(--color-light);
        padding-right: 1.5625rem;
    }

    #footer-copyright-partner-wrapper{ 
        margin-top: 0;
    }

    #footer-copyright-menu {
        margin-top: 1rem;
    }

    #footer-copyright-menu ul.menu {
        flex-direction: row;
        font-size: var(--fs-tiny);
        justify-content: flex-end;
        gap: 1rem;
    }

    #footer-copyright-partner-wrapper::before {
        background-color: var(--color-primary);
    }

    #footer-copyright-partner img {
        height: 1.375rem;
        display: block;
    }


}