/* Mobile layout contract: single source of truth for mobile stacking,
   safe-area offsets, and conflict resolution between nav/cookie/FAB/filter. */

:root {
    --mobile-z-nav: 1000;
    --mobile-z-map-controls: 1020;
    --mobile-z-map-legend: 1025;
    --mobile-z-cookie-banner: 1100;
    --mobile-z-cookie-settings: 1110;
    --mobile-z-filter-fab: 1150;
    --mobile-z-filter-backdrop: 1130;
    --mobile-z-filter-panel: 1140;
    --mobile-z-search: 13000;
}

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        width: auto;
    }

    .main-navigation {
        position: sticky;
        top: 0;
        z-index: var(--mobile-z-nav);
    }

    .mobile-nav-overlay {
        z-index: calc(var(--mobile-z-nav) + 1);
    }

    .leaflet-control-container,
    .leaflet-control-zoom,
    .leaflet-control-attribution {
        z-index: var(--mobile-z-map-controls) !important;
    }

    .map-legend {
        z-index: var(--mobile-z-map-legend) !important;
    }

    #attractions .container,
    #attractions.page-section,
    #attractions .map-container,
    #attractions #map {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #filters-panel {
        width: 100%;
        max-width: 100%;
        left: -100%;
        z-index: var(--mobile-z-filter-panel) !important;
    }

    #filters-panel.mobile-active {
        left: 0;
    }

    /* Mobile drawer contract: when filters are open, panel must be a
       viewport-fixed overlay regardless of legacy stylesheet load timing. */
    body.mobile-filters-open #filters-panel.mobile-active,
    body.no-scroll #filters-panel.open {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.no-scroll #filters-panel.open {
        z-index: var(--mobile-z-filter-panel) !important;
    }

    .mobile-filter-backdrop {
        z-index: var(--mobile-z-filter-backdrop) !important;
    }

    .mobile-filter-fab {
        z-index: var(--mobile-z-filter-fab) !important;
        right: 16px !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .cookie-consent-banner {
        z-index: var(--mobile-z-cookie-banner) !important;
    }

    .cookie-settings-container {
        z-index: var(--mobile-z-cookie-settings) !important;
        left: 8px !important;
        right: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .cookie-consent-notification {
        z-index: calc(var(--mobile-z-cookie-banner) + 1) !important;
    }

    body.cookie-banner-visible .mobile-filter-fab {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: scale(0.95) !important;
    }

    body.mobile-filters-open .mobile-filter-fab {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: scale(0.95) !important;
    }

    body.cookie-banner-visible .cookie-settings-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.mobile-filters-open .cookie-settings-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.mobile-filters-open .map-legend,
    body.mobile-filters-open .leaflet-control-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .search-toggle-primary {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-overlay,
    #search-overlay {
        z-index: var(--mobile-z-search) !important;
    }
}