.solea-header-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(8px, 1.4vw, 24px);
	min-height: 96px;
	font-family: var(--wp--preset--font-family--jost);
}

/* Actions: burger (mobile), search, CTA, menu toggle (desktop), agglo logo */
.solea-header-nav__actions {
	flex: none;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.solea-header-nav__burger {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #4c1d96;
	border: none;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	flex: none;
	transition: background 0.2s ease;
}

.solea-header-nav__burger:hover,
.solea-header-nav__burger:focus-visible {
	background: var(--wp--preset--color--brand-purple-dark);
}

.solea-header-nav__search {
	display: flex;
	align-items: center;
	height: 44px;
	border-radius: 1000px;
	background: var(--wp--preset--color--brand-surface);
	overflow: hidden;
	width: 44px;
	transition: width 0.25s ease;
}

.solea-header-nav__search.is-expanded {
	width: 260px;
	position: relative;
	z-index: 5;
	box-shadow: 0 8px 20px -10px rgba(57, 18, 102, 0.3);
}

.solea-header-nav__search-toggle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--brand-purple-dark);
	display: grid;
	place-items: center;
	flex: none;
	cursor: pointer;
}

.solea-header-nav__search-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--brand-purple-dark);
	font-family: inherit;
	padding-right: 16px;
}

.solea-header-nav__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 clamp(13px, 1.3vw, 22px);
	border-radius: 1000px;
	background: #4c1d96;
	color: var(--wp--preset--color--base);
	font-size: clamp(0.7188rem, 1vw, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.2s ease;
}

.solea-header-nav__cta:hover,
.solea-header-nav__cta:focus-visible {
	background: var(--wp--preset--color--brand-purple-dark);
	color: var(--wp--preset--color--base);
}

/* The mobile-panel CTA only ever shows below the 640px breakpoint below,
   where it replaces the inline one that no longer fits next to the burger
   and search icons once the logo badge's reserved padding eats the space. */
.solea-header-nav__cta--mobile {
	display: none;
	justify-content: center;
	margin-top: 8px;
}

/* Desktop menu toggle — hidden until the 1180px breakpoint below, where it
   replaces the mobile burger. */
.solea-header-nav__menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 20px;
	border-radius: 1000px;
	background: #4c1d96;
	border: none;
	color: var(--wp--preset--color--base);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	flex: none;
	transition: background 0.2s ease;
}

.solea-header-nav__menu-toggle:hover,
.solea-header-nav__menu-toggle:focus-visible {
	background: var(--wp--preset--color--brand-purple-dark);
}

.solea-header-nav__menu-toggle-icon--close {
	display: none;
}

.solea-header-nav__menu-toggle[aria-expanded="true"] .solea-header-nav__menu-toggle-icon--menu {
	display: none;
}

.solea-header-nav__menu-toggle[aria-expanded="true"] .solea-header-nav__menu-toggle-icon--close {
	display: block;
}

/* Agglo logo — two instances share this class (the desktop one inside
   .actions, a mobile-only duplicate at the start of the nav row), each
   toggled by its own breakpoint below so only one is ever visible. */
.solea-header-nav__agglo {
	display: none;
	align-items: center;
	flex: none;
	padding-left: 16px;
	margin-left: 4px;
	border-left: 1px solid var(--wp--preset--color--brand-border);
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.solea-header-nav__agglo:hover,
.solea-header-nav__agglo:focus-visible {
	opacity: 1;
}

.solea-header-nav__agglo-logo {
	height: 80px;
	width: auto;
	display: block;
}

.solea-header-nav__mega-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 2px;
}

.solea-header-nav__mega-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-radius: 12px;
	color: var(--wp--preset--color--brand-purple-dark);
	text-decoration: none;
	transition: background 0.2s ease;
}

.solea-header-nav__mega-item:hover,
.solea-header-nav__mega-item:focus-visible {
	background: var(--wp--preset--color--brand-surface);
	color: var(--wp--preset--color--contrast);
}

