.site-footer {
    max-width: 100%;
    text-align: center;
}

.footer-layout {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    max-width: 100%;
}

.footer-copyright-row {
    margin: 0;
}

.footer-nav {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    max-width: 100%;
}

.footer-link-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: 100%;
    white-space: nowrap;
}

.footer-link-group > a,
.footer-link-group > .footer-link-button,
.footer-link-group > .footer-separator {
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .footer-layout,
    .footer-nav {
        width: 100%;
        gap: 0.35rem;
    }

    .site-footer .footer-rights {
        display: none;
    }

    /* The desktop groups intentionally stay on one line, but that can make the
       entire page wider than a phone viewport. Give mobile an explicit layout
       instead of relying on an oversized nowrap row. */
    .footer-link-group {
        max-width: 100%;
        white-space: normal;
    }

    .footer-link-group .footer-separator {
        display: none;
    }

    .footer-help-links {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
        gap: 0.3rem 0.85rem;
    }

    .footer-help-links .footer-link-button {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .footer-legal-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem 0.8rem;
    }
}