/*=============================*/
/*=====----- GENERAL -----=====*/
/*=============================*/

.header-container {
	position: relative;
	z-index: 100;
}

.panel-header {
	background: var(--black);
	color: var(--white);
}

.panel-header .curated-nav-col,
.panel-header .main-row .translation-menu-col,
.panel-header .desktop-menu,
.body-overlay {
	display: none;
}

.body-overlay {
	position: fixed;
	inset: 0;
	z-index: 98;
}

/*=====----- STICKY HEADER -----=====*/

.panel-header.fixed {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transform: translateY(-101%);
}

/* header animated */

.panel-header.fixed.slide-down {
	animation: slide-down 0.3s ease 0s 1 normal forwards;
}

.panel-header.fixed.slide-up {
	animation: slide-up 0.3s ease 0s 1 normal forwards;
}

@keyframes slide-down {
	from {
		transform: translateY(-101%);
	}
	to {
		transform: none;
	}
}

@keyframes slide-up {
	from {
		transform: none;
	}
	to {
		transform: translateY(-101%);
	}
}

/*=====----- LOGO -----=====*/

.panel-header .logo {
	display: flex;
}

.panel-header .logo a {
	display: block;
	padding: 0;
	background: none !important;
}

.panel-header .logo img {
	width: 90px;
}

/*=====----- MENU BUTTON -----=====*/

.panel-header .menu-toggle {
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	font-weight: var(--font-weight-bold);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: inherit;
}

.panel-header .menu-toggle img {
	width: 36px;
	margin-bottom: 2px;
}

.panel-header .menu-toggle .btn-text {
	display: block;
}

/* sticky nav button */

.sticky-nav-button {
	position: fixed;
	inset: 0 0 auto auto;
	z-index: 99;
	transform: translateY(-101%);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 90px;
	aspect-ratio: 1;
	padding: 1rem;
	margin: 0;
	background: var(--black);
	border: none;
	font-weight: var(--font-weight-bold);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: var(--white);
}

/*==============================*/
/*=====----- MAIN ROW -----=====*/
/*==============================*/

.panel-header .main-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 28px 10px 20px;
	gap: 16px;
}

.panel-header .main-row .logo-col,
.panel-header .main-row .curated-nav-col,
.panel-header .main-row .translation-menu-col,
.panel-header .main-row .menu-toggle.mobile {
	flex-shrink: 0;
}

/*=====----- CURATED NAV -----=====*/

.panel-header .curated-nav-col {
	align-items: baseline;
	justify-content: center;
	gap: 16px;
}

/*================================*/
/*=====----- MOBILE NAV -----=====*/
/*================================*/

.panel-header .mobile-menu {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 4;
	transform: translateY(-150%);
	max-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	background: var(--black);
	color: var(--white);
	transition: transform var(--transition);
	pointer-events: none;
}

.panel-header .mobile-menu .top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 28px 10px 20px;
}

.panel-header .mobile-menu .search-row {
	padding: 24px 20px;
	background: #252525;
	color: var(--white);
}

.panel-header .mobile-menu .translation-menu-col {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
}

.panel-header .mobile-menu .nav-row {
	padding: 0 20px 44px;
}

.panel-header .mobile-menu .nav-row > * {
	padding: 36px 0 24px;
}

.panel-header .mobile-menu .nav-row > * + * {
	padding-top: 25px;
	border-top: 1px solid #666666;
}

.panel-header .mobile-menu .nav-row > *:last-child {
	padding-bottom: 0;
}

/*----- active mobile nav -----*/

.body-overlay.active {
	display: block;
}

.panel-header .mobile-menu.active {
	transform: none;
	pointer-events: all;
}

/*=================================*/
/*=====----- DESKTOP NAV -----=====*/
/*=================================*/

.panel-header .desktop-menu {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 5;
	transform: translateY(-100%);
	grid-template:
		'topbar topbar topbar' max-content
		'nav social enews' minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	background: var(--black);
	color: var(--white);
	pointer-events: none;
	transition: transform var(--transition);
}

.panel-header .desktop-menu.active {
	transform: none;
	pointer-events: all;
}

/*=====----- TOP BAR -----=====*/

.panel-header .desktop-menu .top-row {
	grid-area: topbar;
	display: grid;
	grid-template: auto / minmax(0, 1fr) 500px minmax(0, 1fr);
	gap: 32px;
	justify-content: space-between;
	align-items: center;
	padding: 14px 25px 14px 22px;
	background: #252525;
}

