/**
 * JOY-TEX Header Component
 *
 * Component-level architecture and presentation primitives.
 * Header-specific values remain local until broader reuse is proven.
 */

/* --------------------------------------------------------------
   1. Component Variables
-------------------------------------------------------------- */

.joy-site-header {
	--joy-header-container-max: 82.5rem; /* 1320px candidate */
	--joy-header-height-expanded: 5rem; /* 80px */
	--joy-header-height-sticky: 4.25rem; /* 68px */
	--joy-header-height-compact: 4rem; /* 64px */

	--joy-header-logo-width: 12.1875rem; /* 195px visual-test value */
	--joy-header-logo-width-sticky: 11rem; /* provisional; sticky not implemented yet */
	--joy-header-symbol-height: 2rem; /* 32px */

	--joy-header-nav-gap: 1.875rem; /* 30px */
	--joy-header-control-size: 2.5rem; /* 40px */
	--joy-header-contact-height: 2.5rem; /* 40px */

	--joy-header-mega-group-width: 16.875rem; /* 270px */
	--joy-header-mega-group-gap: 4.5rem; /* 72px */

	--joy-header-z: 100;
	--joy-header-overlay-z: 105;
	--joy-header-panel-z: 110;
	--joy-header-drawer-z: 120;

	--joy-header-nav-color: #50545B;

	position: sticky;
	top: 0;
	z-index: var(--joy-header-z);
	width: 100%;
	background: var(--joy-color-surface);
	border-bottom: 1px solid var(--joy-color-rule);
	box-shadow: var(--joy-shadow-surface);
	transition:
		background-color 180ms ease,
		border-bottom-color 180ms ease,
		box-shadow 180ms ease;
}


/* --------------------------------------------------------------
   Header Presentation — Transparent Light
   -------------------------------------------------------------- */

/*
 * Transparent Light is an opt-in presentation mode.
 *
 * It is currently activated on the WordPress front page.
 * Existing dark branding and navigation colors are preserved.
 *
 * The sticky runtime state takes precedence over the initial
 * transparent appearance.
 */

.joy-site-header--transparent-light:not(.is-sticky) {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/*
 * Sticky restores the default opaque-light surface.
 * The presentation modifier remains on the Header element.
 */

.joy-site-header--transparent-light.is-sticky {
    background-color: var(--joy-color-surface);
    border-bottom-color: var(--joy-color-rule);
    box-shadow: var(--joy-shadow-surface);
}

/*
 * Transparent Header Overlay
 *
 * Keep the Header in sticky flow while allowing the following
 * homepage content to extend behind the Header.
 *
 * Overlay compensation uses the initial Header height and does
 * not change when the sticky state becomes active.
 */

.joy-site-header--transparent-light {
    margin-bottom: calc(-1 * var(--joy-header-height-expanded));
}

@media (max-width: 67.5rem) {
    .joy-site-header--transparent-light {
        margin-bottom: calc(-1 * var(--joy-header-height-compact));
    }
}


/* --------------------------------------------------------------
   2. Header Container
-------------------------------------------------------------- */

.joy-site-header .joy-container {
	max-width: var(--joy-header-container-max);
}

.joy-site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	min-height: var(--joy-header-height-expanded);
	margin-inline: auto;
	transition: min-height 180ms ease;
}

.joy-site-header.is-sticky .joy-site-header__inner {
	min-height: var(--joy-header-height-sticky);
}

.joy-site-header__brand {
	flex: 0 0 auto;
}

.joy-primary-nav {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: none;
	min-width: 0;
	translate: -50% -50%;
}

.joy-site-header__utilities {
	flex: 0 0 auto;
	margin-left: 2.5rem; /* 40px navigation-to-search separation */
}

.joy-site-header__action {
	flex: 0 0 auto;
	margin-left: 1rem; /* 16px search-to-contact separation */
}


/* --------------------------------------------------------------
   3. Brand Foundation
-------------------------------------------------------------- */

.joy-site-header__brand {
	flex: 0 0 auto;
}

.joy-site-header__brand-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.joy-site-header__logo {
	display: block;
	height: auto;
}

.joy-site-header__logo--full {
	width: var(--joy-header-logo-width);
	transition: width 180ms ease;
}

