/* HEADER */

header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding: clamp(12px, 1vw, 15px);
	padding-bottom: 0;
	z-index: 90;

	& .menu-wrapper {
		z-index: 90;
		position: relative;
	}

	& .container {
		align-items: center;
		justify-content: space-between;
	}

	& .flex {
		gap: 40px;
	}

	& .menu.flex {
		align-items: center;
	}

	& .logo {
		width: 44px;
		height: 44px;

		& svg {
			width: 100%;
			height: auto;
		}
	}

	& .menu li {
		text-align: justify;
		font-style: normal;

		& > a > div {
			width: 100%;
			position: relative;
			display: inline-flex;
			align-items: center;

			&::before {
				content: '';
				width: 0;
				height: 1px;
				background-color: var(--color-sand);
				transition: width 0.15s ease-out, margin-right 0.15s ease-out;
				display: block;
				margin-right: 0;
			}
		}

		&:hover > a > div::before {
			width: 100%;
			margin-right: 8px;
		}
	}

	& .menu ul span {
		font-size: 12px;
		font-weight: 500;
		line-height: 12px;
		letter-spacing: -0.12px;
	}

	& .menu p {
		margin: 0;
		font-size: clamp(16px, 1.1vw, 18px);
		font-weight: 400;
		line-height: clamp(16px, 1.1vw, 18px);
		letter-spacing: -0.18px;
	}

	& ul li a,
	& ul li a:hover,
	& ul li a:active,
	& ul li a:focus,
	& ul li a:visited {
		color: var(--color-sand);
		text-decoration: none;
	}

	& .menu ul li > a {
		display: flex;
		flex-direction: column;
		gap: 3px;
	}

	/* Dropdown Menu */
	& .menu li.has-dropdown {
		position: relative;

		&:hover .menu-dropdown {
			pointer-events: auto;
		}

		&:hover .dropdown-content {
			max-height: 60px;
			opacity: 1;
		}
	}

	& .menu .dropdown-item p {
		margin: 0;
		font-size: clamp(14px, 1.1vw, 15px);
		font-weight: 400;
		line-height: clamp(14px, 1.1vw, 15px);
	}

	& .logo svg path,
	& .menu ul a,
	& .menu ul li div::before,
	& .cta-button-patch .circle svg path,
	& .cta-button-text,
	& .cta-button-patch .circle {
		transition: fill 0.2s ease-out, background-color 0.2s ease-out, color 0.2s ease-out, width 0.2s ease-out;
	}

	&:has(.menu-mobile.open) .menu-button svg:first-child {
		transform: scale(0);
		opacity: 0;
	}

	&:has(.menu-mobile.open) .menu-button svg:last-child {
		max-width: 30px;
		opacity: 1;
		transform: scale(1);
	}

	/* SECTION COLOR MANAGEMENT
	   Themes: "light" (default), "dark" (black menu + black logo + black button),
	   "dark-orange" (black menu text, orange logo + orange button),
	   "all-white" (sand menu + sand logo + sand button bg with black text/arrow).
	   Add data-menu-theme="<theme>" to <section> elements.
	   For initial page theme: add a condition in template-parts/components/menu/menu.php */

	&.menu-theme-dark {
		& .logo svg path {
			fill: var(--color-title-primary);
		}

		& .menu ul li a {
			color: var(--color-title-primary);
		}

		& .dropdown-item,
		& .dropdown-item:hover,
		& .dropdown-item:visited {
			color: var(--color-title-primary);
		}

		& .menu li > a > div::before {
			background-color: var(--color-title-primary);
		}

		& .cta-button {
			color: var(--color-orange);
		}

		& .cta-button-patch .circle svg path {
			fill: var(--color-orange);
		}

		& .cta-button-text {
			background-color: var(--color-title-primary);
		}

		& .cta-button-patch .circle {
			background-color: var(--color-title-primary);
		}

		&:has(.menu-mobile.closed) .menu-button svg path {
			fill: var(--color-title-primary);
		}
	}

	/* dark-orange: black menu text, orange logo + orange button (unchanged from light) */
	&.menu-theme-dark-orange {
		& .menu ul li a {
			color: var(--color-title-primary);
		}

		& .dropdown-item,
		& .dropdown-item:hover,
		& .dropdown-item:visited {
			color: var(--color-title-primary);
		}

		& .menu li > a > div::before {
			background-color: var(--color-title-primary);
		}

		&:has(.menu-mobile.closed) .menu-button svg path {
			fill: var(--color-title-primary);
		}
	}

	/* all-white: logo (logo.svg) + button background (base .cta-button-text/
	   .circle rules) are orange by default, so those need overriding to sand,
	   with the button text/arrow flipped to dark-sand for contrast — or to the
	   product's palette PRIMARY color (--menu-accent, set inline on <header>
	   by template-parts/components/menu/menu.php) while the product hero itself is
	   the active section (.menu-accent-active, toggled by template-parts/components/menu/menu.js).
	   Any other section using data-menu-theme="all-white" (e.g. product-biomes)
	   always gets dark-sand, since --menu-accent belongs to the hero, not to
	   the rest of the page. Menu links, dropdown items and the underline
	   already default to sand. */
	&.menu-theme-all-white {
		& .logo svg path {
			fill: var(--color-sand);
		}

		& .cta-button {
			color: var(--color-dark-sand);
		}

		& .cta-button-patch .circle svg path {
			fill: var(--color-dark-sand);
		}

		& .cta-button-text {
			background-color: var(--color-sand);
		}

		& .cta-button-patch .circle {
			background-color: var(--color-sand);
		}
	}

	/* all-black: inverse of all-white — black logo, links and button background
	   while the header has a light-colored background. The CTA button ink
	   borrows the header's bg color (--menu-accent) so it always contrasts. */
	&.menu-theme-all-black {
		& .logo svg path {
			fill: var(--color-black);
		}

		& .menu ul li a {
			color: var(--color-black);
		}

		& .dropdown-item,
		& .dropdown-item:hover,
		& .dropdown-item:visited {
			color: var(--color-black);
		}

		& .menu li > a > div::before {
			background-color: var(--color-black);
		}

		& .cta-button {
			color: var(--color-black);
		}

		& .cta-button-patch .circle svg path {
			fill: var(--color-black);
		}

		& .cta-button-text {
			background-color: var(--color-black);
		}

		& .cta-button-patch .circle {
			background-color: var(--color-black);
		}

		&:has(.menu-mobile.closed) .menu-button svg path {
			fill: var(--color-black);
		}
	}

	/* Product hero active: borrow the hero's own bg color (--menu-accent) as
	   the CTA button's ink instead of the generic fallback color above. */
	&.menu-theme-all-white.menu-accent-active,
	&.menu-theme-all-black.menu-accent-active {
		& .cta-button {
			color: var(--menu-accent, var(--color-orange));
		}

		& .cta-button-patch .circle svg path {
			fill: var(--menu-accent, var(--color-orange));
		}
	}

	@media (max-width: 1024px) {
		& .menu.flex {
			gap: 8px;
		}

		&:has(.menu-mobile.open) .logo svg path,
		&:has(.menu-mobile.open) .menu-button svg path {
			fill: var(--color-sand) !important;
		}
	}

	@media (max-width: 768px) {
		padding: 12px 12px 0;

		& .logo {
			width: 38px;
			height: 38px;
		}
	}

	/* Responsive variables for header
	   <header> sits outside .page-root (to preserve position:fixed),
	   so it doesn't inherit @container page-root variable overrides.
	   Only the variables the menu actually uses are listed here. */
	@media (max-width: 1800px) { --spacing-wrapper: 80px; }
	@media (max-width: 1500px) { --spacing-wrapper: 40px; }
	@media (max-width: 1240px) { --spacing-wrapper: 30px; --font-size-heading-h3: clamp(80px, 7.5vw, 120px); }
	@media (max-width: 1024px) { --spacing-wrapper: 30px; --font-size-heading-h3: clamp(70px, 7vw, 100px); }
	@media (max-width: 768px)  { --spacing-wrapper: 20px; --font-size-heading-h3: 46px; }
	@media (max-width: 500px)  { --font-size-heading-h3: 38px; }
}

