/* ===========================
   NAVIGATION MENU STYLES
   =========================== */

.wp-block-navigation {
    font-weight: 500;
    font-size: var(--wp--preset--font-size--body);
}

/* -------------------------------------
   DESKTOP NAVIGATION (LINKS & CHEVRONS)
   ------------------------------------- */

/* User requested fixed height */
.wp-block-navigation .wp-block-navigation-item {
    min-height: 40px !important;
    max-height: 40px !important;
}

/* Exclude items with submenus from the max-height restriction 
   so that the dropdown list doesn't get cut off or cause overlaps on mobile! */
.wp-block-navigation .wp-block-navigation-item.has-child {
    max-height: fit-content !important;
}

/* Exclude items INSIDE submenus so their descriptions can expand dynamically */
.wp-block-navigation__submenu-container .wp-block-navigation-item {
    min-height: fit-content !important;
    max-height: fit-content !important;
}

/* Apply the hover effect and pill shape to the parent LI so it includes the Chevron */
li.wp-block-navigation-item {
    transition: background-color 0.2s ease;
    border-radius: var(--wp--custom--border-radius--image-std) !important;
    display: flex !important;
    align-items: center !important;
}

.wp-block-navigation-item:hover {
    background-color: var(--wp--preset--color--black-05) !important;
}

/* Remove hover backgrounds from A tags since LI handles it */
li.wp-block-navigation-item>a.wp-block-navigation-item__content,
li.wp-block-navigation-item>span.wp-block-navigation-item__content {
    padding: 8px 16px !important;
    color: var(--wp--preset--color--text-primary) !important;
    text-decoration: none !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
}

/* Reduce gap between text and chevron */
li.wp-block-navigation-item.has-child>a.wp-block-navigation-item__content,
li.wp-block-navigation-item.has-child>span.wp-block-navigation-item__content {
    padding-right: 0px !important;
}

/* Chevron transparent background */
.wp-block-navigation-submenu__toggle {
    background-color: transparent !important;
    padding: 0px 4px 0px 4px !important;
    transition: transform 0.2s ease;
    margin-left: 2px !important;
    margin-right: 14px !important;
}

.wp-block-navigation-item.has-child:hover>.wp-block-navigation-submenu__toggle svg {
    transform: rotate(180deg);
}

/* -------------------------------------
   SUBMENU DROPDOWN (DESKTOP)
   ------------------------------------- */
ul.wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--surface) !important;
    border: 1px solid var(--wp--preset--color--black-05) !important;
    border-radius: var(--wp--custom--border-radius--card-md) !important;
    padding: 12px !important;
    box-shadow: var(--wp--preset--shadow--card-default) !important;
    margin-top: 10px !important;
    min-width: 300px !important;
}

