/* SWSCT RMP Header CSS
 * Anything to do with the RMP header and menu.
 * This requires CSS for logged in and out states, logged in CSS contains .logged-in class
 * This ties in with the export of the current SWSCT domain
 *************************************************************/ 
 
/* This helps animate our header area */
@keyframes SWSCTHeaderFade {
	
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	30% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}

}
 
/* This is header bar wrapper and helps position the logo */
#responsive-menu-pro-header {
	padding: 0 2% !important;
} 

/* This is header bar wrapper and helps position the logo */
#responsive-menu-pro-header #responsive-menu-pro-header-bar-logo {
	line-height: 100px !important;
	padding: 10px 0;
} 

/* This is for the menu and keeps a parents menu item hover colour active when selecting a child */
#responsive-menu-pro-wrapper ul li:hover > a { 
	background: rgba(41, 149, 204, 1); 
	color: #fff; 
}
 
/* Positions the mobile button */
.logged-in #responsive-menu-pro-button {
	margin-right: 3px !important;
	top: 115px !important;
}
#responsive-menu-pro-button {
	margin-right: 3px !important;
}

/* Corrections when using elementor */
.elementor-editor-active #responsive-menu-pro-container { 
	top: 50px !important; 
}

/* Remove the sticky header when using elementor */
.elementor-editor-active .swsct-rmp-header,
.elementor-editor-active .swsct-rmp-button,
.elementor-editor-active .swsct-rmp-menu {
	display: none !important;
}

/** Sticky mode classes **/

/* This stops the page from jumping up when the sticky header mode activates, added to the top bar. */
.swsct-rmp-jumpfix { 
	margin-bottom: 120px;
}
 
/* Added to RMP main header bar div, this fixes the header bar for the logged in state */
.logged-in .swsct-rmp-header { 
	top: 32px !important; 
}
.swsct-rmp-header { 
	position: fixed !important; 
	top: 0 !important; 
	height: 80px !important; 
	overflow-y: hidden;
	transition: height 2s;
	opacity: 0;
	animation: SWSCTHeaderFade 2s forwards;
	max-height: 100px;
}

/* This sets the line height of the header bar items to be the same height as the sticky header */
.swsct-rmp-header .responsive-menu-pro-header-bar-item {
	line-height: 80px !important;
}

/* This reduces the size of the logo in sticky header mode */
.swsct-rmp-header .responsive-menu-pro-header-bar-item img {
	height: 60px !important;
}

/* Change the buttons position and top values in sticky header mode */
.logged-in .swsct-rmp-button #responsive-menu-pro-button {
	position: fixed;
	top: 45px !important;
}
.swsct-rmp-button #responsive-menu-pro-button {
	position: fixed;
	top: 12.5px;
	opacity: 0;
	animation: SWSCTHeaderFade 2s forwards; 
}

/* This shrinks our links when in sticky header mode. */
.swsct-rmp-menu #responsive-menu-pro li a {
	height: 60px; 
	line-height: 60px; 
}

/* This corrects the submenu position when the header changes state */
.swsct-rmp-menu .responsive-menu-pro-submenu { 
	top: 60px !important; 
}

/* This corrects the level 2 submenus position when the header changes state */
.swsct-rmp-menu .responsive-menu-pro-submenu .responsive-menu-pro-submenu-depth-2 { 
	top: 0 !important; 
}

/* Min-width queries */

@media only screen and (min-width: 1041px) {
	
	/* SWSCT Header
	 *************************************************************/
	
	/* This makes sure the menu is in the correct position for screens above this width ( Anything lower would be the mobile menu ). 
	 * I have had to create a special logged-out class for when the user is logged out to make it work properly.
	 * Adding !important to it meant I couldn't set the logged in state correctly or the sticky header mode.
	 * Adding .swsct-logged-out to the body class when you are logged out seems to fix it without the need of !important. */
	.logged-in #responsive-menu-pro-container { 
		top: 82px;
		padding: 10px 2%; 
		font-weight: bold; 		
	}
	.swsct-logged-out #responsive-menu-pro-container { 
		padding: 10px 2%; 
		font-weight: bold; 
		top: 50px; 
	} 
	
	/* Sticky mode */
 
	/* This animates, shrinks and fixes our menu to the top of the page when the user scrolls down. */
	.logged-in .swsct-rmp-menu { 
		top: 32px !important; 
	}
	.swsct-rmp-menu { 
		position: fixed !important; 
		top: 0 !important; 
		height: 80px !important;
		opacity: 0;
		animation: SWSCTHeaderFade 3s forwards; 
	}
	
}


/* Max-width queries */


@media only screen and (max-width: 1040px) {
	
	/* SWSCT Header
	 *************************************************************/
	
	/* This will resize the logo as it looks a bit big at this screen size */
	#responsive-menu-pro-header #responsive-menu-pro-header-bar-logo img {
		height: 80px !important;
	}
	
}


@media only screen and (max-width: 782px) {
	
	/* SWSCT Header
	 * We make some alterations here because WP changes the height of the admin bar @ 782px
	 *************************************************************/
	
	/* Add 14px margin to the top of the header bar in sticky mode */
	.logged-in .swsct-rmp-header { 
		margin-top: 14px !important; 
	}
	
	/* Reposition the RMP button in normal mode */
	.logged-in #responsive-menu-pro-button {
		top: 129px !important;
	}

	/* Reposition the RMP button in sticky mode */
	.logged-in .swsct-rmp-button #responsive-menu-pro-button {
		position: fixed;
		top: 59px !important;
	}
	
}