/* Root */
.header-container {
	z-index: 15;
}

@media (min-width: 64em) {
	.root-panel.hamburger-open {
		height: 100vh;
		overflow-y: hidden;
	}
}

html.hamburger-open {
	overflow: hidden;
}

/* Header */ 
.panel-header.hamburger {
	--top-bar-height: 100px;
	--text-color: var(--white);
	--surface-dropdown-nav: var(--black);

	position: relative;
	z-index: 11;
}

@media (min-width: 64em) {
	.panel-header.hamburger .primary-content-container {
		height: var(--top-bar-height);
	}
}

/* Dropdown Toggle */
.panel-header.hamburger .nav-container {
	gap: var(--space-2);
}

.panel-header.hamburger .nav-container .hamburger-dropdown-toggle {
	height: 100%;
	display: flex;
	align-items: center;
	column-gap: var(--space-2);
	padding: 0 var(--space-2);
	color: var(--text);
}

.panel-header.hamburger .nav-container .hamburger-dropdown-toggle .search-icon {
	transition: opacity ease .2s;
	padding: 0 0 0 var(--space-4);
}

.panel-header.hamburger .nav-container .hamburger-dropdown-toggle.active .search-icon {
	display: none;
}

.panel-header.hamburger .nav-container .hamburger-dropdown-toggle:focus-visible {
	outline-offset: 0;
}

@media (min-width: 64em) {
	.panel-header.hamburger .nav-container .hamburger-dropdown-toggle {
		height: 100%;
	}
}

/* Dropdown Nav Container */
.dropdown-nav-container {
	--top-bar-height: 100px;
	--text-color: var(--white);
	--surface-dropdown-nav: var(--black);

	position: absolute;
	z-index: 10;
	display: none;
	top: -100%;
	width: 100%;
	background-color: var(--surface-dropdown-nav);
	height: calc(100vh - var(--top-bar-height));
	overflow-y: scroll;

	@media(width <= 40em) {
		padding-bottom: 44px;
	}

	& > * {
		opacity: 0;

		@media (width >= 40em) {
			--top-bar-height: 128px;
		}
	}

	.links {
		.links-header {
			font-family: var(--font-body);
			font-size: 1.625rem;
			color: var(--white);
			font-weight: 700;
			padding-inline: 14px;
		}
	}

	.thirdCol .search-cont {
		display: none;
	}
}

.dropdown-nav-container.active {
	display: block;
	transition: top 250ms ease-in-out;

	& > * {
		opacity: 1;
		transition: opacity 250ms ease-in-out;
	}
}

.dropdown-nav-container.transitioned {
	top: var(--top-bar-height);

	@media (width >= 40em) {
		padding-right: 14px;
	}
}

.panel-header.hamburger:has(+ .dropdown-nav-container.transitioned) .nav-toggle-cont {
	background: var(--surface-foreground);

	& > * {
		opacity: 0;
		visibility: hidden;

		transition: all 25ms ease-in;
	}
}

.panel-header.hamburger:has(+ .dropdown-nav-container.transitioned) {
	--surface-foreground: var(--surface-dropdown-nav);

	background: var(--surface-foreground);
	transition: background 250ms ease-in-out;

	.logo {
		filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(2%) hue-rotate(205deg) brightness(109%) contrast(101%);
	}

	.menu-toggle {
		position: initial;
		
		.menu-text {
			display: none;
		}

		.hamburger-inner {
			background-color: var(--white);

			&::before {
				background-color: var(--white);
			}
		}
	}

	@media (width >= 40em) {
		padding-right: 14px;
	}
}

/* Dropdown Nav */
.dropdown-nav-container :is(.nav-container.secondary, .nav-container .navigation) {
	display: none;
}


.dropdown-nav-container .nav {
	width: 100%;
	max-width: var(--width-comfortable);
	margin:  0 auto;
	padding-bottom: var(--space-4);
	display: grid;
}

.dropdown-nav-container .nav .social-links a,
.dropdown-nav-container .nav .quick-links a {
	color: var(--text-color);
}

.dropdown-nav-container .main-nav .menu-toggle {
	display: none;
}

.dropdown-nav-container .nav .nav-link:focus-visible {
	outline: 1px solid var(--primary-color-700);
}

.panel-header.hamburger .nav-toggle-cont {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--gold);
	padding: 0 var(--space-4) 0 0;
}

/* Secondary Nav */

.panel-header.hamburger .navigation.secondary.mobile {
	background-color: var(--gold);
}

.panel-header.hamburger .navigation.secondary .secondary-nav-dropdown.mobile{
	display: flex;
	align-items: center;
	background-color: transparent;
	color: var(--text);
}

.panel-header.hamburger .navigation.secondary.mobile a {
	font-size: var(--text-sm);
	padding-left: var(--space-6);
	color: var(--black);
}

