/*
 * Site header. Native replacement for Elementor header template 15067.
 * Values come from computed styles measured on staging 2026-09-18
 * (docs/reference/elementor-2026-09; bin/visual/header.mjs). Breakpoints follow the Elementor kit:
 * mobile <=767, tablet 768-1024, laptop 1025-1366, desktop 1367-1919, wide >=1920.
 * The mega menu switches to the hamburger dropdown at <=1024 (Elementor "tablet" breakpoint).
 *
 * Specificity note: the Customizer "Additional CSS" (2026 NDIC) still carries "#header {...}"
 * rules; every rule here that must beat it is written as ".vb-header #header" or carries
 * !important where the Customizer rule did.
 */
.vb-header {
	--vb-red: #EF4343;
	--vb-ink: #231F20;
	--vb-off-white: #F4F2EB;
	--vb-pink-light: #EDD0E4;
	--vb-white: #FFFFFF;
	--vb-font-body: "Lexend", sans-serif;
	--vb-font-mono: "Courier Prime", monospace;
	--vb-ease: .25s ease-in-out;
	--vb-header-height: 153px; /* JS refines; fallback keeps content clear of the bar on solid pages */

	position: relative;
	font-family: var(--vb-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--vb-ink);
}
.vb-header *, .vb-header *::before, .vb-header *::after { box-sizing: border-box; }
.vb-header ul { list-style: none; margin: 0; padding: 0; }
.vb-header a { text-decoration: none; }
.vb-header img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
.vb-header button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; }
/* Beat the Elementor kit's global button styles (padding 11px 28px, red background) */
.vb-header .vb-header__caret, .vb-header .vb-header__toggle,
.vb-header .vb-header__caret:hover, .vb-header .vb-header__toggle:hover,
.vb-header .vb-header__caret:focus, .vb-header .vb-header__toggle:focus {
	padding: 0;
	min-height: 0;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	cursor: pointer;
	outline: none; /* vendor.min.css (Bootstrap reboot) draws a ring on every button:focus */
}
.vb-header .vb-header__caret:focus-visible, .vb-header .vb-header__toggle:focus-visible { outline: 2px solid var(--vb-pink-light); outline-offset: 2px; }
.vb-header .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}

/* ---------- Bar: fixed overlay with a dark gradient over the hero, solid once scrolled ---------- */
.vb-header #header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 99;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 30px 100px !important;
	background-color: transparent;
	background-image: linear-gradient(to bottom, rgba(35, 31, 32, .65), rgba(35, 31, 32, 0));
	transition: background-color var(--vb-ease), padding var(--vb-ease);
}
.admin-bar .vb-header #header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vb-header #header { top: 46px; } }

.vb-header #header.is-stuck,
.vb-header--solid #header {
	background-color: var(--vb-ink);
	background-image: none;
	padding-bottom: 10px !important;
}
/* Customizer "About Us Page Fixing": shorter gradient zone on the about page */
.page-id-2150 .vb-header #header { padding-bottom: 30px !important; }
.page-id-2150 .vb-header #header.is-stuck { padding-bottom: 10px !important; }

