/*
 * OnDuty — Mobile Responsive Layer
 * SHARED FIXES: apply to every phone width (not screen-size/ratio specific)
 * ---------------------------------------------------------------------
 * Most files in this folder are bucketed by screen size on purpose. This
 * one is the deliberate exception: fixes for behavior bugs that would show
 * up on any phone, regardless of size, so bucketing them would just mean
 * fixing the same bug four times.
 *
 * Loaded AFTER assets/css/style.css, BEFORE the screen-size bucket files
 * (see includes/header.php), so a bucket file can still override something
 * here for its size class if that's ever needed.
 */

@media (max-width: 767.98px) {
    /* The mobile nav menu (#navbarMain) is a small floating card, not a
       full-screen panel. With nothing behind it, the yellow banner and
       map are still visible around/behind its edges, which reads as the
       menu "overlapping" or colliding with the rest of the page instead
       of cleanly sitting on top of it. This adds a dimmed backdrop behind
       the menu while it's open — a standard mobile pattern — so the menu
       reads as a clear overlay. z-index sits above the banner (1200) and
       map (2), below the menu itself (1249) and header (1250).
       assets/js/main.js closes the menu when this backdrop is tapped. */
    body.homepage-mobile:has(#navbarMain.show)::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        z-index: 1220;
    }
}