/** @format */

/* SELECTOR: #header__topbar */
/* SELECTOR: #header__topcareerlinks */
/* SELECTOR: #header__topcareerimages */

/* header__topbar */
#header__topbar .wrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0px var(--desktop-bar-item-item-lr);
	background-color: var(--color-white);
	box-shadow: 0px -1px 0px 0px var(--color-neutral-grey);
	border-bottom: 1px solid var(--color-neutral-grey);
	padding-top: var(--megamenu-bar-padding-tb);
	padding-bottom: var(--megamenu-bar-padding-tb);
}

#header__topbar .header__logo {
	width: var(--megamenu-bar-logo-width);

	& > a {
		display: block;
	}

	& svg {
		overflow: visible;
	}
}

#header__topbar .nav--header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0px var(--button-padding-lr);
	flex-grow: 1;
}

#header__topbar .nav--header :not(:where(.button)),
#header__topbar .wpml-ls :is(ul, li) {
	display: contents;
}

#header__topbar .nav--header .menu > .menu-item > a {
	--button-color-text: var(--color-roedl-hunter-green);
	--button-color-background: transparent;
	--button-color-border: transparent;

	margin: 0px !important;

	&::after {
		content: none;
	}

	&:hover {
		--button-color-text: var(--color-roedl-hunter-green);
		--button-color-background: var(--color-roedl-green);
		--button-color-border: var(--color-roedl-green);
	}
}

#header__topbar .sub-menu {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	position: absolute;
	top: var(--header-topbar-height);
	right: 0px;
	bottom: auto;
	left: 0px;
	z-index: -1;
	background-color: var(--color-white);
	box-shadow: inset 0px -1px 0px 0px var(--color-neutral-grey);
	font: var(--font-extended);
	font-size: var(--fs-navigation);
	transform: translateY(min(0px, var(--header-submenu-position)));
	padding: 0px;
}

#header__topbar .sub-menu::after {
	/* box-shadow Bugfix */
	content: '';
	display: block;
	height: 1px;
	width: 100%;
}

#header__topbar .sub-menu a {
	display: block;
	padding: calc(var(--universal-gap) / 3) var(--universal-gap);
}

#header__topbar .nav--header .menu .sub-menu .menu-item a {
	box-shadow: none; /* reset style from parent menu-item */
	background-color: transparent; /* reset style from parent menu-item */
}

#header__topbar .sub-menu a:hover::after {
	background-color: var(--main-color);
}

#header__topbar .nav--header .menu-item:not(.header__jobsbtn) a:hover {
	background-color: var(--main-color);
}

#header__topbar .nav--header .sub-menu .menu-item.current-menu-item a {
	background-color: var(--main-color);
}

#header__topbar .nav--header .menu-item:is(.current-menu-item, .current-page-parent) a {
	background-color: var(--color-roedl-green);
}

#header__topbar .wpml-ls {
	display: flex;
	flex-flow: row nowrap;
	place-content: flex-start;
	align-items: center;
}

#header__topbar .wpml-ls .wpml-ls-item + .wpml-ls-item::before {
	content: '|';
	padding: 0px 0.4em;
}

#header__topbar .wpml-ls-current-language a {
	font-weight: bold;
}

#header__topbar .wpml-ls-link:hover {
	color: var(--color-roedl-green);
}

/* header__topbar, header__topcareer* and sticky logic */
#header__topcareerlinks,
#header__topbar,
#header__topcareerimages {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 100;
	width: 100%; /* Bugfix for Mobile */
}

:is(#header__topcareerlinks, #header__topbar, #header__topcareerimages) a {
	text-decoration: none;
}

#header__topcareerlinks ~ #header__topbar,
#header__topcareerimages {
	top: var(--header-topcareerlinks-height);
}

#header__topcareerimages {
	z-index: -1;
}

#header__topcareerlinks {
	z-index: 200;
}

#page {
	position: relative;
	z-index: 1;
}

#main {
	background-color: var(--color-white);
	margin-top: var(--header-topbar-sub-menu-height);
}

/* header__topcareer* */
:is(#header__topcareerlinks, #header__topcareerimages) .wrapper {
	display: grid;
	grid: auto / none;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	align-items: stretch;
	gap: 1px;
	padding: 0px;
	background-color: var(--color-neutral-grey);
}

:is(#header__topcareerlinks, #header__topcareerimages) li {
	display: block;
}

:is(#header__topcareerlinks, #header__topcareerimages) a {
	background-color: var(--color-white);
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	border-bottom: 1px solid var(--color-neutral-grey);
}

#header__topcareerlinks a {
	padding: calc(var(--universal-gap) / 2) var(--universal-gap);
	background-color: var(--color-roedl-light-matcha);
}

#header__topcareerlinks a::after {
	font-family: 'Icons';
	content: '\e5cc';
	font-size: 1.4em;
	transition: transform 200ms ease;
}

#header__topcareerlinks .hover a {
	background-color: var(--color-roedl-green);
}

#header__topcareerlinks .hover a::after {
	transform: translateX(50%);
}

#header__topcareerimages li {
	overflow: hidden;
}

#header__topcareerimages a {
	align-items: stretch;
}

#header__topcareerimages img {
	object-fit: cover;
	max-height: 46vh;
	transition: transform 200ms ease;
	transform: scale(1.01);
}

#header__topcareerimages .hover img {
	transform: scale(1.05);
}

/* header__jobsbtn */
#header__topbar .header__jobsbtn a {
	pointer-events: none;
}

#header__topbar .header__jobsbtn a > * {
	pointer-events: auto;
}

/* responsive header */
@media (max-width: 850px) {
	#header__topcareerlinks,
	#header__topcareerimages,
	#header__topbar .nav--header {
		display: none;
		height: 0px !important;
	}

	#header__topcareerlinks ~ #header__topbar {
		top: 0px;
	}

	#header__topbar .wrapper {
		justify-content: space-between;
	}

	#header__topbar {
		position: fixed;
		left: 0px;
	}

	#main {
		margin-top: var(--header-topbar-height);
	}
}

/* JS Logik */
#header__topbar .menu-item:not(.current-menu-item):not(.current-page-parent) > .sub-menu {
	display: none;
}