/*! FSB Theme - Site Header Top | Author: Frontend Soldier Borsch | Author URI: frontend-soldier-borsch.de | Author contact: borsch@frontend-soldier.de | Version: - | License: GNU General Public License v3 | License URI: www.gnu.org/licenses/gpl-3.0.html */

/*---------------------------------------------------------------------------*\
	#Site-Header
\*---------------------------------------------------------------------------*/

.site-header {
	position: relative;
    z-index: 1000;
}

    .site-header--fixed {
        position: sticky;
        top: 0;
    }


.site-header__content {
	background-color: #fff;
    color: inherit;
    border-bottom: 1px solid #c0c0c0;
    padding: 0 8rem;
}

.site-header__content_wrapper {
    position: relative;
    display: flex;
    column-gap: 4rem;
    justify-content: space-between;
    height: 100%;
}


/**
 * To center the Center, the Start and End must have 100% width so that
 * they are equal and do not grow.
 */
.site-header--content-part--center--has-content .site-header__content-part--start,
.site-header--content-part--center--has-content .site-header__content-part--end {
	width: 100%;
}

/**
 * Hide the Center without content, so that we have no additional gaps.
 */
.site-header__content-part--center {
	display: none;
}

.site-header--content-part--center--has-content .site-header__content-part--center {
	display: block;
}

.site-header__content-part_container {
	height: 100%;
}

.site-header__content-part_wrapper {
	position: relative;
	display: flex;
	align-items: center;
	column-gap: 4rem;
	height: 100%;
}

    /**
     * The Start Part contains the Branding by default.
     */
	.site-header__content-part--start .site-header__content-part_wrapper {
		justify-content: flex-start;
	}
    
    /**
     * The Center Part contains the Main Menu by default.
     */
	.site-header__content-part--center .site-header__content-part_wrapper {
		justify-content: center;
	}
    
    /**
     * The End Part contains additional elements.
     * Default: Main Menu Trigger, Language Menu, WooCommerce Mini Cart
     */
	.site-header__content-part--end .site-header__content-part_wrapper {
		justify-content: flex-end;
	}


@media screen and ( max-width: 67.5em ) {

	.site-header__content {
		padding: 0 4rem;
	}
    
    
	.site-header--content-part--center--has-content .site-header__content-part--start,
	.site-header--content-part--center--has-content .site-header__content-part--content-end {
		width: auto;
	}
    
}

@media screen and ( max-width: 22.5em ) {

	.site-header__content {
		padding: 0 2rem;
	}
    
}





/*---------------------------------------------------------------------------*\
	#Branding
\*---------------------------------------------------------------------------*/

.branding__link {
	display: block;
	background: none;
	outline: none;
}

	.branding__link:focus,
	.branding__link:hover,
	.branding__link:active {
		background: none;
		outline: none;
	}


.branding__title {
	font-size: 3rem;
	font-weight: 600;
	line-height: 4rem;
	white-space: nowrap;
	margin: 1rem 0;
	padding: 0;
}


.branding__description {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 2rem;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}


.title__img--branding {
	display: block;
    height: 6rem;
    width: auto;
	object-fit: contain;
	object-position: center;
}


@media screen and ( max-width: 67.5em ) {
	
	.branding__title {
		font-size: 2rem;
		line-height: 2.66666667rem;
	}
	
	
	.branding__description {
		font-size: 1rem;
		line-height: 1.33333333rem;
	}
	
	
	.title__img--branding {
		height: 5rem;
	}
	
}


@media screen and ( max-width: 22.5em ) {
	
	.branding__title {
		font-size: 1.5rem;
		line-height: 2rem;
	}
	
	.branding__description {
		display: none;
	}
	
	.title__img--branding {
		height: 3rem;
	}
}





/*---------------------------------------------------------------------------*\
	#Main-Menu
\*---------------------------------------------------------------------------*/

/* The Main Menu items have the full header height. */
.site-header__part--main-menu,
.site-header__part--main-menu :where(
	.site-header__part_container,
	.site-header__part_wrapper
),
.menu--main-menu,
.menu--main-menu :where(
	.menu_container,
	.menu_wrapper,
	.menu__item,
	.menu__item_container,
	.menu__item_wrapper,
	.menu-link,
	.menu-link_container,
	.menu-link_wrapper
) {
	height: 100%;
}


