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

.header-top-marker {
	display: block;
}

.header-container,
.panel-header {
	position: relative;
	z-index: 50;
}

.body-overlay {
	position: fixed;
	inset: 0;
	z-index: 49;
	background: rgba(255, 255, 255, .9);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-appendix);
}

.body-overlay.active {
	opacity: 1;
	pointer-events: all;
}

.panel-header {
	--top-bar-background: #bed0d1;
	--top-bar-color: var(--gray-dark);

	border-top: 10px solid var(--top-bar-background);
	background: var(--white);
}

.panel-header .top-bar,
.panel-header .nav-cont,
.panel-header .search-container {
	display: none;
}

.panel-header .top-bar {
	position: relative;
	z-index: 2;
}

.panel-header .top-bar-inner,
.panel-header .main-inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

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

.panel-header .main-container {
	position: relative;
	z-index: 1;
	padding: 10px 0;
}

.panel-header .main-container::before {
	position: absolute;
	inset: 10px 0;
	z-index: 1;
	display: block;
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	content: '';
	pointer-events: none;
	opacity: 1;
	transform: opacity var(--transition-appendix);
}

.panel-header .main-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px 8px;
}

.panel-header .main-inner::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	background: url('/includes/public/assets/shared/cityscape-sm.svg') no-repeat calc(100% - 21px) calc(100% + 5px) / auto 30px;
	content: '';
	pointer-events: none;
	opacity: 0.15;
	transition: opacity var(--transition-appendix);
}

.panel-header .main-inner > * {
	position: relative;
	z-index: 2;
}

.panel-header .logo-cont {
	flex-shrink: 0;
}

.panel-header .logo {
	width: 153px;
}

.panel-header .main-container .right-col {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.panel-header .main-container .weather-cont {
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-appendix);
}

.panel-header .menu-toggle {
	position: relative;
	width: 42px;
	padding: 0;
	background: none;
	border: none;
}

.panel-header .menu-toggle .menu-icon {
	width: 100%;
	opacity: 1;
	transition: opacity var(--transition-appendix);
}

.panel-header .menu-toggle .cross {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	width: 25px;
	opacity: 0;
	transition: opacity var(--transition-appendix);
}

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

.panel-header .mobile-nav-container {
	position: absolute;
	inset: auto 0 0 0;
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-appendix);
}

.panel-header .mobile-nav-container .search {
	padding: 20px 20px 0;
}

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

.panel-header .mobile-nav > * + * {
	padding-top: 30px;
	padding-bottom: 30px;
}

.panel-header .mobile-nav > *:nth-child(even) {
	background: rgba(222, 219, 212, .85);
}

.panel-header .nav-cont {
	opacity: 1;
	transition: opacity var(--transition-appendix);
}

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

.panel-header .menu-toggle.active .menu-icon {
	opacity: 0;
}

.panel-header .menu-toggle.active .cross {
	opacity: 1;
}

.panel-header .main-container .weather-cont.active,
.panel-header .mobile-nav-container.active {
	pointer-events: all;
	opacity: 1;
}

.panel-header .main-container.fade::before,
.panel-header .main-container.fade .main-inner::before,
.panel-header .main-container.fade .nav-cont {
	opacity: 0.05;
}

.panel-header .main-container.fade .nav-cont {
	pointer-events: none;
}

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

@media (min-width: 64em) {
	/*----- general -----*/
	
	.panel-header {
		border-top: none;
	}

	.panel-header.fixed {
		position: fixed;
		inset: 0 0 auto 0;
	}
	
	.panel-header .logo {
		width: 286px;
	}

	.body-overlay {
		background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,.5));
	}
	
	/*----- top bar -----*/

	.panel-header .top-bar {
		display: block;
		background: var(--top-bar-background);
	}
	
	.panel-header .top-bar-inner {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 30px;
		padding: 18px 20px 7px;
	}
	
	/*----- main row -----*/

	.panel-header .main-inner::before {
		inset: 0 21px 0 auto;
		width: 445px;
		background-image: url('/includes/public/assets/shared/cityscape.svg');
		background-position: calc(100% + 124px) calc(100% - 4px);
		background-size: auto 96px;
	}

	.panel-header .nav-cont {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.panel-header .main-container .right-col {
		display: none;
	}

	/*----- search -----*/

	.panel-header .search-toggle {
		position: relative;
		display: inline-block;
		width: 51px;
		padding: 0;
		background: none;
		border: none;
	}

	.panel-header .search-container {
		position: absolute;
		inset: auto 0 0 0;
		transform: translateY(100%);
		display: block;
		padding: 30px;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--transition-appendix);
	}

	.panel-header .search-toggle img {
		transition: opacity var(--transition-appendix);
	}

	.panel-header .search-toggle .cross {
		width: 100%;
		opacity: 0;
	}

	.panel-header .search-toggle .glass {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 19px;
		opacity: 1;
	}

	/* active search */

	.panel-header .search-container.active {
		opacity: 1;
		pointer-events: all;
	}

	.panel-header .search-toggle.active .cross {
		opacity: 1;
	}
	
	.panel-header .search-toggle.active .glass {
		opacity: 0;
	}
}

@media (min-width: 80em) {
	/*----- main row -----*/

	.panel-header .main-inner {
		padding: 24px 20px 32px;
	}
}

/*=====================================*/
/*=====----- MICROSITE THEME -----=====*/
/*=====================================*/

.theme-microsite .panel-header {
	--top-bar-background: var(--blue-alt);
	--top-bar-color: var(--white);
}

.theme-microsite .panel-header .logo {
	width: 162px;
}

.theme-microsite .panel-header .main-inner::before {
	inset: 0 0 0 auto;
	width: 57.6vw;
	background: url('/includes/public/assets/shared/convention-center-grid-pattern.svg') no-repeat left 12% / auto 422%;
	opacity: 0.08;
}

.theme-microsite .panel-header .mobile-nav > *:nth-child(even) {
	background: rgba(10, 60, 106, .25);
}

@media (min-width: 64em) {
	.theme-microsite .panel-header .main-container::after {
		position: absolute;
		inset: 10px 0 10px auto;
		z-index: 1;
		display: block;
		width: 590px;
		background: url('/includes/public/assets/shared/convention-center-grid-pattern.svg') no-repeat left 12% / auto 453px;
		opacity: 0.08;
		content: '';
		pointer-events: none;
	}

	.theme-microsite .panel-header .main-inner::before {
		display: none;
	}

	.theme-microsite .panel-header .logo {
		width: 306px;
	}
}