header.wp-block-template-part {
/*	max-width: var(--wrap-width--large);*/
	width: calc(100% - calc(var(--col-gap)*2));
	margin: var(--col-gap) auto 0;

	@media (min-width: 992px) {
		width: calc(100% - calc(var(--col-gap)*3));
		margin: calc(var(--col-gap)*1.5) auto 0;
	}

	@media (min-width: 1200px) {
		width: calc(100% - calc(var(--col-gap)*4));
		margin: calc(var(--col-gap)*2) auto 0;
	}

	#header-navigation {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
	}

	.wp-block-site-logo {
		flex-basis: auto;
/*		z-index: 1000;*/
		padding: calc(var(--bl)*.5) var(--bl);
		transition: all .3s;
		img {
		}

		path {
			transition: all .3s;
		}

		@media (min-width: 1200px) {
			padding: calc(var(--bl)*.5) calc(var(--bl)*2);
		}
	}

	/* Menu */

	nav ul {
		flex-wrap: nowrap;
		gap: 0;
	}

	.wp-block-navigation-item {
		flex-grow: 1;
		background-color: var(--wp--preset--color--accent-4);
		justify-content: center;
		transition: all .3s;
		border-radius: 20px;

		a {
			border-radius: 20px;
			text-align: center;
			background-color: transparent;
			width: 100%;
			padding: var(--bl);
			text-decoration: none;
			transition: all .3s;
			&:hover {
				outline: none;
				background-color: white;
				color: var(--wp--preset--color--contrast);
			}
		}

		&.button {
		    .wp-block-navigation-item__label::after {
		        content: '';
    			mask-image: url(../../../assets/icons/arrow-right.svg);
		        display: inline-block;
		        width: 9px;
		        height: 14px;
		        background-position: center;
		        background-size: contain;
		        background-repeat: no-repeat;
		        margin-left: calc(var(--bl)* .75);
		        mask-size: contain;
		        mask-repeat: no-repeat;
		        transition: all .3s;
				background-color: var(--wp--preset--color--contrast);
		    }
		}

		&.bg-black { 
			background-color: var(--wp--preset--color--contrast); 
			color: var(--wp--preset--color--accent-2); 
			.wp-block-navigation__submenu-container a {
				background-color: var(--wp--preset--color--contrast); 
				color: var(--wp--preset--color--accent-2);
			}
		}
		&.bg-purple { 
			background-color: var(--wp--preset--color--accent-2);
			.wp-block-navigation__submenu-container a {
				background-color: var(--wp--preset--color--accent-2); 
			} 
		}
		&.bg-orange { 
			background-color: var(--wp--preset--color--accent-3); 
			color: var(--wp--preset--color--base); 
			.wp-block-navigation__submenu-container a {
			background-color: var(--wp--preset--color--accent-3); 
			color: var(--wp--preset--color--base); 
			}
		}
		&.bg-green { 
			background-color: var(--wp--preset--color--accent); 
			.wp-block-navigation__submenu-container a {
				background-color: var(--wp--preset--color--accent); 
			}
		}

		&.has-child {
			&:hover {
				background-color: white;
				color: var(--wp--preset--color--contrast);
			}

			> a {
				width: auto;
				padding-right: 0;
				&:hover {
					background-color: transparent;
				}
			}
		}
	}

	/* Submenu */

	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		width: 100%!important;
		background-color: transparent!important;
		border: none!important;
		left: 0!important;
		top: unset;
		bottom: 100%;

		@media (min-width: 992px) {			
			li:first-of-type a,
			li:first-of-type {
/*				border-top-right-radius: 20px;*/
/*				border-top-left-radius: 20px;*/
			}
		}
	}

	.wp-block-navigation__submenu-container {
		li.current-menu-item,
		li.current-menu-item > a {
			color: var(--wp--preset--color--contrast)!important;
			background-color: #faf5ef!important;
		}

		a {
			max-width: none;
			text-align: left;
	/*		background-color: var(--wp--preset--color--accent-4);*/
	/*		color: var(--wp--preset--color--contrast)!important;*/
			padding-right: var(--bl)!important;
			&:hover {
				color: var(--wp--preset--color--contrast)!important;
				background-color: #faf5ef!important;
			}
		}	
	}

	/* Submenu Arrow */

	.wp-block-navigation__submenu-icon {
		width: 40px;
		height: 40px;
		padding: 10px;
		margin: 0;
		transform: rotate(180deg)!important;
		svg {
			height: 100%;
			width: 100%;
		}
	}

	/* Mobile Menu Activate */

	@media (min-width: 992px) {
	    .wp-block-navigation__responsive-container-open:not(.always-shown) {
	        display: none !important;
	    }

	    .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;
	    }

	    .wp-block-navigation-item:has(.wp-block-social-links) {
	    	display: none;
	    }
	}

	@media (min-width: 600px) {
	    .wp-block-navigation__responsive-container-open:not(.always-shown) {
	        display: flex;
	    }
	    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	        display: none;
	        justify-items: flex-end;
	    }
	}

	/* Mobile Menu */

	@media (max-width: 991px) {
		.header-menu {
			justify-content: flex-end!important;
		}

		nav {
	    	flex-shrink: 0;
	    	justify-content: flex-end;
	    	padding-right: calc(var(--bl)*.15);
		}

		.wp-block-navigation__responsive-container.is-menu-open {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--wp--preset--color--contrast)!important;
			&::after {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				text-align: center;
				max-width: 100%;
				content: url('../../images/menu-logo.png');
			}

			.wp-block-navigation__responsive-container-content {
				max-height: 100svh;
				padding: calc(var(--bl)*6) var(--col-gap);
			}

			.wp-block-social-links {
				margin-top: var(--col-gap-large);
				.wp-social-link a:hover {
					background-color: transparent;
					color: var(--wp--preset--color--accent);
				}
			}
		}

		.wp-block-navigation__responsive-container-content {
	    	align-items: center!important;
	    	gap: calc(var(--col-gap)*.5);
	    	.wp-block-navigation__container {
	    		width: 100%;
	    		align-items: center!important;
	    		overflow: auto;

	    		.has-child .wp-block-navigation__submenu-container {
	    			padding: 0!important;
	    			a {
	    				color: var(--wp--preset--color--accent-2);
	    				&:hover {
	    					color: var(--wp--preset--color--accent)!important;
	    				}
	    			}

	    			li.current-menu-item a {
	    				color: var(--wp--preset--color--contrast);
	    			}
	    		}
	    	}

	    	.wp-block-navigation-item {
	    		flex-grow: 0;
	    		background-color: transparent;
	    		align-items: center!important;

	    		&.has-child {
	    			align-items: center;
	    			flex-wrap: wrap;
	    			flex-direction: row;

	    			a {
	    				max-width: calc(100% - 40px);
	    				padding-right: 0!important;
	    				width: auto;
	    			}

	    			> ul {
	    				width: 100%;
	    			}
	    		}

				.wp-block-navigation__submenu-icon {
					display: block;
					position: relative;
					transition: all .3s;
        			transform: rotate(180deg) !important;
					svg path {
						stroke: var(--wp--preset--color--base);
					}

					&.inactive {
        				transform: rotate(0deg) !important;
					}
				}

	    		&.button a {
	    			background-color: var(--wp--preset--color--accent)!important;
	    			color: var(--wp--preset--color--contrast);
	    			font-weight: 600;
	    			border-radius: 100px;
	    			font-size: 20px;
	    			padding: calc(var(--bl)) calc(var(--bl)*1.5)!important;
	    			&:hover {
	    				background-color: var(--wp--preset--color--accent-3)!important;
	    				color: var(--wp--preset--color--base);
	    				.wp-block-navigation-item__label::after {
	    					background-color: var(--wp--preset--color--base);
	    				}
	    			}
	    		}
	    	}

	    	a.wp-block-navigation-item__content {
	    		line-height: 1;
	    		text-align: center;
	    		justify-content: center;
	    		padding: calc(var(--bl)*.75)!important;
	    		font-size: 24px;
	    		font-weight: 500;
	    		color: var(--wp--preset--color--base);
	    		background-color: transparent!important;
	    		transition: all .3s;
	    		width: 100%;
	    		&:hover {
	    			color: var(--wp--preset--color--accent);
	    		}
	    	}
		}

		.wp-block-navigation__responsive-dialog {
			position: unset;
		}

		.wp-block-navigation__responsive-container-close {
			position: absolute;
			top: var(--bl);
			right: var(--bl);
		}

		.wp-block-navigation-submenu {
			max-height: 1000px;
			transition: all .5s!important;
			overflow: hidden;
			&.inactive {
				max-height: 0;
			}
		}
	}

	/* Menu Toggle */

	.wp-block-navigation__responsive-container-close svg, 
	.wp-block-navigation__responsive-container-open svg {
		width: 42px;
		height: 42px;
		margin: 7px;
		border-radius: 100%;
		padding: 6px;
		background-color: var(--wp--preset--color--accent-2);
		fill: var(--wp--preset--color--contrast);
		&:hover {
			background-color: var(--wp--preset--color--accent);
		}
	}

	.wp-block-navigation__responsive-container-open svg {
	}
}

