/* nnl-basis header and mega menu (from nnl-child-theme assets/css/header.css): styles the starter HEADER template through its classes nnl-header, nnl-header-horizontal, nnl-mega-menu-tabs, nnl-mega-menu-bottom-row, nnl-header-mega-menu-trigger. Handle jutso-basis-header. */
.nnl-header{
	z-index: 9999 !important;
}

div.nnl-header,
div.nnl-header.no-after:nth-child(1) > div:nth-child(1) > div:nth-child(1){
 transition: padding 0.2s ease;
}

/* The scrolled header's shadow: the NNL header and the other sticky headers with the wave (jutso-basis-header-wave, the Simple Header), whose no-after header.js sets while the page is scrolled. */
div.nnl-header.no-after,
div.jutso-basis-header-wave.no-after{
/* shadow/hard/center-100 */
box-shadow: 0 0 17.869px 0 rgba(0, 0, 0, 0.09), 0 0 10.017px 0 rgba(0, 0, 0, 0.07), 0 0 5.32px 0 rgba(0, 0, 0, 0.07), 0 0 2.214px 0 rgba(0, 0, 0, 0.06);
}

div.nnl-header.no-after{
	padding: 0 !important;
}

/*
 * The scrolled Simple Header (2.2.1, Dennis 2026-10-12): no vertical padding, the logo at 80 % (64px → 51.2px, from
 * 1024px down 38px → 30.4px). Elementor's sticky spacer keeps its full height (:not(.elementor-sticky__spacer)), so the
 * page below does not move when the header shrinks.
 */
div.jutso-basis-header-simple,
div.jutso-basis-header-simple > .e-con-inner{
	transition: padding 0.2s ease;
}
div.jutso-basis-header-simple .elementor-widget-theme-site-logo img{
	transition: height 0.2s ease;
}
div.jutso-basis-header-simple.no-after:not(.elementor-sticky__spacer){
	--padding-top: 0px !important;
	--padding-bottom: 0px !important;
}
div.jutso-basis-header-simple.no-after:not(.elementor-sticky__spacer) .elementor-widget-theme-site-logo img{
	height: 51.2px !important;
}
@media screen and (max-width: 1024px) {
	div.jutso-basis-header-simple.no-after:not(.elementor-sticky__spacer) .elementor-widget-theme-site-logo img{
		height: 30.4px !important;
	}
}
div.nnl-header.no-after:nth-child(1) > div:nth-child(1) > div:nth-child(1){
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}

div.nnl-header.no-after .elementor-widget-theme-site-logo img{
	height: 32px;
}


.nnl-header-horizontal{
	height: 0;
	overflow: hidden;
	transition: height 0.2s ease;
}

.nnl-mega-menu-tabs{
	height: 0px;
}

.nnl-mega-menu-tabs-open{
	height: 700px !important;

}

/* Horizontal tab panels can use their own open height. */
.nnl-header-horizontal.nnl-mega-menu-tabs-open{
	height: 300px !important;
}

.nnl-mega-menu-bottom-row{
	overflow: hidden;
}

.nnl-header-mega-menu-trigger{
	--icon-size: 18px;
	--line-spacing: 10px;
}

.nnl-header-mega-menu-trigger .elementor-button-content-wrapper{
	width: 100%;
	justify-content: start;
}

