/**
 * Inhaltsverzeichnis
 *	1. Header
 *	2. Button Row
 *	3. Navigation
 *	4. Logo
 *
 */


/* ================================================== *
 * 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 {
	flex-grow: 1;
}

	/* #==== Mobile ====# */
@media screen and (width <= 600px) {
	#cvh--site-nav-button-row cvh-searchbar::part(form) {
		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)));
		transition: var(--cvh-transition-normal);
		transition-property: transform;
	}

	#cvh--site-nav-button-row cvh-searchbar[state="closed"]::part(form) {
		transform: translateY(-100%);
	}
}


/* ================================================== *
 * 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;
}


/* ================================================== *
 * 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);
}