.solea-header-nav__mega-icon {
	width: 40px;
	height: 44px;
	border-radius: 10px;
	background: var(--wp--preset--color--brand-surface);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--brand-accent);
	flex: none;
}

.solea-header-nav__mega-text {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Desktop menu panel: opened by the "Menu" toggle above 1180px. Position is
   absolute with no positioned ancestor between here and the sticky
   <header class="wp-block-template-part">, so left/right/top resolve
   against that full-width, full-height box — giving an edge-to-edge panel
   pinned right below the header, not just below this nav's own content. */
.solea-header-nav__desktop-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--brand-border);
	box-shadow: 0 24px 48px -20px rgba(27, 12, 46, 0.35);
	padding: 32px clamp(20px, 2.4vw, 48px) 40px;
	display: none;
	grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
	gap: 32px 56px;
	z-index: 4;
}

.solea-header-nav__desktop-panel.is-open {
	display: grid;
}

.solea-header-nav__desktop-panel-nav,
.solea-header-nav__desktop-panel-mega {
	display: grid;
	gap: 2px;
	align-content: start;
}

.solea-header-nav__desktop-panel-mega {
	border-left: 1px solid var(--wp--preset--color--brand-border);
	padding-left: 32px;
}

.solea-header-nav__desktop-panel-heading {
	margin: 0 0 10px;
	font-size: 1rem;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--wp--preset--color--brand-muted);
}

.solea-header-nav__desktop-panel-link {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 16px;
	border-radius: 16px;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--brand-purple-dark);
	text-decoration: none;
	transition: background 0.2s ease;
}

.solea-header-nav__desktop-panel-link:hover,
.solea-header-nav__desktop-panel-link:focus-visible {
	background: var(--wp--preset--color--brand-surface);
	color: var(--wp--preset--color--contrast);
}

/* Mobile dropdown panel — unchanged, only reachable below 1180px. Same
   positioning rationale as the desktop panel above. */
.solea-header-nav__mobile-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--brand-border);
	box-shadow: 0 24px 48px -20px rgba(27, 12, 46, 0.35);
	padding: 12px clamp(20px, 2.4vw, 48px) 20px;
	display: none;
	gap: 2px;
	z-index: 4;
}

.solea-header-nav__mobile-panel.is-open {
	display: grid;
	/*
	 * The --solea-mobile-panel-max-height custom property is set by view.js
	 * from the panel's actual position, since the space above it varies (the
	 * WP admin toolbar alone adds 32-46px when logged in) and a fixed value
	 * here would cut off content — like the CTA button — with no way to
	 * scroll to it. The calc() is a fallback for when JS hasn't run yet.
	 */
	max-height: var(--solea-mobile-panel-max-height, calc(100vh - 96px));
	overflow-y: auto;
	overflow-x: hidden;
}

.solea-header-nav__mobile-link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 16px;
	border-radius: 16px;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--brand-purple-dark);
	text-decoration: none;
	background: transparent;
	border: none;
	font-family: inherit;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

.solea-header-nav__mobile-link:hover,
.solea-header-nav__mobile-link:focus-visible {
	background: var(--wp--preset--color--brand-surface);
	color: var(--wp--preset--color--contrast);
}

.solea-header-nav__mobile-link-arrow {
	flex: none;
	margin-left: auto;
}

/* Mobile mega-menu accordion */
.solea-header-nav__mobile-toggle {
	justify-content: space-between;
}

.solea-header-nav__mobile-chevron {
	flex: none;
	transition: transform 0.2s ease;
}

.solea-header-nav__mobile-toggle[aria-expanded="true"] .solea-header-nav__mobile-chevron {
	transform: rotate(180deg);
}

.solea-header-nav__mobile-submenu {
	display: none;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 4px 0 8px 16px;
}

.solea-header-nav__mobile-submenu.is-open {
	display: grid;
}

.solea-header-nav__mobile-submenu-item {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-radius: 14px;
	color: var(--wp--preset--color--brand-purple-dark);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
}

