/**
 * NovaBP Header — site header rebuilt as a single widget
 *
 * Spec source: the live Elementor Theme Builder header template (post 18,
 * "Header", condition include/general) as it renders on localhost:10033. Every
 * value below is the one Elementor generates for that template in
 * uploads/elementor/css/post-18.css, resolved through the Pajakin kit globals:
 *
 *   --e-global-color-primary  #021137   dark      (top bar bg, menu item, CTA bg)
 *   --e-global-color-accent   #0B9500   green     (menu hover/active, toggle)
 *   --e-global-color-62ad4ae  #FFFFFF   light     (bar bg, top bar text)
 *   --e-global-color-2907753  #4A6EC91A secondary 10% (dropdown divider)
 *
 * Two Elementor artifacts are deliberately not reproduced: the fixed column
 * percentages (80.516% / 24%) and the tablet `margin-bottom: -60px` on the top
 * bar. `space-between` with auto-width groups renders identically and survives
 * a longer menu; the negative margin was compensating for a gap this markup
 * does not have.
 */

.nova-header {
	/* Palette */
	--nova-header-topbar-bg: #021137;
	--nova-header-topbar-color: #ffffff;
	--nova-header-bar-bg: #F5F6F8;
	--nova-header-menu-color: #021137;
	--nova-header-menu-color-hover: #0b9500;
	--nova-header-dropdown-bg: #ffffff;
	--nova-header-dropdown-color: #021137;
	--nova-header-dropdown-bg-hover: #0b9500;
	--nova-header-dropdown-color-hover: #ffffff;
	--nova-header-dropdown-divider: #4a6ec91a;
	--nova-header-cta-bg: #021137;
	--nova-header-cta-color: #ffffff;
	--nova-header-toggle-color: #0b9500;

	/* Type — the kit leaves the nav on body type; the CTA follows the Figma
	 * button style (Body/md/Semibold — Manrope 600 16/1.5). */
	--nova-header-font: "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
	--nova-header-cta-font: "Manrope", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
	--nova-header-dropdown-font: "Lato", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;

	/*
	 * Lato only ships 100/300/400/700/900 — the in-between weights get
	 * synthesised, so keep this on a real one. 700 (Bold) instead of the 900
	 * (Black) the CTA uses: at 16px in a 220px dropdown, Black reads as a
	 * heading rather than a nav label.
	 */
	--nova-header-dropdown-weight: 700;

	/*
	 * Rhythm — the gutter is 0 at wide viewports so the 1280px measure is the
	 * whole width, exactly as the live template's `boxed_width` behaves; the
	 * 24px only appears once the viewport can no longer hold 1280 + air (the
	 * template's `padding_laptop`).
	 */
	--nova-header-max: 1280px;
	--nova-header-gutter: 0px;
	--nova-header-topbar-gap: 16px;
	--nova-header-topbar-icon-gap: 5px;
	--nova-header-topbar-icon-size: 14px;
	--nova-header-logo-gap: 60px;
	--nova-header-menu-gap: 36px;
	--nova-header-z-index: 9999;

	position: relative;
	z-index: var(--nova-header-z-index);
	box-sizing: border-box;
	font-family: var(--nova-header-font);
}

.nova-header *,
.nova-header *::before,
.nova-header *::after {
	box-sizing: border-box;
}

/*
 * Sticky menu bar — the live template's `sticky: top` on the menu container,
 * where the dark top bar scrolls away and the white bar pins to the viewport.
 *
 * `position: sticky` cannot do this: a sticky box only travels inside its
 * containing block, and every ancestor here (.nova-header, the Elementor widget
 * container, the widget, its container, .elementor-location-header) is exactly
 * header-height, so there is nowhere to travel. Elementor Pro's own sticky is
 * JS-driven `position: fixed` for the same reason — novabp-header.js flips
 * `is-stuck` once the bar reaches the top of the viewport.
 */
.nova-header.is-sticky.is-stuck .nova-header__bar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--nova-header-z-index);
}

/*
 * Taking the bar out of flow would pull the page up by its height; the padding
 * holds that space open. The value is measured by the script, since the bar's
 * height depends on the logo size and the editor's padding controls.
 */
.nova-header.is-sticky.is-stuck {
	padding-bottom: var(--nova-header-bar-height, 0px);
}

/* ----------------------------------------------------------------------
 * Top bar
 * -------------------------------------------------------------------- */

.nova-header__topbar {
	background-color: var(--nova-header-topbar-bg);
	color: var(--nova-header-topbar-color);
	padding: 16px;
}

.nova-header__topbar-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--nova-header-topbar-gap);
	max-width: var(--nova-header-max);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.nova-header__topbar-item {
	display: inline-flex;
	align-items: center;
	gap: var(--nova-header-topbar-icon-gap);
	color: inherit;
}

.nova-header__topbar-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--nova-header-topbar-icon-size);
	height: var(--nova-header-topbar-icon-size);
}

.nova-header__topbar-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.nova-header__topbar-text {
	color: inherit;
}

/* ----------------------------------------------------------------------
 * Menu bar
 * -------------------------------------------------------------------- */

