/* Keep the mobile menu within the available screen, including landscape. */
.mobile-navigation {
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-navigation__group > summary {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.8rem;
    border-left: 0.25rem solid transparent;
    border-radius: 0.25rem;
    color: var(--color-background);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.mobile-navigation__group > summary::-webkit-details-marker {
    display: none;
}

.mobile-navigation__group > summary:hover {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-navigation__group > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.mobile-navigation__group > .mobile-navigation__group-active {
    color: var(--color-accent);
}

.mobile-navigation__chevron {
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.mobile-navigation__group[open] .mobile-navigation__chevron {
    transform: rotate(225deg);
}

.mobile-navigation .mobile-navigation__submenu {
    padding: 0 0 0.35rem;
    margin: 0;
}