/* =============================================================================
   Site Footer — matches Figma spec (dark teal, 4-region grid).
   bg #031c19, 1440x576px reference, Parkinsans Regular throughout.
   ============================================================================= */

.site-footer {
    background: #031c19;
    color: var(--color-white);
    font-family: var(--font-display);
    padding-block: 70px;
    /* margin-top: var(--space-9); */
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "logo  info  nav"
        "brand info  nav";
    column-gap: 80px;
    row-gap: var(--space-7);
    align-items: start;
}

.site-footer__logo         { grid-area: logo; }
.site-footer__col--info    { grid-area: info; }
.site-footer__col--nav     { grid-area: nav;  }
.site-footer__brand-bottom { grid-area: brand; }

/* ---- Column: brand --------------------------------------------------- */
.site-footer__brand-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.site-footer__logo {
    display: inline-block;
    line-height: 0;
}

.site-footer__logo img,
.site-footer__logo svg {
    width: 93px;
    height: auto;
    color: var(--color-white);
    /* Footer background is dark — invert any colored raster/inline logo so it
       renders pure white, same trick as the homepage transparent header. */
    filter: brightness(0) invert(1);
}

.site-footer__legal-info {
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.site-footer__anpc {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: var(--space-4);
}

.site-footer__anpc img,
.site-footer__anpc a {
    display: block;
    width: 165px;
    height: 41px;
}

.site-footer__copyright {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    line-height: 24px;
    color: var(--color-white);
    margin-top: var(--space-6);
}

.site-footer__copyright .credit {
    color: #969494;
}

/* ---- Column section blocks ------------------------------------------- */
.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.site-footer__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer__group--right { text-align: right; align-items: stretch; }

.site-footer__group h3 {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    color: var(--color-white);
    line-height: 27px;
    margin: 0 0 var(--space-2);
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: var(--ls-normal);
}

.site-footer__group ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__group a,
.site-footer__group p {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    line-height: 24px;
    transition: color var(--transition-fast);
    margin: 0;
}

.site-footer__group--right a,
.site-footer__group--right p,
.site-footer__group--right ul {
    text-align: right;
}

.site-footer__group a:hover,
.site-footer__group a:focus-visible {
    color: var(--color-white);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        column-gap: 0;
    }
    .site-footer__logo,
    .site-footer__col--info,
    .site-footer__col--nav,
    .site-footer__brand-bottom { grid-area: auto; }

    .site-footer__group--right { text-align: left; }
    .site-footer__group--right a,
    .site-footer__group--right p,
    .site-footer__group--right ul { text-align: left; }
}