.nova-header__bar {
	background-color: var(--nova-header-bar-bg);
	padding: 20px 0;
}

.nova-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nova-header-gutter);
	max-width: var(--nova-header-max);
	margin: 0 auto;
	padding: 0 var(--nova-header-gutter);
}

.nova-header__brand {
	display: flex;
	align-items: center;
	gap: var(--nova-header-logo-gap);
	min-width: 0;
}

.nova-header__logo {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	line-height: 0;
}

.nova-header__logo img {
	display: block;
	width: 90px;
	height: 48px;
	object-fit: contain;
}

.nova-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
}

/* ----------------------------------------------------------------------
 * Menu
 * -------------------------------------------------------------------- */

.nova-header__nav {
	min-width: 0;
	padding: 0 12px;
}

.nova-header__menu,
.nova-header__menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nova-header__menu {
	display: flex;
	align-items: center;
	column-gap: var(--nova-header-menu-gap);
}

.nova-header__menu li {
	position: relative;
}

/*
 * The block root is repeated in front of every anchor rule below. The kit
 * stylesheet carries `.elementor-kit-9 a { color: … }` and loads after this
 * file, so a single-class selector on a link loses the colour outright — which
 * is how the CTA ended up printing dark text on its dark background.
 */
.nova-header .nova-header__menu a {
	display: block;
	padding: 8px 0;
	color: var(--nova-header-menu-color);
	fill: var(--nova-header-menu-color);
	text-decoration: none;
	transition: color 0.3s;
}

.nova-header .nova-header__menu a:hover,
.nova-header .nova-header__menu a:focus,
.nova-header .nova-header__menu .current-menu-item > a,
.nova-header .nova-header__menu .current-menu-ancestor > a,
.nova-header .nova-header__menu .current_page_item > a {
	color: var(--nova-header-menu-color-hover);
	fill: var(--nova-header-menu-color-hover);
}

/* A parent item gets room for the caret the ::after below draws: 16px glyph
 * plus the 8px gap the design puts between label and caret. */
.nova-header__menu .menu-item-has-children > a {
	padding-right: 24px;
}

/*
 * Phosphor CaretDown (stroke, regular) — Figma node 3:1305. Painted as a mask
 * rather than a background so the glyph inherits the link's `currentcolor` and
 * follows the hover/current-item states above.
 */
.nova-header__menu .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background-color: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='208 96 128 176 48 96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='208 96 128 176 48 96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Dropdown */
.nova-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	min-width: 220px;
	background-color: var(--nova-header-dropdown-bg);
	box-shadow: 0 10px 50px 0 rgb(0 0 0 / 0.05);
	font-family: var(--nova-header-dropdown-font);
	font-size: 16px;
	font-weight: var(--nova-header-dropdown-weight);
	line-height: 1.563em;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s;
}

.nova-header__menu li:hover > .sub-menu,
.nova-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.nova-header__menu .sub-menu li:not(:last-child) {
	border-bottom: 1px solid var(--nova-header-dropdown-divider);
}

.nova-header .nova-header__menu .sub-menu a {
	padding: 10px 16px;
	color: var(--nova-header-dropdown-color);
	transition: color 0.3s, background-color 0.3s;
}

.nova-header .nova-header__menu .sub-menu a:hover,
.nova-header .nova-header__menu .sub-menu a:focus {
	background-color: var(--nova-header-dropdown-bg-hover);
	color: var(--nova-header-dropdown-color-hover);
}

.nova-header .nova-header__menu .sub-menu .current-menu-item > a {
	background-color: var(--nova-header-dropdown-bg-hover);
	color: var(--nova-header-dropdown-bg);
}

/* ----------------------------------------------------------------------
 * CTA
 *
 * Figma node 2040:1401 — the header instance of the shared Buttons component
 * (Property=Primary, Type=Solid, Size=Md). The instance overrides the set's
 * 48px height down to 44px, which is the same Md box `.nova-tax-btn--md` in
 * novabp-tax-base.css already paints: 44px tall, 16px side padding, 8px gap,
 * 8px radius, Manrope 600 16/1.5 white on Primary/500, 20px icon.
 *
 * `min-height` rather than a fixed `height` so a header saved before this
 * change — the padding control used to default to 10px top/bottom — still
 * lands on 44px instead of being clipped by it.
 * -------------------------------------------------------------------- */

.nova-header a.nova-header__cta,
.nova-header .nova-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 0 solid var(--nova-header-cta-bg);
	border-radius: 8px;
	background-color: var(--nova-header-cta-bg);
	color: var(--nova-header-cta-color);
	fill: var(--nova-header-cta-color);
	font-family: var(--nova-header-cta-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}

.nova-header a.nova-header__cta:hover,
.nova-header a.nova-header__cta:focus {
	color: var(--nova-header-cta-color);
	/* The live button carries Elementor's "float" hover animation. */
	transform: translateY(-8px);
}

