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

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

.body-overlay {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: none;

	&.active {
		display: block;
	}
}

.panel-header {
	background: var(--gray-dark);

	.desktop-navs {
		display: none;
	}

	.logo-col {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
		padding: var(--space-4) var(--space-5);
	}

	.logo-cont {
		flex-basis: 162px;
	}

	.logo {
		a {
			display: block;
			text-decoration: none !important;
		}

		img {
			width: 100%;
		}
	}

	.reciteme {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		padding: var(--space-1) 6px;
		margin: 0;
		text-decoration: none !important;
		color: var(--white);
		background: var(--blue-dark);

		.fa-universal-access {
			font-size: var(--text-xl);
		}

		.fa-language {
			font-size: var(--text-2xl);
		}
	}

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

	.menu-toggle {
		position: relative;
		width: 38px;
		padding: 0;
		margin: 0;
		background: none;
		border: none;
		border-radius: 0;

		.icon-open,
		.icon-close {
			width: 100%;
			transition: opacity var(--transition-appendix);
		}
		
		.icon-close {
			position: absolute;
			inset: 50% auto auto 0;
			translate: 0 -50%;
			opacity: 0;
		}

		&.active {
			.icon-open {
				opacity: 0;
			}

			.icon-close {
				opacity: 1;
			}
		}
	}

	.mobile-menu {
		position: absolute;
		inset: 100% 0 auto;
		color: var(--gray-dark);
		background: var(--off-whiter);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);

		&:not(.active),
		&:not(.active) * {
			pointer-events: none;
		}

		&.active {
			opacity: 1;
			visibility: visible;
		}
	}

	.weather-row {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: center;
		justify-items: space-between;
		padding: 15px var(--space-5);
	}

	.mobile-menu .reciteme {
		justify-self: start;
	}

	.search-row {
		padding: 0 var(--space-5) var(--space-6);
	}

	.mobile-navs {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 25px;

		.contentRender_name_plugins_collections_template_custom_quick_links .quick-links .link {
			font-size: var(--text-base);
			text-transform: uppercase;
		}

		.contentRender_name_plugins_collections_template_custom_quick_links:nth-child(2) .quick-links .link {
			font-size: 0.9375rem;
			text-transform: none;
			font-weight: var(--font-weight-medium);
		}

		> * + * {
			position: relative;
			padding-top: 32px;

			&::before {
				position: absolute;
				inset: 0 auto auto 50%;
				translate: -50% 0;
				display: block;
				width: calc(100% - var(--space-10));
				height: 2px;
				content: '';
				background: #D9D9D9;
			}
		}

		> *:last-child {
			margin-bottom: 27px;
		}
	}

	.ctas {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);

		> *:nth-child(3n - 1) .call-to-action {
			background: var(--blue-dark);
		}

		> *:nth-child(3n) .call-to-action {
			background: var(--red);
		}
	}

	/*=======================================*/
	/*=====----- FLOATING BUTTONS  -----=====*/
	/*=======================================*/

	.floating-buttons {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cta-button,
	.tripbuilder-counter {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7px var(--space-2);
		margin: 0;
		font-family: var(--font-soft);
		font-weight: var(--font-weight-medium);
		font-size: 0.625rem;
		line-height: 1.1;
		text-transform: uppercase;
		text-align: left;
		text-decoration: none !important;
	}

	.cta-button {
		gap: 9px;
		color: var(--burgundy);
		background: var(--beige);

		&::before {
			font: var(--fa-font-regular);
			font-size: var(--text-lg);
			line-height: 1;
			content: '\f8f7';
		}

		.button-text {
			max-width: var(--space-10);
		}
	}

	.contentRender_name_plugins_common_tripbuilder_counter > div,
	.tripbuilder-counter {
		height: 100%;
	}

	.tripbuilder-counter {
		color: var(--white);
		background: var(--burgundy);

		i {
			margin-right: 5px;
			font-weight: 900;
			font-size: 0.9375rem;
			color: var(--yellow);
		}

		span {
			max-width: var(--space-10);
			white-space: normal;

			&::after {
				content: ' faves';
			}
		}
	}

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

	@media (min-width: 64em) {
		position: absolute;
		inset: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
		
		
		
		
		
		

		&:not(:has(.floating-buttons)) {
			padding-right: var(--space-5);
		}

		.logo-col {
			display: block;
			flex-basis: 226px;
			padding: var(--space-8);
		}

		.menu-toggle {
			display: none;
		}

		.nav-col {
			display: flex;
			align-items: center;
			justify-content: end;
			gap: 30px;
		}

		.desktop-navs {
			display: flex;
			flex-direction: column;
			align-items: end;
			gap: var(--space-4);
			padding: 15px 0;
		}

		.top-bar {
			display: flex;
			align-items: center;
			gap: var(--space-4);
		}

		.secondary-nav,
		.reciteme,
		.contentRender_name_plugins_weather_weather {
			transition:
				opacity var(--transition-appendix),
				visibility var(--transition-appendix);
		}

		.secondary-nav {
			.contentRender_name_plugins_collections_template_custom_quick_links .quick-links .link {
				font-size: 1.0625rem;
				color: var(--beige);
				font-weight: var(--font-weight-bold);
			}
		}
		
		.contentRender_name_plugins_search_headerbox {
			align-self: stretch;
		}

		.main-nav {
			padding-top: 17px;
			border-top: 1px solid rgba(250, 249, 239, 0.4);

			.contentRender_name_plugins_collections_template_custom_quick_links .quick-links .link {
				font-size: var(--text-xl);
				text-transform: uppercase;
			}
		}

		.floating-buttons {
			grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1fr);
			align-self: stretch;
			width: 75px;
			flex-shrink: 0;

			a {
				width: 100%;
			}
		}

		.cta-button,
		.tripbuilder-counter {
			padding: var(--space-5) var(--space-2);
		}

		.cta-button::before {
			font-size: var(--text-xl);
		}

		.tripbuilder-counter i {
			font-size: var(--text-lg);
		}

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

		&:has(.search-cont.active) {
			.secondary-nav,
			.reciteme,
			.contentRender_name_plugins_weather_weather {
				opacity: 0;
				visibility: hidden;
			}
		}
	}

	@media (min-width: 90em) {
		.logo-col {
			flex-basis: 381px;
		}
	}
}

/*=============================*/
/*=====----- NO HERO -----=====*/
/*=============================*/

.no-hero:not(:has(.shared-detail, .custom-blog-detail-hero)) .panel-header {
	@media (min-width: 64em) {
		& {
			position: relative;
			background: var(--gray-dark);
		}
	}
}