/* Site header (Figma "Header"), dropdowns, Shop mega-menu and mobile menu. */

.site-header {
	position: relative;
	z-index: 50;
	color: var(--c-text);
}

.site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	height: var(--header-h);
	margin-inline: auto;
	padding-inline: calc(var(--gutter) + 16px);
}

.site-header__logo img {
	width: 174px;
	height: auto;
}

.site-header__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

.site-header__buttons {
	flex-wrap: nowrap;
	gap: 24px;
}

.site-header__toggle {
	display: none;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 8px;
	border: 0;
	border-radius: 32px;
	background: none;
	color: inherit;
}

.site-header__toggle .icon {
	width: 20px;
	height: 20px;
}

.site-header__icon-close,
.site-header__toggle[aria-expanded="true"] .site-header__icon-open {
	display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__icon-close {
	display: block;
}

/* Nav pills */
.site-nav__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	display: block;
	padding: 8px;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 8px;
	background: none;
	font-size: var(--t-body);
	line-height: var(--lh-body);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link[aria-expanded="true"],
.site-nav__item.is-current > .site-nav__link {
	border-bottom-color: currentColor;
	border-radius: 0;
}

/* Dropdowns (Figma "Sub Menu": Discover, Studio, Resources) */
.site-nav__panel {
	position: absolute;
	top: calc(100% + (var(--header-h) - 36px) / 2);
	left: 0;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	color: var(--c-text);
}

.dropdown {
	width: 272px;
	padding: 32px 16px;
}

.dropdown__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dropdown__link {
	display: block;
	padding: 8px;
	text-decoration: none;
}

.dropdown__link:hover,
.dropdown__link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--c-accent);
}

/* Shop mega-menu: 1136 wide, anchored to the header column. */
.site-nav__item:has(.mega) {
	position: static;
}

.mega {
	top: 100%;
	left: calc(var(--gutter));
	right: calc(var(--gutter));
	max-width: var(--wrap);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	padding: 32px 16px;
}

.mega__column {
	display: grid;
	align-content: start;
	gap: 40px;
}

.mega__section,
.mega__group {
	display: grid;
	gap: 16px;
}

.mega__heading {
	font-size: var(--t-button);
	line-height: 16px;
	font-weight: 600;
}

.mega__label {
	font-size: var(--t-sub);
	line-height: var(--lh-sub);
	font-weight: 500;
	color: var(--c-text-2);
}

.mega__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega__link {
	text-decoration: none;
}

.mega__link:hover,
.mega__link:focus-visible,
.mega__link.is-previewed {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mega__preview {
	display: grid;
	align-content: start;
	gap: 16px;
	padding-left: 16px;
	border-left: 1px solid var(--c-line);
}

.mega__preview img {
	width: 100%;
	aspect-ratio: 341 / 400;
	object-fit: cover;
}

.mega__preview figcaption {
	font-size: var(--t-body-s);
	line-height: var(--lh-body-s);
	color: var(--c-text-2);
}

.mega__preview figcaption:empty {
	display: none;
}

/* Transparent header over the first image (Home): light text, white logo, light buttons. */
.site-header--overlay {
	position: absolute;
	inset: 0 0 auto;
	color: var(--c-light);
}

.site-header--overlay:not(.is-open) .site-header__logo img {
	filter: brightness(0) invert(1);
}

.site-header--overlay .btn--primary {
	background: var(--c-bg);
	border-color: var(--c-bg);
	color: var(--c-text);
}

.site-header--overlay .btn--secondary {
	border-color: var(--c-light);
	color: var(--c-light);
}

.site-header--overlay .btn--secondary:hover {
	background: var(--c-light);
	color: var(--c-text);
}

/* Mobile menu (Figma "Header-Expanded_Mobile") */
.mobile-menu {
	display: none;
}

@media (max-width: 1023px) {
	.site-header {
		position: sticky;
		top: 0;
		background: var(--c-bg);
	}

	.site-header--overlay:not(.is-open) {
		position: absolute;
		background: none;
	}

	.site-header__bar {
		grid-template-columns: auto 1fr;
		gap: 16px;
		padding: 24px var(--gutter);
	}

	.site-nav {
		display: none;
	}

	.site-header__logo {
		grid-row: 1;
	}

	.site-header__logo img {
		width: 85px;
	}

	.site-header__toggle {
		display: grid;
	}

	.site-header__buttons .btn--secondary {
		display: none;
	}

	.site-header__buttons .btn {
		min-width: 100px;
	}

	.site-header.is-open {
		background: var(--c-bg);
		color: var(--c-text);
	}

	.site-header.is-open .btn--primary {
		background: var(--c-text);
		border-color: var(--c-text);
		color: var(--c-light);
	}

	.mobile-menu:not([hidden]) {
		display: grid;
		align-content: start;
		gap: 32px;
		position: fixed;
		inset: var(--header-h) 0 0;
		overflow-y: auto;
		padding: 32px var(--gutter);
		background: var(--c-bg);
		color: var(--c-text);
	}

	.mobile-menu__list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid var(--c-line);
	}

	.mobile-menu__group {
		border-bottom: 1px solid var(--c-line);
	}

	.mobile-menu__heading {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 16px 0;
		border: 0;
		background: none;
		font-size: var(--t-button);
		line-height: 16px;
		font-weight: 600;
		text-transform: uppercase;
		text-align: left;
		text-decoration: none;
	}

	.mobile-menu__heading .icon {
		width: 24px;
		height: 24px;
		transition: transform 0.2s;
	}

	.mobile-menu__heading[aria-expanded="true"] .icon {
		transform: rotate(180deg);
	}

	.mobile-menu__items {
		display: grid;
		gap: 32px;
		margin: 0;
		padding: 16px 0 24px;
		list-style: none;
	}

	.mobile-menu__label {
		font-size: var(--t-sub);
		line-height: var(--lh-sub);
		font-weight: 500;
		margin-bottom: -16px;
	}

	.mobile-menu__link {
		color: var(--c-text-2);
		text-decoration: none;
	}

	.mobile-menu__buttons .btn--primary {
		display: none;
	}

	.mobile-menu__buttons .btn {
		width: 100%;
	}

	html.menu-open {
		overflow: hidden;
	}
}