.vb-header__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	padding: 10px 0;
	transition: gap var(--vb-ease);
}
@media (min-width: 1025px) { .vb-header #header.is-stuck .vb-header__inner { gap: 0; } }

/* ---------- Logo bar ---------- */
.vb-header__logo-bar {
	display: flex;
	flex-direction: row;
	gap: 20px;
	width: 100%;
	padding: 10px;
	transition: all var(--vb-ease);
}
.vb-header__logo { flex: 1 1 0; min-width: 0; transition: max-width var(--vb-ease); }
.vb-header__logo a { display: inline-block; line-height: 0; }
.vb-header__logo img { width: auto; max-width: 100%; height: auto; transition: max-width var(--vb-ease); }
@media (min-width: 1600px) { .vb-header #header.is-stuck .vb-header__logo img { max-width: 230px; } }

.vb-header__top-bar {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 20px;
}
.vb-header__temp { color: var(--vb-off-white); white-space: nowrap; }

/* GTranslate select: the plugin's own custom CSS makes it transparent/off-white; this is the
   Elementor part (arrow, appearance). Arrow asset copied from uploads/2026/03/translator-aro.svg */
.vb-header .gtranslate_wrapper select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-color: transparent;
	background-image: url("../images/header/translate-arrow.svg") !important;
	background-position: right center !important;
	background-repeat: no-repeat !important;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
	color: var(--vb-off-white);
	cursor: pointer;
}

/* Search: icon + underline input, always visible. The Elementor template sized it slightly
   differently on Builder-template pages (custom CSS scoped to .page-template-builder). */
.vb-header__search {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	width: 174px;
	max-width: 174px;
	height: 24px;
	margin: 0 0 3px;
}
.vb-header__search-icon {
	display: flex;
	flex: none;
	align-items: flex-start;
	width: 18px;
	height: 1.6em;
	margin: 0 0 -5px;
	cursor: pointer;
}
.vb-header__search-icon svg { display: block; flex: none; width: 18px; height: 18px; max-width: none; }
.vb-header__search-form { display: flex; align-items: flex-start; flex: 0 1 146px; min-width: 0; height: 24px; margin: 0; }
.page-template-builder .vb-header__search { height: 25px; }
.page-template-builder .vb-header__search-icon { width: 15.375px; }
.page-template-builder .vb-header__search-form { flex: 1 1 auto; height: 25px; }
.vb-header .vb-header__search-input {
	display: block;
	width: 100%;
	max-width: 146px;
	height: 24px;
	min-height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 2px solid var(--vb-off-white);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	line-height: 1.6;
	color: var(--vb-off-white);
	caret-color: var(--vb-off-white);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}
.vb-header .vb-header__search-input:focus-visible { outline: 2px solid var(--vb-pink-light); outline-offset: 2px; }
.vb-header .vb-header__search-input::-webkit-search-cancel-button,
.vb-header .vb-header__search-input::-webkit-search-decoration { display: none; -webkit-appearance: none; }

/* ---------- Main menu (desktop, >=1025) ---------- */
.vb-header__nav-wrap { display: flex; flex-direction: column; width: 100%; }
.vb-header__nav { position: relative; display: flex; flex-direction: column; width: 100%; }
.vb-header__toggle { display: none; }
.vb-header__menu { display: flex; flex-direction: column; width: 100%; }
.vb-header__items { display: flex; flex-wrap: wrap; gap: 48px; width: 100%; }
.vb-header__item { position: relative; display: flex; }
.vb-header__title {
	position: relative;
	display: flex;
	align-items: center;
	padding: 8px 0;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--vb-off-white);
	transition: color .3s, background-color var(--vb-ease), border-color var(--vb-ease);
}
.vb-header .vb-header__link {
	display: flex;
	align-items: center;
	gap: 5px;
	font: inherit;
	color: inherit;
	text-transform: inherit;
}
.vb-header .vb-header__link:hover, .vb-header .vb-header__link:focus { color: inherit; text-decoration: none; }
.vb-header__link-text { display: flex; align-items: center; line-height: 24px; }
.vb-header .vb-header__caret {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 16px;
	height: 24px;
	margin: 0 0 0 5px;
	color: inherit;
}
.vb-header__caret svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.vb-header__caret-open { display: none; }
.vb-header__item.is-open .vb-header__caret-open { display: inline; }
.vb-header__item.is-open .vb-header__caret-closed { display: none; }
@media (min-width: 1025px) {
	.vb-header__title:hover,
	.vb-header__item.is-open > .vb-header__title { color: var(--vb-pink-light); }
}

