/* ══════════════════════════════════════════════════ *
 * MARK: Topbar
 * ────────────────────────────────────────────────── */
#cvh--site-topbar {
	font-size: var(--text-s, 16px);

	& > div.cvh--section-inner {
		display: flex;
		justify-content: center;
		align-items: center;

		padding-block: 5px;

		& p {
			text-align: center;
			text-wrap: pretty;
			text-wrap: balance;
		}
	}

	@media screen and ( width <= 600px ) {
		display: none;
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: 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: Layout
 * ────────────────────────────────────────────────── */
header#cvh--site-header .cvh--navigation__layout {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--cvh-space-s, 2.5rem);

	@media screen and ( width <= 600px ) {
		align-self: flex-end;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		gap: var(--cvh-space-xs, 1.5rem);

		& #cvh--site-nav-button-row :is(button, a) > span[data-element="text"] {
			display: none;
		}
	}
}


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

	margin-right: -10px;


	/* #═#═#═#═#═# Buttons #═#═#═#═#═# */
	& :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([icons-only], [data-layout-size="mobile"]) [data-element="icon"] {
		font-size: var(--text-l);
	}

	&:where([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);
	}

	&:where([icons-only]) [data-element="text"],
	&:where([data-layout-size="mobile"]) [data-element="text"] {
		display: none;
	}

	@media screen and ( width <= 420px ) {
		display: none;
	}
}

/* #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));
} */
	/* #═#═#═#═#═# 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: Navigation
 * ────────────────────────────────────────────────── */
	/* #════ Layouts ════# */
#cvh--site-navigation {
	flex-wrap: nowrap;
	--cvh-col-gap: var(--cvh-col-gap-l);
	align-items: stretch;

	/* 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: 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;

	max-height: 15rem;
}

#cvh--site-logo-ctn > a {
	padding-block: calc(var(--logo-pad-y) + 5px);
	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);
}