/* Site navigation — tokens from theme.json (DESIGN.md → Navigation). Mobile first; desktop from 1024px. */

.wv-nav {
	--wv-bar-h: 72px;
	position: relative;
	background: var(--wp--preset--gradient--violet-ground);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
}

.wv-nav .screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wv-nav__bar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wv-bar-h);
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.wv-nav__logo { display: inline-flex; flex: none; border-radius: 8px; }
.wv-nav__logo img { display: block; width: 76px; height: auto; }

:where(.wv-nav) :where(a, button) { font: inherit; color: inherit; }
.wv-nav :focus-visible { outline: 3px solid var(--wp--preset--color--lavender-on-ground); outline-offset: 2px; border-radius: 8px; }

/* Top-level items (links and dropdown buttons) */
.wv-nav__list, .wv-nav__actions, .wv-nav__entries { list-style: none; margin: 0; padding: 0; }
.wv-nav__top {
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	width: 100%;
	padding: 14px 4px;
	background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2;
	color: var(--wp--preset--color--surface);
}
.wv-nav__top[aria-current="page"], .wv-nav__item.is-ancestor > .wv-nav__top {
	text-decoration: underline; text-decoration-color: var(--wp--preset--color--lavender-on-ground);
	text-decoration-thickness: 2px; text-underline-offset: 6px;
}
/* One hover for every top item (links like "Log in" and dropdown buttons alike).
   Selectors are specific enough to beat the global link :hover colour from theme.json. */
.wv-nav .wv-nav__top,
.wv-nav a.wv-nav__top:visited { color: var(--wp--preset--color--surface); }
.wv-nav .wv-nav__top:hover,
.wv-nav a.wv-nav__top:visited:hover, /* a visited link (Log in) must still change on hover */
.wv-nav .wv-nav__top:focus-visible,
.wv-nav .wv-nav__item.is-open > .wv-nav__top { color: var(--wp--preset--color--lavender-on-ground); }
.wv-nav a.wv-nav__link,
.wv-nav a.wv-nav__link:hover,
.wv-nav a.wv-nav__link:visited { color: var(--wp--preset--color--ink); }
.wv-nav__top { transition: color 0.2s ease; }

.wv-nav__chev { flex: none; opacity: 0.9; transition: transform 0.2s ease; }
.wv-nav__item.is-open > .wv-nav__trigger .wv-nav__chev { transform: rotate(180deg); }

/* Dropdown content */
.wv-nav__sub { color: var(--wp--preset--color--ink); }
.wv-nav.wv-js .wv-nav__sub { display: none; }
.wv-nav.wv-js .wv-nav__item.is-open > .wv-nav__sub { display: block; }