nav ul {
	align-items: center;
}

/* Hide nav links on scroll-down — desktop only */
@media (min-width: 769px) {
	nav ul.hide-mobile {
		transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
	}

	nav ul.hide-mobile.menu-links--hidden {
		transform: translateY(-8px);
		opacity: 0;
		pointer-events: none;
	}
}

/* Dropdown Menu */

.menu-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 100;
}

.dropdown-bridge {
	height: 10px;
}

.dropdown-content {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	letter-spacing: -0.16px;
	text-decoration: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	white-space: nowrap;

	&,
	&:hover,
	&:active,
	&:visited {
		color: var(--color-sand);
		text-decoration: none;
		flex-direction: row;
	}
}

.dropdown-arrow {
	width: 13px;
	height: 13px;
	margin-left: 10px;
	flex-shrink: 0;

	& svg {
		width: 100%;
		height: 100%;

		& path {
			fill: currentColor;
		}
	}
}

.menu-button {
	appearance: none;
	border: none;
	background: none;
	position: relative;
	padding: 0;
	width: 30px;
	height: 30px;
	overflow: hidden;
	z-index: 10;

	& svg {
		width: 30px;
		height: 30px;
		max-width: 30px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		opacity: 1;
		transition: opacity 0.2s ease-out, max-width 0.2s ease-out;

		& path {
			fill: var(--color-sand);
		}

		&:last-child {
			transform: scale(0);
			opacity: 0;
		}
	}
}

