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

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

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

	&.active {
		display: block;
	}
}

.panel-header {
	.header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
		padding: 13px var(--space-5);
		background-color: var(--blue);
	}

	.logo-container {
		/*! flex: 0 1 201px; */
	}

	.logo {
		a {
			text-decoration: none;
		}

		img {
			width: 100%;
		}

		.desktop-color-logo {
			display: none;
		}
	}

	.curated-nav-container,
	.desktop-search-box,
	.desktop-tripbuilder,
	.cards-container {
		display: none;
	}

	.quick-links {
		flex-wrap: nowrap;
		gap: var(--space-6);

		.link {
			font-weight: var(--font-weight-bold);
			font-size: var(--text-lg);
			text-transform: uppercase;
			transition: color var(--transition-appendix);

			&:has(.icon) {
				display: inline;
			}
		}

		.icon {
			display: none;
		}

		.no-hero:not(:has(.shared-detail)) & .link {
			color: var(--gray-dark);
		}
	}
	
	.desktop-tripbuilder {
		position: relative;
		z-index: 2;
		opacity: 0;
		visibility: hidden;
		margin-right: -1.5rem;
		transition:
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);

		.tripbuilder-counter {
			height: auto;
			padding: 0;
			font-size: var(--text-lg);
			font-weight: var(--font-weight-medium);
			text-decoration: none;
			color: var(--gray);

			i {
				color: var(--red);
			}
		}
	}

	/*===================================*/
	/*=====----- TAKEOVER MENU -----=====*/
	/*===================================*/

	.menu-toggle {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.8125rem;
		aspect-ratio: 1;
		flex-shrink: 0;
		padding: 0;
		margin: 0;
		font-size: 1.375rem;
		line-height: 1;
		text-align: center;
		color: var(--white);
		background-color: transparent;
		border: none;
		border-radius: 0;

		.button-inner {
			display: block;
		}

		.open-icon,
		.close-icon {
			width: 100%;
			transition: opacity var(--transition-appendix);
		}

		.close-icon {
			position: absolute;
			inset: 50% auto auto 50%;
			translate: -50% -50%;
			opacity: 0;
		}

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

			.close-icon {
				opacity: 1;
			}
		}

		&:focus-visible {
			outline-color: var(--white);
		}
	}

	.takeover-menu {
		position: absolute;
		inset: 0 0 auto;
		z-index: -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		height: 100vh;
		background: var(--blue);
		opacity: 0;
		visibility: hidden;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		transition:
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);

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

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

	.menu-scroll {
		display: flex;
		flex-direction: column;
	}

	.mobile-tripbuilder {
		display: flex;
		justify-content: end;
		width: 100%;
		padding: var(--space-1) var(--space-5);
		color: var(--white);
		background: var(--red);
		order: -2;

		.tripbuilder-counter {
			padding: 0;
			height: auto;
			font-weight: var(--font-weight-medium);
			text-decoration: none;

			&:focus-visible {
				outline-color: var(--white);
			}
		}
	}

	.search-container,
	.navs-container {
		background: var(--white);
	}

	.search-container {
		order: -1;
	}

	.search-box {
		padding: 30px var(--space-5);
	}

	.main-nav-container {
		padding: var(--space-3) var(--space-10) 14px;
	}

	.secondary-nav-container {
		position: relative;
		padding: var(--space-5) var(--space-10) 22px;

		&::before {
			position: absolute;
			inset: 0 var(--space-10) auto;
			translate: 0 -50%;
			display: block;
			height: 1px;
			content: '';
			background: #ccc;
			pointer-events: none;
		}
	}

	.footer-nav-container {
		padding: 22px 28px var(--space-6);
		background: var(--blue);
	}

	/*----- ctas -----*/

	.cta-container {
        position: relative;
        z-index: 2;
        padding: 0 var(--space-5);
    }
    
    .ctas > * {
        border-bottom: 2px solid var(--white);
    }

    .ctas > *:last-child {
        border: none;
    }

    .background {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--black);
        pointer-events: none;

        .slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.45;
        }
    }

	/*----- social media -----*/

	.social {
		padding: 30px var(--space-6);
		background: var(--blue);
	}

	/*----- "close menu" button -----*/

	.close-menu-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 10px var(--space-5);
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-sm);
		line-height: var(--leading-none);
		text-transform: uppercase;
		color: var(--white);
		background-color: var(--red);
		border: none;
		border-radius: 0;

		&::after {
			font: var(--fa-font-regular);
			font-size: var(--text-xl);
			content: '\e59b';
		}

		&:focus-visible {
			outline-color: var(--white);
		}
	}

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

	@media (min-width: 64em) {
		/*----- general -----*/

		&::before,
		&::after {
			position: absolute;
			display: block;
			content: '';
			pointer-events: none;
		}
		
		&::before {
			inset: 0 0 auto;
			z-index: -2;
			height: 130px;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
			transition: opacity var(--transition-appendix);
		}

		&::after {
			inset: 0;
			z-index: -1;
			scale: 1 1.44;
			transform-origin: center top;
			background: var(--white);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			opacity: 0;
			transition:
				scale var(--transition-appendix),
				opacity var(--transition-appendix);
		}

		.header-inner {
			padding: 0;
			background-color: transparent;
			transition: background-color var(--transition-appendix);
		}

		.logo-container {
			/*! flex-basis: 379px; */
			padding: 18px 30px;
		}

		.logo {
			position: relative;

			img {
				transition:
					opacity var(--transition-appendix),
					visibility var(--transition-appendix);
			}

			.desktop-color-logo {
				position: absolute;
				inset: 0 auto auto 0;
				display: block;
				opacity: 0;
				visibility: hidden;
			}
		}

		.menu-toggle-container {
			display: flex;
			align-items: center;
			justify-content: end;
		}

		.desktop-tripbuilder {
			display: block;
		}

		.curated-nav-container,
		.desktop-search-box {
			display: block;
		}

		.curated-nav-container {
			align-self: center;
			justify-self: center;
			flex-shrink: 0;
		}

		/*----- takeover menu -----*/

		.menu-toggle {
			display: flex;
			align-items: center;
			gap: 30px;
			width: auto;
			aspect-ratio: unset;

			&::before {
				font: var(--fa-font-solid);
				content: '\f002';
				transition:
					color var(--transition-appendix),
					opacity var(--transition-appendix);
			}

			.button-inner {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 5.625rem;
				aspect-ratio: 1;
				background-color: var(--red);
			}			

			.open-icon {
				width: 2.75rem;
			}

			.close-icon {
				width: 3.25rem;
			}

			&:focus-visible {
				outline-color: var(--sw-focus-color);
			}
		}

		.takeover-menu {
			--side-padding: var(--space-10);

			grid-template:
				minmax(0, 1fr)
				max-content / minmax(0, 1fr);
			background: var(--white);
			overflow: hidden;
			overscroll-behavior: unset;
		}

		.menu-scroll {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-10);
			padding-top: var(--space-10);
			overflow-x: hidden;
			overflow-y: auto;
			overscroll-behavior: contain;
		}

		.mobile-tripbuilder,
		.footer-nav-container,
		.social,
		.close-menu-button {
			display: none;
		}

		.navs-container {
			position: relative;
			padding-left: var(--side-padding);
		}

		.main-nav-container,
		.secondary-nav-container {
			width: calc(50% - 50px);
			padding: 0;
		}

		.secondary-nav-container {
			position: static;
			padding-top: 22px;
			margin-top: var(--space-4);
			border-top: 1px solid #ccc;

			&::before {
				display: none;
			}
		}

		.search-container {
			order: unset;
			padding-right: var(--side-padding);
		}

		.search-box {
			padding: 0;
			margin-bottom: var(--space-10);
		}

		.cards-container {
			display: block;
		}

		.cta-container {
			padding: 0;
		}

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

            & > * {
                position: relative;
                border: none;
            }

            & > *::before {
                position: absolute;
                inset: 50% 0 auto auto;
                translate: 50% -50%;
                width: 1px;
                height: calc(100% - var(--space-10));
                content: '';
                background: var(--white);
                pointer-events: none;
            }

            & > *:last-child::before {
                display: none;
            }
        }

		/*----- active takeover menu -----*/

		&:has(.takeover-menu.active) {
			.header-inner {
				background-color: var(--white);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			&::before {
				opacity: 0;
			}

			.logo img {
				opacity: 0;
				visibility: hidden;
			}

			.logo .desktop-color-logo {
				opacity: 1;
				visibility: visible;
			}

			.quick-links .link {
				color: var(--gray-dark);
			}

			.desktop-tripbuilder {
				opacity: 1;
				visibility: visible;
			}

			.menu-toggle::before {
				opacity: 0;
			}
		}

		/*----- no hero -----*/

		.no-hero:not(:has(.shared-detail)) & {
			&::before,
			&::after {
				display: none;
			}

			.header-inner {
				background-color: var(--white);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			.logo img {
				display: none;
			}

			.logo .desktop-color-logo {
				position: static;
				display: block;
				opacity: 1;
				visibility: visible;
			}

			.menu-toggle {
				color: var(--gray);
			}
		}

		/*----- hover -----*/

		@media (hover: hover) {
			.root-panel:not(.no-hero) &:not(:has(.takeover-menu.active)):hover,
			.root-panel:has(.shared-detail) &:not(:has(.takeover-menu.active)):hover {
				&::before {
					opacity: 0;
				}

				&::after {
					scale: 1 1;
					opacity: 1;
				}

				.quick-links .link {
					color: var(--gray-dark);
				}

				.logo img {
					opacity: 0;
					visibility: hidden;
				}

				.logo .desktop-color-logo {
					opacity: 1;
					visibility: visible;
				}

				.menu-toggle::before {
					color: var(--gray);
				}
			}
		}
	}

	@media (min-width: 90em) {
		/*----- general -----*/

		.header-inner {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			justify-content: unset;
		}

		.logo-container {
			width: fit-content;
			max-width: 379px;
			/*! max-height: 54px; */
		}

		/*----- takeover menu -----*/

		.takeover-menu {
			--side-padding: var(--space-20);
		}

		.menu-scroll {
			padding-top: 50px;
			gap: var(--space-20);
		}
	}
}

@media (min-width: 64em) {
	.root-panel:not(.no-hero) .header-container,
	.root-panel:has(.shared-detail) .header-container {
		position: absolute;
		inset: 0 0 auto;
	}
}