.nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    header {
        padding: 12px 0;
    }

    header .container {
        padding-inline: 20px;
    }

    header .nav {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0;
        align-items: center;
    }

    header .logo img {
        height: 36px;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 10px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--fg);
        cursor: pointer;
    }

    .nav-toggle svg {
        width: 24px;
        height: 24px;
    }

    .nav-toggle .menu-close,
    .nav-toggle[aria-expanded="true"] .menu-open {
        display: none;
    }

    .nav-toggle[aria-expanded="true"] .menu-close {
        display: block;
    }

    header .nav-links {
        display: grid;
        grid-template-columns: 44px 44px 1fr;
        grid-column: 1 / -1;
        gap: 4px 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border, #e5e5e5);
    }

    header .nav-enhanced .nav-links {
        display: none;
    }

    header .nav-enhanced.is-open .nav-links {
        display: grid;
    }

    header .nav-link {
        min-height: 44px;
        font-size: 16px;
    }

    header .nav-link:not(.social-icon) {
        grid-column: 1 / -1;
    }

    header .nav-links .social-icon {
        justify-content: center;
        margin: 4px 0 0;
    }

    header .nav-links .social-icon + .social-icon {
        margin-left: 0;
    }

    .nav-toggle:focus-visible,
    header .nav a:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }
}