/* DOM ELEMENTS */

#header {
	background-color: #2980b9;
	background-position: left center;
	background-repeat: repeat;
	background-size: cover;
	border-bottom: 1px solid transparent; /* Fixes slight jump in logo scaling on scroll with locking header in some browsers */
	color: #ffffff;
	display: block;
	height: 120px;
	margin: 0 auto;
	max-width: 1920px;
	position: absolute; top: 0; right: 0; bottom: auto; left: 0;
	width: 100%;
	z-index: 4;
}

body.locking_header #header {
	position: fixed;
}

body.admin-bar #header { top: 32px; }

/* Don't use box-shadow! It adds side shadows on .body_margin */
body.locking_header.scrolled #header {
	border-bottom: 1px solid rgba(0,0,0,0.075);
	height: 60px;
}
body.locking_header.scrolled_alt #header {
	border-bottom: 1px solid rgba(0,0,0,0.075);
}

	#header * {
		color: #ffffff;
	}

		#header svg {
			display: block;
			height: 100%;
			width: 100%;
		}

			#header svg .svg_stroke { stroke: #ffffff; }
			#header svg .svg_fill { fill: #ffffff; }

	#logo {
		height: auto;
		line-height: 2em;
		margin: 0;
		position: absolute; top: 50%; right: auto; bottom: auto; left: 6rem;
		max-height: 80%;
		max-width: 50%;
		min-height: 1.5em;
		transform: translateY(-50%);
		width: 100%;
		z-index: 1;
	}

	#logo.background_image {
		background: transparent url('') left center no-repeat;
		background-size: contain;
		height: 100%;
		line-height: 100%;
		overflow: hidden;
		text-indent: -9999px;
	}
	
	body.locking_header.scrolled #logo.background_image { max-height: 80%; max-width: 30%; }
	
		#logo.background_image .site-title {
			display: none;
		}

	#logo.no_background_image { }

		#logo.no_background_image .site-title {
			font-size: 200%;
			font-weight: 600;
			line-height: 1em;
			margin: 0;
		}

		body.locking_header.scrolled #logo.no_background_image .site-title {
			font-size: 125%;
		}

		#logo a {
			display: block;
			margin: 0;
			padding: 0;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		}

/* Fills white gap sometimes seen between #header and #page when scrolling with a color set in Customizer */
#header_underlay {
	background: transparent;
	display: block;
	height: 400px;
	margin-top: -400px;
	position: relative;
	width: 100%;
}


/* CSS3 MEDIA QUERIES */

/* NON-PHONES ONLY (content area 783 or greater) */
@media screen and (min-width: 783px) {

	body.narrow_content_margin #logo { left: 3rem; }
	body:not(.narrow_content_margin) #logo { left: 6rem; }

}


/* LARGE SCREENS (content area over 1600 pixels) */
@media screen and (min-width: 1600px) {

	#header { height: 180px; }

}


/* SMALLER COMPUTERS (content area under 1200 pixels) */
@media screen and (max-width: 1200px) {

	#header {
		font-size: 90%;
		height: 110px;
	}

	/* This selector formatting is to work around an issue with the Theme Check plugin */
	div[id="wpadminbar"] { overflow: hidden !important; }
	
}


/* TABLETS (content area under 1024 pixels) */
@media screen and (max-width: 1024px) {

	#header { height: 80px; }
	
}
@media screen and (max-width: 1024px) and (min-width: 783px) {

	body:not(.narrow_content_margin) #logo { left: 4rem; }

}

/* PHONES (content area under 782 pixels) */
@media screen and (max-width: 782px) {

	body.admin-bar #header { top: 45px; }

	#header, body.scrolled #header, body.scrolled_alt #header {
		font-size: 100%;
		height: 60px;
		right: 0; left: 0;
		width: 100%;
	}

	#logo, #logo.background_image,
	body.scrolled #logo,
	body.scrolled #logo.background_image,
	body.scrolled_alt #logo,
	body.scrolled_alt #logo.background_image,
	body.narrow_content_margin #logo,
	body:not(.narrow_content_margin) #logo
	{
		background-position: left center !important;
		max-height: 40px !important;
		max-width: 240px !important;
		top: 25px; right: auto; bottom: auto; left: 15px;
		transform: translateY(-50%);
		width: calc(100% - 90px) !important;
	}

	#logo.no_background_image .site-title {
		font-size: 125%;
		white-space: nowrap;
	}

	/* This selector formatting is to work around an issue with the Theme Check plugin */
	div[id="wpadminbar"] { position: fixed !important; }
	
		/* Too many items cause profile icon to drop below bar, covering page elements */
		#wp-admin-bar-root-default li:nth-of-type(n+6) { display: none !important; }
		/* We're also going to specifically exclude a few that aren't needed for mobile */
		#wp-admin-bar-customize, #wp-admin-bar-wpseo-menu { display: none !important; }

}


/* MEDIUM PHONES (content area under 640 pixels) */
/*
@media screen and (max-width: 640px) {

}
*/


/* SMALL PHONES (content area under 480 pixels) */
/*
@media screen and (max-width: 480px) {

}
*/