/* ==================================================
   SITE HEADER
================================================== */

.site-header
{
	min-height: 88px;
	padding: 9px clamp(22px, 3.5vw, 58px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	color: var(--header-text, var(--light));
	background: linear-gradient(135deg, var(--surface-dark-alt), var(--surface-deepest));
	border-bottom: 1px solid var(--accent-overlay-45);
}

.brand
{
	display: flex;
	align-items: center;
	gap: 13px;
	white-space: nowrap;
}

.brand img
{
	width: 64px;
	height: 64px;
	object-fit: cover;
	object-position: 50% 16%;
	background: var(--white);
	border: 2px solid var(--accent);
	border-radius: 50%;
}

.brand-copy
{
	display: block;
}

.brand strong
{
	display: block;
	color: var(--brand-text, var(--light));
	font-size: clamp(2rem, 2.55vw, 2.75rem);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.035em;
	text-transform: uppercase;
}

.brand small
{
	display: block;
	margin-top: 8px;
	color: var(--accent-soft);
	font-size: .76rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .21em;
	text-transform: uppercase;
}


/* ==================================================
   NAVIGATION
================================================== */

.site-nav
{
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.7vw, 30px);
	font-size: .98rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .055em;
	text-transform: uppercase;
}

.site-nav > a,
.nav-menu-trigger,
.account-menu-trigger
{
	position: relative;
	padding: 14px 0;
	white-space: nowrap;
}

.site-nav > a::after,
.nav-menu-trigger::after,
.account-menu-trigger::after
{
	content: '';
	position: absolute;
	right: 100%;
	bottom: 4px;
	left: 0;
	height: 2px;
	background: var(--accent);
	transition: right .2s ease;
}

.site-nav > a:hover::after,
.site-nav > a:focus-visible::after,
.site-nav > a.active::after,
.nav-menu:hover .nav-menu-trigger::after,
.nav-menu:focus-within .nav-menu-trigger::after,
.nav-menu.active .nav-menu-trigger::after,
.account-menu:hover .account-menu-trigger::after,
.account-menu:focus-within .account-menu-trigger::after,
.account-menu.active .account-menu-trigger::after
{
	right: 0;
}


/* ==================================================
   DROPDOWN CHEVRONS
================================================== */

