/*
 * The public footer's link matrix (partials/site_footer_links) and, on
 * layouts/auth, the footer band around it (partials/site_footer). Its own
 * file, like site-nav.css, because both public layouts load it and neither
 * loads the other's stylesheet. Colours fall back to literals: the --mk-*
 * variables only exist where marketing.css is loaded.
 */

.mk-footer-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    max-width: 72rem;
    margin: 0 auto 2.5rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--mk-line, #dfe6f1);
    text-align: left;
}
.mk-footer-nav h4 {
    margin: 0 0 .7rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mk-muted, #5b6b85);
}
.mk-footer-col { display: flex; flex-direction: column; gap: .4rem; }
.mk-footer-col a { font-size: .9rem; color: var(--mk-ink, #17233a); text-decoration: none; }
.mk-footer-col a:hover { color: var(--mk-navy-2, #004499); text-decoration: underline; }

/* Five columns fold to three, then two, then one. */
@media (max-width: 1100px) and (min-width: 821px) {
    .mk-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 50rem; }
}
@media (max-width: 820px) and (min-width: 621px) {
    .mk-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
}
@media (max-width: 620px) {
    .mk-footer-nav { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
    .mk-footer-col { align-items: center; }
}

/* layouts/auth: a full-width band under the split. */
.site-footer {
    background: #f6f9fd;
    border-top: 1px solid #dfe6f1;
    padding: 3rem 1.5rem 1.5rem;
    line-height: 1.5;
}
.site-footer .mk-footer-nav { margin-bottom: 1.25rem; padding-bottom: 1.75rem; }
.site-footer-meta { margin: 0; text-align: center; font-size: .8rem; color: #8698b3; }
.site-footer-meta a { color: #5b6b85; text-decoration: none; }
.site-footer-meta a:hover { text-decoration: underline; }
