/* Prevent background page scrolling when the responsive navigation is open. */
body.menu-open {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .main-nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 99;
    }

    .main-nav.open {
        display: flex;
    }
}