/* Close menu button */
.wp-block-navigation__responsive-container-close {
    right: var(--wp--preset--spacing--xs);
    top: var(--wp--preset--spacing--default);
}

.wp-block-site-logo.header__logo {
    align-self: center;
}

/* Menu container when opened on screens less than 600px width */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    bottom: -100vh;
    left: 0;
    overflow-y: scroll;
    padding: 0;
    position: absolute;
    right: 0;
    top: calc(3.5rem + var(--wp-admin--admin-bar--position-offset, 0px));

    /* Container for each of the three separate menus */
    & .wp-block-navigation__container {
        padding: var(--wp--preset--spacing--medium) 0;
        position: static;
        width: 100%;

        & .has-child .wp-block-navigation__submenu-container {
            display: none;

            & > .wp-block-navigation-item > .wp-block-navigation-item__content {
                padding: var(--wp--preset--spacing--xs);
            }
        } 

        /* Directly related to top level nav items */
        & .wp-block-navigation-item {
            align-items: center;
            flex-flow: row wrap;
            gap: 0;
            justify-content: space-between;
            line-height: 1;
            position: relative;
            top: 0;
            width: 100%;
    
            /* Style the nav buttons */
            & .wp-block-navigation-submenu__toggle {
                font-size: var(--wp--preset--font-size--body-default);
                line-height: var(--wp--preset--font-size--body-default);
                padding: var(--wp--preset--spacing--xs);
                width: calc( 100% - 1rem - var(--wp--preset--spacing--mini) - var(--wp--preset--spacing--xs) );

                &[aria-expanded="true"] + .wp-block-navigation__submenu-icon + .wp-block-navigation__submenu-container {
                    display: flex;
                    padding: var(--wp--preset--spacing--xs) 0;
                }
            }

            /* Style the button arrow */
            & .wp-block-navigation__submenu-icon {
                display: block;
                height: var(--wp--preset--font-size--body-default);
                left: calc( -1 * var(--wp--preset--spacing--xs) );
                margin-left: 0; /* Some screwy shit that WP added */
                padding: var(--wp--preset--spacing--mini) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--mini) var(--wp--preset--spacing--mini);
                position: relative;
                top: -.25rem;
                width: var(--wp--preset--font-size--body-default);
        
                & > svg {
                    margin-top: 0; /* Some screwy shit that WP added */
                    transform: rotate(-90deg);
                }
            }

            /* Make use of shit WP toggled attributes so we don't have to use JS */
            &:has(>[aria-expanded="true"]) {
                background-color: var(--wp--preset--color--light-gray) !important;
                position: absolute !important;
                top: 0 !important;
                z-index: 2;

                & > .wp-block-navigation-submenu__toggle {
                    font-weight: 700;
                    order: 2;
                    padding-left: var(--wp--preset--spacing--ml) !important;
                    width: 100%;

                    &::after {
                        content: "Back";
                        display: inline;
                    }

                    & > .wp-block-navigation-item__label {
                        display: none;
                    }

                    & + .wp-block-navigation__submenu-icon {
                        background-color: var(--wp--preset--color--light-gray);
                        left: 0;
                        order: 1;
                        padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--mini) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs);
                        position: absolute;
                        top: 0;
                
                        & svg {
                            transform: rotate(90deg);
                            stroke: var(--wp--preset--color--dark-orange);
                        }
                    }
                }
    
                & > .wp-block-navigation-submenu {
                    background-color: white !important;
                    bottom: calc( -100vh + 3.5rem + var(--wp--preset--spacing--xs) + 40px + var(--wp--preset--spacing--xs) );
                    left: 0;
                    order: 3;
                    position: absolute;
                    right: 0;
                    top: 37px;
                }

                & .wp-block-navigation-item:has(>[aria-expanded="true"]) {
                    top: calc( 1px - var(--wp--preset--font-size--body-default) - var(--wp--preset--spacing--medium) ) !important;
                }
            }

            /* Submenus */
            & .wp-block-navigation__submenu-container {
                flex-basis: 100%;
                padding-left: 0;
                padding-right: 0;
            }
        }
    }
}

.wp-block-navigation__container .wp-block-buttons {
    background-color: var(--wp--preset--color--white);
    gap: var(--wp--preset--spacing--xs);
    margin-top: auto;
    padding: 0 var(--wp--preset--spacing--xs);
}

