/**
 * Navigation block — header bar + pill CTA (caret arrow); ≤1024px a text "Menu" toggle
 * opens a full-screen overlay; the bar CTA stays beside the toggle down to the xs tier (480px).
 * Breakpoints via tokens (--mq-up-lg / --mq-down-lg / --mq-down-xs). Tokens only; reduced-motion safe.
 */

.hs-nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);

	/* ---- Pill call-to-action: styled as a theme button (.wp-element-button —
	   theme.json styles.elements.button + components/_button.css), arrow via .hs-arrow. ---- */

	/* The arrow itself is the shared .hs-arrow component (assets/css/components/_arrow.css). */

	/* Text "Menu" toggle + overlay chrome are hidden on desktop. */
}

.hs-nav__list,
	.hs-nav__submenu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

.hs-nav__item {
		position: relative;
	}

.hs-nav__link {
		display: block;
		padding: var(--wp--preset--spacing--10) 0;
		text-decoration: none;
		color: var(--wp--preset--color--secondary);
		font-size: var(--wp--preset--font-size--sm);
		line-height: var(--wp--custom--line-height--none);
		letter-spacing: var(--wp--custom--letter-spacing--normal);
		transition: color var(--wp--custom--transition--hover);
	}

.hs-nav__link:hover,
		.hs-nav__link:focus-visible {
			color: var(--wp--preset--color--white);
		}

/* Disclosure caret button (only rendered when a submenu exists). */

.hs-nav__disclosure {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--wp--preset--spacing--10);
		background: transparent;
		border: none;
		cursor: pointer;
		color: inherit;
	}

.hs-nav__caret {
		width: 0.5rem;
		height: 0.5rem;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--wp--custom--transition--hover);
	}

.hs-nav__toggle,
	.hs-nav__close,
	.hs-nav__panel-top {
		display: none;
	}

.hs-nav__toggle,
	.hs-nav__close {
		padding: var(--wp--preset--spacing--10) 0;
		background: transparent;
		border: none;
		cursor: pointer;
		color: var(--wp--preset--color--secondary);
		font-family: var(--wp--custom--font-family--label);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: var(--wp--custom--font-weight--bold);
		line-height: var(--wp--custom--line-height--none);
		transition: color var(--wp--custom--transition--hover);
	}

.hs-nav__toggle:hover,
		.hs-nav__toggle:focus-visible,
		.hs-nav__close:hover,
		.hs-nav__close:focus-visible {
			color: var(--wp--preset--color--white);
		}

/* ---------- Desktop (>1024px): horizontal bar + dropdowns ---------- */

@media (min-width: 1025px) {
	.hs-nav--header .hs-nav__panel,
	.hs-nav--header .hs-nav__backdrop {
		display: none;
	}

	.hs-nav {
		gap: var(--wp--preset--spacing--40);
	}

	.hs-nav__bar,
	.hs-nav__list {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.hs-nav__bar {
		gap: var(--wp--preset--spacing--40);
	}

	.hs-nav__list {
		gap: var(--wp--preset--spacing--30);
	}

	.hs-nav__item--has-children {
		display: flex;
		align-items: center;
	}

	.hs-nav__submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		min-width: 12rem; /* structural dropdown min-width — no token on the spacing scale */
		padding: var(--wp--preset--spacing--10) 0;
		background-color: var(--wp--preset--color--tertiary);
		border-radius: var(--wp--custom--border-radius--default);
		box-shadow: var(--wp--custom--box-shadow--default);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.25rem);
		transition: opacity var(--wp--custom--transition--hover), transform var(--wp--custom--transition--hover), visibility var(--wp--custom--transition--hover);
	}

		.hs-nav__submenu .hs-nav__link {
			padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		}

	/* Visibility follows .js-open only once view.js runs (.is-enhanced), so ESC
	   can really close a submenu under the pointer or focus. The :hover /
	   :focus-within pair is the no-JS fallback. */
	.hs-nav:not(.is-enhanced) .hs-nav__item--has-children:is(:hover, :focus-within) > .hs-nav__submenu,
	.hs-nav__item--has-children.js-open > .hs-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.hs-nav__item--has-children.js-open > .hs-nav__disclosure .hs-nav__caret {
		transform: rotate(-135deg);
	}
}

