/* 
========================
LAYOUT AND FUNCTIONALITY
========================

Mobile first 
Opening of menu by jQuery

*/

nav>ul {
	display:none;
}


/* 
============
   STYLES 
============
*/

/* Hamburger */
#menu_opener::before {
	content: 'Menu \2630';
	display:block;
	padding: .6rem 1rem;
	text-align:center;
}

nav {
	position:sticky;
	top:-1px;
}

nav ul {
	text-align:left;
	padding:0;
	margin:0;
	width:100%;
	max-width:1280px;
}
	nav>ul {
		max-height:400px;
		overflow:auto;
	}
nav.nav_center ul {
	/* no need to limit width of centred nav */
	max-width:none;
}

nav ul li {
	list-style-type:none;
	padding:0;
	margin:0;
	position:relative;
}

nav ul li a {
	display:block;
	padding:0.35rem;
}

nav ul li.hasicon>a::before,
nav ul li.hasicon>span::before {
	content:'';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right:0.3em;
	--icon-background: currentColor;
	background-color: var(--icon-background);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	position:relative;
	top:.1em;
}


/* Sub-menus */

nav ul li ul li {
	margin-left:1rem;
}



/* Protected pages indicator */

.protected::before {
	content: '[';
}
.protected::after {
	content: ']';
}

/*
Mobile Nav 2
Child pages hidden
*/
@media(max-width: 1024px) {
	nav.mobile_nav_2 li,
	nav.mobile_nav_2 .sub_menu,
	nav.mobile_nav_2 .sub_sub_menu {
		border-top:1px solid currentColor;
		/* border-bottom:1px solid color-mix(in hsl, currentColor, blue); */
	}
		nav.mobile_nav_2 .sub_menu>li:first-child,
		nav.mobile_nav_2 .sub_sub_menu>li:first-child {
			border-top:0;
		}
		nav.mobile_nav_2 .sub_menu li>a {
			border-left:1px solid currentColor;
		}
		
		
	
	
		nav.mobile_nav_2 li a {
			padding:0.6rem;
			font-size:17px !important;
		}
	nav.mobile_nav_2 .sub_menu {
		display:none;
	}
	nav.mobile_nav_2 li.has_children {
		position:relative;
	}
	nav.mobile_nav_2>ul>li.has_children::after {
		content:'\25BC';
		position:absolute;
		top:.4rem;
		right:0;
		bottom:0;
		width:3rem;
		text-align:center;
		font-size:1.4rem;
	}
		nav.mobile_nav_2>ul>li.has_children.open::after {
			content:'\25B6'; 
		}
	nav.mobile_nav_2 li.has_children>a {
		margin-right:3rem;
	}
}


