/** @format */

/* SELECTOR: #header__bottombar */
/* SELECTOR: #mobilecareerguide */

/* header__bottombar */
#header__bottombar,
#mobilecareerguide {
	display: none;
}

/* responsive header */
@media (max-width: 850px) {
	#header__bottombar {
		display: block;
		position: fixed;
		top: auto;
		right: 0px;
		bottom: 0px;
		left: 0px;
		z-index: 300;
	}

	#header__bottombar a {
		text-decoration: none;
	}

	#header__bottombar > .wrapper {
		position: relative; /* for mobile dynamic height address bar bugfix */
		z-index: 2; /* for mobile dynamic height address bar bugfix */
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding-top: var(--universal-gap);
		padding-bottom: var(--universal-gap);
		box-shadow: inset 0px 1px 0px 0px var(--color-neutral-grey), 0px calc(var(--universal-gap) * 2) 0px 0px var(--color-white);
		background-color: var(--color-white);
	}

	#header__bottombar :where(.menu, .header__bottominfo) [href]:hover {
		color: var(--color-roedl-green);
	}

	#header__bottombar .header__bottommenu {
		position: fixed;
		top: var(--header-topbar-height);
		right: 0px;
		bottom: var(--header-bottombar-height);
		left: 0px;
		z-index: 1;
		width: auto;
		height: auto;
		display: grid;
		grid: 1fr / 1fr;
		place-items: end;
		pointer-events: none;
		background-color: transparent;
		transition: background-color 400ms ease;

		& .menu > .menu-item > a,
		& .header__bottomback,
		& .main_menu_item_in_sub_menu > a {
			font: var(--font-extended);
			font-size: var(--fs-quote);
			cursor: pointer;

			&:hover {
				text-decoration: underline;
				color: inherit !important;
			}
		}

		& .menu ::before,
		& .menu ::after {
			overflow: hidden;
		}
	}

	/* Burger Button */
	#header__bottombar .header__burger a {
		display: grid;
		grid: 1fr / 1fr;
		width: 1.5em;
		height: 1.5em;
		padding: calc((1.5em - var(--header-burgersize)) / 2) 0px;
		background-color: currentColor;
		background-clip: content-box;
		transition: background-color 200ms ease;
	}

	#header__bottombar .header__burger a::before,
	#header__bottombar .header__burger a::after {
		content: '';
		grid-area: 1 / 1 / 2 / 2;
		background-color: currentColor;
		transition: transform 200ms ease;
	}

	#header__bottombar .header__burger a::before {
		transform: translateY(-200%) rotate(0deg);
	}

	#header__bottombar .header__burger a::after {
		transform: translateY(200%) rotate(0deg);
	}

	.burger__open #header__bottombar .header__burger a::before {
		transform: translateY(0%) rotate(45deg);
	}

	.burger__open #header__bottombar .header__burger a::after {
		transform: translateY(0%) rotate(-45deg);
	}

	.burger__open #header__bottombar .header__burger a {
		background-color: transparent;
	}

	/* Burger open */
	.burger__open #header__bottombar .header__bottommenu {
		background-color: rgba(0, 0, 0, 0.5);
		pointer-events: auto;
		cursor: pointer;
	}

	/* Burger Menu */
	#header__bottombar .nav--header {
		pointer-events: auto;
		overflow: hidden auto;
		scroll-behavior: auto; /* For Overflow hidden position 0 bugfix JavaScript */
		height: 0%;
		transition: height 200ms ease;
		background-color: var(--color-white);
		display: grid;
		grid: auto 1fr auto / 1fr;
		gap: 0px;
		width: 100%;
		max-width: var(--header-burgermax);
		box-shadow: -1px 0px 0px 0px var(--color-neutral-grey), 0px 100px 0px 0px var(--color-white);
		cursor: auto;
	}

	.burger__open #header__bottombar .nav--header {
		height: 100%;
	}

	#header__bottombar .header__bottommenu :is(.menu, .sub-menu) {
		display: grid;
		grid: auto / 1fr;
		align-content: start;
	}

	#header__bottombar .nav--header > .wrapper > div {
		position: relative;
		z-index: 1;
		background-color: var(--color-white);
		border-top: 3rem solid transparent;
		border-bottom: 3rem solid transparent;
		min-height: var(--header-bottombar-submenuheight, auto); /* Submenu Bugfix: var is calculated by JavaScript */
		box-sizing: content-box; /* Submenu Bugfix: necessary for bugfix */
	}

	#header__bottombar :is(.header__bottomcareerlinks, .header__bottominfo) {
		position: -webkit-sticky;
		position: sticky;
		z-index: 100;
		left: 0px;
		background-color: var(--color-white);
	}

	#header__bottombar .header__bottomcareerlinks {
		top: 0px;
	}

	#header__bottombar .header__bottominfo {
		bottom: 0px;
		padding: var(--universal-gap) 0px;
		border-top: 1px solid var(--color-neutral-grey);
	}

	#header__bottombar .header__bottominfo .wrapper {
		display: grid;
		grid: 1fr / 1fr auto;
		gap: 0px var(--universal-gap);
		align-items: center;
	}

	#header__bottombar .roedl_socialtitle {
		display: none;
	}

	#header__bottombar .sub-menu {
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		width: auto;
		height: auto;
		z-index: 1;
		background-color: var(--color-white);
		box-shadow: 0px 0px 10px 10px var(--color-white); /* smooth transition when retracting */
		transform: translateX(calc(100% + (var(--universal-gap) * 2)));
		transition: transform 200ms ease;
	}

	#header__bottombar .submenu__open .sub-menu {
		transform: translateX(0%);
	}

	#header__bottombar .header__bottomcareerlinks ul {
		display: grid;
		grid: auto / 1fr 1fr;
		gap: 1px;
		background-color: var(--color-neutral-grey);
		box-shadow: 0px -1px 0px 0px var(--color-neutral-grey), 0px 1px 0px 0px var(--color-neutral-grey);
	}

	#header__bottombar .header__bottomcareerlinks li {
		background-color: var(--color-white);
	}

	#header__bottombar .header__bottomcareerlinks a {
		display: block;
		padding: var(--universal-gap);
	}

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

	/* Submenu */
	#header__bottombar .header__bottomback {
		display: flex;
		align-items: center;
	}

	#header__bottombar .menu-item > a,
	#header__bottombar .header__bottomback {
		padding: 0.6rem 0px;
	}

	#header__bottombar .menu-item-has-children > a::after,
	#header__bottombar .header__bottomback::before {
		font-family: 'Icons';
		font-size: 1.4em;
		transition: transform 200ms ease;
		display: inline-block;
	}

	#header__bottombar .menu-item > a {
		display: grid;
		grid: 1fr / 1fr auto;
	}

	#header__bottombar .menu-item-has-children > a::after {
		content: '\e5cc';
	}

	#header__bottombar .header__bottomback::before {
		content: '\e5cb';
		min-width: 1.5rem;
	}

	#header__bottombar .header__bottomback {
		cursor: pointer;
	}

	#header__bottombar .header__bottomback span {
		display: block;
	}

	#header__bottombar .menu-item-has-children > a:hover::after {
		transform: translateX(25%);
	}

	#header__bottombar .header__bottomback:hover::before {
		transform: translateX(-25%);
	}

	#header__bottombar .header__bottomback {
		margin-bottom: 1rem;
	}

	#header__bottombar .main_menu_item_in_sub_menu {
		padding: 0.6rem 0px;
	}

	#header__bottombar .sub-menu .menu-item a {
		padding-left: 1.5rem;
	}

	/* Prevent body scrolling when open the burger menu */
	html.burger__open,
	.burger__open body {
		overflow: hidden !important;
	}

	/* #main > #mobilecareerguide */
	#mobilecareerguide {
		display: block;
	}

	#mobilecareerguide ul {
		display: grid;
		grid: auto / 1fr 1fr;
		gap: 1px;
		background-color: var(--color-neutral-grey);
		border-bottom: 1px solid var(--color-neutral-grey);
		padding: 0px;
	}

	#mobilecareerguide li {
		display: block;
		background-color: var(--color-white);
	}

	#mobilecareerguide a {
		display: block;
		padding: var(--universal-gap);
		text-decoration: none;
	}

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

	.header__bottommenu .submenu__open .sub-menu :not(.header__bottomback) {
		padding-inline-start: 1.5rem;
	}
}