.panel-header.hamburger .navigation.secondary .secondary-nav-dropdown.mobile p{
	display: block;
	color: var(--text);
	display: flex;
    align-items: center;
    padding: 10px var(--space-2) 10px var(--space-4);
    width: 100%;
    font-size: var(--text-sm);
    line-height: .875rem;
	border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.panel-header.hamburger .navigation.secondary img {
	transition: transform 300ms cubic-bezier(0,0,0.3,1);
}

.panel-header.hamburger .navigation.secondary.active img {
	transform: rotate(-180deg);
}

.panel-header.hamburger .navigation.secondary .secondary-nav-child-cont {
	display: flex;
	background: var(--lightblue);
	position: absolute;
	flex-direction: column;
	z-index: 1;
	transform: translateY(-110%);
	opacity: 0;
	transition: all 300ms cubic-bezier(0,0,0.3,1);
	background-color: var(--gold);
}

.panel-header.hamburger .navigation.secondary.active .secondary-nav-child-cont {
	opacity: 1;
	transform: translateY(0);
}

.panel-header.hamburger .navigation.secondary .level-1.nav-item:first-of-type > .nav-item-control {
	font-weight: 700;
}

.panel-header.hamburger .navigation.secondary.desktop .nav-item.level-1 > .nav-item-control > a {
	border: none;
	font-size: var(--text-sm);
	height: 45px;
}

@media (min-width: 40em) {
	.panel-header.hamburger .nav-toggle-cont {
		justify-content: space-between;

		.cta-wrapper {
			display: flex;
			gap: var(--space-6);
		}
	}

	.panel-header.hamburger .navigation .nav-item.open > .nav-item-control {
		background-color: transparent;
		color:  var(--primary-color-100);
	}

	.panel-header.hamburger .navigation .nav-item .dropdown-menu {
		background-color: transparent;
	}

	.panel-header.hamburger .navigation.secondary .secondary-nav-dropdown.mobile{
		display: none;
	}

	.panel-header.hamburger .navigation.secondary .secondary-nav-child-cont {
		position: static;
		display: flex;
		flex-direction: row;
		opacity: 1;
		transform: translateY(0);
	}

	.panel-header.hamburger .navigation.secondary.active .secondary-nav-child-cont .nav-item.level-1 a {
		justify-content: flex-start;
	}
}

@media (min-width: 64em) {
	.dropdown-nav-container {
		--scrollbar-color: var(--primary-color-300);

		height: calc(100vh - var(--top-bar-height));
		overflow-y: scroll;
		scrollbar-color: var(--scrollbar-color) transparent;
		scrollbar-width: none;
		
		.thirdCol {
			.search-cont {
				display: block;
			}

			.social-wrapper {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.links {
					.links-header {
						padding: 47px 0 14px;
					}
				}
			}
		}
	}

	.dropdown-nav-container::-webkit-scrollbar {
		width: var(--space-1);
	}

	.dropdown-nav-container::-webkit-scrollbar-thumb {
		background-color: var(--scrollbar-color);
		border-radius: var(--rounded-md);
	}

	.dropdown-nav-container .nav {
		bottom: 0;
		max-width: unset;
		padding: var(--space-16) var(--space-8) var(--space-10) var(--space-6);
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: calc(100vh - (var(--top-bar-height) + var(--space-20)));
		grid-auto-flow: dense;
		justify-items: stretch;
		column-gap: var(--space-3);
	}
	
	.dropdown-nav-container .nav .nav-cont {
		position: relative;
		max-width: var(--width-compact);
	}

	.dropdown-nav-container .nav :is(.main-nav, .secondary-nav, .thirdCol) {
		width:  100%;
	}

	.dropdown-nav-container .nav :is(.main-nav, .thirdCol) {
		padding-block: 38px;
	}

	.dropdown-nav-container .nav .mobile-footer-nav {
		display: none;
	}

	.dropdown-nav-container .nav .nav-item-control.level-1 > .nav-link {
		line-height: var(--leading-none);
	}
}

/* Quick Links Container */
.panel-header.hamburger .quick-links-container {
	display: none;
}

@media (min-width: 1134px) {
	.panel-header.hamburger .quick-links-container {
		display: flex;
		align-items: center;
	}
}

/* Nav Widgets */
.dropdown-nav-container .nav .widgets {
	display: contents;
}

.dropdown-nav-container .nav .widgets > .inner {
	margin: 0 auto;
	padding: var(--space-6) 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 16px;
	grid-auto-flow: dense;
	color: var(--text-color);
	width: 100%;
}

.dropdown-nav-container .nav .widgets > .inner > :is(.weather-wrapper, [data-tripbuilder-cont]) a {
	filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(2%) hue-rotate(205deg) brightness(109%) contrast(101%);
}

@media (min-width: 64em) {
	.dropdown-nav-container .nav .widgets {
		display: none;
	}
	.dropdown-nav-container .nav .widgets > .inner {
		padding:  0;
	}

	.dropdown-nav-container .nav .widgets > .inner > :is(.weather-wrapper, [data-tripbuilder-cont]) {
		display: none;
	}
}

/* Search Cont */
.dropdown-nav-container .nav .search-cont {
	grid-column: 1 / -1;

	.headerbox-search-form input[type="search"] {
		border: 2px solid rgba(29, 29, 27, 0.25);
	}

	.headerbox-search-form button {
		width: 50px;
	}
}

@media (min-width: 64em) {
	.dropdown-nav-container .nav .search-cont {
		--search-input-icon-bg-hover: transparent;

		width:  100%;
		max-width:  300px;
		height: 70px;
	}
}

/* ENews */
.dropdown-nav-container .enews-cont {
	margin-top: var(--space-5);
	order: 1;
}

@media (min-width: 64em) {
	.dropdown-nav-container .nav .enews-cont {
		margin-top: var(--space-5);
		grid-column: 3;
		grid-row: 2;
		padding-top: 0;
	}
}