/* ══════════════════════════════════════════════════ *
 * MARK: 1. Header
 * ────────────────────────────────────────────────── */
header#cvh--site-header {
	position: sticky;
	top: var(--admin-bar);
	bottom: unset;
	z-index: 995;
	margin-left: 0;
	margin-right: 0;
}

header#cvh--site-header::before {
	display: block;
	content: '\0A';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -5;

	background-color: var(--cvh-color-header, var(--shade-white));
	border-bottom: var(--cvh-border-normal) var(--primary);
	box-shadow: 0 0 30px -15px var(--base-dark);
}

	/* ~~~ Overlayed ~~~ */
header#cvh--site-header[overlay]::before {
	transition: var(--cvh-transition-normal);
	transition-property: background-color, opacity;
	opacity: 0.75;
}

:where(:root[data-scrolled~="header-change"]) header#cvh--site-header[overlay]::before {
	opacity: 0.95;
}

:where(:root[data-backdrop="true"]) header#cvh--site-header[overlay]::before {
	opacity: 1;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 2. Button Row
 * ────────────────────────────────────────────────── */
#cvh--site-nav-button-row {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	column-gap: 5px;
	position: relative;
	z-index: 100;
	padding-block: 5px;
}

#cvh--site-nav-button-row::before {
	display: block;
	content: '\0A';
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -5;
	background-color: var(--button-row-background, var(--base-ultra-dark));
}

	/* #═#═#═#═#═# Buttons #═#═#═#═#═# */
		/* ~~~ Icon ~~~ */
:where(#cvh--site-nav-button-row) :is(a, button, input[type="button"]):is(.cvh--button, [class^="cvh--button-"], [class*=" cvh--button-"]) {
	display: flex;
	gap: 5px;
	justify-content: flex-end;
	align-items: center;
	min-height: 100%;
}

:where(#cvh--site-nav-button-row):where([icons-only], [data-layout-size="mobile"]) [data-element="icon"] {
	font-size: var(--text-l);
}

:where(#cvh--site-nav-button-row[data-layout-size="mobile"]) :is(a, button, input[type="button"]).cvh--button {
	justify-content: center;
	min-width: calc(var(--text-m) * var(--cvh-line-height-m) + 20px);
}

		/* ~~~ Text ~~~ */
:where(#cvh--site-nav-button-row[icons-only]) [data-element="text"],
:where(#cvh--site-nav-button-row[data-layout-size="mobile"]) [data-element="text"] {
	display: none;
}


	/* #═#═#═#═#═# Searchbar #═#═#═#═#═# */
#cvh--site-nav-button-row .cvh--searchbar-ctn {
	flex-grow: 1;
}

		/* #════ Mobile ════# */
#cvh--site-nav-button-row[data-layout-size="mobile"] cvh-searchbar {
	&::part(collapsible) {
		position: absolute;
		top: 100%;
		inset-inline: var(--cvh-section-pad-x);
		z-index: -15;
		flex-grow: 1;
		width: calc(100% - (2 * var(--cvh-section-pad-x)));
		overflow: clip;
	}

	&::part(form) {
		transition: var(--cvh-transition-normal);
		transition-property: transform;
	}

	&[state="closed"] {
		&::part(form) {
			transform: translateY(calc(-100% - var(--cvh-space-s)));
		}

		&::part(collapsible) {
			user-select: none;
			pointer-events: none;
		}
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: 3. Navigation
 * ────────────────────────────────────────────────── */
	/* #════ Layouts ════# */
#cvh--site-navigation {
	flex-wrap: nowrap;
	--cvh-col-gap: var(--cvh-col-gap-l);
	align-items: flex-start;

	/* height: max-content; */
	height: calc(var(--max-height) - (2 * var(--cvh-space-xs)));
}

:where(:root[data-scrolled~="header-change"] header#cvh--site-header) #cvh--site-navigation {
	height: calc(var(--max-height-scrolled, var(--max-height, max-content)) - (2 * var(--cvh-space-xs)));
}

:where(:root[dom_loaded]:not([data-scrolled="false"])) #cvh--site-navigation {
	transition: var(--cvh-transition-normal);
}

	/* ~~~ Menü Container ~~~ */ 
#cvh--site-navigation cvh-menu {
	align-self: flex-end;
}

	/* ~~~ Naviagtions Zeile ~~~ */
:where(header[data-layout="left"]) #cvh--site-navigation:where([data-layout-size="desktop"]) {
	flex-direction: row-reverse;
}

:where(header[data-layout="center"]) #cvh--site-navigation:where([data-layout-size="desktop"]) {
	flex-direction: column;
	align-items: center;
}

:where(header[data-layout="right"]) #cvh--site-navigation {
	flex-direction: row;
}


	/* #════ Accessibility ════# */
.menu-item-description {
	/* Die Description sollte durch ein ARIA-Describedby Attribut erfasst werden */
	display: none;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 4. Logo 
 * ────────────────────────────────────────────────── */
:where(#cvh--site-logo-ctn) {
	--logo-pad-y: var(--cvh-space-xs);
	--logo-pad-x: var(--cvh-space-xs);
}

#cvh--site-logo-ctn {
	margin-block: calc(var(--logo-pad-y) * -1);
	margin-inline: calc(var(--logo-pad-x) * -1);

	align-self: stretch;
}

#cvh--site-logo-ctn > a {
	padding-block: var(--logo-pad-y);
	padding-inline: var(--logo-pad-x);
	height: 100%;
	display: flex;
	align-items: stretch;
}

#cvh--site-logo-ctn .cvh--logo-ctn {
	display: flex;
	align-items: var(--obj-align, stretch);
}