/* ============================================================
   Visual system – mobile navigation
   Hamburger menu and mobile overrides.
   ============================================================ */

.NavToggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* The checkbox is a pixel of nothing, so focusing it showed a ring around a
   pixel of nothing - somebody tabbing had no idea they were on the menu. The
   ring goes on the bars they can actually see instead. */
.NavToggle:focus-visible + .NavHamburger {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.NavHamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 2.25rem;
    cursor: pointer;
}

.NavHamburgerBar {
    width: 1.35rem;
    height: 2px;
    border-radius: var(--radius-pill);
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.NavToggle:checked ~ .NavHamburger .NavHamburgerBar:nth-child(1) {
    transform: translateY(calc(0.5rem + 2px)) rotate(45deg);
}

.NavToggle:checked ~ .NavHamburger .NavHamburgerBar:nth-child(2) {
    opacity: 0;
}

.NavToggle:checked ~ .NavHamburger .NavHamburgerBar:nth-child(3) {
    transform: translateY(calc(-0.5rem - 2px)) rotate(-45deg);
}

@media (max-width: 48rem), (max-height: 32rem) {
    .NavHamburger {
        display: flex;
        position: fixed;
        top: 0;
        inset-inline-end: 1rem;
        height: var(--nav-height);
        z-index: 30;
    }

    .MainNavigation {
        display: block !important;
        height: var(--nav-height);
        overflow: hidden;
        padding-block: 0;
    }

    /* Closed, the bar is the height of one row and everything else is clipped
       out of sight - but clipped is not gone, so the links underneath would
       still take a tap aimed at the page. Only what is on screen answers. */
    .MainNavigation:has(.NavToggle:checked) {
        pointer-events: none;
    }

    .MainNavigation:has(.NavToggle:checked) a,
    .MainNavigation:has(.NavToggle:checked) .LogoutButton,
    .MainNavigation:has(.NavToggle:checked) .NavHamburger {
        pointer-events: auto;
    }

    /* Open, it is the whole screen and nothing indents it: the links carry
       their own padding, and a second inset around them only narrows the one
       column they are read in. */
    .MainNavigation:has(.NavToggle:checked) {
        height: 100dvh;
        overflow-y: auto;
        padding: 0;
    }

    /* Flattened to nothing so every link, however deeply it was nested,
       becomes a row of the one list. A dropdown has no meaning here - there is
       nothing to drop down from when the whole menu is already open. */
    .MainNavigation .NavDropdown,
    .MainNavigation .NavDropdownMenu,
    .MainNavigation .NavAccount,
    .MainNavigation .LogoutForm,
    .MainNavigation > .NavSiteLinks {
        display: contents !important;
    }

    .MainNavigation a,
    .MainNavigation .LogoutButton {
        /* Flex rather than block, so the picture at the end of each item can be
           pushed to the far edge the way it is on the desktop menu. The gap is
           what keeps it off the words when the name is long enough to fill the
           row and the auto margin below collapses to nothing. */
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0.5rem !important;
        border: none !important;
        border-radius: 1rem !important;
        background: none !important;
        opacity: 1 !important;
        color: var(--ink) !important;
        font-weight: 500;
        font-size: 1rem;
        text-align: start;
    }

    .MainNavigation a:hover,
    .MainNavigation .LogoutButton:hover {
        background-color: var(--surface-2) !important;
    }

    /* Against the far edge here too - the menu is the whole screen, and a
       column of pictures down the side of it is the fastest thing to read. */
    .MainNavigation :is(a, .LogoutButton) .Emoji:last-child {
        margin-inline: auto 0;
    }

    .MainNavigation .NavBrand {
        display: flex;
        align-items: center;
        min-height: var(--nav-height);
    }
}