.wp-block-navigation__container .is-style-secondary-icon-button.wp-block-button .wp-block-button__link {
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--blue);
    border-radius: .75rem;
    color: var(--wp--preset--color--blue);
    font-size: var(--wp--preset--font-size--body-s);
    justify-content: center;
    line-height: 1.25rem;
    padding: var(--wp--preset--spacing--xxs);

    &:active {
        background-color: var(--wp--preset--color--blue);
        color: var(--wp--preset--color--white);

        & svg path {
            fill: var(--wp--preset--color--white);
        }
    }

    &:focus {
        background-color: var(--wp--preset--color--blue);
        color: var(--wp--preset--color--white);

        & svg path {
            fill: var(--wp--preset--color--white);
        }
    }

    &:hover {
        background-color: var(--wp--preset--color--blue);
        color: var(--wp--preset--color--white);

        & svg path {
            fill: var(--wp--preset--color--white);
        }
    }
}

.wp-block-navigation__container .is-style-secondary-icon-button.wp-block-button .wp-block-button__link svg {
    box-sizing: border-box;
    padding: 2px;
}

.wp-block-navigation__container .is-style-secondary-icon-button.wp-block-button .wp-block-button__link svg path {
    fill: var(--wp--preset--color--blue);
}

/* Search */
#search__toggle-wrapper,
#search__wrapper {
    display: none;
}

/* Small screen search inside the mobile menu */
.wp-block-navigation__responsive-container-content {
    row-gap: 0;

    & .wp-block-search {
        background-color: var(--wp--preset--color--light-gray);
        padding: var(--wp--preset--spacing--default) var(--wp--preset--spacing--xs);
        width: 100%;

        & .wp-block-search__inside-wrapper {
            background-color: var(--wp--preset--color--white);
            border: 1px solid var(--wp--preset--color--dark-gray);
            border-radius: .5rem;
            padding: 0;
            padding-left: var(--wp--preset--spacing--xs);

            & .wp-block-search__input {
                color: var(--wp--preset--color--blue);
                font-family: var(--wp--preset--font-family--montserrat);
                font-size: var(--wp--preset--font-size--body-default);
                font-weight: 400;
                line-height: 1;
                padding: var(--wp--preset--spacing--xs) 0;

                &::placeholder {
                    color: var(--wp--preset--color--dark-gray);
                    font-family: var(--wp--preset--font-family--montserrat);
                    font-weight: 400;
                }
            }

            & .wp-block-search__button {
                background-color: transparent;
                border: none;
                margin: 0;
                padding: var(--wp--preset--spacing--xs);

                & .search-icon {
                    fill: var(--wp--preset--color--dark-orange);
                }
            }
        }
    }
}

