/* Menu styles for Scavolt theme - frontend */

@media (max-width: 1099px) {
    body .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: block !important;;
    }
    body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }

    header{
        .wp-block-navigation .wp-block-navigation__container{
            margin: auto;
            justify-content: center;

            li{
                font-size: var(--wp--preset--typography--font-size--large);
                margin: calc( var(--wp--preset--spacing--medium) /2 ) 0;
            }
        }

        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item{
            align-items: flex-start !important;
        }

        .wp-block-navigation__submenu-container{
            align-items: flex-start;
        } 
        .wp-block-navigation__container{
            width: 340px;
        }
        .wp-block-navigation__responsive-container-close{
            right: 25px;
            top: 25px;
        }
        .wp-block-navigation-item{
            width: 100%;
        }
        .wp-block-navigation__submenu-icon{
            display: block !important;
            position: absolute;
            top: 8px;
            right: 0;

            svg{
                scale: 1.5;
            }
        }
        .wp-block-navigation__submenu-icon[aria-expanded="true"] + .wp-block-navigation-submenu{
            display: block;
        }
        .wp-block-navigation__submenu-icon[aria-expanded="false"] + .wp-block-navigation-submenu{
            display: none;
        }
    }    
}

@media (min-width: 1100px) {
	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;
	}

    header {
        .wp-block-navigation .wp-block-navigation__container{
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .wp-block-navigation-item {
                padding-left: var(--wp--preset--spacing--medium);
                padding-right: var(--wp--preset--spacing--medium);
                position: relative;

                &::after{
                    content: "";
                    display: block;
                    width: 100%;
                    height: 3px;
                    background-color: transparent;
                    position: absolute;
                    bottom: -33px;
                    left: 0;
                    transition: background-color 0.3s ease;
                }

                &:hover,
                &.current-menu-item{
                    &::after{
                        background-color: var(--wp--preset--color--primary);
                    }
                }

                &.has-child{
                    &:before{
                        content: "";
                        display: block;
                        position: absolute;
                        width: 100%;
                        height: 150%;
                        left: 0;
                        top: 100%;
                    }
                }
            }
        }

        .wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container{
            min-width: 300px;
            padding: var(--wp--preset--spacing--small) 0;
            left: 0;
            right: auto;
            bottom: -20px;
            top: 56px;
            box-shadow: var(--wp--preset--shadow--light);

            .wp-block-navigation-item{
                &:after{
                    display: none;
                }
            }
        }
    }
}