.joy-site-header.is-sticky .joy-site-header__logo--full {
	width: var(--joy-header-logo-width-sticky);
}

.joy-site-header__logo--symbol {
	display: none;
	height: var(--joy-header-symbol-height);
}


/* --------------------------------------------------------------
   4. Primary Navigation Structural Reset
-------------------------------------------------------------- */

.joy-primary-nav {
	min-width: 0;
}

.joy-primary-nav__surface {
	width: max-content;
	min-width: 0;
}

.joy-primary-nav__list,
.joy-mega-nav__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.joy-primary-nav__list {
	display: flex;
	align-items: center;
	gap: var(--joy-header-nav-gap);
	margin: 0;
}

.joy-primary-nav__item {
	margin: 0;
	padding: 0;
}

.joy-primary-nav__parent {
	display: flex;
	align-items: center;
}

.joy-primary-nav__link,
.joy-mega-nav__link {
	text-decoration: none;
}

.joy-primary-nav__link {
	display: inline-flex;
	align-items: center;
	color: var(--joy-header-nav-color);
	font-size: 0.875rem; /* 14px */
	font-weight: var(--joy-font-weight-medium);
	line-height: 1.25;
	white-space: nowrap;
}

.joy-primary-nav__item.current-menu-item > .joy-primary-nav__link,
.joy-primary-nav__item.current-menu-item > .joy-primary-nav__parent > .joy-primary-nav__link,
.joy-primary-nav__item.current-menu-parent > .joy-primary-nav__parent > .joy-primary-nav__link,
.joy-primary-nav__item.current-menu-ancestor > .joy-primary-nav__parent > .joy-primary-nav__link {
	color: var(--joy-color-brand);
	font-weight: var(--joy-font-weight-semibold);
}

.joy-primary-nav__item.current-menu-item > .joy-primary-nav__link:hover,
.joy-primary-nav__item.current-menu-item > .joy-primary-nav__parent > .joy-primary-nav__link:hover,
.joy-primary-nav__item.current-menu-parent > .joy-primary-nav__parent > .joy-primary-nav__link:hover,
.joy-primary-nav__item.current-menu-ancestor > .joy-primary-nav__parent > .joy-primary-nav__link:hover {
	color: var(--joy-color-accent-red);
}


/* --------------------------------------------------------------
   5. Controls Foundation
-------------------------------------------------------------- */

.joy-site-header button {
	font: inherit;
}

.joy-primary-nav__disclosure,
.joy-header-search-toggle,
.joy-header-menu-toggle,
.joy-primary-nav__close {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.joy-header-search-toggle,
.joy-header-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--joy-header-control-size);
	height: var(--joy-header-control-size);
}

.joy-primary-nav__disclosure {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1.75rem;
	margin-left: 0.0625rem;
}

.joy-primary-nav__item.current-menu-item .joy-primary-nav__disclosure,
.joy-primary-nav__item.current-menu-parent .joy-primary-nav__disclosure,
.joy-primary-nav__item.current-menu-ancestor .joy-primary-nav__disclosure {
	color: var(--joy-color-brand);
}

.joy-primary-nav__chevron {
	display: block;
	width: 0.3125rem;
	height: 0.3125rem;
	border-right: 1.25px solid currentColor;
	border-bottom: 1.25px solid currentColor;
	transform: translateY(-0.09375rem) rotate(45deg);
}

/*
 * A primary parent remains semantically split between its destination
 * link and disclosure control, while sharing one visual hover state.
 */
.joy-primary-nav__parent:hover > .joy-primary-nav__link,
.joy-primary-nav__parent:hover > .joy-primary-nav__disclosure {
	color: var(--joy-color-accent-red);
}

/*
 * Parent hover overrides Current / Ancestor visual color while
 * preserving the Current item's stronger font weight.
 */
.joy-primary-nav__item.current-menu-item
	> .joy-primary-nav__parent:hover
	> .joy-primary-nav__link,
.joy-primary-nav__item.current-menu-parent
	> .joy-primary-nav__parent:hover
	> .joy-primary-nav__link,
.joy-primary-nav__item.current-menu-ancestor
	> .joy-primary-nav__parent:hover
	> .joy-primary-nav__link {
	color: var(--joy-color-accent-red);
}