.nav-menu-trigger,
.account-menu-trigger
{
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
	Use ::before for the chevron because ::after is already
	used for the animated gold underline.

	order: 2 places the chevron AFTER the visible link/button text.
*/
.nav-menu-trigger::before,
.account-menu-trigger::before
{
	content: '';
	order: 2;
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	margin: -4px 1px 0 2px;
	border-right: 2px solid var(--accent-soft);
	border-bottom: 2px solid var(--accent-soft);
	transform: rotate(45deg);
	transition:
		margin-top .2s ease,
		transform .2s ease;
}

.nav-menu:hover .nav-menu-trigger::before,
.nav-menu:focus-within .nav-menu-trigger::before,
.account-menu:hover .account-menu-trigger::before,
.account-menu:focus-within .account-menu-trigger::before
{
	margin-top: 4px;
	transform: rotate(225deg);
}


/* ==================================================
   NAV DROPDOWNS
================================================== */

.nav-menu
{
	position: relative;
}

.nav-menu-panel
{
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 180px;
	padding: 7px 0;
	display: none;
	background: var(--surface-menu);
	border: 1px solid var(--accent-overlay-35);
	border-radius: 5px;
	box-shadow: 0 14px 30px var(--shadow-30);
}

.nav-menu:hover .nav-menu-panel,
.nav-menu:focus-within .nav-menu-panel
{
	display: block;
}

.nav-menu-panel a
{
	display: block;
	padding: 11px 16px;
	white-space: nowrap;
}

.nav-menu-panel a:hover,
.nav-menu-panel a:focus-visible,
.nav-menu-panel a.active
{
	color: var(--accent-soft);
	background: var(--light-overlay-06);
}


/* ==================================================
   LOGIN
================================================== */

.site-nav .login
{
	display: flex;
	align-items: center;
	gap: 7px;
}

.site-nav .login span
{
	color: var(--accent-soft);
	font-size: 1.35rem;
}


/* ==================================================
   ACCOUNT MENU
================================================== */

.account-menu
{
	position: relative;
}

.account-menu-trigger
{
	color: inherit;
	background: var(--transparent);
	border: 0;
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

/*
	The first span inside the account trigger is the heart.
	The chevron itself is CSS-generated, so it cannot inherit
	this heart styling by accident.
*/
.account-menu-trigger > span
{
	color: var(--accent-soft);
	font-size: 1.35rem;
}

.account-menu-panel
{
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	min-width: 170px;
	padding: 7px 0;
	display: none;
	background: var(--surface-menu);
	border: 1px solid var(--accent-overlay-35);
	border-radius: 5px;
	box-shadow: 0 14px 30px var(--shadow-30);
}

.account-menu:hover .account-menu-panel,
.account-menu:focus-within .account-menu-panel
{
	display: block;
}

.account-menu-panel a
{
	display: block;
	padding: 11px 16px;
	white-space: nowrap;
}

.account-menu-panel a:hover,
.account-menu-panel a:focus-visible
{
	color: var(--accent-soft);
	background: var(--light-overlay-06);
}


/* ==================================================
   MOBILE MENU BUTTON
================================================== */

.menu-button
{
	display: none;
	width: 46px;
	height: 42px;
	padding: 8px;
	background: var(--transparent);
	border: 1px solid var(--light-overlay-25);
	border-radius: 6px;
	cursor: pointer;
}

.menu-button span:not(.sr-only)
{
	display: block;
	height: 2px;
	margin: 5px 0;
	background: var(--light);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px)
{
	.site-header
	{
		position: relative;
	}

	.menu-button
	{
		display: block;
	}

	.site-nav
	{
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 20;
		display: none;
		padding: 14px 26px 22px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--surface-menu);
		border-top: 1px solid var(--light-overlay-08);
		box-shadow: 0 15px 30px var(--shadow-28);
	}

	.site-nav.open
	{
		display: flex;
	}

	.site-nav > a,
	.nav-menu-trigger,
	.account-menu-trigger
	{
		padding: 14px 0;
	}

	.nav-menu,
	.account-menu
	{
		width: 100%;
	}

	.nav-menu-trigger,
	.account-menu-trigger
	{
		width: 100%;
		justify-content: flex-start;
	}

	/*
		On touch/mobile navigation, show the nested choices inline
		so nothing depends on hover.
	*/
	.nav-menu-panel
	{
		position: static;
		min-width: 0;
		margin: 0 0 6px 20px;
		padding: 0;
		display: block;
		background: var(--transparent);
		border: 0;
		border-left: 1px solid var(--accent-overlay-35);
		border-radius: 0;
		box-shadow: none;
	}

	.nav-menu-panel a
	{
		padding: 11px 16px;
	}

	.account-menu-panel
	{
		position: static;
		min-width: 0;
		margin: 0 0 6px 20px;
		padding: 0;
		background: var(--transparent);
		border: 0;
		border-left: 1px solid var(--accent-overlay-35);
		border-radius: 0;
		box-shadow: none;
	}

	.account-menu:hover .account-menu-panel,
	.account-menu:focus-within .account-menu-panel
	{
		display: block;
	}

	.account-menu-panel a
	{
		padding: 11px 16px;
	}
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 720px)
{
	.site-header
	{
		min-height: 80px;
	}

	.brand img
	{
		width: 54px;
		height: 54px;
	}

	.brand strong
	{
		font-size: clamp(1.55rem, 6vw, 2rem);
	}

	.brand small
	{
		font-size: .62rem;
		letter-spacing: .14em;
	}
}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 480px)
{
	.brand-copy small
	{
		display: none;
	}
}