/***
 * Header
 */

header {
	.site-title a {
		color: inherit;
		text-decoration: none;
	}
}

/* applies to _expanded and _minimal */
header.site-header {
	--buttonHeight: 2.7rem;
	--buttonMarginBlock: 1rem;
	--buttonBorderWidth: 3px;
	--extraImageBottomPad: 3.5rem;
}

header.site-header div.content-components.content-components {
	display: flex;
	flex-direction: column;
	gap: var(--buttonMarginBlock);
	margin-bottom: var(--buttonMarginBlock);
	align-items: center;

	@media ( min-width: 660px ) {
		display: flex;
		flex-direction: row;
		gap: 1em;
		justify-content: space-between;
		align-items: end;
		width: 100%;
	}

	@media ( min-width: 1024px ) {
		display: contents;
	}
}

header.site-header {
	.tagline {
		padding: .4em 0 1em .2em;
	}
}

header.site-header .wrapper {
	@media ( min-width: 550px ) {
		display: block;
		width: 100%;
	}
	@media (min-width: 550px) and ( max-width: 1024px ) {
		padding-inline: 4%;
		box-sizing: border-box;
	}
}

:where(body.header-size-expanded,body.header-size-moderate) header.site-header {
	--sitenav-hover-background: #dfdfdf;
	position: relative;
	background-color: #f2f2f2;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;

	@media ( min-width: 550px ) {
		align-items: stretch;
	}
}

:where(body.header-size-expanded,body.header-size-moderate) header.site-header ._background {
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	inset: 0;
	inset-block-end: calc(var(--buttonHeight) + var(--buttonMarginBlock) + var(--buttonBorderWidth) + var(--extraImageBottomPad));
	z-index: 0;

	@media ( min-width: 550px ) {
		inset-block-end: calc(var(--buttonMarginBlock) * 2 + var(--buttonHeight));
	}
	@media ( min-width: 1024px ) {
		/* @TODO this is just a visual approximation, it's not actually built from the fluid values of other elements */
		inset-block-end: 6.75em;
	}
}


:where(body.header-size-expanded,body.header-size-moderate) header.site-header .header-text {
	position: relative;
	text-align: center;
	max-width: max-content;

	& a {
		color: inherit;
		text-decoration: none;
	}

	@media ( min-width: 660px) {
		text-align: left;
		min-width: min(400px, 50vw);
		width: max-content;
		max-width: 500px;
	}

	@media ( min-width: 1024px ) {
		margin-bottom: 1em;
	}
}

:where(body.header-size-expanded,body.header-size-moderate) header.site-header h1 {
	background: var(--colorGarnet);
	color: inherit;
	font-weight: 400;
	padding: .6em 1.2rem;
	margin: 0;
	text-wrap: balance;
	font-size: 30px;

	@media ( min-width: 660px ) {
		padding: .8em 1.6rem;
		font-size: 36px;
	}

	@media ( min-width: 1024px ) {
		padding: .85em 2rem;
		font-size: 42px;
	}

	@media ( min-width: 1400px) {
		font-size: 44px;
	}
}

:where(body.header-size-expanded,body.header-size-moderate) header.site-header .tagline {
	background: var(--colorGarnet_dark);
	padding: .75em 1.25rem;
	font-size: 14px;
	text-wrap: balance;
	color: #f5f5f5;
}


body.header-size-expanded header.site-header {
	height: 400px;
	@media ( min-width: 1200px ) {
		height: 580px;
	}
}

body.header-size-moderate header.site-header {
	height: 360px;
	@media ( min-width: 1200px ) {
		height: 400px;
	}
}


body.header-size-minimal header.site-header {
	/* --sitenav-hover-background: transparent; */

	h1 {
		font-size: 36px;
	}

	.site-nav ul {
		background: hsl(0 0% 96%);
	}

	@media ( min-width: 660px ) {
		h1 {
			font-size: 40px;
		}
	}
	@media ( min-width: 1024px ) {
		h1 {
			font-size: 44px;
			margin-top: 1em;
		}
	}
}

@media print {
	header {
		background: none !important;
		margin: 0;
		padding: 0;
		width: 100%
	}

	header h1 {
		color: #111;
		text-shadow: none;
		margin: 10px 0;
		font-size: 1.7em;
		border-bottom-width: 1px;
		padding-bottom: 10px;
		width: 100%;
		border-style: dotted;
		border-color: gray;
	}

	header h1:before {
		content: 'Bates: '
	}
}