.panel-header {
	--surface-foreground: var(--primary-color-700);
	--surface-mobile-nav: var(--primary-color-200);
	--text: var(--gray-100);
	--text-alt: var(--gray-900);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 95%);
	position: absolute;
	width: 100%;
	color: var(--text);
	z-index: 15;
}

@media (min-width: 64em) {
	.panel-header {
		padding: 20px 0 10px;
		position: fixed;
		transition: background cubic-bezier(0.45, 0, 0.55, 1) 700ms;
		min-height: 109px;
	}

	.panel-header.active {
		background-image: none;
		background-color: var(--navy-blue);
	}
}

.panel-header .primary-content-container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding: 0;
	height: 60px;
}

.panel-header .primary-content-container .logo {
	width: 240px;
	height: 60px;
	padding-top: 10px;
	padding-left: 13px;
	z-index: 11;
	position: relative;
	clip-path: polygon(50% 0%, 100% 0, 90% 50%, 100% 100%, 0 100%, 0 50%, 0 0);
	background-color: var(--white);
}
.panel-header .primary-content-container .logo img {
	width: 184px;
}

.panel-header .primary-content-container .desktop-nav-container {
	display: flex;
	gap: 12px;
}

.panel-header .primary-content-container .widgets {
	display: none;
}

.panel-header .primary-content-container .desktop-nav-container .top > div.contentRender_name_plugins_weather_weather,
.panel-header .primary-content-container .desktop-nav-container .weather-wrapper{
	height: 100%;
}

@media (max-width: 374px) {
	.nav-container .menu-toggle {
		width: 60px;
		height: 60px;
	}

	.panel-header .primary-content-container .logo img {
		width: 154px;
	}

	.panel-header .primary-content-container .logo {
		width: 190px;
		height: 60px;
		padding-top: 12px;
		padding-left: 8px;
	}
}

@media (max-width: 500px) {
	.panel-header .primary-content-container .right {
		margin-left: -50px;
	}
}

@media (min-width: 64em) {
	.panel-header .primary-content-container {
		display: grid;
		grid-template-columns: 100px 1fr;
		height: 100%;
	}
	
	.panel-header .primary-content-container .logo {
		width: calc(128px + (270 - 128) * ((100vw - 1025px) / (1350 - 1025)));
		height: calc(35px + (65 - 35) * ((100vw - 1025px) / (1350 - 1025)));
		padding-top: calc(10px + (14 - 10) * ((100vw - 1025px) / (1350 - 1025)));
		padding-left: calc(7px + (21 - 7) * ((100vw - 1025px) / (1350 - 1025)));

		transition: background-color cubic-bezier(0.45, 0, 0.55, 1) 700ms;
	}

	.panel-header.active .primary-content-container .logo {
		background-color: transparent;
	}

	.panel-header .primary-content-container .logo img {
		width: calc(97px + (199 - 97) * ((100vw - 1025px) / (1440 - 1025)));
	}
	
	.panel-header .primary-content-container .right {
		display: grid;
		grid-template-columns: 1fr 70px;
		width: 100%;
		padding-top: 12px;
		padding-right: 24px;
		gap: 14px;
	}

	.panel-header .primary-content-container .desktop-nav-container {
		flex-direction: column;
		gap: unset;
	}

	.panel-header .primary-content-container .desktop-nav-container .top {
		display: flex;
		justify-content: end;
		margin-bottom: 12px;
		column-gap: 30px;
	}

	.panel-header .primary-content-container .widgets  {
		display: flex;
		justify-content: center;
	}
}
@media (min-width: 1200px) {
	.panel-header .primary-content-container {
		grid-template-columns: 272px 1fr;
	}
}

@media (min-width: 1350px) {
	.panel-header .primary-content-container .logo {
		width: 270px;
		height: 65px;
		padding-top: 12px;
		padding-left: 21px;
	}
	.panel-header .primary-content-container .logo img {
		width: 199px;
	}
}

.panel-header .mobile-nav-container {
	position: absolute;
	max-width: 420px;
	width: 100%;
	right: 0;
	z-index: 10;
	display: none;
	width: 100%;
}

.panel-header .mobile-nav-container.active {
	display: flex;
	justify-content: flex-end;
}

@media (min-width: 64em) {
	.panel-header .mobile-nav-container.active {
		display: none;
	}	
}

.panel-header .mobile-nav-container .mobile-nav {
	width: 100%;
	background-color: var(--gold-b4);
}

.panel-header .mobile-nav .widgets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: dense;
	padding: 20px 20px 27px;
	color: var(--text-alt);
}

.panel-header .mobile-nav .search-cont {
	grid-column: 1 / -1;
}

.panel-header .mobile-nav .widgets > *:not(.search-cont) {
	align-self: center;
	justify-self: center;
}

.panel-header .mobile-nav-container .mobile-quick-links {
	padding: 23px 22px 28px;
}

.panel-header .mobile-nav-container .mobile-social,
.panel-header .mobile-nav-container .mobile-footer-nav {
	border-top: 1px solid #968f67;
}

.panel-header .mobile-nav-container .mobile-footer-nav {
	padding: 13px 0 22px;
}

/* Body Overlay */
.body-overlay {
	position: fixed;
	inset: 0;
	display: none;
	background-color: rgba(0, 0, 0, .2);
	z-index: 3;
}

.hamburger-open .body-overlay {
	display: block;
}