.nnl-header-mega-menu-trigger .elementor-button-text{
	padding-left: 5px;
	transition: .4s ease;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.nnl-header-mega-menu-trigger{
	justify-content: start;
	width: 100px;
	transition: .4s ease;
}

.nnl-header-mega-menu-trigger.nnl-mega-menu-active{
	width: 46px;
}

.nnl-header-mega-menu-trigger.nnl-mega-menu-active  .elementor-button-text{
	width: 0;
	padding-left: 0px;
}

.nnl-header-mega-menu-trigger .elementor-button{
	transition: .4s ease;
}

.nnl-header-mega-menu-trigger .elementor-button:focus-visible{
	outline: 2px solid var(--site-color, #111);
	outline-offset: 2px;
}

.nnl-header-mega-menu-trigger.nnl-mega-menu-active .elementor-button{
	background-color: transparent !important;
}

.nnl-header-mega-menu-trigger svg {
	width: var(--icon-size);
	height: var(--icon-size);
}

/* Burger lines */
.nnl-header-mega-menu-trigger svg .line {
	transition: all 0.4s ease;
	transform-origin: center center;
	transform-box: fill-box;
}

/* Top line */
.nnl-header-mega-menu-trigger svg .line-top {
	transform: translateY(0);
}

/* Middle line */
.nnl-header-mega-menu-trigger svg .line-middle {
	opacity: 1;
}

/* Keep middle line hidden when in X state */
.nnl-header-mega-menu-trigger.nnl-mega-menu-active svg .line-middle {
	opacity: 0;
}

/* Bottom line */
.nnl-header-mega-menu-trigger svg.line-bottom {
	transform: translateY(0);
}

/* Forward animation - Stage 1: Lines come together */
.nnl-header-mega-menu-trigger.nnl-mega-menu-active svg .line-top {
	animation: topToCenter 0.4s ease forwards;
}

.nnl-header-mega-menu-trigger.nnl-mega-menu-active svg .line-middle {
	animation: fadeOut 0.4s ease forwards;
}

.nnl-header-mega-menu-trigger.nnl-mega-menu-active svg .line-bottom {
	animation: bottomToCenter 0.4s ease forwards;
}

/* Reverse animation - Going back to burger */
.nnl-header-mega-menu-trigger:not(.nnl-mega-menu-active) svg .line-top {
	animation: topToOriginal 0.4s ease forwards;
}

.nnl-header-mega-menu-trigger:not(.nnl-mega-menu-active) svg .line-middle {
	animation: fadeIn 0.4s ease forwards;
}

.nnl-header-mega-menu-trigger:not(.nnl-mega-menu-active) svg .line-bottom {
	animation: bottomToOriginal 0.4s ease forwards;
}

.no-after::after{
	content: none !important;
}

.nnl-mega-menu-tabs-active .nnl-link-special{
	background-size: 100% 2px !important;
}

@media screen and (max-width: 767px) {
	.nnl-mega-menu-tabs-open{
		max-height: calc( 100vh - 90px ) !important;
		overflow: scroll !important;
		height: 900px !important;
	}

	.nnl-header-horizontal.nnl-mega-menu-tabs-open{
		max-height: calc( 100vh - 90px ) !important;
		overflow: scroll !important;
		height: 900px !important;
	}

	.nnl-mega-menu-tabs .e-con-inner{
		flex-wrap: nowrap !important;
	}

	div.nnl-header.no-after,
	div.nnl-header.no-after>.elementor-element{
		background-color: transparent !important;
		box-shadow: none !important;
	}

	.nnl-header-mega-menu-trigger a{
		background-color: var(--jutso-basis-menu-trigger-color) !important;
		border: 2px solid var(--jutso-core-color-white) !important;
	}

	div.nnl-header.no-after:not(.active) .elementor-widget-theme-site-logo{
		display: none !important;
	}

	div.nnl-header.active{
		background-color: var(--jutso-core-color-white) !important;
	}

}

/* Stage 1 animations - moving to center */
@keyframes topToCenter {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	50% {
		transform: translate(0, var(--line-spacing)) rotate(0deg);
	}
	100% {
		transform: translate(0, var(--line-spacing)) rotate(45deg);
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes bottomToCenter {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	50% {
		transform: translate(0, calc(var(--line-spacing) * -1)) rotate(0deg);
	}
	100% {
		transform: translate(0, calc(var(--line-spacing) * -1)) rotate(-45deg);
	}
}

/* Reverse animations - going back to burger */
@keyframes topToOriginal {
	0% {
		transform: translate(0, var(--line-spacing)) rotate(45deg);
	}
	50% {
		transform: translate(0, var(--line-spacing)) rotate(0deg);
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	51% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes bottomToOriginal {
	0% {
		transform: translate(0, calc(var(--line-spacing) * -1)) rotate(-45deg);
	}
	50% {
		transform: translate(0, calc(var(--line-spacing) * -1)) rotate(0deg);
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}