/* ====================================================== */
/* © HENDRIK ADONS
/* Contains the styling for the footer, works together
/* with the footer.js file.
/* ====================================================== */

footer {
    width: var(--dvw);
    display: flex; flex-direction: column; gap: 1rem;
    --footer-background: var(--color\:background);
    --footer-primary-color: var(--color\:secondary);
    --footer-button-hover-background: rgba(0,0,0,0.05);
    color: var(--footer-primary-color);
    font-size: small; font-weight: 400;
    padding: 1.5em 0 max(1.5em,env(safe-area-inset-bottom)) 0;
    background-color: var(--footer-background);
    &.transparent { background-color: transparent; }
}
@media screen and (prefers-color-scheme: dark) {
    footer {
        --footer-button-hover-background: rgba(255,255,255,0.12);
    }
}



.footer-row {
    display: flex; flex-direction: row; justify-content: space-between; align-items: end;
    max-width: min(68rem,calc(var(--dvw) - var(--save-padding-left) - var(--save-padding-right))); width: 100%; margin-inline: auto;
}
@media (max-width: 640px) {
    .footer-row { flex-direction: column; align-items: start; }
}


.footer-logo {
    --h: 2.5rem;
    height: var(--h); width: calc(var(--h) * 197.27231/35.633831 + 3*.375rem);
    margin: auto; margin-left: 0; /* 1.7rem; */
    transition: opacity 240ms ease;
    position: relative;
    & > svg {
        color: var(--footer-primary-color);
        height: 100%; width: auto;
    }
}
.footer-socials {
    display: flex; gap: 0.5rem;
    & a {
        height: 1.8rem;
        aspect-ratio: 1 / 1;
        display: flex; align-items: center; justify-content: center;
        color: var(--footer-primary-color);
        border-radius: 0.5rem;
        transition: background-color 200ms ease;
        background-color: transparent;
        cursor: pointer;
        opacity: 0.9;
        & > svg { width: 60%; height: 60%; }
        &:hover {
            opacity: 1;
            background-color: var(--footer-button-hover-background);
        }
    }
}
@media screen and (prefers-color-scheme: dark) {
    #footer-socials a:hover { filter: brightness(1.35); }
}

.footer-divider {
    max-width: min(68rem,calc(var(--dvw) - var(--save-padding-left) - var(--save-padding-right))); width: 100%; margin-inline: auto;
    height: 1px; border-radius: .5px; background-color: var(--footer-primary-color); opacity: .33;
}



footer a {
    color: var(--footer-primary-color);
}
footer a:hover {
    text-decoration: underline;
}

.footer-grouped-elements {
    width: calc(var(--dvw) - 2*var(--padding));
    height: 100%;
    max-width: 68rem;
    margin: auto;
    display: flex;
    gap: 1rem;
}

#footer-s1 {
    margin-top: auto;
}