/* ==========================================================================
   MODULE: NAVIGATION DRAWER BEHAVIOR (FINAL)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BREAKPOINT OVERRIDE (Force Mobile Menu up to 1024px)
   --------------------------------------------------------------------------
   WordPress defaults to 600px. We override this to 1024px.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {

    /* Force the Hamburger Button to appear */
    .is-drawer-mode .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* 
     * If WP tries to render the list inline (outside the drawer) in this range,
     * we must hide it to prevent double-menus or broken layouts.
     * We target the UL that is a direct child of the nav (rare but possible in some states).
     */
    .is-drawer-mode>.wp-block-navigation__container {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {

    /* Force the Hamburger Button to hide on Desktop */
    .is-drawer-mode .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
}


/* --------------------------------------------------------------------------
   2. DRAWER LOGIC (Scoped to Mobile/Tablet)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {

    /* --- BACKDROP OVERLAY --- */

    /* Override WP's display logic to enable animations */
    .is-drawer-mode .wp-block-navigation__responsive-container {
        /* Layout & Positioning */
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;

        /* Visual State (Hidden by default) */
        visibility: hidden;
        opacity: 0;
        background-color: transparent !important;
        backdrop-filter: none;

        /* Interaction */
        pointer-events: none;

        /* Transition: Delay visibility hide until opacity fade is done */

    }

    /* Active State (Open) */
    .is-drawer-mode .wp-block-navigation__responsive-container.is-menu-open {
        visibility: visible;
        opacity: 1;

        /* The actual overlay look */
        backdrop-filter: blur(2px);
        pointer-events: auto;

        transition:
            opacity 0.3s ease,
            visibility 0s linear 0s,
            background-color 0.3s ease;
    }

    /* --- DRAWER PANEL --- */

    .is-drawer-mode .wp-block-navigation__responsive-dialog {
        /* Positioning */
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;

        /* Sizing: 85% on mobile, capped at 400px for tablets */
        width: 40vw;
        height: 100vh;

        /* Visuals */
        background-color: var(--wp--preset--color--base) !important;
        margin: 0 !important;
        padding: 2rem 1.5rem !important;

        /* Animation: Slide from Left */
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform;

        pointer-events: auto;
    }

    /* Open State */
    .is-drawer-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        transform: translateX(0);
    }

    /* --- CLOSE BUTTON --- */

    .is-drawer-mode .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: 25px;
        right: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 100;
    }
}

/* --------------------------------------------------------------------------
   3. MOBILE REFINEMENTS
   -------------------------------------------------------------------------- */
@media screen and (max-width: 782px) {
    .is-drawer-mode .wp-block-navigation__responsive-dialog {
        width: 50vw;
        max-width: none;
    }
}