/* Navigation
--------------------------------------------- */
.site-header {
	position: fixed;
	z-index: 100;
}

@media only screen and (max-width: 490px) {
	.site-header {
		left: 1.5rem;
		top: 2.5rem
	}
	
	.site-header-template {
		left: 1.5rem;
		top: 2.5rem !important;
	}
}

.site-header-template {
	position: fixed;
	top: 0px;
	z-index: 100;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding-bottom: 30px;
	padding-top: 30px
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	border: 1px solid currentColor;
	padding: 2px;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--base);
}

.wp-block-navigation__container {
	position: sticky;
	top; 0px;
	gap: unset;
}

.wp-block-navigation .wp-block-navigation-item {
  align-items: center;
  background-color: inherit;
  display: flex;
  justify-content: center;
  position: relative;
  padding: 0.2em;
  border-radius: 0px 0px 20px 0px;
	top: 0px;
}

.wp-block-navigation .wp-block-navigation-item:hover {
	transform: scale(1, 1.2);
	transition-property: transform;
  	transition-duration: 0.5s;
	font-family: "Fredoka bold";
}

.wp-block-navigation-item.current-menu-item {
	transform: scale(1, 1.2);
	transition-property: transform;
  	transition-duration: 0.5s;
	font-family: "Fredoka bold";
}

.nav-item-first {
  background-color: var(--wp--preset--color--first) !important;
	position: absolute;
	left: 0em;
	z-index: 100;
	width: 100px;
}

.nav-item-first .wp-block-navigation-item__content {
	padding-left: 1em;
	padding-right: 1em;
}

.nav-item-second {
  background-color: var(--wp--preset--color--second) !important;
	position: absolute;
	left: -6em;
	z-index: 99;
	width: 300px;
}

.nav-item-second .wp-block-navigation-item__content {
	padding-left: 7em;
	padding-right: 1em;
}

.nav-item-third {
  background-color: var(--wp--preset--color--third) !important;
	position: absolute;
	left: -23em;
	z-index: 98;
}

.nav-item-third .wp-block-navigation-item__content {
	padding-left: 18em;
	padding-right: 1em;
}

.nav-item-fourth {
  background-color: var(--wp--preset--color--fourth) !important;
	position: absolute;
	left: -45em;
	z-index: 97;
}

.nav-item-fourth .wp-block-navigation-item__content {
	padding-left: 40em;
	padding-right: 1em;
}

.nav-item-fifth {
  background-color: var(--wp--preset--color--fifth) !important;
	position: absolute;
	left: -72em;
	z-index: 96;
}

.nav-item-fifth .wp-block-navigation-item__content {
	padding-left: 28em;
	padding-right: 1em;
}

.nav-item-sixth {
  background-color: var(--wp--preset--color--sixth) !important;
	position: absolute;
	left: -105em;
	z-index: 95;
}

.nav-item-sixth .wp-block-navigation-item__content {
	padding-left: 34em;
	padding-right: 1em;
}

.wp-block-navigation .wp-block-navigation-item__label {
	white-space: nowrap;
}

/* Navigation Submenu
--------------------------------------------- */

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--contrast);
	border: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 10px;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
	padding: 2px 10px;
}

/* MEDIA QUERIES
--------------------------------------------- */

@media only screen and (max-width: 420px) {

	.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close  {
		border: none;
		background-color: var(--wp--preset--color--first) !important;
		border-radius: 23px;
		padding: 0.4em;
	}
	
	.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg {
		height: 32px;
		width: 32px;
	}
	
	.nav-item-first {
		background-color: var(--wp--preset--color--first) !important;
		position: unset;
		left: unset;
		z-index: 100;
		width: unset;
	}

	.nav-item-first .wp-block-navigation-item__content {
		padding-left: unset;
		padding-right: unset;
	}

	.nav-item-second {
	  	background-color: var(--wp--preset--color--second) !important;
		position: unset;
		left: unset;
		z-index: 99;
		width: unset;
	}

	.nav-item-second .wp-block-navigation-item__content {
		padding-left: unset;
		padding-right: unset;
	}

	.nav-item-third {
	  background-color: var(--wp--preset--color--third) !important;
		position: unset;
		left: unset;
		z-index: 98;
	}

	.nav-item-third .wp-block-navigation-item__content {
		padding-left: unset;
		padding-right: unset;
	}

	.nav-item-fourth {
	  background-color: var(--wp--preset--color--fourth) !important;
		position: unset;
		left: unset;
		z-index: 97;
	}

	.nav-item-fourth .wp-block-navigation-item__content {
		padding-left: unset;
		padding-right: unset;
	}

	.nav-item-fifth {
	  background-color: var(--wp--preset--color--fifth) !important;
		position: unset;
		left: unset;
		z-index: unset;
	}

	.nav-item-fifth .wp-block-navigation-item__content {
		padding-left: unset;
		padding-right: unset;
	}

	.nav-item-sixth {
	  background-color: var(--wp--preset--color--sixth) !important;
		position: unset;
		left: unset;
		z-index: 95;
	}

	.nav-item-sixth .wp-block-navigation-item__content {
		padding-left: unset;
		padding-right: unset;
	}
	
	.wp-block-navigation-item.current-menu-item {
		transform: unset;
		transition-property: unset;
		transition-duration: unset;
	}

}