.joy-primary-nav__item:not(.joy-primary-nav__item--mega):not(.joy-primary-nav__item--dropdown)
	> .joy-primary-nav__link:hover {
	color: var(--joy-color-accent-red);
}

.joy-header-search-toggle {
	position: relative;
	color: var(--joy-header-nav-color);
}

.joy-header-search-toggle::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.joy-header-search-toggle::after {
	content: "";
	position: absolute;
	width: 0.375rem;
	height: 1.5px;
	background: currentColor;
	transform: translate(0.4375rem, 0.4375rem) rotate(45deg);
	transform-origin: center;
}

.joy-header-search-toggle:hover {
	color: var(--joy-color-accent-red);
}

.joy-site-header__contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1.125rem;
	min-height: var(--joy-header-contact-height);
	padding: 0.75rem 0.875rem 0.75rem 1.125rem;
	background: var(--joy-color-brand);
	color: var(--joy-color-surface);
	font-size: 0.875rem;
	font-weight: var(--joy-font-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 0.1875rem;
}

.joy-site-header__contact-arrow {
	display: inline-block;
	line-height: 1;
	transition: transform 160ms ease;
}

.joy-site-header__contact:hover {
	background: var(--joy-color-accent-red);
	color: var(--joy-color-surface);
}

.joy-site-header__contact-arrow {
	display: inline-block;
	line-height: 1;
	transition: transform 160ms ease;
}

.joy-site-header__contact:hover .joy-site-header__contact-arrow {
	transform: translateX(0.1875rem);
}


/* --------------------------------------------------------------
   6. Header Utilities & Expanded Action Foundation
-------------------------------------------------------------- */

.joy-site-header__utilities {
	flex: 0 0 auto;
	margin-left: auto;
}

.joy-site-header__action {
	flex: 0 0 auto;
	margin-left: 1rem;
}


/* --------------------------------------------------------------
   7. Mega Navigation Structural Foundation
-------------------------------------------------------------- */

/* --------------------------------------------------------------
   7. Mega Navigation
-------------------------------------------------------------- */

.joy-mega-nav {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--joy-header-panel-z);
	width: 100%;
	background: var(--joy-color-surface);
	border-top: 1px solid var(--joy-color-rule);
	border-bottom: 1px solid var(--joy-color-rule);
	box-shadow: var(--joy-shadow-surface);
}

.joy-mega-nav__inner {
	width: 100%;
	max-width: var(--joy-header-container-max);
	margin-inline: auto;
	padding: 2rem var(--joy-page-gutter);
	box-sizing: border-box;
}

.joy-mega-nav__groups {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 4rem;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

.joy-mega-nav__group {
	position: relative;
	flex: 0 0 auto;
	width: min(16.875rem, 100%);
	min-width: 0;
}

.joy-mega-nav__group:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0;
	right: -2rem;
	bottom: 0;
	width: 1px;
	background: var(--joy-color-rule);
	pointer-events: none;
}

.joy-mega-nav__group-label {
	display: block;
	margin-bottom: 1.125rem;
	color: var(--joy-color-text);
	font-size: 0.75rem; /* 12px */
	font-weight: var(--joy-font-weight-semibold);
	line-height: 1.25;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.joy-mega-nav__links {
	display: grid;
	gap: 0;
}

.joy-mega-nav__link {
	display: flex;
	align-items: center;
	width: fit-content;
	min-height: 2rem;
	color: var(--joy-header-nav-color);
	font-size: 0.875rem; /* 14px */
	font-weight: var(--joy-font-weight-regular);
	line-height: 1.4;
}

.joy-mega-nav__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.5rem;
	opacity: 0;
	transform: translateX(-0.125rem);
	transition:
		opacity 160ms ease,
		transform 160ms ease;
}

.joy-mega-nav__link:hover {
	color: var(--joy-color-accent-red);
	font-weight: var(--joy-font-weight-medium);
}

.joy-mega-nav__link:hover::after {
	opacity: 1;
	transform: translateX(0);
}

.joy-mega-nav__item.current-menu-item > .joy-mega-nav__link {
	color: var(--joy-color-brand);
	font-weight: var(--joy-font-weight-medium);
}

