.app-header {
	position: fixed;
	z-index: 10;
	display: flex;
	left: 0;
	width: 100vw;
	top: 0;
	padding: 0 30px 60px;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(rgba(61,61,61,1) 0%, rgba(61,61,61,0.5) 70%, rgba(255,255,255,0) 100%);

	@media (width >= 768px) {
		justify-content: flex-start;
		align-items: flex-start;
	}

	img {
		width: 30px;
		margin: 16px 30px 0 0;
		@media (width >= 768px) {
			width: 45px;
		}
	}

	a {
		text-decoration: none !important;
		color: currentColor;
	}

	> ol {
		position: relative;
		list-style-type: none;
		align-items: flex-start;
		margin: 15px 0 0 -15px;
		&::after {
			content: '';
			position: absolute;
			left: 15px;
			right: 15px;
			bottom: -7.5px;
			height: 1px;
			background-color: rgba(255, 255, 255, 0.3);
		}
		@media (width >= 768px) {
			display: flex; /* not to overwrite the style in .app-max-md-hidden */
		}

		> li {
			position: relative;
			padding: 10px 15px;
			font-weight: 300;
			background-color: transparent;
			transition: background-color .1s;
			&:hover {
				background-color: var(--yellow);
				div {
					height: auto;
					padding: 10px 15px;
					opacity: 1;
				}
			}

			> a {
				position: relative;
				z-index: 2;
				font-size: 1.6rem;
			}

			div {
				opacity: 0;
				transition: opacity .1s;
				position: absolute;
				z-index: 1;
				top: 100%;
				left: 0;
				height: 0;
				width: auto;
				min-width: 100%;
				background: var(--yellow);
				overflow: hidden;

				a {
					display: block;
					padding-block: 5px;
					text-wrap: nowrap;
					font-size: 13px;
					text-transform: none;
					font-weight: 300;

					&:first-child {
						position: relative;

						&::before {
							position: absolute;
							content: '';
							background: #fff;
							left: 15px;
							width: 30px;
							height: .5px;
							top: -10px;
						}
					}
				}
			}
		}
	}

	.app-search-trigger {
		width: 15px;
		height: 15px;
		background: url(/wp-content/themes/epmt/assets/images/maginifier.svg) no-repeat center center / 15px auto;
	}

	form {
		display: none;
		border: 1px solid #fff;
		border-radius: 15px;

		@media (width >= 768px) {
			display: flex;
			margin: 25px 0 0 auto;
			padding: 2px 8px 2px 3px;
		}

		input {
			width: fit-content;
			padding: 5px 10px;
			border-radius: 0;
			border: none;
			background-color: transparent;
			accent-color: #fff;
			@media (width < 768px) {
				width: 120px;
				font-size: 11px;
			}
			@media (width >= 768px) {
				font-size: 12px;
			}
			&:focus-visible {
				outline: none;
			}
			&, &::placeholder {
				color: #fff;
			}
			&::placeholder {
				text-transform: uppercase;
			}
			&::-webkit-search-cancel-button {
				filter: brightness(10);
			}
		}
		input[type="submit"] {
			width: 20px;
			text-indent: -10000em;
			background: url(/wp-content/themes/epmt/assets/images/maginifier.svg) no-repeat center center / contain;
			@media (width < 768px) {
				background-size: 15px auto;
			}
		}
	}

	.app-secondary-menu {
		position: absolute;
		left: 105px;
		top: 85px;
		font-size: 12px;
		a {
			padding-right: 15px;
			font-weight: 300;
		}
	}

	.app-mobile-menu-toggle {
		border-radius: 15px;
		padding: 5px 18px 5px 35px;
		text-transform: uppercase;
		font-size: 11px;
		color: #fff;
		background: var(--yellow) url(/wp-content/themes/epmt/assets/images/menu.svg) no-repeat 20% center / 12px auto;
	}

	.app-mobile-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 200vw;
		height: 100dvh;
		display: flex;
		background-color: var(--yellow);
		color: #fff;
		transform: translateX(100vw);
		transition: transform .2s;
		&.step-1 {
			transform: translateX(0);
		}
		&.step-2 {
			transform: translateX(-100vw);
		}
		> div {
			position: relative;
			width: 50%;
			padding: 10vh 45px 30px;
			a {
				display: block;
				margin-bottom: 15px;
			}
			.app-close {
				filter: invert(1);
			}
			&.app-mobile-menu-step-1 {
				> div:nth-child(1) {
					font-size: 18px;
					a {
						position: relative;
						margin-bottom: 30px;
						&[href="#"]::after {
							content: '';
							position: absolute;
							top: -3px;
							right: 0;
							bottom: 0;
							width: 15px;
							background: url(/wp-content/themes/epmt/assets/images/arrow-right.svg) no-repeat right center / 7px auto;
							filter: invert(1);
						}
					}
				}
				> div:nth-child(2) {
					border-top: 1px solid #fff;
					padding: 30px 45px 0 0;
					width: fit-content;
					font-size: 14px;
					a {
						margin-bottom: 15px;
					}
				}
			}
			&.app-mobile-menu-step-2 {
				> div:first-child {
					position: relative;
					margin-bottom: 30px;
					padding-left: 30px;
					font-size: 18px;
					&::before {
						position: absolute;
						top: -3px;
						left: 0;
						width: 30px;
						height: 30px;
						content: '';
						background: url(/wp-content/themes/epmt/assets/images/arrow-left.svg) no-repeat left center / 7px auto;
						filter: invert(1);
					}
				}
				a {
					position: relative;
					padding-left: 25px;
					text-transform: none;
					font-size: 14px;
					&::before {
						position: absolute;
						left: -4px;
						top: -30px;
						content: '\00B7';
						font-size: 60px;
					}
				}
			}
		}
	}
}