/* CUSTOMIZER CLASSES (HEADER) */

/*
These classes are used in conjunction with get_theme_mod() in various template files
to override default CSS properties, based on settings in the WordPress Customizer.
Customizer settings that have variable values are set in functions/customizer.php.
*/


/* Header Menu Handling */

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

	body:not(.locking_header) #header.menu_align_top #primary_navigation,
	body.locking_header:not(.scrolled) #header.menu_align_top #primary_navigation
	{
		top: 0;
		bottom: auto;
	}

	body:not(.locking_header) #header.menu_align_middle #primary_navigation,
	body.locking_header:not(.scrolled) #header.menu_align_middle #primary_navigation
	{
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	body:not(.locking_header) #header.menu_align_bottom #primary_navigation,
	body.locking_header:not(.scrolled) #header.menu_align_bottom #primary_navigation
	{
		top: auto;
		bottom: 0;
	}

	body:not(.locking_header) #header.menu_align_below #primary_navigation,
	body.locking_header:not(.scrolled) #header.menu_align_below #primary_navigation
	{
		top: calc(100% - 2.375rem); /* Should be 2.5em but that introduces slight space at some sizes */
		right: 0; bottom: auto; left: 0;
		text-align: center;
	}

	body:not(.locking_header) #header.menu_align_below #logo.background_image.bottom,
	body.locking_header:not(.scrolled) #header.menu_align_below #logo.background_image.bottom
	{
		bottom: calc(5px + 2.4rem);
	}

	body:not(.locking_header) #header.menu_align_full #primary_navigation,
	body.locking_header:not(.scrolled) #header.menu_align_full #primary_navigation
	{
		top: 0;
		bottom: 0;
	}

}


/* Header Navigation Rounded Corners */

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

	body.header_navigation_rounded_corners #header .menu > li {
		border-radius: 4px;
		margin-left: 2px;
	}

	body.header_navigation_rounded_corners #header .menu > li > a {
		border-radius: 4px;
		overflow: hidden;
	}

	body.header_navigation_rounded_corners #header .menu > li.menu-item-has-children > a {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	/* Using .menu.depth_2 assures tertiary (and deeper) menus will display! */
	body.header_navigation_rounded_corners #header .menu.depth_2 > li.menu-item-has-children > ul {
		border-radius: 4px;
		border-top-left-radius: 0;
		overflow: hidden;
	}

	body.header_navigation_rounded_corners #header .menu.depth_2 > li.menu-item-has-children:last-child > ul {
		border-top-left-radius: 4px;
		border-top-right-radius: 0;
	}

}


/* Header Text Hover Underline */

#header.header_text_hover_underline a:hover, #header.header_text_hover_underline a:focus {
	text-decoration: underline;
}


/* Logo Flush Left */

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

	body.logo_flush_left #header,
	body.logo_flush_left.locking_header.scrolled #header,
	body.logo_flush_left.locking_header.scrolled_alt #header
	{
		border-bottom: none;
	}

	body.logo_flush_left #header.logo_align_ #logo,
	body.logo_flush_left #header.logo_align_left #logo,
	body.logo_flush_left.locking_header.scrolled #header #logo,
	body.logo_flush_left.locking_header.scrolled_alt #logo,
	body.logo_flush_left.locking_header.scrolled #logo.background_image
	{
		max-height: 100% !important;
		min-height: 100% !important;
		max-width: 100% !important;
		min-width: auto !important;
		left: 0 !important;
	}

}

@media screen and (max-width: 782px) {

	body.logo_flush_left #header,
	body.logo_flush_left.locking_header.scrolled #header,
	body.logo_flush_left.locking_header.scrolled_alt #header
	{
		border-bottom: none;
	}

	body.logo_flush_left #logo.background_image {
		max-height: 60px !important;
		min-height: 60px !important;
		max-width: 100% !important;
		min-width: auto !important;
		left: 0 !important;
	}

}