.joy-mega-nav__item.current-menu-item > .joy-mega-nav__link:hover {
	color: var(--joy-color-accent-red);
}

/* --------------------------------------------------------------
   8. Standard Primary Dropdown
-------------------------------------------------------------- */

.joy-primary-nav__item--dropdown {
	position: relative;
}

.joy-primary-dropdown {
	position: absolute;
	top: calc(100% + var(--joy-dropdown-offset-y, 0px));
	left: var(--joy-dropdown-offset-x, 0px);
	z-index: var(--joy-header-panel-z);
	width: max-content;
	min-width: 13rem;
	max-width: 18rem;
	margin: 0;
	padding: 0.625rem 0;
	list-style: none;
	background: var(--joy-color-surface);
	border: 1px solid var(--joy-color-rule);
	border-top: 0;
	box-shadow: var(--joy-shadow-surface);

	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-0.25rem);

	transition:
		opacity 160ms ease,
		transform 160ms ease,
		visibility 0s linear 160ms;
}

.joy-primary-dropdown.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);

	transition:
		opacity 160ms ease,
		transform 160ms ease,
		visibility 0s;
}

.joy-primary-dropdown__item {
	margin: 0;
	padding: 0;
}

.joy-primary-dropdown__link {
	display: flex;
	align-items: center;
	width: fit-content;
	padding: 0.625rem 1rem;
	color: var(--joy-header-nav-color);
	font-size: 0.875rem;
	font-weight: var(--joy-font-weight-regular);
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.joy-primary-dropdown__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.5rem;
	opacity: 0;
	transform: translateX(-0.125rem);
	transition:
		opacity 160ms ease,
		transform 160ms ease;
}

.joy-primary-dropdown__link:hover {
	color: var(--joy-color-accent-red);
	font-weight: var(--joy-font-weight-medium);
}

.joy-primary-dropdown__link:hover::after {
	opacity: 1;
	transform: translateX(0);
}

.joy-primary-dropdown__item.current-menu-item
	> .joy-primary-dropdown__link {
	color: var(--joy-color-brand);
	font-weight: var(--joy-font-weight-medium);
}

.joy-primary-dropdown__item.current-menu-item
	> .joy-primary-dropdown__link:hover {
	color: var(--joy-color-accent-red);
}


/* --------------------------------------------------------------
   8. Search Panel
-------------------------------------------------------------- */

.joy-header-search {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--joy-header-panel-z);
	width: 100%;
	background: var(--joy-color-surface);
	border-top: 1px solid var(--joy-color-rule);
	border-bottom: 1px solid var(--joy-color-rule);
	box-shadow: var(--joy-shadow-surface);
}

.joy-header-search__inner {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: var(--joy-header-container-max);
	margin-inline: auto;
	padding: 2rem var(--joy-page-gutter);
	box-sizing: border-box;
}

.joy-header-search__form {
	display: flex;
	align-items: center;
	gap: 0;
	width: min(100%, 48rem);
}

.joy-header-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.625rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--joy-color-border);
	outline: 0;
	background: transparent;
	color: var(--joy-color-ink);
	font-family: inherit;
	font-size: 1rem;
	font-weight: var(--joy-font-weight-regular);
	line-height: 1.4;
	appearance: none;
}

.joy-header-search__input::placeholder {
	color: var(--joy-color-text-muted);
	opacity: 1;
}

.joy-header-search__input::-webkit-search-decoration,
.joy-header-search__input::-webkit-search-cancel-button,
.joy-header-search__input::-webkit-search-results-button,
.joy-header-search__input::-webkit-search-results-decoration {
	appearance: none;
}

.joy-header-search__clear,
.joy-header-search__submit {
	position: relative;
	display: inline-flex;
	flex: 0 0 var(--joy-header-control-size);
	align-items: center;
	justify-content: center;
	width: var(--joy-header-control-size);
	height: var(--joy-header-control-size);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--joy-color-text);
	cursor: pointer;
}

.joy-header-search__clear[hidden] {
	display: none;
}

.joy-header-search__clear-icon {
	position: relative;
	display: block;
	width: 1rem;
	height: 1rem;
}

.joy-header-search__clear-icon::before,
.joy-header-search__clear-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.875rem;
	height: 1px;
	background: currentColor;
	transform-origin: center;
}

