/* Phone and tablet menu. Below 640px the nav links used to wrap onto two rows
   under the logo, which with the show bar ate a third of the first screen.
   With eight links (Find your machine joined on 2026-09-23) they no longer fit
   beside the logo below about 900px either, so the button takes over there.
   The nav now collapses behind a button. Only applies once menu.js has run
   (html.has-menu), so with scripts off the old wrapped nav still shows. */
.menu-toggle { display: none; }

@media (max-width: 900px) {
    html.has-menu header {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
    }
    html.has-menu .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: 1px solid var(--hairline, rgba(115,166,206,.18));
        border-radius: 6px;
        color: var(--text-primary);
        font: inherit;
        font-weight: 500;
        padding: 0.5rem 0.8rem;
        cursor: pointer;
    }
    html.has-menu .menu-toggle-bars,
    html.has-menu .menu-toggle-bars::before,
    html.has-menu .menu-toggle-bars::after {
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        position: relative;
    }
    html.has-menu .menu-toggle-bars::before,
    html.has-menu .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
    html.has-menu .menu-toggle-bars::before { top: -6px; }
    html.has-menu .menu-toggle-bars::after { top: 6px; }

    html.has-menu header nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0.75rem;
        font-size: 1rem;
    }
    html.has-menu header.nav-open nav { display: flex; }
    html.has-menu header nav a { padding: 0.8rem 0.25rem; border-top: 1px solid var(--hairline, rgba(115,166,206,.18)); }
    html.has-menu header nav a.cta-btn { margin-top: 0.75rem; text-align: center; border-top: 0; padding: 0.8rem 1rem; }
}

/* Just above the menu breakpoint, tighten the row so eight links fit on one
   line beside the logo without any label wrapping. */
header nav a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) {
    header nav { gap: 1.1rem; font-size: 0.95rem; }
    header .cta-btn { padding: 0.6rem 1rem; }
}