/* 
	Mega menu CSS 
	Based on Adobe's accessible mega menu
	By Sebastien Marchal / Brock University
*/

/*
	For reference the full menu path is:
	div#main-menu-container > div.menu-inner-container > div.main-menu-parent > div.main-menu > ul.menu
*/

/* ----------------------------------------------
   ----------------------------------------------
   Default
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-width: 841px) {

	/* Mobile toggle */
	#mobile-toggle { display: none; }
	
	/* mega menu list */
	#main-menu-container {
		margin: 0 auto;
		width: 100%; height: auto;
		clear: both;
		display: block;
		font-size: 1em;
		background: #cc0000; /* Change this to force the background colour of the menu. */
		}
		#main-menu-container .menu-inner-container {
			margin: 0 auto;
			display: block;
			}
			#main-menu-container .menu-inner-container .main-menu-parent {
				display: block;
				width: 100%;
				}
				#main-menu-container .menu-inner-container .main-menu-parent .main-menu ul.menu {
				    display: inline-block;
				    position: relative;
				    list-style: none;
				    margin: 0;
				    padding: 0;
				    z-index: 1000; /* The carousel is at 100, we need to be higher. */
				    font-family: "Bliss Light", "Trebuchet MS", sans-serif;
				    font-weight: 200;
				    width: 100%;
					}
		
	/* STICKY MENU
	-------------------------------------------------------------- */
	#main-menu-container.sticky {
		background: #cc0000;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 900;
		animation: slidein .3s ease-out 1;
		}
		#main-menu-container.sticky .sticky-logo {
			position: absolute;
			top: 0; left: 30px;
			display: block;
			width: 75px; height: 100%; max-height: 55px;
			background: #cc0000 url('../images/brocku-logo-rgb-small.svg') no-repeat center center;
			background-size: 75px 20px;
			animation: fadein .3s ease-out 1;
			}
		
	@keyframes slidein {
		0% { top: -5px; }
		100% { top: 0; }
	}
	
	@keyframes fadein {
		0% { opacity: 0; }
		100% { opacity: 1; }
	}
	
	@keyframes fadeout {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}
	
	@media only screen 
	and (max-width : 1280px) {
		
		#main-menu-container.sticky .sticky-logo { display: none; }
		
	}
	
	/* IE: sticky isn't supported until edge 17+ so we must hide the logo for all IE users */
	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #main-menu-container.sticky .sticky-logo { display: none; }  /* IE10+ CSS */ }	
	@supports (-ms-accelerator:true) { #main-menu-container.sticky .sticky-logo { display: none; } /* IE Edge 12+ CSS */ }
	
	
	
	/* ADJUSTMENTS TO APPLY TO ALL LINKS
	-------------------------------------------------------------- */
	
	#main-menu-container .menu .menu-item a { color: #fff; text-decoration: none; } /* Sets the colour of top level links */
	#main-menu-container .menu .menu-item a:hover { color: #fff; background: #ac0000; }
	#main-menu-container .menu .menu-item a:focus { color: #fff; background: #8c0000 !important; outline: none; }
	#main-menu-container .menu .sub-menu .menu-item a { color: #fff; text-decoration: none; line-height: 120%; }
	
		/* External Link indicator */
		#main-menu-container .menu .menu-item a[target="_blank"]:after {
			content: "\f08e";
			display: inline-block;
			font-family: "Font Awesome 5 Pro";
			font-style: normal;
			font-weight: 300;
			line-height: 1;
			font-size: 70%;
			margin-left: 5px;
			}
		/* second level chevron indicator */
		#main-menu-container .menu .menu-item-has-children > a:after {
			content: "\f107" !important;
			display: inline-block;
			font-family: "Font Awesome 5 Pro";
			font-style: normal;
			font-weight: 300;
			line-height: 1;
			font-size: 90%;
			margin-left: 5px;
			}
			/* third level indicator */
			#main-menu-container .menu .menu-item-has-children .menu-item-has-children > a:after { 
				content: "" !important;
				font-size: 70%;
				}
		
		#main-menu-container .menu .menu-item-has-children.nodrop > a:after { display: none !important; }
	
	
	/* LEVEL 1 MENU
	-------------------------------------------------------------- */
	
	/* first link - home icon */
	#main-menu-container .menu > .menu-item.home > a:before {
		content: "\f015" !important;
		display: inline-block;
		font-family: "Font Awesome 5 Pro";
		font-style: normal;
		font-size: 1em !important;
		font-weight: 900;
		line-height: 1;
		font-size: 90%;
		margin-right: 2px;
		}
	/* Last link - contact icon */
	#main-menu-container .main-menu ul li.contact {
		float: right;
		}
		#main-menu-container .menu > li.contact > a:after {
			content: "\f0e0" !important;
			display: inline-block;
			font-family: "Font Awesome 5 Pro";
			font-style: normal;
			font-size: 1em !important;
			font-weight: 900;
			line-height: 1;
			font-size: 100%;
			margin-left: 10px;
			}
	
	/* a top level navigation item in the mega menu */
	#main-menu-container .menu > .menu-item {
	    list-style: none;
	    display: inline-block;
	    padding: 0;
	    margin: 0;
	    /* margin-right: -4px; remove the extra space */
	    float: left;
		}
	
	/* first descendant link within a top level navigation item */
	#main-menu-container .menu > .menu-item > a {
	    position: relative;
	    display: inline-block;
	    padding: 1em .6em 0 .6em;
		border-right: none;
		-webkit-transition: background-color .05s ease-out;
		   -moz-transition: background-color .05s ease-out;
			-ms-transition: background-color .05s ease-out;
		     -o-transition: background-color .05s ease-out;
			 	transition: background-color .05s ease-out;
		}
		#main-menu-container .menu > .menu-item:first-child > a { border-left: none; }
		#main-menu-container .menu > .menu-item:last-child > a  { border-right: none; }
		
		/* if the last menu item has children, we re-apply the border */
		#main-menu-container .menu > .menu-item-has-children.menu-item:last-child:hover > a  { border-right: none; }
	
	/* focus/open states of first descendant link within a top level navigation item */
	#main-menu-container .menu > .menu-item > a:focus,
	#main-menu-container .menu > .menu-item > a:hover,
	#main-menu-container .menu > .menu-item > a.open {
	    color: #fff;
		}
	
	/* open state of first descendant link within a top level navigation item */
	#main-menu-container .menu > .menu-item > a.open {
	    background-color: #ac0000;
	    border-bottom: none;
		}
	
	/* Current Menu Item */
	#main-menu-container .main-menu ul li.current-menu-item > a,
	#main-menu-container .main-menu ul li.current-menu-ancestor > a,
	#main-menu-container .main-menu ul li.current-menu-parent > a {
		background-color: #ac0000;
		}
	
	/* Optionally disable the highlighting of a current menu item, via a class */
	#main-menu-container .main-menu ul li.current-menu-item.mute > a,
	#main-menu-container .main-menu ul li.current-menu-ancestor.mute > a,
	#main-menu-container .main-menu ul li.current-menu-parent.mute > a {
		background-color: #cc0000;
		}
		
		#main-menu-container .main-menu ul li.current-menu-item.mute > a:hover,
		#main-menu-container .main-menu ul li.current-menu-ancestor.mute > a:hover,
		#main-menu-container .main-menu ul li.current-menu-parent.mute > a:hover { background: #ac0000; }
	
	
	/* LEVEL 2 MENU
	-------------------------------------------------------------- */
	.main-menu li.menu-item-has-children a:hover + .sub-menu { display: block; }
	
	/* level 2 override - disallow dropdowns */
	.main-menu li.menu-item-has-children.nodrop a:hover + .sub-menu.open,
	.main-menu li.menu-item-has-children.nodrop a + .sub-menu.open { display: none !important; }
	
	/* sub-navigation panel */
	.main-menu .sub-menu { display: none; }
	.main-menu .sub-menu {
	    position: absolute;
	    display: none;
	    margin: 0;
	    padding: 0;
	    border: none;
	    background-color: #ac0000;
		}
	/* sub-navigation panel open state */
	.main-menu .sub-menu.open {
	    display: block;
		}		
		/* Level 2 menu items */
		.main-menu .sub-menu > li.menu-item {
			display: block;
			width: 250px;
			/* border-top: 1px solid #fff; sub menu item separator */
			}
		/* Level 2 menu item has level 3 children */
		.main-menu .sub-menu > li.menu-item-has-children {
			/* padding-bottom: 15px; */
			}
		/* Level 2 menu items on hover */
		.main-menu .sub-menu > li.menu-item a:focus,
		.main-menu .sub-menu > li.menu-item:hover a {
			background: #8c0000 !important;
			}
		/* Level 2 menu first child hover */
		.main-menu .sub-menu > li.menu-item:first-child:hover {
			
			}
			/* Level 2 menu item individual links */
			.main-menu .sub-menu > li.menu-item:first-child > a {
				border-top: none;
				}
			/* Level 2 menu direct children - excluding 3rd level */
			.main-menu .sub-menu > li.menu-item > a {
				padding: .9em 15px .8em 15px;
				/*border-top: 1px solid #505050;*/
				display: inline-block;
				width: 100%;
				}
				
	/* Level 2 Current Menu Item */
	.main-menu .sub-menu > li.current-menu-item > a {
		background-color: #8c0000 !important;
		}
	
	
	/* LEVEL 3 MENU
	-------------------------------------------------------------- */
	
	/* list of items within sub-navigation panel */
	.sub-menu > li > ul.sub-menu {
	    display: none !important; /* change to block to re-enable */
	    vertical-align: top;
	    margin: 0 15px 0 15px;
	    padding: 0;
	    background: transparent;
		}
	
	/* Level 3 menu items */
	/* individual list item within sub-navigation panel */
	.sub-menu ul.sub-menu li {
	    display: block;
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    background: transparent;
		}
		.sub-menu ul.sub-menu li > a {
			padding: 8px 15px 8px 10px;
			display: inline-block;
			width: 100%;
			font-size: 12px;
			}
			.sub-menu ul.sub-menu li > a:before {
				content: "\f105";
				color: #484848;
				display: inline-block;
				font-family: "Font Awesome 5 Pro";
				font-style: normal;
				font-weight: 300;
				line-height: 1;
				font-size: 90%;
				margin-right: 7px;
				}
				.sub-menu ul.sub-menu li:hover > a {
					background: transparent;
					color: #fff !important;
					}
				.sub-menu ul.sub-menu li:hover > a:before {
					color: #fff;
					}

}



@media only screen 
and (min-width : 1115px) and (max-width : 1499px) {
	
	/* Level 2 menu items */
	.main-menu .sub-menu > li.menu-item {
		display: block;
		width: 275px;
		/* border-top: 1px solid #fff; sub menu item separator */
		}
	
}

@media only screen 
and (min-width : 1500px) {
	
	/* Level 2 menu items */
	.main-menu .sub-menu > li.menu-item {
		display: block;
		width: 300px;
		/* border-top: 1px solid #fff; sub menu item separator */
		}
	
}


/* Small Tablet
----------------------- */

@media only screen 
and (min-width : 841px) and (max-width: 950px) {
	
	#main-menu-container .menu > .menu-item > a { padding: 1em .5em 0 .5em; }
	
}