.joy-header-search__clear-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.joy-header-search__clear-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.joy-header-search__submit-icon {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.joy-header-search__clear:hover,
.joy-header-search__submit:hover {
	color: var(--joy-color-accent-red);
}


/* --------------------------------------------------------------
   9. Compact-only Structures
-------------------------------------------------------------- */

/*
 * Compact controls and surfaces remain unavailable in Expanded mode.
 *
 * The Compact Drawer also remains hidden until the Compact interaction
 * layer explicitly promotes it into an open state.
 */

html.joy-compact-nav-open,
html.joy-compact-nav-open body {
	overflow: hidden;
}

.joy-header-menu-toggle,
.joy-primary-nav__overlay {
	display: none;
}

.joy-compact-nav {
	display: none;
}


/* --------------------------------------------------------------
   10. Initial Paint / No-JS Baseline
-------------------------------------------------------------- */

/*
 * Prevent disclosure panels from flashing during the initial paint.
 *
 * Header JavaScript promotes the component into its enhanced interaction
 * model. Core navigation destinations remain available as native links
 * even when JavaScript is unavailable.
 */

.joy-mega-nav,
.joy-header-search {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-0.375rem);
}


/* --------------------------------------------------------------
   11. Enhanced Interaction States
-------------------------------------------------------------- */

.joy-header-enhanced .joy-mega-nav,
.joy-header-enhanced .joy-header-search {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-0.375rem);

	transition:
		opacity 180ms ease,
		transform 180ms ease,
		visibility 0s linear 180ms;
}

.joy-header-enhanced .joy-mega-nav.is-open,
.joy-header-enhanced .joy-header-search.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);

	transition:
		opacity 180ms ease,
		transform 180ms ease,
		visibility 0s;
}

/* --------------------------------------------------------------
   12. Compact Header
-------------------------------------------------------------- */