.wv-nav__group-title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wv-accent, var(--wp--preset--color--ink-muted));
}
.wv-nav__entries { display: grid; gap: 4px; }
.wv-nav__link {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 10px; border-radius: 16px; text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.wv-nav__link:hover { background: var(--wp--preset--color--surface-tint); }
.wv-nav__link[aria-current="page"] { background: var(--wp--preset--color--indigo-mist); }
.wv-nav__link:focus-visible { outline-color: var(--wp--preset--color--indigo-action); }
.wv-nav__tile {
	flex: none; display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 12px;
	background: var(--wv-accent-mist, var(--wp--preset--color--indigo-mist));
	color: var(--wv-accent, var(--wv-purple));
}
.wv-nav__text { display: grid; gap: 2px; min-width: 0; }
.wv-nav__title { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.wv-nav__desc { font-family: var(--wp--preset--font-family--body); font-size: 0.875rem; line-height: 1.4; color: var(--wp--preset--color--ink-muted); }
.wv-nav__ext { color: var(--wp--preset--color--ink-muted); }

/* Menu groups and entries take their colour from a tone class (tone-purple, tone-green, …); see sections.css. */

/* Full-width strip under the menu columns ("All use cases", WEENVO-415) */
.wv-nav__all {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 16px; padding: 14px 20px; border-radius: 16px;
	background: var(--wp--preset--color--indigo-mist); color: var(--wp--preset--color--indigo-action);
	font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
	transition: background-color 0.2s ease;
}
.wv-nav__all:hover, .wv-nav__all:focus-visible { background: var(--wp--preset--color--lavender-on-ground); color: var(--wp--preset--color--indigo-action-deep); }
.wv-nav__all-arrow { transition: transform 0.2s ease; }
.wv-nav__all:hover .wv-nav__all-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .wv-nav__all, .wv-nav__all-arrow { transition: none; } }

/* Header pills: white with coloured text, like the live header */
.wv-btn {
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 165px; min-height: 46px; padding: 12px 28px;
	border-radius: 999px; border: 0; text-decoration: none;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 6px 20px rgba(42, 0, 96, 0.25);
	font-size: 0.875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.wv-btn--secondary { color: var(--wv-purple); }
.wv-btn:hover, .wv-btn:focus-visible { background: var(--wp--preset--color--lavender-on-ground); box-shadow: 0 8px 24px rgba(42, 0, 96, 0.32); }
/* Demo (owner, staging, WEENVO-367): on the violet header a white pill like Pricing with dark pink text — #ff4a9e on white is
   3.1:1, #c42f72 is 5.2:1; hover on the pink mist. On the white scrolled desktop header it is filled pink (rule below). */
.wv-btn--primary { color: #c42f72; }
.wv-btn--primary:hover, .wv-btn--primary:focus-visible { background: var(--wv-pink-mist, #ffebf4); color: #c42f72; }

/* ---------- Phones and tablets ---------- */
@media (max-width: 1023.98px) {
	.wv-nav__bar { min-height: var(--wv-bar-h); }
	.wv-nav__logo img { width: 66px; }
	.wv-nav__toggle {
		margin-left: 8px;
		display: inline-grid; place-items: center;
		width: 44px; height: 44px;
		background: none; border: 0; border-radius: 12px; cursor: pointer; color: var(--wp--preset--color--surface);
	}
	.wv-nav__toggle-close, .wv-nav.is-panel-open .wv-nav__toggle-open { display: none; }
	.wv-nav.is-panel-open .wv-nav__toggle-close { display: inline-flex; }
	.wv-nav__kept { margin-left: auto; min-width: 0; min-height: 40px; padding: 10px 18px; font-size: 0.75rem; letter-spacing: 0.16em; }

	.wv-nav__panel {
		position: absolute; left: 0; right: 0; top: 100%; z-index: 100;
		max-height: calc(100dvh - var(--wv-bar-h));
		min-height: calc(100dvh - var(--wv-bar-h)); /* the open menu covers the page, not just its own items */
		overflow-y: auto; overscroll-behavior: contain;
		padding: 8px clamp(1rem, 0.5rem + 2vw, 2rem) 32px;
		background: var(--wp--preset--color--violet-ground);
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}
	.wv-nav.wv-js .wv-nav__panel { display: none; }
	.wv-nav.wv-js.is-panel-open .wv-nav__panel { display: flex; }

	.wv-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
	.wv-nav__top { min-height: 52px; font-size: 0.8125rem; letter-spacing: 0.14em; }
	.wv-nav__sub { background: var(--wp--preset--color--surface); border-radius: 16px; padding: 12px; margin-bottom: 12px; }
	.wv-nav__groups { display: grid; gap: 16px; }
	.wv-nav__group-title { padding: 4px 10px 0; }
	.wv-nav__btns { display: grid; gap: 12px; margin-top: 24px; }
	.wv-nav__btns .is-kept { display: none; }
	.wv-nav__btns--start:not(:has(> :not(.is-kept))) { display: none; }
	.wv-nav__btns .wv-btn { width: 100%; }
	.wv-nav__btns--start { order: 3; }
	.wv-nav__panel { display: flex; flex-direction: column; }
	.wv-nav.wv-js:not(.is-panel-open) .wv-nav__panel { display: none; }
}
html.wv-nav-locked, html.wv-nav-locked body { overflow: hidden; }

/* ---------- Desktop: [Demo .. Product Solutions] [W] [Business cases Log in .. Pricing] ---------- */
@media (min-width: 1024px) {
	.wv-nav__toggle, .wv-nav__kept { display: none; }
	.wv-nav__bar {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: clamp(20px, 2.4vw, 40px);
		min-height: 144px;
		max-width: 1296px;
		padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
		transition: min-height 0.25s ease;
	}
	.wv-nav__panel { display: contents; }
	.wv-nav__logo { grid-column: 2; grid-row: 1; }
	.wv-nav__side { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); min-width: 0; }
	.wv-nav__side--left { grid-column: 1; grid-row: 1; }
	.wv-nav__side--right { grid-column: 3; grid-row: 1; }
	.wv-nav__side--left .wv-nav__list { margin-left: auto; }
	.wv-nav__btns--end { margin-left: auto; display: flex; gap: 12px; }
	.wv-nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
	.wv-nav__item { position: relative; }
	.wv-nav__top { width: auto; padding: 10px 2px; }

	.wv-nav__sub {
		position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 100;
		width: min(400px, 90vw);
		padding: 12px;
		background: var(--wp--preset--color--surface);
		border-radius: 24px;
		box-shadow: var(--wp--preset--shadow--card-hover);
	}
	.wv-nav__item:has(.is-grouped) { position: static; }
	.wv-nav__sub.is-grouped { top: calc(50% + 48px); width: min(960px, 92vw); padding: 20px; }
	.wv-nav.is-scrolled .wv-nav__sub.is-grouped { top: calc(50% + 32px); }
	.wv-nav__groups { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; }
	/* Use cases: four equal columns (size, industry, team, compare) — WEENVO-367. */
	.wv-nav__groups:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wv-nav__sub.is-grouped:has(.wv-nav__groups > :nth-child(4)) { width: min(1100px, 94vw); }
	/* A group marked "is-under" fills the space under the first group; the other columns span both rows (WEENVO-415). */
	.wv-nav__groups:has(> .is-under) { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr; align-items: start; }
	.wv-nav__groups:has(> .is-under) > :first-child { grid-column: 1; grid-row: 1; }
	.wv-nav__groups > .is-under { grid-column: 1; grid-row: 2; margin-top: 0; }
	.wv-nav__groups:has(> .is-under) > :not(:first-child):not(.is-under) { grid-row: 1 / span 2; }
	.wv-nav__group-title { padding: 0 10px; }

	/* Compact bar once the page scrolls */
	.wv-nav.is-scrolled .wv-nav__bar { min-height: 80px; }
}

/* Fixed header, out of the page flow, so shrinking it on scroll never moves the page
   (a sticky, in-flow header caused a scroll ↔ shrink feedback loop: the menu jumped and flickered).
   The space it covers is reserved by a constant padding on .wp-site-blocks; pages that start with
   a hero skip that padding because the hero already pads its own content below the header. */
:root { --wv-header-h: 72px; }
@media (min-width: 1024px) { :root { --wv-header-h: 144px; } }

.wp-site-blocks > header:has(.wv-nav), header.wp-block-template-part:has(.wv-nav) {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 1000;
}
.wp-site-blocks:has(> header .wv-nav) { padding-top: var(--wv-header-h); }
.wp-site-blocks:has(:is(.wp-block-post-content, main) > .wv-hero:first-child) { padding-top: 0; }
.wv-nav.is-scrolled { box-shadow: 0 8px 24px rgba(42, 0, 96, 0.25); }

/* Desktop, scrolled: white bar with filled pills, like the live header */
@media (min-width: 1024px) {
	.wv-nav.is-scrolled { background: var(--wp--preset--color--surface); box-shadow: 0 6px 24px rgba(42, 0, 96, 0.12); }
	.wv-nav.is-scrolled .wv-nav__top,
	.wv-nav.is-scrolled a.wv-nav__top:visited { color: var(--wp--preset--color--ink); }
	.wv-nav.is-scrolled .wv-nav__top:hover,
	.wv-nav.is-scrolled a.wv-nav__top:visited:hover,
	.wv-nav.is-scrolled .wv-nav__top:focus-visible,
	.wv-nav.is-scrolled .wv-nav__item.is-open > .wv-nav__top { color: var(--wp--preset--color--indigo-action); }
	.wv-nav.is-scrolled .wv-nav__top[aria-current="page"],
	.wv-nav.is-scrolled .wv-nav__item.is-ancestor > .wv-nav__top { text-decoration-color: var(--wp--preset--color--indigo-action); }
	.wv-nav.is-scrolled .wv-btn { box-shadow: 0 6px 16px rgba(42, 0, 96, 0.18); }
	.wv-nav.is-scrolled .wv-btn--primary { background: var(--wv-pink, #ff4a9e); color: var(--wp--preset--color--surface); }
	.wv-nav.is-scrolled .wv-btn--secondary { background: var(--wv-purple); color: var(--wp--preset--color--surface); }
	.wv-nav.is-scrolled .wv-btn--primary:hover, .wv-nav.is-scrolled .wv-btn--primary:focus-visible { background: var(--wv-pink-deep, #db4088); color: var(--wp--preset--color--surface); }
	.wv-nav.is-scrolled .wv-btn--secondary:hover, .wv-nav.is-scrolled .wv-btn--secondary:focus-visible { background: #7a2fd0; }
	.wv-nav.is-scrolled :focus-visible { outline-color: var(--wp--preset--color--indigo-action); }
}

@media (prefers-reduced-motion: reduce) {
	.wv-nav__chev, .wv-btn, .wv-nav__bar { transition: none; }
}