
header {
	.fixed-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	.sticky-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		transition: all .5s;
		> * {
			position: relative;
			z-index: 2;
		}

		>.wp-block-group {
			transition: all .5s;
		}
	}

	div.wp-block-group.header-logo-box {
		backdrop-filter: blur(8px);
		padding-left: max(var(--bl), calc((100vw - 1440px) / 2))!important;
		z-index: 1000000;
		@media (max-height: 799px) {
			padding-top: var(--bl)!important;
			padding-bottom: var(--bl)!important;
		}
	}

	.wp-block-site-logo img {
		max-height: 140px;
		width: auto;
		@media (max-height: 799px) {
			max-height: 80px;
		}
	}

	/* Menu */

	nav {
		margin-right: max(var(--bl), calc((100vw - 1440px) / 2))!important;
	}

	.wp-block-navigation .wp-block-navigation-item {
		a {
			text-decoration: none;
			font-family: var(--wp--preset--font-family--barlow-semi-condensed);
			&:hover {
				outline: none;
				.wp-block-navigation-item__label::after {
					width: 100%;
				}
			}
		}

		&.current-menu-item a .wp-block-navigation-item__label::after {
			width: 100%;
		}
	}

	.wp-block-navigation .wp-block-navigation-item.menu-button a {
		color: var(--wp--preset--color--accent);
		font-weight: bold;
		.wp-block-navigation-item__label::after {
			background-color: var(--wp--preset--color--accent);
		}
	}

	.wp-block-navigation-item__content {
		text-transform: uppercase;
		font-size: 16px;
		letter-spacing: 1px;
	}

	.wp-block-navigation-item__label::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2px;
		background-color: white;
		transition: all .3s;
	}

	/* Menu Toggle */

	.wp-block-navigation__responsive-container-close svg, 
	.wp-block-navigation__responsive-container-open svg {
		width: 60px;
		height: 60px;
	}

	.wp-block-navigation__responsive-container-open svg {
		fill: white;
	}

	/* Popup Menu */

	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		align-items: center;
		justify-content: center;
		color: white!important;
		background-color: var(--wp--preset--color--contrast)!important;
	}

	.wp-block-navigation__responsive-container-content {
		padding: calc(var(--bl)*3) var(--col-gap);
    	align-items: center!important;
    	.wp-block-navigation__container {
    		align-items: center!important;
    	}

    	.wp-block-navigation-item__content {
    		font-size: 40px;
    		transition: all .3s;
    		&:hover {
    			color: var(--wp--preset--color--accent);
    			.wp-block-navigation-item__label::after {
    				background-color: var(--wp--preset--color--accent);
					width: 100%;
    			}
    		}
    	}
	}

	.wp-block-navigation__responsive-dialog {
		position: unset;
	}

	.wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 68px;
		right: max(var(--bl), calc((100% - 1440px) / 2));
		@media(max-height: 599px) {
			top: var(--bl);
		}
	}

	/* Contact Buttons */
	@media (max-width: 767px) {
		.wp-block-button__link,
		.wp-block-contact.contact-design--button a {
			gap: 0;
			font-size: 0;
			padding: var(--bl);
			&::after {
				margin-left: -4px!important;
			}
		}
	}
}

body.scrolled {
	.sticky-header {
		background-color: rgba(26,26,37,.5);
		backdrop-filter: blur(10px);
		>.wp-block-group {
			padding-top: 1rem!important;
			padding-bottom: 1rem!important;
		}
	}
}

.popup {
	padding: calc(var(--col-gap)*2.5) var(--col-gap) var(--col-gap);
	position: fixed;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	background-color: rgba(0,0,0,0.5);
	transition: opacity .2s, width 0s .3s, height 0s .3s;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	overflow: hidden;
}

.popup.show {
	width: 100%;
	min-height: 100svh;
	opacity: 1;
	transition: height 0s, width 0s, opacity .5s;
	overflow: auto;
}

.popup h2 {
	margin-top: 0;
}

@media (min-width: 783px) {
	.popup .forminator-row {
		display: flex;
		gap: 14px;
	}

	.popup .forminator-col {
	    width: 100%;
	    max-width: 100%;
	    -ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	}

	.popup .forminator-col-md-6 {
	    width: 50%;
	    max-width: 50%;
	    -ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	}
}

.popup__container {
	position: relative;
	background-color: white;
	padding: var(--col-gap-large);
    margin-top: auto;
    margin-bottom: auto;
}

.popup__close {
	position: absolute;
	top: calc(var(--bl)*.25);
	right: calc(var(--bl)*.25);
	cursor: pointer;
}

.popup__close svg {
    width: 30px;
    height: 30px;
}