/* Main Navigation Stylesheet for Northwestern Theme - SchoolSite */

/***** Colors (for reference)

Primary color:
D10303

Primary RGB:
209,3,3

Secondary Color:
000001

Secondary RGB:
0,0,1

********/

#topnav{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center;}

#topnav > li{ margin-right: 1rem; position: relative;}
.top_nav_link{ display: flex; align-items: center;}
#topnav > li:last-child{ margin-right: 0;}
#topnav > li > div > a{ color: #262626; font-size: 1rem; font-weight: 500; padding: 1.5rem 0; box-sizing: border-box; position: relative; display: block;}


.subnav_toggle_icon{ display: inline-block; margin-left: 5px;}
.subnav_toggle_icon svg{ height: 10px;}
.subnav_toggle_icon svg, .subnav_toggle_icon svg *{ fill: #262626 !important;}

.drop_level2_wrapper{ display: none; position: absolute; top: 100%; left: 0; width: 300px; box-shadow: 0 20px 20px 0 rgba(38, 38, 38,0.35); z-index: 1001;}

#topnav > li > .drop_level2_wrapper{ padding-top: 10px;}

.drop_level2_wrapper ul{ list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 6px;}
.drop_level2_wrapper li{ position: relative;}

.drop_level2_wrapper .drop_level2_wrapper{ top: 0; left: 100%; z-index: 2; padding-left: 10px;}

.drop_level2_wrapper li a{ display: flex; align-items: center; justify-content: space-between; padding: 1rem; color: #262626; font-size: 1rem; font-weight: 500;}


.drop_level2_wrapper li a svg{ height: 15px;}
.drop_level2_wrapper li a svg, .drop_level2_wrapper li a svg *{ fill: #262626 !important;}


.drop_level2_wrapper li:first-child a{ border-radius: 6px 6px 0 0;}
.drop_level2_wrapper li:last-child a{ border-radius: 0 0 6px 6px;}

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

/* Desktop (Hover styles, etc) */
@media all and (min-width: 1024px){
	/* #topnav > li > div > a:hover{ color: #000001;} */
	
	#topnav > li::after{ content:""; position: absolute; width: 100%; height: 8px; background: #000001; left: 0; bottom: 0; opacity: 0; transition: all 0.3s;}
	#topnav > li:hover::after{ opacity: 1;}
	
	#topnav > li:hover > .drop_level2_wrapper{ display: block;}
	.drop_level2_wrapper li:hover .drop_level2_wrapper{ display: block;}
	
	.drop_level2_wrapper li a:hover{ color: var(--primary2_overlay); background-color: #000001;}
	
	.drop_level2_wrapper li a:hover svg, .drop_level2_wrapper li a:hover svg *{ fill: var(--primary2_overlay) !important;}
}

/* Mobile/Tablet Styles */
@media all and (max-width: 1024px){
	#mainnav{ width: 100%;}
	
	#topnav{ display: block;}
	#topnav > li { margin-right: 0; border-bottom: solid thin rgba(209,3,3, 0.2);}
	
	.top_nav_link{ justify-content: space-between; padding: 0 6%;}
	.top_nav_link.active{ background-color: #000001;}
	.top_nav_link.active a{ color: var(--primary2_overlay) !important;}
	.top_nav_link.active svg, .top_nav_link.active svg *{ fill: var(--primary2_overlay) !important;}
	
	.drop_level2_wrapper{ position: relative; top: auto; left: auto; box-shadow: none; width: 100%;}
	.drop_level2_wrapper .drop_level2_wrapper{ position: relative; display: block; top: auto; left: auto; padding-left: 0;}
	
	#topnav > li > .drop_level2_wrapper{ padding-top: 0;}
	
	.subnav_toggle_icon{ margin-left: 0; padding: 5px 1rem; transition: all 0.3s;}
	.subnav_toggle_icon.active{ transform: rotate(180deg);}
	
	.drop_level2_wrapper li a .drop_nav_icon{ display: none !important;}
	
	.drop_level2_wrapper li{ padding: 0 0 0 1rem;}
	.drop_level2_wrapper li a{ font-size: 0.875rem; font-weight: 400;}
	
}