/* Dropdown panel: sits under its item; the first item's wide panel is pinned to the menu's left edge */
.vb-header__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: -36px;
	z-index: 20;
	width: max-content;
	max-width: 1680px;
}
.vb-header__item:first-child > .vb-header__panel { left: 0; }
.vb-header__item.is-open > .vb-header__panel { display: block; }
.vb-header__submenu { width: max-content; max-width: 100%; padding: 20px; }
.vb-header__mega {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 20px;
	width: 100%;
	padding: 30px;
	background-color: var(--vb-off-white);
}
.vb-header__mega::before {
	content: "";
	position: absolute;
	left: -16px;
	top: -16px;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: var(--vb-pink-light);
}
.vb-header__mega-col { display: flex; flex-direction: column; gap: 20px; flex: 1 1 0; min-width: 0; }
.vb-header .vb-header__mega h5 {
	margin: 0;
	padding: 0;
	font-family: var(--vb-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vb-ink);
}
.vb-header .vb-header__mega-list li {
	display: flex;
	align-items: center;
	margin: 4.25px 0 0;
	padding: 0 0 4.25px;
	line-height: 1.6;
}
.vb-header .vb-header__mega-list li:first-child { margin-top: 0; }
.vb-header .vb-header__mega-list li:last-child { padding-bottom: 0; }
.vb-header .vb-header__mega-list a { display: flex; align-items: center; width: 100%; color: var(--vb-red); }
.vb-header .vb-header__mega-list span { color: var(--vb-ink); transition: color .3s; }
.vb-header .vb-header__mega-list li:hover a span { color: var(--vb-red); }
.vb-header .vb-header__mega-btn {
	display: inline-block;
	align-self: flex-start;
	margin: 0 0 0 -1px;
	padding: 5px 5px 5px 0;
	font-family: var(--vb-font-mono);
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
	color: var(--vb-red);
	background: transparent;
	transition: color .3s;
}
.vb-header .vb-header__mega-btn:hover, .vb-header .vb-header__mega-btn:focus { color: var(--vb-ink); }

/* ---------- Spacer (solid pages) and featured-image hero ---------- */
.vb-header__spacer { display: none; }
.vb-header--solid .vb-header__spacer { display: block; height: var(--vb-header-height); }
.search-results .vb-header__spacer { margin-bottom: 80px; } /* Customizer: body.search-results #header margin */

.vb-header__hero {
	position: relative;
	z-index: -1;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
}
.vb-header__hero img { display: block; width: 100%; height: auto; }
@media (min-width: 1200px) {
	.vb-header__hero { max-height: 715px; overflow: hidden; }
	.vb-header__hero img { transform: translate(0, -16.5%); }
}
.home .vb-header__hero, .page-id-15008 .vb-header__hero, .vb-theme-hero .vb-header__hero { display: none !important; }

/* ---------- Wide ---------- */
@media (min-width: 1920px) {
	.vb-header__inner { padding: 20px 0 10px; }
	.vb-header__mega { gap: 30px; padding: 40px; }
	.vb-header__mega-col { gap: 30px; }
	.vb-header__item--plan > .vb-header__panel { left: -15px; }
}