/* Logo Horizontal Alignment */

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

	body:not(.locking_header) #header.logo_align_center #logo,
	body.locking_header:not(.scrolled) #header.logo_align_center #logo
	{
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	#header.logo_align_center #logo.background_image {
		background-position-x: center;
	}

	#header.logo_align_center #auxiliary_navigation {
		display: none;
	}

	#header.logo_align_right #logo,
	body.locking_header #header.logo_align_right #logo,
	body.locking_header.scrolled #header.logo_align_right #logo,
	body.locking_header.scrolled_alt #header.logo_align_right #logo
	{
		right: 7.5%;
		left: auto !important;
		text-align: right;
	}

	#header.logo_align_right #logo.background_image {
		background-position-x: right;
		text-indent: 9999px;
	}

	#header.logo_align_right #primary_navigation,
	#header.logo_align_right #auxiliary_navigation {
		right: auto;
		left: 7.5%;
		text-align: left;
	}

}

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

	#header.logo_align_right #logo {
		right: 10%;
	}
	
	#header.logo_align_right #primary_navigation, #header.logo_align_right #auxiliary_navigation {
		left: 10%;
	}

}
@media screen and (max-width: 782px) {

	#header.logo_align_right #logo {
		background-position-x: right !important;
		right: 1.5rem !important; left: auto !important;
	}
	
	#header.logo_align_right #nav_handle {
		right: auto !important; left: 1.5rem !important;
	}
	
	#header #nav_wrapper {
		padding: 0 !important;
	}
	
	#header.logo_align_right #primary_navigation, #header.logo_align_right #auxiliary_navigation {
		right: auto !important; left: 1.5rem !important;
	}

}


/* Logo Vertical Alignment */

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

	#logo.top {
		top: 5px;
		bottom: auto;
		background-position-y: top;
		transform: translateY(0);
	}

	#logo.middle {
		top: 50%;
		bottom: auto;
		background-position-y: center;
		transform: translateY(-50%);
	}

	body:not(.locking_header) #header.logo_align_center #logo.middle,
	body.locking_header:not(.scrolled) #header.logo_align_center #logo.middle
	{
		transform: translate(-50%, -50%);
	}

	body:not(.locking_header) #header.menu_align_below #logo.middle,
	body.locking_header:not(.scrolled) #header.menu_align_below #logo.middle
	{
		transform: translateY(calc(-50% - 1.35rem));
	}

	body:not(.locking_header) #header.menu_align_below.logo_align_center #logo.middle,
	body.locking_header:not(.scrolled) #header.menu_align_below.logo_align_center #logo.middle
	{
		transform: translate(-50%, calc(-50% - 1.35rem));
	}

	#logo.bottom {
		top: auto;
		bottom: 5px;
		background-position-y: bottom;
		transform: translateY(0);
	}

}


/* Wide Header */

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

 	body.wide-header:not(.logo_flush_left) #header.logo_align_ #logo,
 	body.wide-header:not(.logo_flush_left) #header.logo_align_left #logo,
 	body.wide-header:not(.logo_flush_left).locking_header.scrolled #header.logo_align_left #logo,
 	body.wide-header:not(.logo_flush_left).locking_header.scrolled_alt #header.logo_align_left #logo,
 	body.wide-header:not(.logo_flush_left).locking_header.scrolled #header.logo_align_ #logo,
 	body.wide-header:not(.logo_flush_left).locking_header.scrolled_alt #header.logo_align_ #logo
 	{ right: auto !important; left: 3rem !important; }
 	
 	body.wide-header #nav_handle,
 	body.wide-header #header:not(.menu_align_mobile) #primary_navigation,
 	body.wide-header #header:not(.menu_align_mobile) #auxiliary_navigation
 	{ right: calc(3rem - 7px) !important; left: auto !important; }

 	body.wide-header #header.logo_align_right #logo,
 	body.wide-header.locking_header.scrolled #header.logo_align_right #logo,
 	body.wide-header.locking_header.scrolled_alt #header.logo_align_right #logo
 	{ right: 3rem !important; left: auto !important; }
 	
  	body.wide-header #header.logo_align_right #nav_handle
 	{ right: auto !important; left: calc(3rem - 7px) !important; }

	body.wide-header #header:not(.menu_align_mobile).logo_align_right #primary_navigation,
 	body.wide-header #header:not(.menu_align_mobile).logo_align_right #auxiliary_navigation
 	{ right: auto !important; left: 0 !important; }

}