/* The homepage's footer on every page that uses base.html, base_EN.html or
   base_kpi_today.html (the user, 2026-10-19). The other base templates keep
   their old footer. */

/* The footer is no longer placed absolutely over the body's bottom padding
   (custom2.css). It follows the content, and on a short page main grows, so
   the footer still sits at the bottom of the window. */
body {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

main {
    flex: 1 0 auto;
}

.site-footer {
    margin-top: 32px;
    padding: 0 0 30px;
    background: rgb(36, 41, 46);
    color: rgb(248, 248, 248);
    font-family: "Inter", sans-serif;
}

/* Full width with the navbar's 16px side padding, so on desktop the
   copyright starts under the logo and the icons end at the navbar's right
   edge. The homepage gives it .home-shell's width instead (base.html,
   homepage-redesign CSS). */
.site-footer-shell {
    display: grid;
    padding: 30px 16px 0;
    /* Equal side columns keep the links exactly in the middle of the page,
       however wide the copyright and the icons beside them are (the user
       saw them off-centre with auto side columns, 2026-10-14). */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.site-footer-copyright {
    margin: 0;
    color: rgba(248, 248, 248, 0.68);
    font-size: 0.8rem;
    line-height: 1.4;
}

.site-footer-links,
.site-footer-socials {
    display: flex;
    align-items: center;
}

.site-footer-links {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 32px;
    row-gap: 16px;
}

.site-footer-links a {
    color: rgb(248, 248, 248);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.site-footer-socials {
    justify-content: flex-end;
    gap: 12px;
}

.site-footer-socials a {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: rgb(248, 248, 248);
    text-decoration: none;
}

.site-footer-socials svg {
    width: 26px;
    height: 26px;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: rgb(248, 248, 248);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer-socials a:hover,
.site-footer-socials a:focus-visible {
    color: rgb(248, 248, 248);
    opacity: 0.72;
    text-decoration: none;
}

.site-footer-socials a:focus-visible {
    outline: 2px solid rgb(248, 248, 248);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .site-footer {
        padding: 0 0 28px;
    }

    .site-footer-shell {
        padding-top: 28px;
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: 18px;
        text-align: left;
    }

    .site-footer-copyright {
        width: 100%;
        grid-column: auto;
        order: 3;
        padding-top: 18px;
        border-top: 1px solid rgba(248, 248, 248, 0.22);
    }

    .site-footer-links {
        flex-flow: column nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        order: 1;
        gap: 14px;
    }

    .site-footer-links a {
        font-size: 0.95rem;
    }

    .site-footer-socials {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        order: 2;
        gap: 12px;
    }
}