body .navigation-main ul.level_2 { opacity: 0; }
body.nav-is-desktop .navigation-main li.nav-expanded>.ul-wrapper > ul { display: flex; }

.mod_navigation {
	flex-grow: 1;
	justify-items: end;
	align-self: center;
	.nav-burger {
		width: 100%;
		justify-content: end;
		right: 7.5px;
		.icon-line, .icon-line:after, .icon-line:before {
			height: var(--nav-burger-line-height, .25rem);
			border-radius: var(--nav-burger-border-radius, 3rem);
		}
		.icon-line {
			top: calc( 50% - var(--nav-burger-line-height, .25rem) / 2 );
		}
	}
	.navigation-main {
		width: 100%;
		:is(a, strong) { font-weight: var(--nav-font-weight, normal); }
	}
}

body:not(.nav-is-mobile) .navigation-main .level_1 {
	
	/* desktop - enable rotating arrow - start */
	& > li > .btn-toggle-submenu:after { 
		rotate: 90deg;
		transition: rotate 0.3s ease-in-out;
		transform: none;
	}
	& > li.nav-expanded > .btn-toggle-submenu:after { 
		transform: none;
		rotate: -90deg; 
	}
	/* desktop - enable rotating arrow - end */

	ul.level_2 {
        /* desktop - enable fade and slide in - start */
        display: flex;
        pointer-events: none;
        opacity: 0;
        translate: 0 -5px;
        transition: all 0.3s ease-in-out;
        /* desktop - enable fade and slide in - end */

        li.nav-expanded & {

            /* desktop - enable fade and slide in - start */
            pointer-events: all;
            opacity: 1;
            translate: 0;
            /* desktop - enable fade and slide in - end */

        }
	}
}

body.nav-is-mobile .navigation-main {
	--submenu-height-animation-duration: 0.6;
	min-width: 100vw; 
	left: auto; 
	transition: opacity .5s ease-in-out, visibility .6s, translate .4s ease-in-out;
	.skip-link { position: absolute; }
	a:hover, .btn-toggle-submenu:hover { color: var(--nav-mobile-active-color, #ccc) !important; }
	
	/* expand button icon - start */
	li > .btn-toggle-submenu { display: grid; place-items: center; }
	li > .btn-toggle-submenu:after {
		width: 18px;
		height: 18px;
		transform: rotate(0deg);
		transition: all calc(var(--submenu-height-animation-duration) * 1s) linear;
		--thickness: 2px;
		background:
			conic-gradient(from 90deg at var(--thickness) var(--thickness),transparent 90deg,var(--nav-mobile-color, #000) 0) 
			calc(100% + var(--thickness)/2) calc(100% + var(--thickness)/2)/
			calc(50%  + var(--thickness))   calc(50%  + var(--thickness));
	}
	li.nav-expanded > .btn-toggle-submenu:after { transform: rotate(135deg); }
	/* expand button icon - end */

	/* slide in animation - start */
	translate: 0;
	&:not(.is-active) { translate: 100%; }
	/* slide in animation - end */

	/* drop-down animation - start (requires .ul-wrapper) */
	.level_1 .ul-wrapper {
		display: grid;
		grid-template-rows: 0fr;
		overflow: hidden;
		transition: grid-template-rows calc(var(--submenu-height-animation-duration) * 1s) ease-out, -ms-grid-rows calc(var(--submenu-height-animation-duration) * 1s) ease-out;
	}
	.level_1 .ul-wrapper ul {
		display: inherit;
		opacity: 0;
		min-height: 0;
		visibility: hidden;
		filter: blur(2px);
		transition: filter calc(var(--submenu-height-animation-duration) * .5s) ease-out, visibility calc(var(--submenu-height-animation-duration) * .5s) ease-out, opacity calc(var(--submenu-height-animation-duration) * .5s) ease-out;
	}
	.level_1 li.nav-expanded > .ul-wrapper {
		display: grid;
		grid-template-rows: 1fr;
	}
	.level_1 li.nav-expanded > .ul-wrapper > ul {
		visibility: visible;
		filter: blur(0);
		opacity: 1;
	}
	/* drop-down animation - end */

}

/* desktop - view mobile navigation as cards in desktop - start */
@media(min-width:1024px){
	body:not(.nav-is-desktop) .mod_navigation#nurMobileNavigation .navigation-main {
		margin-top: calc( var(--header_height, 100) * 1px );
		padding: 0 20px 50px;
		.invisible { display: none; }
		ul.level_1 {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 400px));
			gap: 0 20px;
			justify-content: center;
			:is(a, strong) { padding: 6px 10px; }
			& > li > :is(a, strong) { font-size: 1.5em; margin-top: 30px; padding: 7px; }
			li {
				padding-left: 0;
				.btn-toggle-submenu { display: none; }
				&:not(:last-child) { border-bottom: 0; }
				&:first-child { border-top: 0; }
				& > .ul-wrapper {
					grid-template-rows: 1fr;
					overflow: visible;
				}
				.level_2 {
					opacity: 1;
					visibility: visible;
					filter: none;
				}
			}
		}
	}
}
/* desktop - view mobile navigation as cards in desktop - end */