/*
 * Ventureheap Builder - Nav Menu.
 *
 * The breakpoint is pure CSS: each variant class carries its own media query,
 * so the hamburger appears at the right width with no JavaScript involved. The
 * script only handles opening, closing and submenu toggles.
 */

.vhb-nav { position: relative; }

/* Lists -------------------------------------------------------------------- */
.vhb-nav__list,
.vhb-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vhb-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.vhb-nav--vertical .vhb-nav__list { flex-direction: column; align-items: stretch; }

.vhb-nav__item { position: relative; display: flex; align-items: center; }

.vhb-nav__link {
	position: relative;
	display: block;
	padding: .6rem .85rem;
	color: var(--vhb-secondary);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--vhb-radius-btn);
	transition: color var(--vhb-transition), background-color var(--vhb-transition);
}

.vhb-nav__link:hover,
.vhb-nav__link:focus-visible { color: var(--vhb-primary); text-decoration: none; }

/* The active underline is always present but transparent, so turning it on in
   the panel does not shift anything. */
.vhb-nav__link::after {
	content: "";
	position: absolute;
	left: .85rem;
	right: .85rem;
	bottom: .35rem;
	height: 2px;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--vhb-transition);
}

.vhb-nav__item--parent > .vhb-nav__link { padding-right: .35rem; }

/* Submenu toggle ----------------------------------------------------------- */
.vhb-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 0 .35rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.vhb-nav__caret {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--vhb-transition);
}

.vhb-nav__toggle[aria-expanded="true"] .vhb-nav__caret { transform: rotate(-135deg); }

.vhb-nav--icon-none .vhb-nav__toggle { display: none; }

.vhb-nav--icon-plus .vhb-nav__caret {
	width: 11px;
	height: 11px;
	border: 0;
	transform: none;
	position: relative;
}

.vhb-nav--icon-plus .vhb-nav__caret::before,
.vhb-nav--icon-plus .vhb-nav__caret::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
}

.vhb-nav--icon-plus .vhb-nav__caret::before { width: 11px; height: 2px; }
.vhb-nav--icon-plus .vhb-nav__caret::after { width: 2px; height: 11px; transition: opacity var(--vhb-transition); }
.vhb-nav--icon-plus .vhb-nav__toggle[aria-expanded="true"] .vhb-nav__caret::after { opacity: 0; }

/* Dropdowns ---------------------------------------------------------------- */
.vhb-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 90;
	min-width: 220px;
	padding: 8px;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	box-shadow: var(--vhb-shadow);
	display: none;
}

.vhb-nav__sub .vhb-nav__sub { top: -9px; left: 100%; }
.vhb-nav__sub .vhb-nav__item { display: flex; }
.vhb-nav__sub .vhb-nav__link { flex: 1; }

.vhb-nav__item:hover > .vhb-nav__sub,
.vhb-nav__item:focus-within > .vhb-nav__sub,
.vhb-nav__item.is-open > .vhb-nav__sub { display: block; }

/* Hamburger ---------------------------------------------------------------- */
.vhb-nav__burger-wrap { display: none; }

.vhb-nav__burger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: .5rem .7rem;
	font-size: 20px;
	line-height: 1;
	color: var(--vhb-secondary);
	background: none;
	border: 0;
	border-radius: var(--vhb-radius-btn);
	cursor: pointer;
}

.vhb-nav__burger-icon { display: inline-flex; }
.vhb-nav__burger-icon svg { width: 1em; height: 1em; fill: currentColor; }
.vhb-nav__burger-text { font-size: .9rem; font-weight: 600; }

.vhb-nav__burger-bars { display: block; width: 22px; }

.vhb-nav__burger-bars i {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--vhb-transition), opacity var(--vhb-transition);
}

.vhb-nav__burger-bars i + i { margin-top: 5px; }

.vhb-nav__burger[aria-expanded="true"] .vhb-nav__burger-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vhb-nav__burger[aria-expanded="true"] .vhb-nav__burger-bars i:nth-child(2) { opacity: 0; }
.vhb-nav__burger[aria-expanded="true"] .vhb-nav__burger-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel chrome, only used once the hamburger is active ---------------------- */
.vhb-nav__close,
.vhb-nav__panel-title { display: none; }

.vhb-nav__overlay { display: none; }

/* ==========================================================================
   Collapsed state
   Everything below only applies once the menu has turned into a hamburger.
   ========================================================================== */
.vhb-nav.is-collapsed .vhb-nav__burger-wrap { display: flex; }