/* ---------- Tablet and below: hamburger dropdown ---------- */
@media (max-width: 1024px) {
	.vb-header__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
	}
	.vb-header__logo-bar {
		position: relative;
		z-index: 2;
		justify-content: space-between;
		align-items: center;
		max-width: calc(100% - 50px) !important;
	}
	.vb-header__logo { flex: 0 1 auto; }
	.vb-header__logo img { max-width: 200px; }
	.vb-header__top-bar { flex: 0 0 auto; width: auto; gap: 0 20px; }

	.vb-header__nav-wrap {
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 1;
		align-items: flex-end;
	}
	.vb-header__nav { align-items: flex-end; }
	.vb-header .vb-header__toggle {
		position: relative;
		right: 14px;
		z-index: 1000;
		display: flex;
		color: var(--vb-off-white);
	}
	.vb-header .vb-header__toggle[aria-expanded="true"] { background-color: var(--vb-ink); color: var(--vb-white); }
	.vb-header__toggle-icon { display: flex; padding: 5px; transition: background-color .5s; }
	.vb-header__toggle:hover .vb-header__toggle-icon { background-color: var(--vb-red); }
	.vb-header__toggle-icon svg { display: block; width: 24px; height: 24px; fill: var(--vb-off-white); }
	.vb-header__toggle-open, .vb-header__toggle-close { display: flex; }
	.vb-header__toggle-close { display: none; }
	.vb-header--menu-open .vb-header__toggle-open { display: none; }
	.vb-header--menu-open .vb-header__toggle-close { display: flex; }

	.vb-header__menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 40;
		width: 100%;
	}
	.vb-header--menu-open .vb-header__menu { display: flex; }
	.vb-header__items { flex-direction: column; gap: 0; }
	.vb-header__item { position: static; flex-direction: column; width: 100%; }
	.vb-header__title {
		flex-wrap: wrap;
		width: 100%;
		padding: 10px 15px;
		background-color: var(--vb-ink);
		border-top: 1px solid #333;
		transition: all var(--vb-ease);
	}
	.vb-header__title:hover,
	.vb-header__item.is-open > .vb-header__title { background-color: var(--vb-red); border-top-color: var(--vb-red); }

	.vb-header__panel { position: static; width: 100%; max-width: none; }
	.vb-header__submenu { width: 100%; max-width: none; padding: 0; }
	.vb-header__mega::before { display: none; }
	.vb-header__mega-col { gap: 10px; }
	.vb-header .vb-header__mega-list li { margin-top: 2.5px; padding-bottom: 2.5px; }
	.vb-header .vb-header__mega-list li:first-child { margin-top: 0; }
	.vb-header .vb-header__mega-list li:last-child { padding-bottom: 0; }
	.vb-header--solid { --vb-header-height: 78px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.vb-header__logo-bar { justify-content: space-between; }
	.vb-header__top-bar { width: auto !important; }
}
@media (min-width: 560px) and (max-width: 1199px) {
	.vb-header__logo-bar { flex-wrap: nowrap; }
	.vb-header__logo { max-width: 25% !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.vb-header #header { padding-left: 18px !important; padding-right: 18px !important; }
	.vb-header__inner { flex-wrap: wrap; gap: 0; }
	.vb-header__logo-bar { flex-wrap: wrap; gap: 10px; padding: 0; max-width: calc(100% - 55px); line-height: 25.6px; }
	.vb-header__logo img { max-width: 110px; }
	.vb-header__top-bar { flex: 1 1 100%; width: 100%; gap: 5px 10px; }
	.vb-header__search { max-width: 120px; }
	.vb-header__search-icon { width: 14px; height: 20px; line-height: 1; }
	.vb-header__search-icon svg { width: 14px; height: 18px; }
	.vb-header__search-form { max-width: calc(100% - 28px) !important; }
	.vb-header .vb-header__search-input { max-width: 100% !important; }
	.vb-header__toggle-icon svg { width: 21px; height: 21px; }
	.vb-header__mega { flex-wrap: wrap; gap: 30px; }
	.vb-header__mega-col { flex: 0 0 100%; width: 100%; }
	.vb-header--solid { --vb-header-height: 90px; }
}
@media (min-width: 480px) and (max-width: 767px) {
	.vb-header__mega { justify-content: space-between; }
	.vb-header__mega-col { flex-basis: calc(50% - 20px); width: calc(50% - 20px); }
}
@media (min-width: 560px) and (max-width: 767px) {
	.vb-header__logo, .vb-header__logo img { max-width: 130px !important; }
}
@media (max-width: 559px) {
	.vb-header__logo { max-width: 110px; }
	.vb-header__logo-bar {
		font-size: 13px;
		max-width: calc(100% - 40px) !important;
		flex-direction: row;
		justify-content: space-between;
		gap: 15px;
	}
	.vb-header__top-bar { max-width: calc(100% - 130px) !important; gap: 10px; }
	.vb-header__nav-wrap { top: 12px; }
	.vb-header .gtranslate_wrapper select { width: 100px; max-width: 100px !important; }
	.vb-header__search { max-width: 70px; gap: 5px; margin-bottom: 7px; }
	.vb-header__search-form { max-width: calc(100% - 20px) !important; }
}
@media (max-width: 479px) {
	.vb-header__top-bar { gap: 5px; justify-content: space-between; }
	.vb-header__inner { gap: 0; }
	.vb-header__logo-bar { padding: 0; }
}
@media (max-width: 439px) {
	.vb-header__top-bar { max-width: none !important; } /* full width: wraps under the logo */
	.vb-header__logo-bar { gap: 2px; }
	.vb-header__nav-wrap { top: 38px; }
	.vb-header__menu { top: calc(100% + 15px); }
}