/*
 * Manifest Life Church mobile/PWA fixed-header layer.
 * Keeps the active frontend, admin, and user-panel header visible while
 * preserving the page's original desktop layout and all existing controls.
 */
:root {
    --mlc-mobile-header-height: 80px;
    --mlc-mobile-safe-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 1199.98px) {
    html {
        scroll-padding-top: calc(var(--mlc-mobile-header-height, 80px) + .75rem);
    }

    body.emanu-template,
    body.mlc-frontend-template,
    body.mlc-admin-template,
    body.mlc-userpanel-template {
        padding-top: var(--mlc-mobile-header-height, 80px) !important;
    }

    .emanu-site-header,
    .frontend-default-topbar,
    .modern-topbar,
    .admin-topbar,
    .user-topbar,
    .classic-topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        top: 0 !important;
        width: 100%;
        max-width: 100vw;
        z-index: 1040 !important;
        padding-top: var(--mlc-mobile-safe-top);
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
    }

    .emanu-site-header,
    .frontend-default-topbar,
    .modern-topbar,
    .admin-topbar,
    .user-topbar,
    .classic-topbar {
        box-shadow: 0 12px 34px rgba(15, 23, 42, .12);
    }

    body.mlc-mobile-header-scrolled .emanu-site-header,
    body.mlc-mobile-header-scrolled .frontend-default-topbar,
    body.mlc-mobile-header-scrolled .modern-topbar,
    body.mlc-mobile-header-scrolled .admin-topbar,
    body.mlc-mobile-header-scrolled .user-topbar,
    body.mlc-mobile-header-scrolled .classic-topbar {
        box-shadow: 0 16px 42px rgba(15, 23, 42, .18);
    }

    .emanu-mobile-canvas,
    .frontend-default-offcanvas,
    .modern-offcanvas,
    .admin-sidebar,
    .admin-mobile-utility-panel,
    .user-sidebar.offcanvas {
        padding-top: var(--mlc-mobile-safe-top);
    }

    .offcanvas-backdrop,
    .admin-sidebar-backdrop,
    .admin-mobile-utility-backdrop {
        top: 0;
    }
}

@media (max-width: 767.98px) {
    :root {
        --mlc-mobile-header-height: 76px;
    }

    .emanu-site-header,
    .frontend-default-topbar,
    .modern-topbar,
    .admin-topbar,
    .user-topbar,
    .classic-topbar {
        -webkit-backdrop-filter: saturate(1.1) blur(18px);
        backdrop-filter: saturate(1.1) blur(18px);
    }
}

