/* Site header — logo lockup, primary nav, Book a Class button. */
.ss-header {
	position: relative;
	z-index: 50;
	background: var(--ss-cream);
}

.ss-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding: 20px var(--ss-gutter);
}

.ss-header__brand {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: clamp(12px, 1.6vw, 22px);
	min-width: 0;
}
.ss-header__mark {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: clamp(46px, 5vw, 70px);
}
.ss-header__wordmark {
	display: block;
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: clamp(34px, 3.7vw, 52px);
}

.ss-header__panel {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 14px clamp(18px, 2.4vw, 40px);
}

.ss-header__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 14px clamp(18px, 2.4vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-header__menu a {
	display: block;
	color: var(--ss-ink);
	font-size: clamp(12px, 1.05vw, 14px);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ss-header__menu a:hover,
.ss-header__menu .current-menu-item > a {
	color: var(--ss-gold-hover);
}

.ss-header__cta {
	flex: 0 0 auto;
}

.ss-header__toggle {
	display: none;
}

/*
 * Collapsed nav. Scoped to .is-ready (set by header.js) so that without JS
 * the nav still wraps under the logo, as in the design.
 */
@media (max-width: 1079px) {
	.ss-header.is-ready .ss-header__bar {
		flex-wrap: nowrap;
	}

	.ss-header.is-ready .ss-header__toggle {
		position: relative;
		display: grid;
		flex: 0 0 auto;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ss-ink);
		cursor: pointer;
	}

	.ss-header__toggle-lines,
	.ss-header__toggle-lines::before,
	.ss-header__toggle-lines::after {
		display: block;
		width: 24px;
		height: 1.5px;
		background: currentColor;
		transition:
			transform 260ms var(--ss-ease),
			background-color 160ms ease;
	}
	.ss-header__toggle-lines {
		position: relative;
	}
	.ss-header__toggle-lines::before,
	.ss-header__toggle-lines::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.ss-header__toggle-lines::before {
		transform: translateY(-7px);
	}
	.ss-header__toggle-lines::after {
		transform: translateY(7px);
	}
	.ss-header.is-open .ss-header__toggle-lines {
		background-color: transparent;
	}
	.ss-header.is-open .ss-header__toggle-lines::before {
		transform: rotate(45deg);
	}
	.ss-header.is-open .ss-header__toggle-lines::after {
		transform: rotate(-45deg);
	}

	.ss-header.is-ready .ss-header__panel {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: calc(100dvh - 100%);
		padding: 4px var(--ss-gutter) 32px;
		overflow-y: auto;
		border-top: 1px solid var(--ss-hairline);
		background: var(--ss-cream);
		box-shadow: 0 24px 40px -24px rgba(28, 29, 29, 0.25);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity 220ms ease,
			transform 260ms var(--ss-ease),
			visibility 0s linear 260ms;
	}
	.ss-header.is-open .ss-header__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity 220ms ease,
			transform 260ms var(--ss-ease),
			visibility 0s;
	}

	.ss-header.is-ready .ss-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.ss-header.is-ready .ss-header__menu li {
		border-bottom: 1px solid var(--ss-hairline);
	}
	.ss-header.is-ready .ss-header__menu a {
		padding: 18px 0;
		font-size: 14px;
		letter-spacing: 0.14em;
	}

	.ss-header.is-ready .ss-header__cta {
		margin-top: 28px;
		padding-block: 16px;
		font-size: 13px;
	}
}