/* ---------- ≤1024px: "Menu" toggle + full-screen overlay ---------- */

@media (max-width: 1024px) {
	.hs-nav--header .hs-nav__bar {
		display: none;
	}

	/* Submenus become height-animated accordions. Collapsed ones are also
	   visibility:hidden so their links leave the tab order and the a11y tree;
	   closing delays it until the height animation finishes. */
	.hs-nav__submenu {
		height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: height 0.25s ease, visibility 0s linear 0.25s;
	}

		.hs-nav__submenu.js-open {
			visibility: visible;
			transition: height 0.25s ease, visibility 0s;
		}
	.hs-nav__disclosure[aria-expanded="true"] .hs-nav__caret {
		transform: rotate(-135deg);
	}

	.hs-nav--header .hs-nav__toggle {
		display: inline-flex;
	}

	/* Backdrop (lime) + panel (navy) are always in the DOM but hidden until opened.
	   Opening: the backdrop fades in, then the panel wipes in from the top-right corner
	   via clip-path. The panel's rounded bottom-left corner leaves the lime showing. */
	.hs-nav--header .hs-nav__backdrop,
	.hs-nav--header .hs-nav__panel {
		position: fixed;
		inset: 0;
		visibility: hidden;
	}

	.hs-nav--header .hs-nav__backdrop {
		z-index: 999;
		background-color: var(--wp--preset--color--secondary);
		opacity: 0;
		transition:
			opacity var(--wp--custom--transition--hover),
			visibility 0s linear 0.4s;
	}

	.hs-nav--header .hs-nav__panel {
		display: flex;
		flex-direction: column;
		z-index: 1000;
		/* Same gutters as the header (root padding + its ≤1024px block padding) so the
		   logo in the panel sits exactly over the logo in the bar. */
		padding:
			var(--wp--preset--spacing--20)
			var(--wp--style--root--padding-right)
			var(--wp--preset--spacing--50)
			var(--wp--style--root--padding-left);
		overflow-y: auto;
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		border-bottom-left-radius: var(--wp--custom--border-radius--section); /* 200px */
		/* How far the bottom-left corner's curve reaches inward at the CTA's row.
		   Sized off the same radius so the two stay in step if it ever changes. */
		--hs-nav-cta-safe-inset: calc(var(--wp--custom--border-radius--section) * 0.45);
		clip-path: circle(0% at 100% 0); /* same unit as the open state so the radius interpolates */
		transition:
			clip-path var(--wp--custom--transition--reveal),
			visibility 0s linear 0.6s;
	}

	.hs-nav--header.js-open .hs-nav__backdrop {
		visibility: visible;
		opacity: 1;
		transition: opacity var(--wp--custom--transition--hover);
	}

	.hs-nav--header.js-open .hs-nav__panel {
		visibility: visible;
		clip-path: circle(150% at 100% 0); /* 150% of the diagonal reference covers every corner */
		transition: clip-path var(--wp--custom--transition--reveal);
	}

	.hs-nav--header .hs-nav__panel-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--30);
	}
		.hs-nav__panel-logo a {
			display: block;
			line-height: 0;
		}
		.hs-nav__panel-logo img {
			display: block;
			width: auto;
			height: 2.75rem; /* matches the header bar logo height */
		}

	.hs-nav--header .hs-nav__close {
		display: inline-flex;
	}

	/* Large bold stacked links — Terner Labs style. */
	.hs-nav--header .hs-nav__panel .hs-nav__list {
		display: flex;
		flex-direction: column;
		margin: auto 0;
		padding-block: var(--wp--preset--spacing--50);
	}

	.hs-nav--header .hs-nav__panel .hs-nav__link {
		padding: var(--wp--preset--spacing--5) 0;
		color: var(--wp--preset--color--white);
		font-family: var(--wp--custom--font-family--label);
		/* Up to 62px, but never wider than the longest label fits on a phone. */
		font-size: min(var(--wp--custom--menu--link-max-size), 11.5vw);
		font-weight: var(--wp--custom--font-weight--bold);
		line-height: var(--wp--custom--line-height--none);
		letter-spacing: var(--wp--custom--letter-spacing--tight);
		text-transform: uppercase;
		overflow-wrap: anywhere;
	}

		.hs-nav--header .hs-nav__panel .hs-nav__link:hover,
		.hs-nav--header .hs-nav__panel .hs-nav__link:focus-visible {
			color: var(--wp--preset--color--secondary);
		}

	.hs-nav--header .hs-nav__panel .hs-nav__submenu .hs-nav__link {
		font-size: var(--wp--preset--font-size--xl);
	}

	/* The overlay's own copy of the CTA sits below the links, sized close to them. */
	.hs-nav--header .hs-nav__panel .hs-nav__cta {
		display: inline-flex;
		align-self: flex-end; /* keeps clear of the lime corner */
		margin-top: 0;
		/* The panel's 200px bottom-left corner curves inward, and the pill sits in
		   that corner's path. Cap the pill's width at the panel minus how far the
		   curve reaches at the pill's height, so the two never collide: the pill
		   simply gets narrower (and its text smaller) as the screen shrinks. */
		max-width: calc(100% - var(--hs-nav-cta-safe-inset));
		padding: var(--wp--preset--spacing--15) min(var(--wp--preset--spacing--30), 4vw);
		/* Scales with the viewport so the pill always fits on one line at phone widths. */
		font-size: min(var(--wp--preset--font-size--xxl), 4.6vw);
		/* Filled lime on mobile; navy text and arrow. Hover inverts to outlined. */
		background-color: var(--wp--preset--color--secondary);
		border-width: 2px;
		color: var(--wp--preset--color--primary);
	}

		.hs-nav--header .hs-nav__panel .hs-nav__cta:hover,
		.hs-nav--header .hs-nav__panel .hs-nav__cta:focus-visible {
			background-color: transparent;
			color: var(--wp--preset--color--white);
		}
}