/* Invisible bridge so the submenu doesn't close when moving the mouse over the 10px gap */
ul.wp-block-navigation__submenu-container::before {
    content: '';
    position: absolute;
    top: -15px;
    /* Cover the 10px gap plus extra margin */
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

/* Ensure padding on submenu links */
.wp-block-navigation__submenu-container .wp-block-navigation-item>a,
.wp-block-navigation__submenu-container .wp-block-navigation-item>.wp-block-navigation-item__content {
    padding: 12px 16px !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

/* Style the description text within submenus */
.wp-block-navigation-item__description {
    display: block !important;
    font-size: var(--wp--preset--font-size--small, 14px) !important;
    font-weight: 400 !important;
    color: var(--wp--preset--color--text-body) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

/* -------------------------------------
   MOBILE TOGGLE BUTTONS
   ------------------------------------- */
/* DO NOT USE display: * !important HERE. WP handles visibility. */
body .wp-block-navigation__responsive-container-open {
    background-color: var(--wp--preset--color--black-05) !important;
    border-radius: 9999px !important;
    /* Force complete circle */
    padding: 10px !important;
    width: 40px !important;
    height: 40px !important;
    color: var(--wp--preset--color--text-primary) !important;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-navigation__responsive-container-open:hover {
    background-color: var(--wp--preset--color--black-10) !important;
}

body .wp-block-navigation__responsive-container-close {
    background-color: var(--wp--preset--color--text-primary) !important;
    color: var(--wp--preset--color--surface) !important;
    border-radius: 9999px !important;
    /* Force complete circle */
    padding: 10px !important;
    width: 40px !important;
    height: 40px !important;
    top: 20px !important;
    right: 20px !important;
    /* display: flex is set dynamically when open */
    align-items: center !important;
    justify-content: center !important;
}

/* Force flex display ONLY when menu is open on desktop, 
   but allow media queries to override for tablet/mobile */
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    display: flex !important;
}

/* -------------------------------------
   BREAKPOINT LOGIC (FORCE BURGER AT 1024PX)
   ------------------------------------- */

/* 1. Show Burger on Mobile & Tablet (up to 1024px) */
@media screen and (max-width: 1024px) {
    body .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* Hide desktop links unless the menu is open */
    body .wp-block-navigation__responsive-container:not(.is-menu-open):not(.has-modal-open) {
        display: none !important;
    }
}

/* 2. Force Desktop Menu at 1025px+ */
@media screen and (min-width: 1025px) {
    body .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }

    body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}

/* -------------------------------------
   MOBILE OVERLAY (CENTERED)
   ------------------------------------- */
@media (max-width: 1024px) {

    /* Apply a 5px gap to the header's inner container on mobile */
    .wp-site-blocks header .is-layout-constrained>.alignwide {
        gap: 5px !important;
    }

    /* Full screen container */
    .wp-block-navigation__responsive-container.is-menu-open {
        background: var(--wp--preset--color--surface);
        position: fixed !important;
        top: 20px !important;
        left: 0;
        right: 0 !important;
        bottom: auto !important;
        width: calc(100% + -30px) !important;
        height: auto !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        box-shadow: var(--wp--preset--shadow--card-default) !important;
        margin: 0 auto;
        border-radius: var(--wp--custom--border-radius--card-md) !important;
    }

    /* Override Default Core Block Backgrounds */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
        background: var(--wp--preset--color--black-05) !important;
    }

    /* Inner box constraint */
    .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        /* Make buttons full width */
        justify-content: center !important;
        width: 100% !important;
        padding: 80px 24px 24px 24px !important;
        /* Add top padding back since alignment is flex-start now */
        gap: 8px !important;
    }

    /* Ensure close button is positioned correctly at top right of viewport */
    .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 24px !important;
        right: 24px !important;
    }

    /* Main mobile items get the grey box */
    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        background-color: var(--wp--preset--color--black-05) !important;
        border-radius: var(--wp--custom--border-radius--image-std) !important;
        width: 100% !important;
        text-align: center !important;
        transition: background-color 0.2s ease;
    }

    /* Hover effect for main mobile items */
    .wp-block-navigation__responsive-container .wp-block-navigation-item:hover {
        background-color: var(--wp--preset--color--black-10) !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item>a,
    .wp-block-navigation__responsive-container .wp-block-navigation-item>.wp-block-navigation-item__content {
        padding: 12px 16px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-grow: 1 !important;
        width: 100% !important;
    }

    /* Restore right padding on mobile for items with a chevron (fixes earlier desktop override) */
    .wp-block-navigation__responsive-container li.wp-block-navigation-item.has-child>a.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container li.wp-block-navigation-item.has-child>span.wp-block-navigation-item__content {
        padding-right: 16px !important;
    }

    /* Position the mobile chevron nicely to the right */
    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        position: relative !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle {
        position: absolute !important;
        right: 0 !important;
        height: 100% !important;
        padding: 0 16px !important;
    }

    /* Submenu container (dropdown list on mobile) - Simplified */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        background-color: transparent !important;
        padding: 4px 16px 8px 16px !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Force full width on the submenu container inside the mobile menu */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
        width: 100% !important;
        flex-grow: 1 !important;
        margin-top: 0px !important;
    }

    /* REMOVE "BENOBOX" (grey bg) FOR SUB-ITEMS */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
        background-color: transparent !important;
        border-radius: 0 !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
        background-color: transparent !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item>a,
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item>.wp-block-navigation-item__content {
        padding: 8px !important;
        font-weight: 500 !important;
        color: var(--wp--preset--color--text-body) !important;
        transition: color 0.2s ease;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item:hover>a,
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item:hover>.wp-block-navigation-item__content {
        color: var(--wp--preset--color--text-primary) !important;
    }
}