@media(min-width: 1025px) {

	#menu_opener {
		display:none;
	}
	nav {
		position:relative;
		top:0;
	}
	nav>ul {
		max-height:none;
		overflow:visible;		
	}
	nav.last_child_end ul>li:last-child {
		position:absolute;
		right:0;
	}
	nav.last_child_start ul>li:last-child {
		position:absolute;
		left:0;
	}

	/*-- DESKTOP NAV 1 --*/

		/* horizontal menu */
		nav.desktop_nav_1 ul {
			display:flex;
			flex-direction: row;
		}
		nav.desktop_nav_1 ul ul {
			display: none;
			position: absolute;
		}	
		nav.desktop_nav_1 ul li:hover > ul {
			display: block;
		}

		/* adjust for vertical menu */
		main.desktop_layout8 nav.desktop_nav_1 ul {
			flex-direction: column;
		}	
		main.desktop_layout8 nav.desktop_nav_1 ul ul {
			position: relative;
		}	

		nav.desktop_nav_1 .has_children > a:after,
		nav.desktop_nav_1 .has_children > span:after {
			content: ' \25BC';
			padding: 1px;
		}
		nav.desktop_nav_1>ul>li {
			padding-top:.5rem;
			padding-bottom:.5rem;
		}
		nav.desktop_nav_1 .sub_menu {
			-webkit-border-radius: 0 0 5px 5px;
			border-radius: 0 0 5px 5px;
		}
		nav.desktop_nav_1 .sub_menu li {
			display: flex;
		}
		

	/*-- DESKTOP NAV 2 --*/
	/* https://moderncss.dev/css-only-accessible-dropdown-navigation-menu/ */
	
		nav.desktop_nav_2 {
			display:flex;
			place-items: center;
		}
		
		nav.desktop_nav_2>ul {
			margin:0 auto;
		}
		
		nav.desktop_nav_2>ul,
		nav.desktop_nav_2>ul>li {
			display:grid;
			position:relative;
			
		}
		
		nav.desktop_nav_2 > ul {
    			grid-auto-flow: column;
    		}
    		
    		nav.desktop_nav_2 > ul > li {
			margin: 0 ;
			padding:0;
    		}
    		
    		nav.desktop_nav_2 > ul > li > a,
    		nav.desktop_nav_2 > ul > li > span {
    			display: inline-block;
    			padding: 1rem;
    		}
    		
    		nav.desktop_nav_2 .sub_menu {
			border-radius: 0 0 4px 4px;
			box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
			padding: 0;
			width: 100%;
			min-width:24ch;
			position: absolute;
			top:100%;
			transform: rotateX(-90deg);
			transform-origin: top center;
			opacity: 0.3;
			transition: 280ms all 120ms ease-out;
			font-size:80%;
    		}
			nav.desktop_nav_2 .sub_menu > li {
				margin:0;
				padding:.4rem;
			}
    		   	nav.desktop_nav_2 .sub_menu > li:last-child {
    		   		border-radius: 0 0 4px 4px;
    		   		padding-bottom:.6rem;
    		   	}
    		   	
    		nav.desktop_nav_2 .has_children:hover .sub_menu,
    		nav.desktop_nav_2 .has_children:focus-within .sub_menu {
			opacity: 1;
			transform: rotateX(0);    		
    		}
		nav.desktop_nav_2 .has_children > a:after,
		nav.desktop_nav_2 .has_children > span:after {
			content: ' \25BC';
			padding: 1px;
		}
			nav.desktop_nav_2 .has_children > a.protected:after,
			nav.desktop_nav_2 .has_children > span.protected:after {
				content: ' \25BC]';
				padding: 1px;
			}
			
		nav.desktop_nav_2 .sub_sub_menu {
			position:absolute;
			left:98%;
			top:0;
			opacity: 0.3;
			transform: rotateY(-90deg);
			transform-origin: center left;
			border-radius: 4px;
			box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
			transition: 280ms all 120ms ease-out;
		}
			nav.desktop_nav_2>ul > li > ul > li.has_children:hover .sub_sub_menu,
			nav.desktop_nav_2>ul > li > ul > li.has_children:focus-within .sub_sub_menu {
				transform: rotateY(0);
				opacity: 1;
			}
		
				nav.desktop_nav_2 .sub_menu .has_children > a:after,
				nav.desktop_nav_2 .sub_menu .has_children > span:after {
					content: ' \25B6';
				}
					nav.desktop_nav_2 .sub_menu .has_children > a.protected:after,
					nav.desktop_nav_2 .sub_menu .has_children > span.protected:after {
						content: ' \25B6]';
					}	
					
			/* last dropdown on main menu */
		
			nav.desktop_nav_2>ul>li:last-child .sub_sub_menu {
				left:-98%;
				transform: rotateY(90deg);
				transform-origin: center right;
			}		

				nav.desktop_nav_2>ul>li:last-child .sub_menu .has_children > a:after,
				nav.desktop_nav_2>ul>li:last-child .sub_menu .has_children > span:after {
					content: ' \25C0';
				}
					nav.desktop_nav_2>ul>.sub_menu .has_children > a.protected:after,
					nav.desktop_nav_2>ul>.sub_menu .has_children > span.protected:after {
						content: ' \25C0]';
					}
					
		
		/* VERTICAL MENU */
		
		.desktop_layout8 nav.desktop_nav_2,
		.desktop_layout12 nav.desktop_nav_2{
			place-items:start;
		}
		.desktop_layout8 nav.desktop_nav_2 > ul,
		.desktop_layout12 nav.desktop_nav_2 > ul{
    			grid-auto-flow: row;
    			justify-content:normal;
    			width:100%;
    		}	
    		.desktop_layout8 nav.desktop_nav_2 > ul li a,
    		.desktop_layout8 nav.desktop_nav_2 > ul li span,
    		.desktop_layout12 nav.desktop_nav_2 > ul li a,
    		.desktop_layout12 nav.desktop_nav_2 > ul li span {
    			display:block;
    		}    
    		
    		.desktop_layout8 nav.desktop_nav_2 .sub_menu,
    		.desktop_layout12 nav.desktop_nav_2 .sub_menu {
			border-radius: 0 4px 4px 0;
			position: absolute;
			transform: rotateY(-90deg);
			transform-origin: bottom left;
			opacity: 0.3;
			transition: 280ms all 120ms ease-out;
			top: 0;
			left: 100%;
		}
		.desktop_layout8 nav.desktop_nav_2 .has_children > a:after,
		.desktop_layout8 nav.desktop_nav_2 .has_children > span:after,
		.desktop_layout12 nav.desktop_nav_2 .has_children > a:after,
		.desktop_layout12 nav.desktop_nav_2 .has_children > span:after {
			content: ' \25B6';
			padding: 1px;
		}
			.desktop_layout8 nav.desktop_nav_2 .has_children > a.protected:after,
			.desktop_layout8 nav.desktop_nav_2 .has_children > span.protected:after,
			.desktop_layout12 nav.desktop_nav_2 .has_children > a.protected:after,
			.desktop_layout12 nav.desktop_nav_2 .has_children > span.protected:after {
				content: ' \25B6]';
				padding: 1px;
			}	
	
			.desktop_layout8 nav.desktop_nav_2 .sub_sub_menu,
			.desktop_layout12 nav.desktop_nav_2 .sub_sub_menu {
				left:0;
				top:2rem;
				transform: rotateY(0);
				transform: rotateX(-90deg);
				transform-origin: top center;
			}
				.desktop_layout8 nav.desktop_nav_2>ul > li > ul > li.has_children:hover .sub_sub_menu,
				.desktop_layout12 nav.desktop_nav_2>ul > li > ul > li.has_children:hover .sub_sub_menu {
					transform: rotateX(0);
					opacity: 1;
					z-index:9;
				}
				.desktop_layout8 nav.desktop_nav_2 .sub_menu .has_children > a.protected:after,
				.desktop_layout8 nav.desktop_nav_2 .sub_menu .has_children > span.protected:after,
				.desktop_layout12 nav.desktop_nav_2 .sub_menu .has_children > a.protected:after,
				.desktop_layout12 nav.desktop_nav_2 .sub_menu .has_children > span.protected:after {
					content: ' \25BC]';
				}	
	
	
	

	
	
	
	
	
	
	
	
	
	
}