/* The CTA's arrow: a bigger head on a shorter line than the shared mark, so it
   reads at the scale of the pill it sits in rather than at body-copy size. The
   line's collapsed/grown widths both come from --hs-arrow-width, so overriding
   that one value shortens the drawn line without touching any other button. */

.hs-nav__cta .hs-arrow {
	--hs-arrow-width: 0.8em;

	width: var(--hs-arrow-width);
}

.hs-nav__cta .hs-arrow__head {
	width: 12px;
	height: 12px;
}

/* The grow-on-hover target, matching the shortened box. */

.hs-nav__cta:hover .hs-arrow__line,
.hs-nav__cta:focus-visible .hs-arrow__line {
	width: var(--hs-arrow-width);
}

/* ---------- ≤480px: drop the bar CTA (it remains inside the overlay) ---------- */

@media (max-width: 480px) {
	.hs-nav--header > .hs-nav__cta {
		display: none;
	}
}

/* Lock body scroll while the overlay is open. */

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

/* Keep the overlay clear of the WordPress admin bar when logged in. */

.admin-bar .hs-nav--header .hs-nav__panel,
.admin-bar .hs-nav--header .hs-nav__backdrop {
	top: 32px;
}

@media screen and (max-width: 782px) {

.admin-bar .hs-nav--header .hs-nav__panel,
.admin-bar .hs-nav--header .hs-nav__backdrop {
		top: 46px
}
	}

/* Respect reduced motion. */

@media (prefers-reduced-motion: reduce) {
	.hs-nav__link,
	.hs-nav__caret,
	.hs-nav__submenu,
	.hs-nav__cta,
	.hs-nav__toggle,
	.hs-nav__close,
	.hs-nav__backdrop,
	.hs-nav__panel {
		transition: none;
	}
	.hs-nav__cta:hover,
	.hs-nav__cta:focus-visible {
		transform: none;
	}
}


/*# sourceMappingURL=style-index.css.map*/