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

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

.body-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	cursor: pointer;

	&.active {
		display: block;
	}
}

.panel-header {
	padding: var(--space-4) var(--space-5);
	color: var(--black);
	
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		display: block;
		content: '';
		background-color: var(--white);
		border: 1px solid var(--black);
		border-top-width: 7px;
		pointer-events: none;
		transition: background-color var(--transition-appendix);
	}

	.top-bar,
	.curated-nav {
		display: none;
	}

	.header-main,
	.search-col {
		display: flex;
		align-items: center;
	}

	.header-main {
		justify-content: space-between;
		gap: var(--space-8);
	}

	.search-col {
		gap: 10px;
	}
	
	.logo-col {
		flex-basis: 120px;
	}

	.logo img {
		width: 100%;
	}

	.contentRender_name_plugins_common_button {
		padding: 0;
		margin: 0;
	}

	.custom-button {
		display: block;
		width: auto;
		max-width: none;
		margin: 0;

		.button-link {
			--bg-color: var(--brown-tint);
			--bg-color-hover: var(--salmon);
		}
	}

	.weather-link {
		text-decoration: none;
		color: inherit;
	}

	/*===============================*/
	/*=====----- MAIN MENU -----=====*/
	/*===============================*/

	.menu-toggle {
		position: relative;
		display: block;
		width: 3.5rem;
		height: 3rem;
		flex-shrink: 0;
		background-color: var(--brown);
		background-image: url('menu-open-icon-mobile-white.svg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 2.25rem auto;
		border: none;
		border-radius: 10px;
		transition:
			background-color var(--transition-appendix),
			background-image var(--transition-appendix);

		&::before {
			position: absolute;
			inset: 0;
			display: block;
			content: '';
			border: 1px solid var(--black);
			border-right-width: 3px;
			border-bottom-width: 3px;
			border-radius: 10px;
			pointer-events: none;
			transition:
				border-right-width var(--transition-appendix),
				border-bottom-width var(--transition-appendix);
		}
	}

	.main-menu {
		position: absolute;
		inset: 100% 0 auto;
		z-index: -4;
		color: var(--black);
		background: var(--brown-tint);
		border: 1px solid var(--black);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);

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

	.menu-search {
		padding: var(--space-4) var(--space-5);
		margin-bottom: var(--space-6);
	}

	.menu-weather-row {
		padding: 0 var(--space-5);
		margin-bottom: var(--space-6);

		&:has(.weather-wrapper) {
			display: flex;
			align-items: center;
			gap: var(--space-5);
		}
	}

	.mobile-top-bar-nav {
		display: flex;
		align-items: baseline;
		gap: 25px;
		padding: 13px var(--space-5);
		color: var(--white);
		background: var(--black);
	}

	.top-bar-link {
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-xs);
		line-height: 1.2;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-decoration: none;
		color: inherit;
		border-bottom: 1px solid transparent;
		transition: border-bottom-color var(--transition-appendix);

		&.current {
			border-bottom-color: currentColor;
		}
	}

	.menu-navs {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 18px var(--space-5) 37px;
		background: url('texture-nav-bottom-right.svg') no-repeat right bottom / 205px auto;
	}
	
	.secondary-nav {
		padding-top: 6px;
		border-top: 1px solid var(--black);
	}

	.menu-ctas {
		--sw-focus-color: var(--sw-light-focus-color);

		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 28px;
		padding: 65px var(--space-5);
		color: var(--black);
		background: var(--black);

		&::before,
        &::after {
            position: absolute;
            inset: 0;
            display: block;
            content: '';
            pointer-events: none;
        }

        &::before {
            z-index: -2;
            background: var(--background-texture);
            opacity: 0.125;
        }

        &::after {
            z-index: -1;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.00) 53.48%, #000 83.72%)
        }

		&.desktop {
			display: none;
		}

		& > *:nth-child(3n - 2) .call-to-action {
            --bg-color: rgba(124, 184, 152, 0.40);
        }

        & > *:nth-child(3n - 1) .call-to-action {
            --bg-color: rgba(0, 180, 198, 0.40);
        }

        & > *:nth-child(3n) .call-to-action {
            --bg-color: rgba(244, 138, 133, 0.50);
        }
	}

	.call-to-action {
		max-width: 21.6ch;
		padding: 0;
		margin: 0 auto;
		background: none;

		.cta-inner {
			max-width: none;
			padding: 26px 34px;
			margin: 0;
		}

		.title {
			padding: 6px var(--space-4);
			font-size: 1.1875rem;
		}

		.supertitle {
			margin-bottom: 1px;
			font-size: 0.5625rem;
		}

		.rectangle-1,
		.rectangle-2,
		.rectangle-3 {
			background: var(--bg-color, rgba(124, 184, 152, 0.40));
		}

		.rectangle-1 {
			inset: 0 18px 10px;
		}

		.rectangle-2 {
			inset: 10px 0 21px;
		}

		.rectangle-3 {
			inset: var(--space-5) 9px 0;
		}
	}

	/*----- active main menu -----*/

	.menu-toggle.active {
		background-image: url('menu-close-icon-mobile-white.svg');
	}

	.main-menu.active {
		opacity: 1;
		visibility: visible;
	}

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

	@media (hover: hover) {
		.call-to-action:hover {
			.title {
				color: var(--white);
			}

			.rectangles {
				scale: 1.26 1;
				opacity: 0.5;
			}
		}

		.top-bar-link:hover {
			text-decoration: none;
			color: inherit;
			border-bottom-color: currentColor;
		}
	}

	@media (min-width: 64em) {
		padding: 0;
		transition:
			translate var(--transition-appendix),
			opacity var(--transition-appendix);
		transition-delay: 0.1s;
		
		.search-cont .searchInput::-webkit-search-cancel-button {
			-webkit-appearance: none;

			height: 16px;
			width: 16px;
			background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 0 0-1.41 1.41L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"/></svg>') no-repeat center;
			background-size: contain;
			cursor: pointer;
		}

		&::before {
			border-bottom-width: 1px;
			box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15);
		}

		.top-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-8);
			padding: var(--space-2) var(--space-12);
			color: var(--white);
			background: var(--black);
		}

		.top-bar-nav-col,
		.top-bar-weather-col {
			transition:
				opacity var(--transition-appendix),
				visibility var(--transition-appendix);
		}

		.top-bar-nav-col {
			display: flex;
			align-items: baseline;
			gap: var(--space-5);
		}

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

		.header-main {
			align-items: stretch;
			padding: 0 var(--space-12);
		}

		.logo-col,
		.search-col {
			padding: var(--space-3) 0;
		}

		.logo-col {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-basis: 164px;
		}

		.curated-nav {
			display: flex;
			justify-content: center;
			gap: var(--space-5);
			transition:
				opacity var(--transition-appendix),
				visibility var(--transition-appendix);
		}

		.menu-toggle {
			width: 5.0625rem;
			height: 3.9375rem;
			background-image: url('menu-open-icon-desktop-white.svg');
			background-size: 3.0625rem auto;
		}

		.main-menu {
			translate: 0 -100%;
			display: grid;
			grid-template:
				'mainnav secondarynav search' auto
				'mainnav secondarynav .' auto / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
			gap: 1px;
			background: var(--black);
			overflow-x: hidden;
			overflow-y: auto;
			overscroll-behavior: contain;
			transition:
				translate var(--transition-appendix),
				opacity var(--transition-appendix),
				visibility var(--transition-appendix);

			&::before,
			&::after {
				position: absolute;
				inset: 0;
				display: block;
				content: '';
				pointer-events: none;
			}

			&::before {
				z-index: -2;
				background: var(--background-texture);
				opacity: 0.125;
			}

			&::after {
				z-index: -1;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.00) 53.48%, #000 83.72%)
			}
		}

		.menu-search {
			--sw-focus-color: var(--sw-light-focus-color);

			display: grid;
			grid-template-columns: minmax(0, 1fr);
			align-content: start;
			gap: var(--space-16);
			grid-area: search;
			padding: 50px 50px var(--space-10);
			margin: 0;
			color: var(--white);
		}

		.menu-weather-row,
		.mobile-top-bar-nav {
			display: none !important;
		}

		.menu-navs {
			display: contents;
			background: none;
		}

		.main-nav,
		.secondary-nav {
			padding: var(--space-8);
		}

		.main-nav {
			grid-area: mainnav;
			background: var(--brown-tint);
		}
		
		.secondary-nav {
			grid-area: secondarynav;
			background:
				url('texture-nav-bottom-right.svg') no-repeat right bottom / 324px auto,
				var(--brown-tint);
			border: none;
		}

		.menu-ctas {
			padding: var(--space-10) 50px 50px;
			background: none;

			&::before,
			&::after {
				display: none;
			}
		}

		.menu-ctas.mobile {
			display: none;
		}

		.menu-ctas.desktop {
			display: flex;
		}

		.call-to-action {
			display: block;
			max-width: 23ch;
			height: auto;
			
			&::before {
				display: none;
			}

			.cta-inner {
				padding: 30px 42px;
			}
		}

		/*----- active main menu -----*/

		&:has(.main-menu.active) .curated-nav,
		&:has(.main-menu.active) .top-bar-nav-col {
			opacity: 0;
			visibility: hidden;

			&,
			* {
				pointer-events: none;
			}
		}

		.menu-toggle.active {
			background-color: var(--brown-tint);
			background-image: url('menu-close-icon-desktop-brown.svg');
		}

		.main-menu.active {
			translate: 0 0;
		}

		/*----- fixed header -----*/

		&.fixed {
			position: fixed;
			inset: auto 0 calc(100% + 4px);
			translate: 0 0;
			transition-delay: 0s;
		}

		&.fixed.reveal {
			translate: 0 calc(100% + 4px);
		}

		&.fixed.between {
			opacity: 0;
		}
		
		/*----- hover -----*/

		@media (hover: hover) {
			.menu-toggle:not(.active):hover {
				background-color: var(--brown-tint);
				background-image: url('menu-open-icon-desktop-brown.svg');
			}
		}
	}

	@media (min-width: 90em) {
		.curated-nav {
			gap: 50px;
		}

		.main-nav,
		.secondary-nav {
			padding: 34px 75px var(--space-8);
		}
	}
}