
/* Header */
.elv-menu {
	background-color: rgba(255, 255, 255, .65);
	color: var(--color);
	border: 1px solid var(--border-color);
	border-left: none;
	border-right: none;
	backdrop-filter: blur(15px);
}
.elv-header-docs .elv-menu:has(active-background.active) {
	/* let the backdrop-filter work with active-background too */
	background-color: transparent;
}
:where(.elv-menu) a,
:where(.elv-menu) a:visited,
:where(.elv-menu) a[href] {
	color: inherit;
}
/* Dark mode menu on home page */
.elv-header-default .elv-menu {
	background-color: #222;
	border-color: transparent;
}
.elv-header-default .elv-menu {
	color: var(--color_dark);
}
@media (prefers-color-scheme: dark) {
	.elv-menu {
		background-color: rgba(0,0,0,.65);
	}
}
.elv-header {
	position: relative;
}
.elv-hed,
.elv-nav-header {
	width: 100%;
	margin: 0 auto;
}
.elv-nav-header {
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 55em) { /* 880px */
	.elv-nav-header {
		margin-block-end: 1rem;
	}
}
.elv-nav-menu {
	padding-left: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 55em) { /* 880px */
	.elv-nav-menu.elv-nav-menu {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}
.elv-hed,
.elv-nav-header,
.elv-nav-menu {
	max-width: calc(var(--layout-max));
}
.elv-nav-menu-logo {
	display: block;
	width: 2em;
	height: 2em;
	max-height: 2em;
	background-color: #222;
	text-align: center;
	border-radius: .15em;
	padding: 0 .25em;
}
.elv-nav-menu-logo svg {
	width: 100%;
	height: 100%;
	color: #fff;
	margin: 0;
}
/* Full width logo */
.elv-header-default .elv-nav-header {
	max-width: none;
}

/* Make room for the possum */
.elv-nav-menu {
	padding-right: 1rem;
}
@media (min-width: 34.4375em) and (max-width: 74.9375em) { /* 551px–1199px */
	.elv-header-docs .elv-nav-menu {
		padding-right: 4em;
	}
}
/* Sticky */
@media (min-width: 55em) and (min-height: 37.5em) { /* 880px × 600px */
	/* Take care with the sticky toc too */
	.elv-header.elv-header-docs {
		position: sticky;
		top: 0;
		z-index: 2;
	}
	:root:has(.elv-header.elv-header-docs, :target) {
		scroll-padding-top: 3.75em; /* 60px /16 */
	}
	/* Leave extra room for tabs links */
	:root:has(.elv-header.elv-header-docs, [role="tabpanel"]:target) {
		scroll-padding-top: 6em;
	}
}

.elv-nav-menu {
	--search-bg: rgba(255,255,255,.8);
	--search-icon: rgba(0,0,0,.4);
	--search-border: rgba(0,0,0,.2);
	--search-text: #000;
	--search-radius: 1rem;
}
@media (prefers-color-scheme: dark) {
	.elv-nav-menu {
		--search-bg: rgba(0,0,0,.8);
		--search-icon: rgba(255,255,255,.4);
		--search-border: rgba(255,255,255,.2);
		--search-text: #fff;
	}
}
.elv-header-default .elv-nav-menu {
	--search-bg: rgba(0,0,0,.8);
	--search-icon: rgba(255,255,255,.4);
	--search-border: rgba(255,255,255,.2);
	--search-text: #fff;
}

.elv-nav-menu form {
	color: var(--search-text);
}
@media (min-width: 67.5em) { /* 1080px */
	.elv-nav-menu form {
		margin-inline: 2em;
	}
}
.elv-nav-menu input[type="search"] {
	font: inherit;
	font-size: 0.9375em; /* 15px /16 */
	border: 1px solid var(--search-border);
	border-radius: var(--search-radius);
	padding-inline: var(--search-radius) 2.75em;
	width: 100%;
	min-width: 9.333333333333em; /* 140px /15 */
	color: inherit;
	background-color: var(--search-bg);
}
.elv-nav-menu button {
	font-size: .75em;
	margin: 0;
	padding-inline: .75em;
	border-radius: var(--search-radius);
	border: none;
	color: var(--search-icon);
	background-color: transparent;
}
.elv-nav-menu .util-stack > button {
	place-self: end;
	height: 100%;
}

.elv-header-docs:before,
.elv-header-docs:after {
	content: " ";
	display: table;
}
.elv-header-docs:after {
	clear: both;
}

/* Header Hero */
.elv-hero {
	display: block;
	background-color: #222;
	font-family: BenchNine, system-ui, sans-serif;
	text-decoration: none;
	font-weight: 700;
}
a[href].elv-hero,
a[href].elv-hero:visited {
	color: #fff;
}
@media (prefers-color-scheme: dark) {
	.elv-hero {
		background-color: #292929;
	}
}
.elv-hero img,
.elv-hero svg {
	display: block;
	width: 40vh;
	height: 40vh;
	margin: 10vh;
	max-width: 100%;
}
.elv-hero:hover img,
.elv-hero:hover svg {
	background-color: inherit;
}
.elv-header-default .elv-hero {
	display: flex;
	justify-content: center;
	width: calc(100% + 2rem);
	margin-left: -1rem;
	margin-right: -1rem;
}
.elv-hero:hover {
	background-color: #333;
}

.elv-header-docs .elv-hero {
	float: left;
	margin-right: 0.5em;
}
.elv-header-default .elv-hero img,
.elv-header-default .elv-hero svg {
	position: relative;
	background-color: transparent;
	z-index: 1;
}
.elv-header-docs .elv-hero img,
.elv-header-docs .elv-hero svg {
	width: 3em;
	height: 3em;
}
@media (min-width: 43.75em) {
	/* 700px */
	.elv-header-docs .elv-hero {
		margin-right: 1em;
	}
	.elv-header-docs .elv-hero img,
	.elv-header-docs .elv-hero svg {
		width: 4em; /* 64px /16 */
		height: 4em; /* 64px /16 */
	}
}

/* Header Heading */
.elv-hed {
	font-size: 3.125em; /* 50px /16 */
	line-height: 1.2;
	margin-block: 1em;
	text-align: center;
	text-transform: none;
}
main h1.elv-hed:first-child {
	border: none;
}
@media (min-width: 43.75em) {
	/* 700px */
	.elv-header-docs .elv-hed {
		font-size: 2.625em; /* 42px /16 */
	}
}

/* fix: big header link fighting with versions overlay */
.elv-header-default .elv-menu {
	position: relative;
	z-index: 1;
}
.elv-header-default .elv-nav-header {
	position: relative;
	z-index: 0;
}
