@layer components {
    /* Global site footer */
    .site-footer {
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding-block: var(--space-l);
        margin-block-start: var(--space-xl);
    }

    .site-footer__inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
        align-items: center;
        text-align: center;
    }

    @media (min-width: 768px) {
        .site-footer__inner {
            flex-direction: row;
            justify-content: space-between;
            text-align: left;
        }
    }

    .site-footer__brand {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .site-footer__tagline {
        font-size: 0.8rem;
        opacity: 0.5;
        margin: 0;
    }

    .site-footer__nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-s);
        justify-content: center;
    }

    .site-footer__link {
        font-size: 0.875rem;
        color: var(--color-text);
        text-decoration: none;
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    .site-footer__link:hover {
        opacity: 1;
        color: var(--color-blue-primary);
    }

    .site-footer__copy {
        font-size: 0.75rem;
        opacity: 0.4;
        margin: 0;
        white-space: nowrap;
    }
}