.menu--main-menu {
	font-size: 2rem;
}


.menu--main-menu :where( .menu-link ) {
	background: none;
}

.menu--main-menu :where( .menu-link_wrapper ) {
	display: flex;
	align-items: center;
}


.menu-link--main-menu :where( .menu-link_container ) {
	padding: 1rem 0;
}


.menu-link:where( .menu-link--menu.menu-link--main-menu ) :where( .menu-link__content-part ) {
	white-space: nowrap;
}


@media screen and ( max-width: 67.5em ) {
	.site-header__part--main-menu {
		position: fixed;
		display: block;
		opacity: 0;
		height: 0;
		width: 0;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: -1;
	}
	
		.site-header__part--main-menu--opened {
			opacity: 1;
			height: 100%;
			width: 100%;
			left: 100%;
			overflow: visible;
		}
	
	
	.site-header__part--main-menu :where( .site-header__part_container ) {
		width: 36rem;
		max-width: 100%;
		padding-top: calc( 7rem + 1px );
		transform: translateX( -100% );
	}
	
	
	.menu--main-menu :where( .menu_container ) {
		background: #ffffff;
		width: 100%;
		overflow-y: auto;
		border-left: 1px solid #c0c0c0;
		padding: 2rem 4rem;
	}
	
	
	.menu--main-menu :where( .menu_wrapper ) {
		flex-flow: column;
		gap: 2rem;
		height: auto;
	}
	
	
	.menu-link--main-menu :where( .menu-link_container ) {
		padding: 0;
	}
}


@media screen and ( max-width: 22.5em ) {
}





/*---------------------------------------------------------------------------*\
	#Submenu-0-Main-Menu
\*---------------------------------------------------------------------------*/

.submenu-0--main-menu {
	position: absolute;
	display: block;
	font-size: 1.6rem;
	height: 0;
	width: 0;
	top: 100%;
	overflow: hidden;
	z-index: -1;
}

	.submenu-0--alignment--left {
		left: -2rem;
	}

	.submenu-0--alignment--right {
		right: -2rem;
	}

	.menu-link:focus ~ :where( .submenu-0--main-menu ),
	.menu-link:active ~ :where( .submenu-0--main-menu ),
	.menu__item:hover :where( .submenu-0--main-menu ),
	/* Hold it open by JS for e.g. submenu focus. */
	.menu__item--opened :where( .submenu-0--main-menu ) {
		height: auto;
		width: auto;
		overflow: visible;
		z-index: 10;
	}

.submenu-0--main-menu :where( .submenu-0_container ) {
	background-color: #fff;
	width: fit-content;
	margin: 0;
	border: 1px solid #c0c0c0;
	border-top-color: #e5e5e5;
	padding: 2rem 4rem;
}

.submenu-0--main-menu :where( .submenu-0_wrapper ) {
	/* Max is a 3 column grid. */
	--columns--submenu-0: min( 3, var( --children--submenu-0 ) );
	/* ( <width> - <border> - <padding> - ( <gap> * ( <columns> - 1 ) ) ) / <max-columns> */
	--columns-width--submenu-0: calc( ( 54rem - 2px - 8rem - ( 4rem * ( var( --columns--submenu-0 ) - 1 ) ) ) / 3 );
	/* ( <children> + <columns> - 1 ) / <columns> */
	--rows-count--submenu-0: calc( ( var( --children--submenu-0 ) + var( --columns--submenu-0 ) - 1 ) / var( --columns--submenu-0 ) );
	
	position: relative;
	display: grid;
	align-items: start;
	gap: 2rem 4rem;
	grid-template-columns: repeat( var( --columns--submenu-0 ), var( --columns-width--submenu-0 ) );
	grid-template-rows: repeat( var( --rows-count--submenu-0 ), auto );
	grid-auto-flow: row;
}


/* Adjust the z-index to bring the submenu 1 to the front. */
.submenu-0__item {
	position: relative;
	margin: 0;
	padding: 0;
	z-index: 1;
}

	.submenu-0__item:hover,
	.submenu-0__item--opened {
		z-index: 10;
	}