/* Sticky Header */
.sticky-header {
	animation: none!important;
	opacity: 1!important;
}

body.scrolled {
	header.wp-block-template-part #header-navigation {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: unset;
/*		border-bottom-right-radius: 20px;*/
		width: calc(100% - calc(var(--bl) * 3));
		@media(min-width: 992px) {
			width: calc(100% - calc(var(--bl) * 4.5));
		}

		@media(min-width: 1200px) {
			width: calc(100% - calc(var(--bl) * 6));
		}
	}

	header .wp-block-navigation__submenu-icon {
		transform: none!important;
		svg {
			margin-top: 0;
		}
	}

	header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		top: 100%;
		bottom: unset;
		@media (min-width: 992px) {
			/*li:first-of-type,
			li:first-of-type a {
				border-top-right-radius: 0px;
				border-top-left-radius: 0px;
			}

			li:last-of-type,
			li:last-of-type a {
				border-bottom-right-radius: 20px;
				border-bottom-left-radius: 20px;
			}*/
		}
	}

	@media(max-width: 991px) {
		.sticky-header {
			padding: 4px!important;
			border-radius: 100px!important;
			background-color: var(--wp--preset--color--contrast);
			margin-top: var(--bl);
		}
	}

	@media(min-width: 992px) {
		header .wp-block-site-logo {
			background-color: rgba(255,255,255,0.75);
/*			border-bottom-left-radius: 20px;*/
			border-radius: 20px;
			path {
				fill: var(--wp--preset--color--contrast);
			}
		}

		ul.wp-block-navigation__container > .wp-block-navigation-item:nth-last-of-type(2),
		ul.wp-block-navigation__container > .wp-block-navigation-item:nth-last-of-type(2) > a {
			border-bottom-right-radius: 20px;
			border-radius: 20px;
		}
	}
}