/* ArrowUpRight (outline, regular) — 20px in the Figma button, not 1em. */
.nova-header__cta-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.nova-header__cta-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ----------------------------------------------------------------------
 * Toggle — desktop-hidden; the JS in novabp-header.js drives it
 * -------------------------------------------------------------------- */

/* `button` is styled by the kit, so the block root is needed to win. */
.nova-header button.nova-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid transparent;
	background-color: var(--nova-header-bar-bg);
	color: var(--nova-header-toggle-color);
	cursor: pointer;
}

.nova-header .nova-header__toggle-bars,
.nova-header .nova-header__toggle-bars::before,
.nova-header .nova-header__toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentcolor;
	transition: transform 0.2s, opacity 0.2s;
}

.nova-header__toggle-bars {
	position: relative;
}

.nova-header__toggle-bars::before,
.nova-header__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nova-header__toggle-bars::before {
	top: -7px;
}

.nova-header__toggle-bars::after {
	top: 7px;
}

.nova-header button.nova-header__toggle[aria-expanded="true"] .nova-header__toggle-bars {
	background-color: transparent;
}

.nova-header button.nova-header__toggle[aria-expanded="true"] .nova-header__toggle-bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nova-header button.nova-header__toggle[aria-expanded="true"] .nova-header__toggle-bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ----------------------------------------------------------------------
 * Compact Desktop (1025px – 1200px)
 * Tighten logo and menu gaps so the CTA button has plenty of breathing room.
 * -------------------------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1100px) {
	.nova-header {
		--nova-header-logo-gap: 24px !important;
		--nova-header-menu-gap: 16px !important;
	}

	.nova-header .nova-header__brand {
		gap: 46px !important;
	}

	.nova-header .nova-header__menu {
		column-gap: 30px !important;
	}

	.nova-header .nova-header__inner {
		padding: 0 20px;
	}

	.nova-header .nova-header__nav {
		padding: 0 4px;
	}

	.nova-header a.nova-header__cta,
	.nova-header .nova-header__cta {
		padding: 0 14px;
		font-size: 15px;
	}
}

/* ----------------------------------------------------------------------
 * Tablet and below — the live nav-menu widget drops to its toggle at 1024px
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.nova-header__topbar-list {
		justify-content: center;
	}

	.nova-header__bar {
		padding: 10px 32px;
	}

	.nova-header__inner {
		padding: 0;
	}

	.nova-header__brand {
		gap: 0;
	}

	.nova-header button.nova-header__toggle {
		display: inline-flex;
		order: 2;
	}

	.nova-header__nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 1;
		display: none;
		margin-top: 20px;
		padding: 0;
		background-color: var(--nova-header-dropdown-bg);
		box-shadow: 0 10px 50px 0 rgb(0 0 0 / 0.05);
	}

	.nova-header__bar {
		position: relative;
	}

	.nova-header__nav.is-open {
		display: block;
	}

	.nova-header__menu {
		display: block;
		font-family: var(--nova-header-dropdown-font);
		font-size: 16px;
		font-weight: var(--nova-header-dropdown-weight);
		line-height: 1.563em;
	}

	.nova-header__menu > li:not(:last-child),
	.nova-header__menu .sub-menu li:not(:last-child) {
		border-bottom: 1px solid var(--nova-header-dropdown-divider);
	}

	.nova-header .nova-header__menu a {
		padding: 12px 20px;
		color: var(--nova-header-dropdown-color);
	}

	.nova-header .nova-header__menu a:hover,
	.nova-header .nova-header__menu a:focus,
	.nova-header .nova-header__menu .current-menu-item > a {
		background-color: var(--nova-header-dropdown-bg-hover);
		color: var(--nova-header-dropdown-color-hover);
	}

	/* Submenus stay in flow and open on tap instead of hover. */
	.nova-header__menu .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
	}

	.nova-header__menu li.is-open > .sub-menu {
		display: block;
	}

	.nova-header__menu li:hover > .sub-menu,
	.nova-header__menu li:focus-within > .sub-menu {
		display: none;
	}

	.nova-header__menu li.is-open:hover > .sub-menu {
		display: block;
	}

	.nova-header .nova-header__menu .sub-menu a {
		padding-left: 36px;
	}

	/*
	 * The panel link padding above resets `padding-right`, so the caret needs
	 * its room reserved again — 20px panel inset + 16px glyph + 8px gap.
	 */
	.nova-header .nova-header__menu .menu-item-has-children > a {
		padding-right: 44px;
	}

	.nova-header__menu .menu-item-has-children > a::after {
		right: 20px;
	}
}

/* ----------------------------------------------------------------------
 * Mobile — the live template hides both the top bar and the CTA
 * -------------------------------------------------------------------- */

@media (max-width: 767px) {
	.nova-header__topbar {
		display: none;
	}

	.nova-header__bar {
		padding: 10px 0;
	}

	.nova-header__inner {
		padding: 0 20px;
	}

	.nova-header a.nova-header__cta,
	.nova-header .nova-header__cta {
		display: none;
	}

	.nova-header__logo img {
		max-width: 100px;
	}

	.nova-header button.nova-header__toggle {
		border-color: currentcolor;
		border-radius: 0;
	}
}