/* =========================================================
   footer.css
========================================================= */

.footer {
    background: var(--navy-2);
    color: var(--white);
    padding-top: var(--space-7);
}

.footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    padding-bottom: var(--space-6);
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.footer__brand-logo {
    height: 51px;
    width: auto;
    flex: 0 0 auto;
    object-fit: contain;
    /* Footer is always on --navy-2 dark canvas; invert the dark teal/navy
       logo (icon+wordmark) to white, same technique as landing-app's
       dark-mode filter. */
    filter: brightness(0) invert(1);
}

.footer__tagline {
    color: rgba(255, 255, 255, .6);
    max-width: 34ch;
}

.footer__col h4 {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.footer__col li {
    margin-bottom: var(--space-2);
}

.footer__col a {
    color: rgba(255, 255, 255, .65);
    transition: color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
    display: inline-block;
}

.footer__col a:hover {
    color: var(--white);
    transform: translateX(5px);
}

.footer__bottom {
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .5);
    font-size: .9rem;
}

@media (max-width: 880px) {
    .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .footer__top { grid-template-columns: 1fr; text-align: center; }
    .footer__brand { justify-content: center; }
    .footer__tagline { margin-inline: auto; }
    .footer__bottom { justify-content: center; text-align: center; }
}