.solea-header-nav__mobile-submenu-item:hover,
.solea-header-nav__mobile-submenu-item:focus-visible {
	background: var(--wp--preset--color--brand-surface);
	color: var(--wp--preset--color--contrast);
}

/* Focus visibility */
.solea-header-nav__burger:focus-visible,
.solea-header-nav__menu-toggle:focus-visible,
.solea-header-nav__cta:focus-visible,
.solea-header-nav__agglo:focus-visible,
.solea-header-nav__mega-item:focus-visible,
.solea-header-nav__desktop-panel-link:focus-visible,
.solea-header-nav__mobile-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-purple-light);
	outline-offset: 3px;
}

/*
 * The search toggle and input both live inside .solea-header-nav__search,
 * whose overflow: hidden (for the width-expand animation) exactly matches
 * the toggle's own box when collapsed — an outset outline would be clipped
 * entirely. An inset box-shadow stays within each element's own border box
 * instead, so it's never cut off.
 */
.solea-header-nav__search-toggle:focus-visible,
.solea-header-nav__search-input:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--brand-purple-light);
	border-radius: 1000px;
}

/* Breakpoint: below 1180px, mobile burger + accordion panel, with the
   mobile agglo logo at the start of the row and the CTA moved into the
   panel (see below) so .actions only ever holds search + burger; at or
   above, the desktop menu toggle + two-column panel and the actions-bar
   agglo logo. */
@media (max-width: 1179px) {
	.solea-header-nav__burger {
		display: grid;
	}

	.solea-header-nav__desktop-panel {
		display: none !important;
	}

	.solea-header-nav__agglo--mobile {
		display: flex;
	}

	.solea-header-nav__actions .solea-header-nav__cta {
		display: none;
	}

	.solea-header-nav__cta--mobile {
		display: inline-flex;
	}

	.solea-header-nav {
		min-height: 64px;
	}

	/*
	 * The expanded search's fixed 260px width (set above) assumes the room
	 * desktop's wide actions bar has to spare — on mobile it doesn't fit next
	 * to the two logos and the burger, and being a plain flex item it would
	 * just overflow the header instead of wrapping. Taking it out of flow and
	 * stretching it between the header's edge padding and the burger (the
	 * same containing-block trick the desktop/mobile nav panels already use,
	 * see the position:absolute comments below) sizes it to whatever room
	 * actually exists instead of a value tuned for desktop.
	 */
	.solea-header-nav__search.is-expanded {
		position: absolute;
		top: 50%;
		left: clamp(16px, 4vw, 24px);
		right: calc(54px + clamp(16px, 4vw, 24px));
		width: auto;
		transform: translateY(-50%);
	}
}

@media (min-width: 1180px) {
	.solea-header-nav__mobile-panel {
		display: none !important;
	}

	.solea-header-nav__menu-toggle {
		display: inline-flex;
	}

	.solea-header-nav__actions .solea-header-nav__agglo {
		display: flex;
	}

	/* The mega grid column already shows all its items unconditionally
	   whenever the desktop panel is open — this trigger link duplicates
	   the mega menu's own heading with no extra content of its own, so
	   it's hidden here rather than listed as a dead-end nav entry. */
	.solea-header-nav__desktop-panel-link[data-solea-mega-trigger] {
		display: none;
	}
}

/* Inspector: repeater rows (nav items / mega-menu items) — each item is a
   bordered card so its fields don't visually run into the next item's. */
.solea-header-nav-repeater {
	display: grid;
	gap: 12px;
	margin-bottom: 12px;
}

.solea-header-nav-repeater-row {
	display: grid;
	gap: 8px;
	padding: 12px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
}

.solea-header-nav-repeater-row__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.solea-header-nav-repeater-row__index {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #757575;
}

.solea-header-nav-repeater__add {
	width: 100%;
	justify-content: center;
}

/* Inspector: native WordPress link picker */
.solea-header-nav-link-picker {
	margin-bottom: 12px;
}

.solea-header-nav-link-picker__label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
}

.solea-header-nav-link-picker__button {
	width: 100%;
	justify-content: flex-start;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}