/* Site header. Figma: Home 1:7-1:22, 66px tall, in flow (not sticky). */

.site-header {
	position: relative;
	z-index: 50;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: clamp(60px, 3.44vw, 66px);
}

.site-header__logo {
	flex: none;
	font-size: clamp(1.25rem, 1.406vw, 1.6875rem); /* 27 */
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.018em;
	text-transform: uppercase;
}

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

.site-header__panel {
	display: flex;
	align-items: center;
	gap: clamp(28px, 4.1vw, 79px);
}

/* Menu ---------------------------------------------------------------------- */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(20px, 1.67vw, 32px);
	margin: 0;
}

.site-nav__list li { position: relative; }

.site-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding-block: 6px;
	font-size: var(--fs-body);
	line-height: 1.05;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size 0.4s var(--ease);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_parent > a {
	background-size: 100% 1px;
}

.site-nav__list .menu-item-has-children > a::after {
	content: "";
	width: 0.42em;
	height: 0.42em;
	margin-top: -0.25em;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -20px;
	min-width: 220px;
	margin: 0;
	padding: 14px 20px;
	list-style: none;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Social -------------------------------------------------------------------- */
.social-list {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-list__link {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid currentColor;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.social-list__link .icon { width: 12px; height: 12px; }

.social-list__link:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-bg);
}

/* Toggle -------------------------------------------------------------------- */
.nav-toggle {
	display: none;
	position: relative;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin-right: -10px;
}

.nav-toggle__bars,
.nav-toggle__bars::before {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}

.nav-toggle__bars { top: 17px; }
.nav-toggle__bars::before { content: ""; left: 0; top: 8px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(-90deg); }

/* Mobile panel -------------------------------------------------------------- */
@media (max-width: 1024px) {
	.nav-toggle { display: block; }

	.site-header__logo { position: relative; z-index: 2; }

	.site-header__panel {
		position: fixed;
		inset: 0;
		z-index: 1;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 40px;
		padding: 110px var(--gutter) 40px;
		overflow-y: auto;
		background: var(--c-bg);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s var(--ease), visibility 0.35s;
	}

	.is-menu-open .site-header__panel {
		opacity: 1;
		visibility: visible;
	}

	.is-menu-open body { overflow: hidden; }

	.site-nav { width: 100%; }

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__list > li { border-bottom: 1px solid var(--c-line-2); }

	.site-nav__list a {
		display: flex;
		justify-content: space-between;
		padding-block: 18px;
		font-size: clamp(1.75rem, 6vw, 2.5rem);
		letter-spacing: -0.03em;
		background: none;
	}

	.site-nav__list .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 16px;
		background: none;
		border: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__list .sub-menu a {
		padding-block: 8px;
		font-size: var(--fs-body-lg);
		color: var(--c-ink-2);
	}

	.social-list { gap: 18px; }
	.social-list__link { width: 40px; height: 40px; }
	.social-list__link .icon { width: 18px; height: 18px; }
}