.menu-link--main-menu.menu-link--submenu-0 {
	width: auto;
}

.menu-link--main-menu.menu-link--submenu-0 :where( .menu-link_container ) {
	padding: 0;
}


@media screen and ( max-width: 67.5em ) {
	
	.submenu-0--main-menu {
		position: relative;
		left: 0;
	}
	
	.submenu-0--main-menu :where( .submenu-0_container ) {
		background: #fff;
		width: 100%;
		margin: 0;
		border: none;
		padding: 2rem;
	}
	
	.submenu-0--main-menu :where( .submenu-0_wrapper ) {
		grid-template-columns: repeat( 1, 1fr );
	}
	
}





/*---------------------------------------------------------------------------*\
	#Submenu-1-Main-Menu
\*---------------------------------------------------------------------------*/

.submenu-1--main-menu {
	position: absolute;
	display: block;
	font-size: 1.6rem;
	height: 0;
	width: 0;
	top: 100%;
	overflow: hidden;
	z-index: -1;
}

	.submenu-1--alignment--left {
		left: -2rem;
	}

	.submenu-1--alignment--right {
		right: -2rem;
	}

	.menu-link:focus ~ :where( .submenu-1--main-menu ),
	.menu-link:active ~ :where( .submenu-1--main-menu ),
	.submenu-0__item:hover :where( .submenu-1--main-menu ),
	/* Hold it open by JS for e.g. submenu focus. */
	.submenu-0__item--opened :where( .submenu-1--main-menu ) {
		height: auto;
		width: auto;
		overflow: visible;
		z-index: 10;
	}

.submenu-1--main-menu :where( .submenu-1_container ) {
	background: #fff;
	width: fit-content;
	margin: 0;
	margin-top: 1rem;
	border: 1px solid #c0c0c0;
	border-top-color: #e5e5e5;
	padding: 2rem 4rem;
}

.submenu-1--main-menu :where( .submenu-1_wrapper ) {
	/* Max is a 3 column grid. */
	--columns--submenu-1: min( 3, var( --children--submenu-1 ) );
	/* ( <width> - <border> - <padding> - ( <gap> * ( <columns> - 1 ) ) ) / <max-columns> */
	--columns-width--submenu-1: calc( ( 54rem - 2px - 8rem - ( 4rem * ( var( --columns--submenu-1 ) - 1 ) ) ) / 3 );
	/* ( <children> + <columns> - 1 ) / <columns> */
	--rows-count--submenu-1: calc( ( var( --children--submenu-1 ) + var( --columns--submenu-1 ) - 1 ) / var( --columns--submenu-1 ) );
	
	position: relative;
	display: grid;
	align-items: start;
	gap: 2rem 4rem;
	grid-template-columns: repeat( var( --columns--submenu-1 ), var( --columns-width--submenu-1 ) );
	grid-template-rows: repeat( var( --rows-count--submenu-1 ), auto );
	grid-auto-flow: row;
}


.menu-link--main-menu.menu-link--submenu-1 {
	width: auto;
}

.menu-link--main-menu.menu-link--submenu-1 :where( .menu-link_container ) {
	padding: 0;
}


@media screen and ( max-width: 67.5em ) {
	
	.submenu-1--main-menu {
		position: relative;
		left: 0;
	}
	
	.submenu-1--main-menu :where( .submenu-1_container ) {
		background: #fff;
		width: 100%;
		margin: 0;
		border: none;
		padding: 2rem;
	}
	
	.submenu-1--main-menu :where( .submenu-1_wrapper ) {
		grid-template-columns: repeat( 1, 1fr );
	}
	
}





/*---------------------------------------------------------------------------*\
	#Main-Menu-Icons
\*---------------------------------------------------------------------------*/





/*---------------------------------------------------------------------------*\
	#Main-Menu-Trigger
\*---------------------------------------------------------------------------*/

.site-header__part--main-menu-trigger {
	position: relative;
	display: none;
	z-index: 900;
}


@media screen and ( max-width: 67.5em ) {
	
	.site-header__part--main-menu-trigger {
		display: block;
	}
	
}