/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

.footer {
    --grid-columns: 2fr 1fr;

    display: grid;
    grid-template-rows: min-content min-content;
    padding: 3.36rem;
    padding-right: var(--dynamic-spacing-inline-end);
    padding-left: var(--dynamic-spacing-inline-start);
    font-size: var(--text-size-fine);
    font-weight: var(--text-weight);
    line-height: var(--text-line-small);
    border-top: 1px solid var(--border-color, var(--color-subtle));
}

.dark .footer {
    --border-color: transparent;
}

.dark.gallery .footer {
    --border-color: rgba(255, 255, 255, 0.25);
}

@media (min-width: 700px) {
    .footer {
        --grid-columns: 1fr 1fr 1fr min-content;
    }
}

@media (min-width: 1000px) {
    .footer {
        --grid-columns: 2fr 2fr 2fr 3fr;
    }
}

.on-dark .footer {
    color: #fff;
    border-top: none;
    background-color: #000;
}

/* Company name */

.footer strong {
    display: block;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-bottom: var(--text-line-small);
    font-weight: var(--text-weight-bold);
}

body:not(.dark) .footer strong .company {
    display: block;
    text-indent: -1000em;
    letter-spacing: 0.05em;
    background-image: url(../images/logo.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 10rem;
}

@media (prefers-color-scheme: dark) {
    body:not(.dark) .footer strong .company {
        background-image: url(../images/logo-white.svg);
    }
}

body:not(.dark) .is-collapsed .footer strong .company {
    display: none;
}

/**
 * If the grid layout is available and the header is collapsed, the logo is already
 * displayed to the left of the footer and should not be duplicated.
 */

@supports (display: grid) {
    @media (max-width: 1399px) {
        body:not(.dark) .footer strong .company {
            display: inline;
            text-indent: 0;
            background: none;
        }
    }
}

/* Links */

.footer dl {
    display: grid;
    grid-column: 1 / -1;
    grid-gap: var(--grid-gap);
    grid-row: 1 / -1;
    grid-template-columns: var(--grid-columns);
    grid-template-rows: repeat(auto-fill, min-content);
    margin: 0;
}

.footer dt {
    font-weight: var(--text-weight-extrablack);
}

.footer dd a {
    white-space: nowrap;
    text-decoration: none;
}

.footer dd a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-underline);
    text-decoration-thickness: 0.1rem;
    text-underline-offset: 0.15em;
}

.dark .footer dd a:hover {
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.footer div {
    grid-column-start: 2;
    margin-bottom: var(--text-line-small);
}

.footer .footer-contact {
    grid-column-start: 1;
    grid-row: 1 / 3;
}

.footer .footer-contact dt {
    color: transparent;
}

@media (min-width: 700px) {
    .footer .footer-contact {
        grid-column-start: 2;
    }

    .footer .footer-contact dt {
        color: inherit;
    }

    .footer .footer-about {
        grid-column-start: 3;
        grid-row-start: 1;
    }

    .footer .footer-newsletter {
        grid-column-start: 3;
        grid-row-start: 2;
    }

    .footer .footer-social {
        grid-column-start: 4;
        grid-row: 1 / 3;
    }
}

/* Copyright */

.footer time {
    grid-column-start: 1;
    grid-row-start: -2;
    align-self: self-end;
    justify-self: start;
    margin-bottom: var(--text-line-small);
}