@media all and ( min-width: 37.5rem ) {
    /* Skip the Snuggle for a mega menu */
    .header__navigation,
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
    .wp-block-navigation__responsive-dialog {
        position: static;
    }

    /* Temporary resize for mid-size screens */
    .wp-block-site-logo.header__logo {
        width: 8.125rem;
    }

    /* Specificity is the name of the game, I guess */
    .header__navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        flex-flow: row nowrap;
        gap: 0;
        padding: 0;
        position: static;

        & .wp-block-navigation-item {
            position: static;

            & .wp-block-navigation-submenu__toggle {
                padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--default);
                padding-left: 10px;
                padding-right: 22px;

                & + .wp-block-navigation__submenu-icon {
                    height: var(--wp--preset--spacing--xs);
                    left: -19px;
                    margin-left: 0;
                    position: relative;
                    top: -0.125rem;
                    width: var(--wp--preset--spacing--xs);
                }

                &[aria-expanded="true"] {
                    background-color: var(--wp--preset--color--gray);

                    & + .wp-block-navigation__submenu-icon > svg {
                        stroke: var(--wp--preset--color--dark-orange);
                    }

                    & ~ .wp-block-navigation__submenu-container {
                        align-items: start;
                        border-top: .25rem solid var(--wp--preset--color--gray);
                        box-shadow: var(--wp--preset--shadow--medium);
                        flex-flow: row wrap;
                        gap: var(--wp--preset--spacing--default);
                        justify-content: start;
                        left: 0;
                        overflow-y: scroll;
                        padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--ml);
                        right: 0;

                        & .wp-block-navigation-item {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    /* For the submenus */
    .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {

        & > .wp-block-navigation-item {
            align-items: start;
            display: flex;
            flex-flow: row wrap;
            gap: var(--wp--preset--spacing--xxs);
            justify-content: stretch;

            & > .wp-block-navigation__submenu-container {
                display: flex;
                flex-flow: column nowrap;
                gap: var(--wp--preset--spacing--xxs);
                height: 0;
                opacity: 1;
                position: static;
                visibility: visible;
                width: 100%;

                &::before {
                    display: none;
                }

                & .wp-block-navigation-link {
                    width: 100%;

                    & .wp-block-navigation-item__content {
                        padding: 0;

                        &:active {
                            color: var(--wp--preset--color--dark-orange);
                        }
                    
                        &:focus {
                            color: var(--wp--preset--color--dark-orange);
                        }
                        
                        &:hover {
                            color: var(--wp--preset--color--dark-orange);
                        }
                    
                    }
                }
            }
            
            & .wp-block-navigation-submenu__toggle {
                cursor: default;
                font-weight: 700;
                line-height: var(--wp--preset--spacing--medium);
                padding: 0;
                width: calc( 100% - var(--wp--preset--spacing--xxs) - var(--wp--preset--spacing--xs) );

                & + .wp-block-navigation__submenu-icon {
                    left: 0;
                    margin: 0;

                    & svg {
                        transform: rotate(-90deg);
                    }
                }

                &[aria-expanded="true"] {
                    background-color: var(--wp--preset--color--white);

                    & + .wp-block-navigation__submenu-icon svg {
                        transform: rotate(0deg);
                    }
    
                    & ~ .wp-block-navigation__submenu-container {
                        border: none;
                        box-shadow: none;
                        flex-flow: row wrap;
                        height: auto;
                        padding: 0;
                        width: 100%;

                        & .wp-block-navigation-item {
                            width: calc( 50% - var(--wp--preset--spacing--xs) );
                        }
                    }
                }
            }
        }
    }

    .wp-block-navigation__container .wp-block-buttons {
        flex-flow: row wrap;
        padding: 0;
        width: 100%;

        & > .wp-block-button {
            max-width: 235px;
        }
    }


    /* Hide the small screen navigation */
    .wp-block-navigation__responsive-container-content {
        & .wp-block-search {
            display: none !important;
        }
    }

    /* Show the search toggle buttle */
    #search__toggle-wrapper {
        align-items: center;
        display: flex !important;
        height: 100%;
        justify-content: center;

        &:has(.search--open) {
            background-color: var(--wp--preset--color--gray);
        }
    }

    #search__toggle {
        & a {
            background-color: transparent !important;
            height: 100%;
        }
    }

    #search__toggle.search--open svg path {
        fill: var(--wp--preset--color--dark-orange) !important;
    }

    #search__wrapper {

        &.search--open {
            border-top: .25rem solid var(--wp--preset--color--gray);
            display: block !important;
            left: 0;
            margin: 0;
            padding: var(--wp--preset--spacing--ml);
            position: absolute;
            right: 0;
            top: 100%;
        }

        & > .wp-block-group {
            margin: 0 auto;
            width: 100%;
            max-width: 57.5rem;
        }

        & #search__container {
            margin-block-start: 0;
            position: relative;
            width: 100%;
            max-width: 50rem;

            & .wp-block-search {
                margin-block-start: 0;
            }
        }

        & #search__input-icon {
            left: 1rem;
            position: absolute;
            top: calc( var(--wp--preset--font-size--body-default) * .75 + .25rem );
        }

        & .wp-block-search__input {
            background-color: var(--wp--preset--color--white);
            border: 1px solid var(--wp--preset--color--dark-gray);
            border-radius: .5rem;
            flex: 0 1 29.875rem;
            color: var(--wp--preset--color--blue);
            font-family: var(--wp--preset--font-family--montserrat);
            font-size: var(--wp--preset--font-size--body-default);
            font-weight: 400;
            line-height: 1;
            padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--default);
            padding-left: 3rem;
        }

        & .wp-block-search__button {
            align-items: baseline;
            background-color: var(--wp--preset--color--dark-orange);
            border-radius: 1rem;
            color: var(--wp--preset--color--white);
            display: flex;
            flex: 0 1 17.125rem;
            font-size: var(--wp--preset--font-size--body-default);
            font-weight: 700;
            gap: var(--wp--preset--spacing--default);
            justify-content: center;
            letter-spacing: .0625rem;
            padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--default);
            text-transform: uppercase;

            &::after {
                content: "\203a";
                display: block;
                font-size: calc( var(--wp--preset--font-size--body-default) * 1.6 );
                font-weight: 400;
                line-height: var(--wp--preset--font-size--body-default);
                position: relative;
                top: .09375rem;
            }
        }
    }

    #search__close {
        color: var(--wp--preset--color--light-link-blue);
        display: block;
        min-width: 6.25rem;

        &:active { color: var(--wp--preset--color--light-link-blue); }
        &:focus { color: var(--wp--preset--color--light-link-blue); }
        &:hover { color: var(--wp--preset--color--light-link-blue); }
        &:visited { color: var(--wp--preset--color--light-link-blue); }
    }

    .wp-block-group:has(.header__navigation) {
        column-gap: 0;
    }
}