@media (min-width: 1200px) {
    body.emanu-template,
    body.mlc-frontend-template,
    body.mlc-admin-template,
    body.mlc-userpanel-template {
        padding-top: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .emanu-site-header,
    .frontend-default-topbar,
    .modern-topbar,
    .admin-topbar,
    .user-topbar,
    .classic-topbar {
        transition: none !important;
    }
}

/*
 * Unified navigation layering for frontend, user-panel, and admin layouts.
 *
 * Sticky headers and the mobile footer are interface surfaces, not menu layers.
 * Every drawer, off-canvas panel, dropdown, and its backdrop must therefore
 * render above those surfaces on both desktop and mobile. Bootstrap modals
 * remain above navigation so dialogs keep their expected blocking behaviour.
 */
:root {
    --mlc-layer-sticky-surface: 4000;
    --mlc-layer-menu-backdrop: 5100;
    --mlc-layer-menu-panel: 5200;
    --mlc-layer-menu-dropdown: 5300;
    --mlc-layer-modal-backdrop: 6990;
    --mlc-layer-modal: 7000;
}

/* All shared sticky headers sit above ordinary page content and sticky footers. */
body .emanu-site-header,
body .frontend-default-topbar,
body .modern-topbar,
body .admin-topbar,
body .user-topbar,
body .classic-topbar {
    z-index: var(--mlc-layer-sticky-surface) !important;
    isolation: isolate;
    overflow: visible;
}

/* Bootstrap off-canvas menus and every custom application drawer. */
body .offcanvas,
body .offcanvas.show,
body .offcanvas.showing,
body .emanu-mobile-canvas,
body .frontend-default-offcanvas,
body .modern-offcanvas,
body .user-sidebar.offcanvas,
body .admin-sidebar,
body .admin-mobile-utility-panel,
body.modal-open .offcanvas,
body.modal-open .admin-sidebar,
body.modal-open .admin-mobile-utility-panel {
    z-index: var(--mlc-layer-menu-panel) !important;
}

body .offcanvas-backdrop,
body .offcanvas-backdrop.show,
body .admin-sidebar-backdrop,
body .admin-mobile-utility-backdrop,
body.modal-open .offcanvas-backdrop,
body.modal-open .admin-sidebar-backdrop,
body.modal-open .admin-mobile-utility-backdrop {
    z-index: var(--mlc-layer-menu-backdrop) !important;
}

/* Desktop and mobile dropdown menus, including nested frontend menu groups. */
body .dropdown-menu,
body .dropdown-menu.show,
body .dropdown-menu.admin-dropdown,
body .dropdown-menu-modern,
body .dropdown-menu-modern.show,
body .emanu-dropdown-menu,
body .emanu-dropdown-menu .dropdown-menu,
body .mlc-active-menu-layer.dropdown-menu,
body .mlc-active-menu-layer.dropdown-menu-modern {
    z-index: var(--mlc-layer-menu-dropdown) !important;
}

/* The user-panel right-side dropdown has a deliberately specific fixed-mobile rule. */
body.mlc-userpanel-menu-open.mlc-userpanel-template .user-topbar,
body.mlc-userpanel-menu-open.mlc-userpanel-template .classic-topbar {
    z-index: var(--mlc-layer-sticky-surface) !important;
}

body.mlc-userpanel-template .user-topbar .topbar-tools > .dropdown > .dropdown-menu-modern.show,
body.mlc-userpanel-template .classic-topbar .topbar-tools > .dropdown > .dropdown-menu-modern.show {
    z-index: var(--mlc-layer-menu-dropdown) !important;
}

/* Collapsible navigation containers used by Bootstrap navbar variants. */
body .navbar-collapse.show,
body .navbar-collapse.collapsing,
body .mlc-active-menu-layer.navbar-collapse {
    position: relative;
    z-index: var(--mlc-layer-menu-panel) !important;
}

/* Keep active custom menu roots explicit even when a page stylesheet defines a lower value. */
body .mlc-active-menu-layer,
body .admin-sidebar.mlc-active-menu-layer,
body .admin-mobile-utility-panel.mlc-active-menu-layer,
body .offcanvas.mlc-active-menu-layer {
    z-index: var(--mlc-layer-menu-panel) !important;
}

/* Modals remain the top blocking UI layer and are not displaced by open menus. */
body .modal,
body .modal.fade,
body .modal.show {
    z-index: var(--mlc-layer-modal) !important;
}

body .modal-backdrop,
body .modal-backdrop.fade,
body .modal-backdrop.show {
    z-index: var(--mlc-layer-modal-backdrop) !important;
}

body .modal-dialog {
    position: relative;
    z-index: calc(var(--mlc-layer-modal) + 1) !important;
}

/*
 * User-panel mobile off-canvas hardening.
 *
 * The user shell uses `isolation:isolate` for its visual effects. Bootstrap,
 * however, mounts the generated backdrop under <body>. The companion script
 * portals the sidebar beside that backdrop; these rules then guarantee that
 * the backdrop cannot blur or intercept the menu and that every menu control
 * remains clickable throughout the opening/closing transition.
 */
body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"] {
    z-index: var(--mlc-layer-menu-panel) !important;
    pointer-events: auto !important;
    isolation: isolate;
    filter: none !important;
    opacity: 1;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    touch-action: pan-y;
}

body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"].show,
body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"].showing,
body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"].hiding {
    visibility: visible !important;
    pointer-events: auto !important;
}

body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"] .offcanvas-header,
body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"] .offcanvas-body,
body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"] .sidebar-nav,
body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"] .sidebar-link,
body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"] button,
body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"] a {
    position: relative;
    pointer-events: auto;
}

body.mlc-userpanel-template > .offcanvas-backdrop,
body.mlc-userpanel-template > .offcanvas-backdrop.show {
    z-index: var(--mlc-layer-menu-backdrop) !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: auto;
}

body.mlc-userpanel-template.mlc-user-sidebar-open .user-topbar,
body.mlc-userpanel-template.mlc-user-sidebar-open .classic-topbar,
body.mlc-userpanel-template.mlc-user-sidebar-open [data-mobile-footer-nav="userpanel"] {
    z-index: var(--mlc-layer-sticky-surface) !important;
}

@media (max-width: 1199.98px) {
    body.mlc-userpanel-template > .user-sidebar.offcanvas[data-mlc-user-sidebar-portal="true"] {
        height: var(--mlc-userpanel-visual-height, 100dvh);
        max-height: var(--mlc-userpanel-visual-height, 100dvh);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}