@media (max-width: 67.5rem) {

	/*
	 * Compact Header keeps one stable 64px height in both initial
	 * and sticky states. Sticky compression belongs to Expanded mode.
	 */
	.joy-site-header__inner,
	.joy-site-header.is-sticky .joy-site-header__inner {
		min-height: var(--joy-header-height-compact);
	}

	/*
	 * Expanded-only navigation, Mega surfaces and action leave
	 * the Compact composition.
	 */
	.joy-primary-nav,
	.joy-mega-nav,
	.joy-site-header__action {
		display: none;
	}

	/*
	 * Compact branding uses the standalone JOY symbol.
	 */
	.joy-site-header__logo--full {
		display: none;
	}

	.joy-site-header__logo--symbol {
		display: block;
	}

	/*
	 * Search remains independently available.
	 * The Menu control joins the existing Header utility cluster.
	 */
	.joy-header-menu-toggle {
		display: inline-flex;
		color: var(--joy-header-nav-color);
	}

	.joy-site-header__utilities {
		gap: 0.25rem;
		margin-left: auto;
	}

	/*
	 * Traditional three-line hamburger.
	 *
	 * The open-state transformation is intentionally deferred until
	 * the Compact Drawer interaction layer is implemented.
	 */
	.joy-header-menu-toggle::before {
		content: "";
		display: block;
		width: 1.125rem;
		height: 0.75rem;
		background:
			linear-gradient(currentColor, currentColor)
				0 0 / 100% 1px no-repeat,
			linear-gradient(currentColor, currentColor)
				0 50% / 100% 1px no-repeat,
			linear-gradient(currentColor, currentColor)
				0 100% / 100% 1px no-repeat;
	}

	.joy-header-menu-toggle:hover {
		color: var(--joy-color-accent-red);
	}

	/* ------------------------------------------------------------------
	   Compact Drawer
	   ------------------------------------------------------------------ */

	.joy-compact-nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: var(--joy-header-drawer-z);
		display: flex;
		flex-direction: column;
		width: min(27.5rem, calc(100vw - 3rem));
		height: 100vh;
		height: 100dvh;
		background: var(--joy-color-surface);
		box-shadow: -0.5rem 0 1.5rem rgb(24 26 31 / 8%);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-sizing: border-box;

		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateX(100%);

		transition:
			transform 280ms ease,
			opacity 200ms ease,
			visibility 0s linear 280ms;
	}

	.joy-compact-nav.is-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0);

		transition:
			transform 280ms ease,
			opacity 200ms ease,
			visibility 0s;
	}

	.joy-compact-nav__header {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: flex-end;
		min-height: var(--joy-header-height-compact);
		padding-inline: clamp(1.25rem, 6vw, 2rem);
	}

	.joy-compact-nav__close {
		position: relative;
		display: inline-flex;
		flex: 0 0 var(--joy-header-control-size);
		align-items: center;
		justify-content: center;
		width: var(--joy-header-control-size);
		height: var(--joy-header-control-size);
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--joy-header-nav-color);
		cursor: pointer;
	}

	.joy-compact-nav__close::before,
	.joy-compact-nav__close::after {
		content: "";
		position: absolute;
		width: 1.125rem;
		height: 1px;
		background: currentColor;
	}

	.joy-compact-nav__close::before {
		transform: rotate(45deg);
	}

	.joy-compact-nav__close::after {
		transform: rotate(-45deg);
	}

	.joy-compact-nav__close:hover {
		color: var(--joy-color-accent-red);
	}

	.joy-compact-nav__navigation {
		flex: 0 0 auto;
		padding-inline: clamp(1.25rem, 6vw, 2rem);
	}

	.joy-compact-nav__list,
	.joy-compact-nav__children {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.joy-compact-nav__item {
		margin: 0;
		padding: 0;
	}

	.joy-compact-nav__parent {
		display: flex;
		align-items: center;
		min-height: 3rem;
	}

	.joy-compact-nav__link {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-height: 3rem;
		color: var(--joy-color-ink);
		font-size: 1.125rem;
		font-weight: var(--joy-font-weight-medium);
		line-height: 1.35;
		text-decoration: none;
	}

	.joy-compact-nav__disclosure {
		position: relative;
		display: inline-flex;
		flex: 0 0 var(--joy-header-control-size);
		align-items: center;
		justify-content: center;
		width: var(--joy-header-control-size);
		height: var(--joy-header-control-size);
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--joy-color-text-muted);
		cursor: pointer;
	}

	.joy-compact-nav__parent:hover > .joy-compact-nav__link,
	.joy-compact-nav__parent:hover > .joy-compact-nav__disclosure {
		color: var(--joy-color-accent-red);
	}

	.joy-compact-nav__chevron {
		display: block;
		width: 0.5rem;
		height: 0.5rem;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-0.125rem) rotate(45deg);
		transform-origin: center;
	}

	.joy-compact-nav__disclosure[aria-expanded="true"] {
		color: var(--joy-color-brand);
	}

	.joy-compact-nav__disclosure[aria-expanded="true"]
		.joy-compact-nav__chevron {
		transform: translateY(0.125rem) rotate(225deg);
	}

	.joy-compact-nav__panel {
		display: none;
		padding: 0.5rem 0 1.25rem;
	}

	.joy-compact-nav__panel.is-open {
		display: block;
	}

	/*
	* Standard Dropdown begins directly with destination links rather than
	* a Mega group label, so it uses a slightly tighter top rhythm.
	*/
	.joy-compact-nav__panel > .joy-compact-nav__children:first-child {
		margin-top: -0.25rem;
	}

	.joy-compact-nav__group + .joy-compact-nav__group {
		margin-top: 1.375rem;
	}

	.joy-compact-nav__group-label {
		display: block;
		margin-bottom: 0.5rem;
		padding-left: 1rem;
		color: var(--joy-color-text);
		font-size: 0.75rem; /* 12px */
		font-weight: var(--joy-font-weight-semibold);
		line-height: 1.25;
		letter-spacing: 0.075em;
		text-transform: uppercase;
	}

	.joy-compact-nav__children {
		padding-left: 1rem;
	}

	.joy-compact-nav__child-item {
		margin: 0;
		padding: 0;
	}

	.joy-compact-nav__child-link {
		display: flex;
		align-items: center;
		width: fit-content;
		min-height: 2.25rem;
		color: var(--joy-header-nav-color);
		font-size: 0.9375rem; /* 15px */
		font-weight: var(--joy-font-weight-regular);
		line-height: 1.45;
		text-decoration: none;
	}

	.joy-compact-nav__child-link::after {
		content: "→";
		display: inline-block;
		margin-left: 0.5rem;
		opacity: 0;
		transform: translateX(-0.125rem);
		transition:
			opacity 160ms ease,
			transform 160ms ease;
	}

	.joy-compact-nav__child-link:hover {
		color: var(--joy-color-accent-red);
		font-weight: var(--joy-font-weight-medium);
	}

	.joy-compact-nav__child-link:hover::after {
		opacity: 1;
		transform: translateX(0);
	}

	.joy-compact-nav__item.current-menu-item > .joy-compact-nav__link,
	.joy-compact-nav__item.current-menu-item > .joy-compact-nav__parent > .joy-compact-nav__link,
	.joy-compact-nav__item.current-menu-parent > .joy-compact-nav__parent > .joy-compact-nav__link,
	.joy-compact-nav__item.current-menu-ancestor > .joy-compact-nav__parent > .joy-compact-nav__link {
		color: var(--joy-color-brand);
		font-weight: var(--joy-font-weight-semibold);
	}

	.joy-compact-nav__item.current-menu-item
		> .joy-compact-nav__parent
		> .joy-compact-nav__disclosure,
	.joy-compact-nav__item.current-menu-parent
		> .joy-compact-nav__parent
		> .joy-compact-nav__disclosure,
	.joy-compact-nav__item.current-menu-ancestor
		> .joy-compact-nav__parent
		> .joy-compact-nav__disclosure {
		color: var(--joy-color-brand);
	}

	.joy-compact-nav__item.current-menu-item
		> .joy-compact-nav__parent:hover
		> .joy-compact-nav__link,
	.joy-compact-nav__item.current-menu-item
		> .joy-compact-nav__parent:hover
		> .joy-compact-nav__disclosure,
	.joy-compact-nav__item.current-menu-parent
		> .joy-compact-nav__parent:hover
		> .joy-compact-nav__link,
	.joy-compact-nav__item.current-menu-parent
		> .joy-compact-nav__parent:hover
		> .joy-compact-nav__disclosure,
	.joy-compact-nav__item.current-menu-ancestor
		> .joy-compact-nav__parent:hover
		> .joy-compact-nav__link,
	.joy-compact-nav__item.current-menu-ancestor
		> .joy-compact-nav__parent:hover
		> .joy-compact-nav__disclosure {
		color: var(--joy-color-accent-red);
	}

	.joy-compact-nav__child-item.current-menu-item > .joy-compact-nav__child-link {
		color: var(--joy-color-brand);
		font-weight: var(--joy-font-weight-medium);
	}

	.joy-compact-nav__child-item.current-menu-item
		> .joy-compact-nav__child-link:hover {
		color: var(--joy-color-accent-red);
	}

	.joy-compact-nav__action {
		display: flex;
		flex: 0 0 auto;
		justify-content: flex-end;
		padding:
			2rem
			clamp(1.25rem, 6vw, 2rem)
			clamp(1.25rem, 6vw, 2rem);
	}

	.joy-compact-nav__contact {
		display: inline-flex;
		width: auto;
		min-height: 2.875rem;
		box-sizing: border-box;
		justify-content: center;
	}

	.joy-primary-nav__overlay {
		position: fixed;
		inset: 0;
		z-index: var(--joy-header-overlay-z);
		display: block;
		background: rgb(24 26 31 / 28%);

		visibility: hidden;
		opacity: 0;
		pointer-events: none;

		transition:
			opacity 180ms ease,
			visibility 0s linear 180ms;
	}

	.joy-primary-nav__overlay.is-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;

		transition:
			opacity 180ms ease,
			visibility 0s;
	}
}

@media (max-width: 22.5rem) {
	.joy-compact-nav {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.joy-site-header,
	.joy-site-header__inner,
	.joy-site-header__logo--full,
	.joy-mega-nav,
	.joy-primary-dropdown,
	.joy-header-search,
	.joy-compact-nav,
	.joy-primary-nav__overlay {
		transition: none;
	}

	.joy-mega-nav__link::after,
	.joy-primary-dropdown__link::after,
	.joy-compact-nav__child-link::after {
		transition: none;
	}
}