/*--------------------------------------------------------------------------------------*\
| STRUCTURAL CHANGES
\*--------------------------------------------------------------------------------------*/
button.menu-toggle{
    display: none;
}
header ul{
    list-style: none;
}
header{
    display: flex;
    flex-direction: column;
}

/*--------------------------------------------------------------------------------------*\
| MAIN MENU
\*--------------------------------------------------------------------------------------*/

header ul{
    display: flex;
    justify-content: space-evenly;
    padding-left: 0;
    margin: var(--content-padding-small) 0;
}
header ul li{
    line-height: 1;
}
header ul.menu > li > a{
    text-transform: uppercase;
    padding: var(--content-padding-small) 0;
    color: var(--color-secondary);
	border-bottom: 1px solid white;
	transition: color .5s, border-bottom-color .5s;
}
header .site-branding{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--content-padding-huge);
    padding-top: var(--content-padding-huge);
}

header ul:not(.sub-menu) > .current-menu-item > a{
    border-bottom: 1px solid var(--color-primary);
    color: var(--color-primary);
}

header ul:not(.sub-menu) > li:hover > a{
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}


/*--------------------------------------------------------------------------------------*\
| CONTACT MENU
\*--------------------------------------------------------------------------------------*/

.menu-primary-menu-container > ul:not(.sub-menu) > li:last-child > a{
	border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 10px;
	background-color: white;
	transition: background-color .5s, color .5s;
}

.menu-primary-menu-container > ul > li:last-child:hover > a{
	background-color: var(--color-primary);
	color: white;
}

.menu-primary-menu-container > ul > li.current_page_item:last-child > a{
	background-color: var(--color-primary);
	color: white;
}

.menu-primary-menu-container > ul > li.menu-item-has-children{
	display: block;
}

.menu-primary-menu-container > ul > li.menu-item-has-children:hover .sub-menu{
    visibility: visible;
	opacity: 1;
	transition: opacity .5s;
}


/*--------------------------------------------------------------------------------------*\
| SUB MENUS
\*--------------------------------------------------------------------------------------*/
.sub-menu{
	position: absolute;
    visibility: hidden;
	display: flex;
	flex-direction: column;
    padding-top: var(--content-padding-medium);
    margin-left: calc( -1 * var(--content-padding-huge));
    width: calc( var(--content-width-medium) /5 );
	opacity: 0;
    padding-top: var(--content-padding-medium);
	transition: opacity .5s, visibility .35s linear .5s;
}

.sub-menu li{
    display: block;
}

.sub-menu li a{	
    text-transform: uppercase;
    background-color: var(--color-lighter-primary);
    padding: var(--content-padding-medium) 0;
    transition: background-color .5s;
    display: block;
    text-align: center;
}

.active-menu-link{
    color: var(--color-primary);
}

.sub-menu a{
    color: white;
    min-width: 100%;
}

.sub-menu li a:hover, .sub-menu li.current-menu-item a{
    background-color: var(--color-primary);
}


/*--------------------------------------------------------------------------------------*\
| MEDIA QUERIES
\*--------------------------------------------------------------------------------------*/
@media screen and (max-width: 500px){
    header button.menu-toggle{
        display: flex;
        width: 100vw;
        z-index: 20;
        height: 60px;
        justify-content: center;
        align-items: center;
        border: none;
		background-color: var(--color-primary);
    }
    header button.button-active span.two{
        display: none;
    }
    header button.button-active span.one{
        transform: rotate(45deg);
        transition: 0.3s;
    }
    header button.button-active span.three{
        transform: rotate(-45deg);
        position: absolute;
        transition: 0.3s;
    }
    header .menu-container{
        width: 0;
        opacity: 0;
        transition: 0.3s;
        height: 100vh;
		overflow-y: hidden;
		z-index: 2;
        background-color: var(--color-primary);
    }
    span.icon{
        height: 100%;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
		z-index: 5;
    }
    span.one, span.two, span.three{
        width: 15px;
        height: 2px;        
        background: #ffffffeb;
        margin: 1px 0;
    }
    header .menu-container.open-menu{
        width: 100vw;
        display: block;   
        opacity: 1;
    }
    header .menu-primary-menu-container{
        height: inherit;
    }
	header li.menu-item{
		padding: 20px 0;
		width: 100%;
		text-align: center;
	}
	header .menu-primary-menu-container > ul:not(.sub-menu) > li:last-child > a{
		border: unset;
	}
	header ul:not(.sub-menu) > .current-menu-item > a{
		color: white;
	}
	header ul.sub-menu{
		display: none !important;
	}
	header .sub-menu li{
		width: fit-content;
		margin: 0 auto;
	}
    header .menu-container ul{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: inherit;
        justify-content: center;
		z-index: 20;
    }
    header ul.menu > li > a{
        color: white;
		border-bottom: none;
    }
    header .main-navigation{
        display: flex;
        flex-direction: column-reverse;
        position: fixed;
        bottom: 0;
        left: 0;
    }
}