/* Navbar runtime styles: header geometry (position, insets, bar heights).
   Colours, radius and typography stay in Webflow.

   Bar height = button height + 10px above and below.

   1. Variables are declared on <html>: #smooth-content is a sibling of .navbar,
      not a child.
   2. Never add transform, filter or will-change to .navbar: it would become the
      containing block of the fixed .offcanvas-menu. Animate .navbar-sticky instead. */

html:not(.wf-design-mode) {
	--navbar-inset: 10px;
	--navbar-button-height: 48px;
	--navbar-button-height-sticky: 48px;
	--navbar-bar-height: 48px;
	--navbar-bar-height-sticky: 68px;
	--navbar-radius: 10px;
	--navbar-duration: 260ms;
	--navbar-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Space the header takes at the top: inset + bar + the same gap below.
	   Uses the unshrunk height so content does not jump when the bar sticks. */
	--navbar-offset: calc(var(--navbar-inset) * 2 + var(--navbar-bar-height));
}

@media screen and (min-width: 992px) {
	html:not(.wf-design-mode) {
		--navbar-button-height: 50px;
		--navbar-button-height-sticky: 40px;
		--navbar-bar-height: 70px;
		--navbar-bar-height-sticky: 60px;
	}
}

/* 1920+: the design system scales nav type and logo, so bar heights step up too. */
@media screen and (min-width: 1920px) {
	html:not(.wf-design-mode) {
		--navbar-button-height: 60px;
		--navbar-button-height-sticky: 48px;
		--navbar-bar-height: 80px;
		--navbar-bar-height-sticky: 68px;
	}
}

/* No height here: the box must match the visible bar, or it blocks clicks below it. */
html:not(.wf-design-mode) .navbar.w-nav {
	position: fixed;
	inset: var(--navbar-inset) var(--navbar-inset) auto;
	z-index: 1000;
	box-sizing: border-box;
	background-color: transparent;
	border: 0;
	transition: color var(--navbar-duration) var(--navbar-ease);
}

/* The bar: transparent at rest, a light card when sticky. */
html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: var(--navbar-bar-height);
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: var(--navbar-radius);
	transition:
		height var(--navbar-duration) var(--navbar-ease),
		background-color var(--navbar-duration) var(--navbar-ease),
		border-color var(--navbar-duration) var(--navbar-ease);
}

html:not(.wf-design-mode) .navbar.w-nav.is-sticky .navbar-sticky {
	height: var(--navbar-bar-height-sticky);
	background-color: var(--_system-colors---white);
	border-color: var(--_system-colors---muted);
}

html:not(.wf-design-mode) .navbar.w-nav .navbar-container {
	position: relative;
	z-index: 1;
	height: auto;
	min-height: 0;
}

/* Bar content: the button gets its height directly so children never stretch the bar. */
html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky .button.button-icon {
	box-sizing: border-box;
	height: var(--navbar-button-height);
	padding-top: 0;
	padding-bottom: 0;
	transition:
		height var(--navbar-duration) var(--navbar-ease),
		background-color var(--navbar-duration) var(--navbar-ease),
		border-color var(--navbar-duration) var(--navbar-ease),
		color var(--navbar-duration) var(--navbar-ease);
}

html:not(.wf-design-mode) .navbar.w-nav.is-sticky .navbar-sticky .button.button-icon {
	height: var(--navbar-button-height-sticky);
}

/* Flex, not a text line: an inline button on a baseline adds descender space.
   The wrapper's 10px vertical padding (set in Webflow) is the bar's air; removed on mobile. */
html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky .navigation-buttons {
	display: flex;
	align-items: center;
}

@media screen and (max-width: 991px) {
	html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky .navigation-buttons {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* Dropdown item: the plus sits next to the link, not inside it.
   Item layout lives in Webflow; only the bar-dependent height is set here. */
html:not(.wf-design-mode) .navbar.w-nav .navigation-trigger,
html:not(.wf-design-mode) .navbar.w-nav .navigation .menu:not(.in-trigger) {
	min-height: var(--navbar-bar-height-sticky);
}

/* Webflow's native dropdown opens the submenu; here the plus turns into a cross.
   Webflow puts .w--open on the toggle and the list, not on .w-dropdown. */
html:not(.wf-design-mode) .navbar.w-nav .contextual-icon,
html:not(.wf-design-mode) .mob-menu-toggle-icon {
	transition: transform 200ms var(--navbar-ease);
}

html:not(.wf-design-mode) .navbar.w-nav .navigation-trigger.w--open .contextual-icon,
html:not(.wf-design-mode) .mob-menu-toggle.w--open .mob-menu-toggle-icon {
	transform: rotate(45deg);
}

/* The sticky header is always light, so its content is always dark regardless of the
   page variant. .is-sticky is added at runtime, so this cannot live in Webflow. */
html:not(.wf-design-mode) .navbar.w-nav.is-sticky .menu,
html:not(.wf-design-mode) .navbar.w-nav.is-sticky .contextual-icon,
html:not(.wf-design-mode) .navbar.w-nav.is-sticky .brand-svg,
html:not(.wf-design-mode) .navbar.w-nav.is-sticky svg {
	color: var(--_system-colors---dark);
}

html:not(.wf-design-mode) .navbar.w-nav .menu:hover,
html:not(.wf-design-mode) .navbar.w-nav .menu:hover .contextual-icon,
html:not(.wf-design-mode) .navbar.w-nav .navigation-trigger:hover,
html:not(.wf-design-mode) .navbar.w-nav .navigation-trigger:hover .contextual-icon {
	color: var(--_system-colors---primary);
}

/* The header is out of flow; the content reserves its space. */
html:not(.wf-design-mode) #smooth-content {
	padding-top: var(--navbar-offset);
}

/* Remove Webflow's float clearfix pseudo-elements from .w-nav: the layout is flex. */
.navbar::before,
.navbar::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	html:not(.wf-design-mode) .navbar.w-nav,
	html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky,
	html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky .button.button-icon {
		transition-duration: 0ms;
	}
}