/* The panel is fixed and spans the viewport rather than being positioned
   against the nav element. In a real header the nav is only as wide as the
   hamburger, so an absolutely positioned panel would be clipped to about
   44px and hang off the edge of the screen. The script sets --vhb-nav-top
   to the bottom of the header when the panel opens. */
.vhb-nav.is-collapsed .vhb-nav__panel {
	position: fixed;
	top: var(--vhb-nav-top, 64px);
	left: 0;
	right: 0;
	z-index: 95;
	display: none;
	padding: 12px 20px 16px;
	background: var(--vhb-bg);
	border-top: 1px solid var(--vhb-border);
	border-bottom: 1px solid var(--vhb-border);
	box-shadow: var(--vhb-shadow);
	max-height: calc(100vh - var(--vhb-nav-top, 64px));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.vhb-nav.is-collapsed.is-open .vhb-nav__panel { display: block; }

.vhb-nav.is-collapsed .vhb-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

/* Collapsed items are a flex row of link plus toggle, so the nested list has
   to wrap onto its own full width line. Without this it becomes a third flex
   item and sits beside its own parent. */
.vhb-nav.is-collapsed .vhb-nav__item {
	border-bottom: 1px solid var(--vhb-border);
	justify-content: space-between;
	flex-wrap: wrap;
}

.vhb-nav.is-collapsed .vhb-nav__sub {
	flex: 0 0 100%;
	width: 100%;
	order: 1;
}

.vhb-nav.is-collapsed .vhb-nav__item:last-child { border-bottom: 0; }
.vhb-nav.is-collapsed .vhb-nav__link { flex: 1; padding: .85rem .5rem; }
.vhb-nav.is-collapsed .vhb-nav__link::after { display: none; }
.vhb-nav.is-collapsed .vhb-nav__toggle { min-width: 44px; min-height: 44px; }

/* Nested lists open in place rather than floating over the page. */
.vhb-nav.is-collapsed .vhb-nav__sub {
	position: static;
	display: none;
	min-width: 0;
	padding: 0 0 0 14px;
	border: 0;
	box-shadow: none;
	background: none;
}

.vhb-nav.is-collapsed .vhb-nav__item:hover > .vhb-nav__sub,
.vhb-nav.is-collapsed .vhb-nav__item:focus-within > .vhb-nav__sub { display: none; }
.vhb-nav.is-collapsed .vhb-nav__item.is-open > .vhb-nav__sub { display: block; }

/* Drawer and full screen variants ------------------------------------------ */
.vhb-nav.is-collapsed.vhb-nav--panel-drawer .vhb-nav__panel,
.vhb-nav.is-collapsed.vhb-nav--panel-full .vhb-nav__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	max-height: none;
	border: 0;
	border-radius: 0;
	padding: 24px 20px;
	z-index: 100000;
}

.vhb-nav.is-collapsed.vhb-nav--panel-drawer .vhb-nav__panel {
	left: 0;
	right: auto;
	width: min(86vw, 340px);
	transform: translateX(-100%);
	transition: transform .25s ease;
	display: block;
	visibility: hidden;
}

.vhb-nav.is-collapsed.vhb-nav--panel-drawer.is-open .vhb-nav__panel {
	transform: none;
	visibility: visible;
}

.vhb-nav.is-collapsed.vhb-nav--panel-full .vhb-nav__panel { left: 0; right: 0; }

.vhb-nav.is-collapsed.vhb-nav--panel-drawer .vhb-nav__close,
.vhb-nav.is-collapsed.vhb-nav--panel-full .vhb-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	font-size: 1.8rem;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.vhb-nav.is-collapsed.vhb-nav--panel-drawer .vhb-nav__panel-title,
.vhb-nav.is-collapsed.vhb-nav--panel-full .vhb-nav__panel-title {
	display: block;
	margin: 0 0 14px;
	padding-right: 48px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--vhb-secondary);
}

.vhb-nav.is-collapsed.vhb-nav--panel-drawer.is-open .vhb-nav__overlay,
.vhb-nav.is-collapsed.vhb-nav--panel-full.is-open .vhb-nav__overlay {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(15, 23, 42, .5);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
.vhb-nav--break-always { }

@media (max-width: 1024px) {
	.vhb-nav--break-tablet .vhb-nav__burger-wrap { display: flex; }
	.vhb-nav--break-tablet .vhb-nav__panel { display: none; }
}

@media (max-width: 767px) {
	.vhb-nav--break-mobile .vhb-nav__burger-wrap { display: flex; }
	.vhb-nav--break-mobile .vhb-nav__panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vhb-nav__panel,
	.vhb-nav__burger-bars i,
	.vhb-nav__caret { transition-duration: .001ms; }
}

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