/**
 * @author Valentin Alisch, Off Office <hallo@valentinalisch.de>
 * @version 1.0
 *
 * Rettberg Module: Header
 */

#header-wrap {
	--header-push: calc( 58px * 0.5 );

	position: fixed;
	bottom: 0;
	height: var( --header-height );
	width: calc( 100% - var( --outer-spacing ) * 2 );
	overflow: visible;

	z-index: 100;
}

#header {
	background: var( --header-background );
	padding: 0 calc( var( --header-height ) * 0.2 );
	border-top-left-radius: var( --header-radius );
	border-top-right-radius: var( --header-radius );

	-webkit-backdrop-filter: blur( var( --header-blur ) );
	backdrop-filter: blur( var( --header-blur ) );

	transition: background 0.25s ease-in-out;
}

#header.is-open {
	background: var( --header-background--active );
}



#header__functions {
	height: var( --header-height );
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-direction: row-reverse;
}



#header__menu-trigger {
	flex: 1;
	text-align: right;
}

	#header__menu-trigger a {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}

	#header__menu-trigger #menu-open {
		height: 3px;
		width: auto;
	}

	#header__menu-trigger #menu-close {
		height: 2px;
		width: auto;
	}

	#header.is-open #menu-open,
	#header:not( .is-open ) #menu-close {
		display: none;
	}



#header__branding {
	max-width: 175px;
}

	#header__branding a {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#header__branding img {
		display: block;
	}



#header__cart {
	flex: 1;
}

	#header__cart a {
		--link-color: var( --highlight-color );
		--hover-color: var( --highlight-color );

		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#header__cart #cart-info {
		white-space: nowrap;
		font-size: 0.9em;
	}



#header__navigation {
	padding-bottom: calc( var( --header-radius ) * 1.5 );
	padding-top: calc( var( --header-radius ) * 1 );
	display: none;
}

#header__navigation-inner {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
}

#navigation-main {
	text-align: right;
}

#navigation-language {
	font-size: 0.95em;
	text-transform: capitalize;
}

#navigation-language .menu {
	display: flex;
}

#navigation-language a:hover,
#navigation-language a:active,
#navigation-language a:hover .lang-item,
#navigation-language a:active .lang-item {
	color: var( --text-color );
}

.lang-item:not( :last-child ) {
	margin-right: var( --spacing--tiny );
}

.lang-item:not( .current-lang ) {
	color: var( --gray );
}



/* ------------------------ */
@media ( max-width: 899px ) {

	#header {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: var( --header-background--active );
	}

	#header__functions a > * {
		margin-bottom: var( --header-push );
	}

	#cart-label {
		display: none;
	}
}

@media ( min-width: 900px ) {

	#header-wrap {
		position: -webkit-sticky;
		position: -moz-sticky;
		position: sticky;
		bottom: auto;
		top: 0;
		width: 100%;
	}

	#header {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: var( --header-radius );
		border-bottom-right-radius: var( --header-radius );
		padding: 0 calc( var( --header-height ) * 0.5 );
	}

	#header__functions {
		flex-direction: row;
	}

	#header__menu-trigger {
		text-align: left;
	}

	#header__menu-trigger a {
		display: inline-flex;
		align-items: flex-start;
	}

	#header__cart {
		text-align: right;
	}

	#header__cart a {
		display: inline-flex;
		align-items: flex-end;
	}

	#header__navigation {
		padding-bottom: calc( var( --header-radius ) * 1 );
		padding-top: calc( var( --header-radius ) * 0.25 );
	}

	#header__navigation-inner {
		flex-direction: row;
	}

	#navigation-main {
		text-align: left;
	}
}