/* Site footer — enriched 3-column footer (owner decision, sitemap §10),
   beyond the export's single-row logo+copyright+social footer. Base
   chrome (top border separator, copyright text) matches export values;
   the 3-column layout is a documented, approved deviation. */

.footer {
    border-top: 1px solid var(--neutral-800);
}

.footer__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    padding-block: var(--space-56);
}

@media (min-width: 768px) {
    .footer__top {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.footer__logo {
    display: inline-flex;
    width: fit-content;
}

.footer__area {
    max-width: 320px;
    margin: 0;
    color: var(--secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.footer__heading {
    margin: 0;
    color: var(--primary);
    font-size: var(--text-button);
    font-weight: 600;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__links a,
.footer__links button {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--motion-micro);
}

.footer__links a:hover,
.footer__links button:hover {
    color: var(--green-dark);
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
    padding-block: var(--space-24);
    border-top: 1px solid var(--neutral-800);
}

/* 7.4 (measured, not eyeballed): the export's own --grey reads 1.82:1 here
   — nowhere near AA's 4.5:1 — and this text sits at rest, not behind a
   hover. --secondary is what the rest of this footer already uses for
   supporting copy (.footer__area two rows up) and clears 6.09:1. */
.footer__copyright {
    margin: 0;
    color: var(--secondary);
    font-size: var(--text-sm);
    text-align: center;
}

/* Social links (5.9) — absent from the DOM entirely when none are set. */
.footer__social {
    display: flex;
    gap: var(--space-16);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Same 7.4 fix as .footer__copyright above — this text renders only when
   a social row has a name but no icon, so it never showed in this build's
   own verification, but the color would fail exactly the same 1.82:1 the
   moment the owner adds one. */
.footer__social a {
    display: inline-flex;
    align-items: center;
    color: var(--secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}

.footer__social a:hover {
    color: var(--green);
}

.footer__social img {
    /* Uploaded/built-in icons are drawn for the dark green sections; invert
       so they read on the footer's light background too. */
    filter: grayscale(1) brightness(1.6);
    transition: filter var(--motion-micro);
}

.footer__social a:hover img {
    filter: none;
}