/*------------------------------------------------------------------------------*/
/* Site Header
/*------------------------------------------------------------------------------*/

.SiteHeader {
	box-shadow: var(--box-shadow);
}

.StickyHeader {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*------------------------------------------------------------------------------*/
/* Header Containers & Visibility
/*------------------------------------------------------------------------------*/

.HeaderDesktop {
	padding-block: 1rem;
}

.HeaderMobile {
	padding-block: .5rem;
}

@media screen and (min-width: 1025px) {
	.HeaderMobile {
		display: none !important;
	}
}

@media screen and (max-width: 1024px) {
	.HeaderDesktop {
		display: none !important;
	}
}

/*------------------------------------------------------------------------------*/
/* Header Columns
/*------------------------------------------------------------------------------*/

.HeaderGrid {
	display: grid;
	gap: 0 1.5rem;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas: 'left center right';
}

[class*="HeaderColumn-"] {
	align-items: center;
	display: flex;
	gap: 0 1.5rem;
}

.HeaderColumn-Left {
	grid-area: left;
}

.HeaderColumn-Center {
	grid-area: center;
	justify-content: center;
}

.HeaderColumn-Right {
	grid-area: right;
	justify-content: flex-end;
}

/*------------------------------------------------------------------------------*/
/* Header With Logo Centered
/*------------------------------------------------------------------------------*/

.HeaderLogoCentered {
	--logo-pos: center;
	grid-template-columns: 1fr minmax(0, auto) 1fr;
}

/*------------------------------------------------------------------------------*/
/* Header With Navigation Centered
/*------------------------------------------------------------------------------*/

.HeaderNavCentered {
	grid-template-columns: auto 1fr auto;
}

.HeaderNavCenteredMobile {
	grid-template-columns: minmax(0, auto) 1fr;
}

/*------------------------------------------------------------------------------*/
/* Header With Full Navigation Bar
/*------------------------------------------------------------------------------*/

.HeaderWithNavbar {
	box-shadow: none;
	position: relative;
}

.HeaderWithNavbar ~ .MobileHeaderSearch {
	background-color: var(--background-color);
	border-bottom: 1px solid var(--border-color);
	padding: 1rem var(--container-page-margin);
}

.SearchPage .HeaderWithNavbar ~ .MobileHeaderSearch {
	display: none !important;
}

/* Navigation Bar */

.NavigationBar {
	align-items: center;
	background-color: var(--background-color);
	box-shadow: var(--box-shadow);
	display: flex;
	justify-content: center;
	padding: 1rem 1.5rem;
}

.StickyNavbar {
	position: sticky;
	top: 0;
	z-index: 100;
}

@media screen and (min-width: 1025px) {
	.HeaderWithNavbar .HeaderMobile {
		display: none !important;
	}

	.HeaderWithNavbar ~ .MobileHeaderSearch {
		display: none !important;
	}
}

@media screen and (max-width: 1024px) {
	.HeaderWithNavbar {
		position: sticky;
		top: 0;
		transition-duration: var(--transition-fast);
		z-index: 100;
	}

	.OffsetTop .HeaderWithNavbar,
	.SearchPage .HeaderWithNavbar {
		box-shadow: var(--box-shadow);
	}

	.HeaderWithNavbar ~ .NavigationBar {
		display: none !important;
	}
}

/*------------------------------------------------------------------------------*/
/* Header With Side Column
/*------------------------------------------------------------------------------*/

.SiteColumnsHeader {
	box-shadow: none;
	border-bottom: 1px solid var(--border-color-subtle);
	position: sticky;
	top: 0;
	z-index: 99;
}

.SiteColumnsHeader .HeaderDesktop {
	padding-block: 2rem;
}

.SiteColumnHeaderGrid {
	grid-template-columns: auto;
}

.SiteColumnsHeader ~ .MobileHeaderSearch {
	background-color: var(--background-color);
	border-bottom: 1px solid var(--border-color);
	padding: 1rem var(--container-page-margin);
}

@media screen and (min-width: 1241px) {
	.SiteColumnsHeader .HeaderMobile {
		display: none !important;
	}

	.SiteColumnsHeader ~ .MobileHeaderSearch {
		display: none !important;
	}
}

@media screen and (max-width: 1240px) {
	.SiteColumnsHeader {
		border: 0;
		transition-duration: var(--transition-fast);
		z-index: 100;
	}

	.OffsetTop .SiteColumnsHeader {
		box-shadow: var(--box-shadow);
	}

	.SiteColumnsHeader .HeaderDesktop {
		display: none !important;
	}

	.SiteColumnsHeader .HeaderMobile {
		display: block !important;
	}
}