/* ==========================================================================
 * MOBILE PROFILE MENU (avatar dropdown, below lg)
 *
 * Behaves like an offcanvas: the menu is a fixed panel under the header with its own
 * independent scroll, the page behind is frozen (see js/core/mobile-menu.js), a backdrop
 * dims it, and the bottom navigation bar can no longer cover the last entries.
 *
 * Before: the menu was absolutely positioned, as tall as its content (719px on a 740px
 * phone), overflow visible, z-index 1000 under the fixed bottom nav (1030): the bottom
 * entries (e.g. "Déconnexion") were off screen or covered, and touch scrolling moved the page.
 * ========================================================================== */

@media (max-width: 991.98px) {
    #profileDropdownMobile + .dropdown-menu.show {
        position: fixed;
        top: var(--mobile-menu-top, 56px);
        left: 8px;
        right: 8px;
        bottom: auto;
        width: auto;
        margin: 0;
        transform: none;
        /* dvh = the visible viewport on mobile browsers (URL bar aware); vh as fallback. */
        max-height: calc(100vh - var(--mobile-menu-top, 56px) - 8px);
        max-height: calc(100dvh - var(--mobile-menu-top, 56px) - 8px);
        overflow-x: hidden;
        overflow-y: auto;
        /* The menu scrolls on its own: no scroll chaining to the page behind. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
        border-radius: 12px;
        z-index: 1060;
    }

    /* Dimmed page behind the menu; tapping it closes the menu. */
    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(0, 0, 0, .35);
        touch-action: none;
    }

    /* Page frozen while the menu is open (iOS Safari ignores overflow:hidden on body, hence
     * position:fixed; js/core/mobile-menu.js sets the inline `top` and restores the scroll). */
    body.mobile-menu-open {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }

    /* The fixed bottom navigation must not sit over the menu entries. */
    body.mobile-menu-open .mobile-bottom-nav {
        visibility: hidden;
        pointer-events: none;
    }
}