/** Main Navigation Stylesheet for Cliff Valley Signature Theme
SchoolSite/Faithwebsites
*/

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

#topnav > li{ margin: 0 0.5rem; position: relative; height: 8.75rem; display: flex; align-items: center;}

#topnav > li > a{ color: #333; color: var(--main-dark-color); font-size: 1.15rem; font-weight: 600; display: block; transition: all 0.3s;}

.drop_level2_wrapper{ display: none;}

.subnav_toggle svg, .subnav_toggle svg *{ fill: var(--primary1-color) !important;}
.togglemenu svg, .togglemenu svg *{ fill: var(--primary2-color) !important;}


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

/** Desktop Only styles (hover states, etc. ) **/
@media all and (min-width: 980px){
	#mainnav{ display: block !important;}
	
	#topnav > li > a{ white-space: nowrap;}
	#topnav > li:hover > a{ color: var(--primary1-color);}
	#topnav > li:hover > a::after{ content:""; position: absolute; top: 100%; left: 0; width:100%; height: 4px; background: var(--primary2-color); z-index: 2;}
	#topnav > li:hover > .drop_level2_wrapper{ display: block;}
	
	.subnav_open, .subnav_close, .togglemenu, .mobile_top_row{ display: none;}
	
	/* drop menu */
	.drop_level2_wrapper{ display: none; position: absolute; background: #fff; top: 100%; left: 50%; transform: translateX(-50%); width: 300px; bordeR: thin solid #979797; box-shadow: 0 15px 30px rgba(48,46,46, 0.3); box-sizing: border-box;}
	#topnav > li:last-child > .drop_level2_wrapper{ left: auto; right: 0; transform: none;}

	.drop_level2_wrapper ul{ list-style: none; margin: 0; padding: 2rem 1.25rem;}

	.drop_level2_wrapper ul li{ padding: 0.5rem 0;}
	.drop_level2_wrapper ul li a{ display: inline-block; font-size: 1rem; color: #757575; font-weight: 400; transition: all 0.3s; position: relative;}
	.drop_level2_wrapper ul li a:hover{ color: var(--primary1-color); font-weight: 600;}
	.drop_level2_wrapper ul li a::after{ content:""; position: absolute; bottom: -4.12px; width: 100%; background:var(--primary2-color); height: 2.12px; left: 0; opacity: 0;}
	.drop_level2_wrapper ul li a:hover::after{ opacity: 1;}
}

@media all and (max-width: 1280px){
	#topnav > li > a, .drop_level2_wrapper ul li a{ font-size: 1rem;}
}

@media all and (max-width: 980px){
	.subnav_open, .togglemenu{ display: block;}
	#mainnav{ display: none; position: fixed; top: 0; left: 0; width: 100%; background: #fff; height: 100%; z-index: 999;}
	
	.mobile_top_row{ display: flex; width: 100%; height: 96px; box-shadow: 0 10px 30px rgba(48,46,46,0.11);}
	.mobile_top_row .mobile_search{ display: flex; height: 100%; align-items: center; width: 100%;}
	.mobile_top_row .mobile_search legend{ display: none;}
	.mobile_top_row .mobile_search form{ border: none; padding: 0 0 0 5.5vw; margin: 0; font-family: 'Poppins', sans-serif; width: 100%;}
	.mobile_top_row .mobile_search fieldset{ border: none; padding: 0; margin: 0;}
	.mobile_top_row .mobile_search input{ border: none; padding: 0; appearance: none; font-family: 'Poppins', sans-serif; width: 100%; padding: 1rem;}
	
	.mobile_top_row .mobile_search ::placeholder{ color: #757575;}
	
	.close_menu_mobile{ display: flex; height: 100%; align-items: center; padding: 0 5.5vw 0 1rem;}
	
	#topnav{ display: block; padding: 0 5.5vw;}
	#topnav > li{ height: auto; display: flex; margin: 1rem 0; justify-content: space-between; flex-flow: wrap;}
	#topnav > li:first-child{ margin-top: 2rem;}
	#topnav > li:last-child{ margin-bottom: 2rem;}
	
	#topnav > li > a{ color: #333; color: var(--main-dark-color); font-size: 1.25rem; font-weight: 600; }
	#topnav > li.active > a{ color: var(--primary2-color);}
	
	.subnav_toggle .subnav_close{ display: none;}
	.subnav_toggle.open .subnav_close{ display: block;}
	.subnav_toggle.open .subnav_open{ display: none;}
	.drop_level2_wrapper{ padding: 0.5rem 1.5rem; width: 100%;}
	.drop_level2_wrapper ul{ list-style: none; margin: 0; padding: 0;}
	.drop_level2_wrapper ul li{ padding: 0.5rem 0; position: relative;}
	.drop_level2_wrapper ul li a{ display: inline-block; font-size: 1rem; color: #757575; position: relative; font-weight: 400;}
	.drop_level2_wrapper ul li a:active, .drop_level2_wrapper ul li a:hover{ color: var(--primary1-color); font-weight: 600;}
	.drop_level2_wrapper ul li a:active::after, .drop_level2_wrapper ul li a:hover::after{ content:""; position: absolute; bottom: -4.12px; width: 100%; background:var(--primary2-color); height: 2.12px; left: 0;}
}

/*** Tablet and smaller ***/
@media all and (max-width: 767px){
}

@media all and (max-width: 640px){
	.header_top{ display: none;}
	
	#topnav{ overflow-x: hidden; overflow-y: auto;}
}


/* Level 2 and 3 Mobile view styling */
.open_nav #topnav .drop_level2_wrapper_mobile ul {
    margin-left: 1.5rem;
}
@media (max-width: 980px){
	.drop_level2_wrapper ul li {
		padding: 0.5rem 0 0 0;
		position: relative;
	}
}