.panel-header .desktop-menu .menu-toggle {
	justify-self: end;
}

/*=====----- MAIN NAV CONTAINER -----=====*/

.panel-header .desktop-menu .main-nav-container {
	grid-area: nav;
	padding: 50px;
	min-height: 560px;
	max-height: 800px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.panel-header .desktop-menu .main-nav-container > * + * {
	padding-top: 36px;
	margin-top: 36px;
	border-top: 1px solid #666666;
}

/*=====----- SOCIAL CONTAINER -----=====*/

.panel-header .desktop-menu .social-container {
	grid-area: social;
}

.panel-header .desktop-menu .social-container > *,
.panel-header .desktop-menu .social-links {
	height: 100%;
}

/*=====----- ENEWS CONTAINER -----=====*/

.panel-header .desktop-menu .enews-container {
	grid-area: enews;
}

.panel-header .desktop-menu .enews-container > *,
.panel-header .desktop-menu .enews {
	height: 100%;
}

/*===================================*/
/*=====----- MEDIA QUERIES -----=====*/
/*===================================*/

@media (min-width: 64em) {
	/*=====----- STICKY HEADER -----=====*/

	.sticky-nav-button {
		display: flex;
		pointer-events: none;
		transition: opacity var(--transition);
	}

	.sticky-nav-button.fixed {
		pointer-events: all;
	}

	.panel-header.fixed.slide-down,
	.panel-header.fixed.slide-up {
		animation: none;
	}

	.sticky-nav-button.fixed.slide-down {
		animation: slide-button-down 0.3s ease 0s 1 normal forwards;
	}

	.sticky-nav-button.fixed.slide-up {
		animation: slide-button-up 0.3s ease 0s 1 normal forwards;
	}

	.nav-open .panel-header.fixed {
		animation: slide-down 0.3s ease 0s 1 normal forwards;
	}

	.nav-open .sticky-nav-button {
		opacity: 0;
		pointer-events: none;
	}

	@keyframes slide-button-down {
		from {
			transform: translateY(-101%);
		}
		to {
			transform: translateY(1rem);
		}
	}
	
	@keyframes slide-button-up {
		from {
			transform: translateY(1rem);
		}
		to {
			transform: translateY(-101%);
		}
	}

	/*=====----- MAIN ROW -----=====*/

	.panel-header .main-row {
		padding: 14px 25px 14px 22px;
	}

	.panel-header .main-row .logo img {
		width: 107px;
	}

	.panel-header .curated-nav-col {
		display: flex;
	}

	.panel-header .main-row .translation-menu-col {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 32px;
	}

	.panel-header .menu-toggle.mobile {
		display: none;
	}

	/*=====----- MOBILE NAV -----=====*/

	.panel-header .mobile-menu {
		display: none;
	}

	/*=====----- DESKTOP NAV -----=====*/

	.panel-header .desktop-menu {
		display: grid;
	}
}

@media (min-width: 90em) {
	/*=====----- MAIN ROW -----=====*/

	.panel-header .main-row {
		display: grid;
		grid-template: auto / 20% 1fr 20%;
		gap: 32px;
	}

	.panel-header .translation-menu-col {
		gap: 84px;
	}

	/*-- curated nav --*/

	.panel-header .curated-nav-col {
		gap: 26px;
	}

	/*=====----- DESKTOP NAV -----=====*/

	.panel-header {
		/* adding these so that the navigation can use them (see nav > shared.css) */
		--nav-container-padding-top: 53px;
		--nav-container-padding-right: 45px;
		--nav-container-padding-bottom: 76px;
		--nav-container-padding-left: 70px;
	}

	.panel-header .desktop-menu {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.panel-header .desktop-menu .main-nav-container {
		position: relative;
		padding: var(--nav-container-padding-top) var(--nav-container-padding-right) var(--nav-container-padding-bottom) var(--nav-container-padding-left);
	}

	.panel-header .desktop-menu .main-nav-container > * + * {
		padding: 0;
		border: none;
	}

	.panel-header .desktop-menu .main-nav-container > * + *::before {
		display: block;
		width: 52%;
		max-width: 300px;
		height: 1px;
		margin-bottom: 36px;
		background: #666;
		content: '';
		pointer-events: none;
	}
}