@media all and ( min-width: 48.875rem ) {
    .wp-block-site-logo.header__logo {
        width: initial;
    }
}

@media all and ( min-width: 60rem ) {

    /* Specificity is the name of the game, I guess */
    .header__navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {

        & .wp-block-navigation-item {

            & .wp-block-navigation-submenu__toggle {

                &[aria-expanded="true"] {

                    & ~ .wp-block-navigation__submenu-container {
                        flex-flow: row wrap;

                        & .wp-block-navigation-item {
                            width: calc( 50% - 1rem );
                        }
                    }
                }
            }
        }
    }

    /* For the submenus */
    .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {

        & > .wp-block-navigation-item {
            
            & .wp-block-navigation-submenu__toggle {

                &[aria-expanded="true"] {
    
                    & ~ .wp-block-navigation__submenu-container {

                        & .wp-block-navigation-item {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}

@media all and ( min-width: 81.5rem ) {

    /* Specificity is the name of the game, I guess */
    .header__navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__container {

        & .wp-block-navigation-item {

            & .wp-block-navigation-submenu__toggle {

                &[aria-expanded="true"] {

                    & ~ .wp-block-navigation__submenu-container {
                        flex-flow: column wrap;
                        padding-left: calc( calc( 100% - var(--wp--style--global--wide-size) ) / 2 );
                        padding-right: calc( calc( 100% - var(--wp--style--global--wide-size) ) / 2 );

                        & .wp-block-navigation-item {
                            width: calc( 25% - 1rem );
                        }
                    }
                }
            }

            &:nth-of-type(1) {
                & .wp-block-navigation-submenu__toggle {
                    &[aria-expanded="true"] {
                        & ~ .wp-block-navigation__submenu-container {
                            max-height: 30rem;
                        }
                    }
                }
            }

            &:nth-of-type(2) {
                & .wp-block-navigation-submenu__toggle {
                    &[aria-expanded="true"] {
                        & ~ .wp-block-navigation__submenu-container {
                            max-height: 21.25rem;
                        }
                    }
                }
            }

            &:nth-of-type(3) {
                & .wp-block-navigation-submenu__toggle {
                    &[aria-expanded="true"] {
                        & ~ .wp-block-navigation__submenu-container {
                            max-height: 10rem;
                        }
                    }
                }
            }
        }
    }

    /* For the submenus */
    .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {

        & > .wp-block-navigation-item {
            align-items: start;
            display: flex;
            flex-flow: column nowrap;
            gap: var(--wp--preset--spacing--xxs);
            justify-content: stretch;

            & .wp-block-navigation-submenu__toggle {
                cursor: default;
                font-weight: 700;
                line-height: var(--wp--preset--spacing--medium);
                padding: 0;
                width: 100%;

                /* Can't disable the click behavior, so this resets the submenus if a header is clicked */
                &[aria-expanded="true"] {
                    background-color: var(--wp--preset--color--white);

                    & ~ .wp-block-navigation__submenu-container {
                        border: none;
                        box-shadow: none;
                        padding: 0;
                    }
                }
            }

            & .wp-block-navigation__submenu-icon {
                display: none;
            }

            & .wp-block-navigation__submenu-container {
                display: flex;
                flex-flow: column nowrap;
                gap: var(--wp--preset--spacing--xxs);
                height: auto;
                opacity: 1;
                position: static;
                visibility: visible;
                width: 100%;

                &::before {
                    display: none;
                }

                & .wp-block-navigation-link {
                    width: 100%;

                    & .wp-block-navigation-item__content {
                        padding: 0;

                        &:active {
                            color: var(--wp--preset--color--dark-orange);
                        }
                    
                        &:focus {
                            color: var(--wp--preset--color--dark-orange);
                        }
                        
                        &:hover {
                            color: var(--wp--preset--color--dark-orange);
                        }
                    
                    }
                }
            }
        }
    }

    .wp-block-navigation__container .wp-block-buttons {
        justify-content: start !important;
        padding: 0;
        width: calc( 25% - 1rem );
    }
}