.menu .cta-button-text {
	padding: 12px 18px;
}

/* Mobile Menu Styling */
@media (max-width: 1024px) {
	.menu-dropdown {
		display: none;
	}

	.menu-mobile {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		background-color: var(--color-dark-sand);
		z-index: 9;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		transform: translateX(-100%);
		transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
		padding: 0 var(--spacing-wrapper) var(--spacing-wrapper);

		&.open {
			transform: translateX(0);
		}

		& ul {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0;
			width: 100%;
		}

		& li {
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 30px 0;
			border-top: 1px solid rgba(0, 0, 0, 0.3);
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			&:first-child {
				border-top: none;
			}

			& a {
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				color: var(--color-sand) !important;
				text-decoration: none;
				gap: 5px;
			}

			& div span {
				font-size: 17px;
				font-weight: 400;
				opacity: 0.5;
			}

			& p {
				font-size: var(--font-size-heading-h3);
				font-weight: 300;
				line-height: 1.1;
				text-transform: uppercase;
				margin: 0;
			}

			&.has-dropdown-mobile {
				flex-wrap: wrap;
			}
		}
	}

	body.no-scroll {
		overflow: hidden;
	}

	.dropdown-item-mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 16px 0 0;
		margin-top: 16px;
		border-top: 1px solid rgba(0, 0, 0, 0.3);
		font-size: 18px;
		font-weight: 400;
		line-height: 1.2;
		color: var(--color-sand) !important;
		text-decoration: none;

		& .dropdown-arrow {
			width: 15px;
			height: 15px;
			flex-shrink: 0;

			& svg {
				width: 100%;
				height: 100%;

				& path {
					fill: var(--color-sand);
				}
			}
		}
	}

	/* Language selector inside mobile menu */
	.menu-mobile-language {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		position: relative;

		& .language-selector {
			max-width: none;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		& .language-selector-button {
			background: var(--color-white-10);

			&:hover {
				background: rgba(255, 255, 255, 0.2);
			}
		}

		& .language-selector-dropdown {
			background: var(--color-white-10);
		}

		& .language-option {
			&:hover {
				background-color: rgba(255, 255, 255, 0.15);
			}

			&[data-selected="true"] {
				background-color: var(--color-white-10);
			}
		}
	}

	.menu-mobile-language-label {
		color: var(--color-sand);
		font-size: 14px;
		letter-spacing: 0.2px;
		font-weight: 400;
		height: 42px;
		opacity: 0.7;
		display: flex;
		align-items: center;
		justify-content: center;
		text-transform: uppercase;
	}
}