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

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

/* Header */ 
.panel-header.hamburger {
	--top-bar-height: 85px;
	--text-color: var(--gray-900);
	--surface-dropdown-nav: var(--primary-color-200);

	position: absolute;
	width: 100%;
	z-index: 11;
}

@media (min-width: 64em) {
	.panel-header.hamburger { --top-bar-height: 91px;}
	.panel-header.hamburger .primary-content-container {
		height: var(--top-bar-height);
		margin: 35px 30px 0 30px;
		padding: 0 30px;
	}
}

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

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

.panel-header.hamburger .nav-container .hamburger-dropdown-toggle .search-icon {
	transition: opacity ease .2s;
}

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

.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%;
		width: 70px;
	}
}

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

	position: absolute;
	z-index: 10;
	display: none;
	top: -100%;
	width: 100%;
	background-color: var(--surface-dropdown-nav);
}

.dropdown-nav-container.active {
	display: block;
	transition: top 20ms ease-in-out;
	background: 
		url(/includes/public/assets/shared/dashed-line-arrow.svg) bottom 10px left -10px no-repeat,
		linear-gradient(0deg, rgba(16, 117, 171, 0.90) 0%, rgba(16, 117, 171, 0.90) 100%),
		url(https://assets.simpleviewinc.com/simpleview/image/upload/q_55/v1/clients/fargo-moorhead/nav_open_bg_mobile_ecbab4d4-833e-43d0-bdf6-05b17fc3dbc6.jpg) center bottom;
	background-size: 100%;
}

.dropdown-nav-container.transitioned {
	top: 0;
}

@media (min-width: 64em) {
	.dropdown-nav-container.active {
		position: relative;
		background: var(--sky-dark);
	}

	.dropdown-nav-container.active::before {
		content: '';
		background: url(/includes/public/assets/shared/dashed-line-arrow-desktop.svg) bottom left 40px no-repeat;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-size: calc(100% - 50px);
		max-width: calc(100% - 20px);
		pointer-events: none;
	}
	
	.dropdown-nav-container.active::after {
		content: '';
		background: url(https://assets.simpleviewinc.com/simpleview/image/upload/v1/clients/fargo-moorhead/nav_open_bg_desktop_aa1ef468-4861-45b2-a843-a2fe13d8f95d.jpg) center bottom no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
		pointer-events: none;
	}

}
/* 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: min(calc(200px + (350 - 200) * ((100vw - 375px) / (639 - 375))), 350px);
	padding-top: var(--top-bar-height);
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: 1;
	position: relative;
}

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

.dropdown-nav-container .nav .nav-item-control.level-1 > .nav-link {
	font-family: var(--font-display);
	font-weight: 500;
}

@media (min-width: 40em) {
	.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; }
}

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

		height: 100vh;
		overflow-y: scroll;
		scrollbar-color: var(--scrollbar-color) transparent;
		scrollbar-width: thin;
	}

	.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: 188px var(--space-8) var(--space-10) var(--space-5);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: dense;
		column-gap: var(--space-3);
		justify-items: center;
	}

	.dropdown-nav-container .nav :is(.main-nav, .secondary-nav) {
		grid-row: 1 / -1;
		width:  100%;
		max-width: var(--width-compact);
	}

	.dropdown-nav-container .nav .mobile-footer-nav { display: none; }
	.dropdown-nav-container .nav .nav-item.level-1 { padding: 0 var(--space-6); }
	.navigation.secondary.mobile .nav-item.level-1.secondary { padding-right: var(--space-12); }

	.dropdown-nav-container .nav .nav-item-control.level-1 > .nav-link {
		font-size: min(calc(25px + (36 - 25) * ((100vw - 1024px) / (1440 - 1024))), 36px);
		line-height: var(--leading-none);
		padding: var(--space-1) 10px var(--space-2) 15px;
	}

	.dropdown-nav-container .secondary-nav .nav-item-control.level-1 > .nav-link { font-size: var(--text-3xl); }

	.dropdown-nav-container .nav .social-media {
		grid-column: 3;
		padding-left: var(--space-6);
		padding-right: 50px;
		width: 100%;
	}
}

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

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

/* Nav Widgets */
.dropdown-nav-container .nav .widgets {
	margin: 0 auto;
	padding: var(--space-6) var(--space-5) var(--space-6);
	display: grid;
	grid-template-columns: 1fr minmax(max-content, 0.1fr);
	grid-auto-flow: dense;
	color: var(--text-color);
	align-items: center;
}

.dropdown-nav-container .nav .widgets > :is(.weather-wrapper, [data-tripbuilder-cont]) {
	align-self: center;
	justify-self: center;
}

@media (min-width: 64em) {
	.dropdown-nav-container .nav .widgets {
		grid-column: 3;
		align-self: start;
		justify-self: start;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: var(--space-6);
		width: 100%;
		padding:  0;
		margin-bottom: 30px;
		padding-right: 50px;
	}

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

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

@media (min-width: 64em) {
	.dropdown-nav-container .nav .search-cont {
		width:  100%;
		max-width:  var(--width-compact);
		height: 54px;
	}

	.dropdown-nav-container .search-cont .headerbox-search-form input[type="search"] {
		height: 54px;
		padding: 0 0 0 20px;
	}
}

/* ENews */
.dropdown-nav-container .enews-cont { margin-top: var(--space-5) }
.dropdown-nav-container .nav .cta-cont {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding-inline: var(--space-5);
	margin-bottom: 25px;
}

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

	.dropdown-nav-container .nav .cta-cont {
		display: flex;
		padding-inline: var(--space-6);
		margin-bottom: 30px;
		flex-direction: column;
		gap: 30px;
		padding-right: 50px;
		width: 100%;
	}
}

.root-panel.panel-page.no-hero #main-content{ margin-top: var(--space-24); }

@media (min-width: 64em) {
	.root-panel.panel-page.no-hero #main-content{
		margin-top: var(--space-32);
	}
}