.bpt-site-header {
	top: 0;
	z-index: var(--bpt-z-header);
	background: var(--bpt-color-surface-dark);
	color: var(--bpt-color-text-inverse);
	border-bottom: 3px solid var(--bpt-color-primary);
}

.bpt-site-header.is-sticky {
	position: sticky;
}

.bpt-site-header__utility {
	display: none;
	border-bottom: var(--bpt-border-thin) solid var(--bpt-color-border);
}

.bpt-site-header__inner {
	display: flex;
	min-height: var(--bpt-header-height);
	align-items: center;
	justify-content: space-between;
	gap: var(--bpt-space-lg);
}

.bpt-site-header__logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	color: var(--bpt-color-text-inverse);
	font-weight: var(--bpt-weight-semibold);
	text-decoration: none;
}

.bpt-site-header__logo img {
	width: auto;
	max-height: var(--bpt-header-logo-height);
}

/* An SVG with only a viewBox has no intrinsic width, so width:auto + max-width:100% inside this
   shrink-to-fit link collapses it to 0x0. A definite height lets the width follow the aspect ratio. */
.bpt-site-header__logo img[src*=".svg"] {
	height: var(--bpt-header-logo-height);
	max-width: none;
}

.bpt-site-nav {
	display: none;
	align-self: stretch;
}

.bpt-menu {
	padding: 0;
	margin: 0;
	list-style: none;
}

.bpt-menu__item {
	position: relative;
}

.bpt-menu__link {
	color: var(--bpt-color-text-inverse-muted);
	text-decoration: none;
}

.bpt-site-nav > .bpt-menu,
.bpt-menu--utility {
	display: flex;
	align-items: center;
	gap: var(--bpt-space-lg);
}

.bpt-site-nav > .bpt-menu {
	height: 100%;
	align-items: stretch;
}

.bpt-menu--utility {
	justify-content: flex-end;
	padding-block: var(--bpt-space-xs);
}

.bpt-site-nav .bpt-menu__item {
	display: flex;
	align-items: center;
	gap: var(--bpt-space-2xs);
}

.bpt-site-nav .bpt-menu__link,
.bpt-menu--utility .bpt-menu__link {
	font-size: var(--bpt-text-sm);
	font-weight: var(--bpt-weight-medium);
}

.bpt-submenu-toggle {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--bpt-color-text-inverse);
	background: transparent;
	border: 0;
	border-radius: var(--bpt-radius-sm);
	cursor: pointer;
}

.bpt-submenu-toggle span {
	width: 0.45rem;
	height: 0.45rem;
	border-right: var(--bpt-border-thin) solid currentColor;
	border-bottom: var(--bpt-border-thin) solid currentColor;
	transform: rotate(45deg) translateY(-0.125rem);
}

.bpt-site-nav .bpt-sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: grid;
	width: max-content;
	min-width: 14rem;
	max-width: min(24rem, calc(100vw - (var(--bpt-gutter) * 2)));
	gap: var(--bpt-space-xs);
	padding: var(--bpt-space-sm);
	background: var(--bpt-color-surface-dark);
	border: var(--bpt-border-thin) solid var(--bpt-color-inverse-border);
	border-radius: var(--bpt-radius-md);
	box-shadow: var(--bpt-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: var(--submenu-closed-transform, translateY(-0.25rem));
	pointer-events: none;
}

.bpt-site-nav .bpt-sub-menu::before {
	position: absolute;
	display: block;
	background: transparent;
	content: "";
}

.bpt-site-nav .bpt-menu__item--dropdown > .bpt-sub-menu {
	top: 100%;
	left: 0;
}

.bpt-site-nav .bpt-menu__item--dropdown > .bpt-sub-menu::before,
.bpt-site-nav .bpt-menu__item--mega > .bpt-sub-menu::before {
	top: calc(var(--bpt-space-xs) * -1);
	right: 0;
	left: 0;
	height: var(--bpt-space-xs);
}

.bpt-site-nav .bpt-menu__item--flyout > .bpt-sub-menu {
	top: calc(var(--bpt-space-xs) * -1);
	left: calc(100% + var(--bpt-space-xs));
	--submenu-closed-transform: translateX(-0.25rem);
}

.bpt-site-nav .bpt-menu__item--flyout > .bpt-sub-menu::before {
	top: 0;
	bottom: 0;
	left: calc(var(--bpt-space-xs) * -1);
	width: var(--bpt-space-xs);
}

.bpt-site-nav .bpt-menu__item:hover > .bpt-sub-menu,
.bpt-site-nav .bpt-menu__item:focus-within > .bpt-sub-menu,
.bpt-site-nav .bpt-menu__item.is-open > .bpt-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: var(--submenu-open-transform, none);
	pointer-events: auto;
}

.bpt-site-nav .bpt-sub-menu .bpt-menu__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--bpt-space-xs);
}

.bpt-site-nav .bpt-sub-menu .bpt-menu__link {
	display: block;
	padding: var(--bpt-space-xs) var(--bpt-space-sm);
	border-radius: var(--bpt-radius-sm);
	line-height: var(--bpt-leading-snug);
	white-space: normal;
}

.bpt-site-nav .bpt-sub-menu .bpt-menu__link:hover,
.bpt-site-nav .bpt-sub-menu .bpt-menu__link:focus {
	color: var(--bpt-color-primary);
	background: var(--bpt-color-inverse-surface);
}

.bpt-site-nav .bpt-menu__item--mega {
	position: static;
}

.bpt-site-nav .bpt-menu__item--mega > .bpt-sub-menu {
	top: 100%;
	align-items: start;
	min-width: 0;
	max-width: none;
	gap: var(--bpt-space-lg);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bpt-site-nav .bpt-menu__item--mega.mega-menu--two-columns > .bpt-sub-menu {
	align-items: stretch;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bpt-space-md);
	padding: var(--bpt-space-md);
}

.bpt-site-nav .bpt-menu__item--mega.mega-menu--two-columns > .bpt-sub-menu > .bpt-menu__item--mega-column {
	padding: var(--bpt-space-md);
	background: var(--bpt-color-inverse-surface);
	border: var(--bpt-border-thin) solid var(--bpt-color-inverse-border);
	border-top: 3px solid var(--bpt-color-primary);
	border-radius: var(--bpt-radius-sm);
}

.bpt-site-nav .bpt-menu__item--mega.mega-menu--two-columns > .bpt-sub-menu > .bpt-menu__item--mega-column > .bpt-menu__link {
	color: var(--bpt-color-primary);
	font-size: var(--bpt-text-md);
}

.bpt-site-header--mega-width-container .bpt-site-nav .bpt-menu__item--mega > .bpt-sub-menu {
	right: auto;
	left: 50%;
	width: min(calc(100vw - (var(--bpt-gutter) * 2)), var(--bpt-container-default));
	--submenu-closed-transform: translate(-50%, -0.25rem);
	--submenu-open-transform: translateX(-50%);
}

.bpt-site-header--mega-width-full .bpt-site-nav .bpt-menu__item--mega > .bpt-sub-menu {
	right: 0;
	left: 0;
	width: auto;
}

.bpt-site-nav .bpt-menu__item--mega-column {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	align-items: start;
	gap: var(--bpt-space-xs);
}

.bpt-site-nav .bpt-menu__item--mega-column > .bpt-menu__link {
	display: block;
	padding: 0 0 var(--bpt-space-xs);
	color: var(--bpt-color-text-inverse);
	font-size: var(--bpt-text-sm);
	font-weight: var(--bpt-weight-semibold);
	border-bottom: var(--bpt-border-thin) solid var(--bpt-color-inverse-border);
	border-radius: 0;
}

.bpt-site-nav .bpt-menu__item--mega-column > .bpt-menu__link:hover,
.bpt-site-nav .bpt-menu__item--mega-column > .bpt-menu__link:focus {
	color: var(--bpt-color-primary);
	background: transparent;
}

.bpt-site-nav .bpt-menu__item--mega-column > .bpt-submenu-toggle {
	display: none;
}

.bpt-site-nav .bpt-menu__item--mega-column > .bpt-sub-menu {
	position: static;
	display: grid;
	grid-column: 1 / -1;
	width: auto;
	min-width: 0;
	max-width: none;
	gap: var(--bpt-space-2xs);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	/* Inherit from the mega panel: an explicit `visible`/`auto` here keeps the columns hoverable
	   while the panel is closed, so the cursor below the header opened the menu. */
	visibility: inherit;
	transform: none;
	pointer-events: inherit;
	--submenu-closed-transform: none;
	--submenu-open-transform: none;
}

.bpt-site-nav .bpt-menu__item--mega-column > .bpt-sub-menu::before {
	display: none;
}

.bpt-site-nav .bpt-menu__item--mega-column .bpt-menu__item--mega-link {
	display: block;
}

.bpt-site-nav .bpt-menu__item--mega-column .bpt-menu__item--mega-link > .bpt-menu__link {
	padding: var(--bpt-space-2xs) 0;
	color: var(--bpt-color-text-inverse-muted);
}

.bpt-site-nav .bpt-menu__item--mega-column .bpt-menu__item--mega-link > .bpt-menu__link:hover,
.bpt-site-nav .bpt-menu__item--mega-column .bpt-menu__item--mega-link > .bpt-menu__link:focus {
	color: var(--bpt-color-primary);
	background: transparent;
}

.bpt-site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--bpt-space-sm);
}

.bpt-site-header__actions > .bpt-site-header__cta {
	display: none;
}

.bpt-menu-toggle {
	display: inline-flex;
	width: var(--bpt-control-tap-target);
	height: var(--bpt-control-tap-target);
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--bpt-color-text-inverse);
	background: transparent;
	border: var(--bpt-border-thin) solid var(--bpt-color-inverse-border);
	border-radius: var(--bpt-radius-sm);
	cursor: pointer;
}

.bpt-menu-toggle span,
.bpt-menu-toggle span::before,
.bpt-menu-toggle span::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: "";
}

.bpt-menu-toggle span {
	position: relative;
}

.bpt-menu-toggle span::before,
.bpt-menu-toggle span::after {
	position: absolute;
	left: 0;
}

.bpt-menu-toggle span::before { top: -6px; }
.bpt-menu-toggle span::after { top: 6px; }

.bpt-mobile-panel {
	border-top: var(--bpt-border-thin) solid var(--bpt-color-inverse-border);
	background: var(--bpt-color-surface-dark);
}

.bpt-site-nav > .bpt-menu > .bpt-menu__item:hover > .bpt-menu__link,
.bpt-site-nav > .bpt-menu > .bpt-menu__item:focus-within > .bpt-menu__link,
.bpt-site-nav > .bpt-menu > .current-menu-item > .bpt-menu__link,
.bpt-site-nav > .bpt-menu > .current-menu-ancestor > .bpt-menu__link,
.bpt-mobile-panel .bpt-menu__link:hover,
.bpt-mobile-panel .bpt-menu__link:focus-visible {
	color: var(--bpt-color-primary);
}

.bpt-mobile-panel .bpt-container {
	display: grid;
	gap: var(--bpt-space-md);
	padding-block: var(--bpt-space-md);
}

.bpt-mobile-panel .bpt-menu {
	display: grid;
	gap: var(--bpt-space-2xs);
}

.bpt-mobile-panel .bpt-menu__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

.bpt-mobile-panel .bpt-menu__link {
	display: block;
	padding-block: var(--bpt-space-sm);
}

.bpt-mobile-panel .bpt-sub-menu {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--bpt-space-2xs);
	padding-left: var(--bpt-space-md);
}

.bpt-mobile-panel .bpt-menu__item--mega > .bpt-sub-menu {
	gap: var(--bpt-space-sm);
	padding-left: 0;
}

.bpt-mobile-panel .bpt-menu__item--mega-column {
	padding-inline: var(--bpt-space-sm);
	background: var(--bpt-color-inverse-surface);
	border-left: 3px solid var(--bpt-color-primary);
	border-radius: var(--bpt-radius-sm);
}

.bpt-mobile-panel .bpt-menu__item--mega-column > .bpt-menu__link {
	color: var(--bpt-color-primary);
	font-weight: var(--bpt-weight-semibold);
}

.js .bpt-mobile-panel .bpt-sub-menu {
	display: none;
}

.js .bpt-mobile-panel .bpt-menu__item.is-open > .bpt-sub-menu {
	display: grid;
}

.bpt-site-nav .bpt-menu__link {
	position: relative;
	transition: color var(--bpt-duration-fast) var(--bpt-ease-standard);
}

@media (prefers-reduced-motion: no-preference) {
	.bpt-site-header--nav-underline-grow .bpt-site-nav > .bpt-menu > .bpt-menu__item > .bpt-menu__link::after {
		position: absolute;
		left: 0;
		bottom: -0.45rem;
		height: 2px;
		width: 100%;
		background: var(--bpt-color-primary);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--bpt-duration-fast) var(--bpt-ease-standard);
		content: "";
	}

	.bpt-site-header--nav-underline-grow .bpt-site-nav > .bpt-menu > .bpt-menu__item:hover > .bpt-menu__link::after,
	.bpt-site-header--nav-underline-grow .bpt-site-nav > .bpt-menu > .bpt-menu__item:focus-within > .bpt-menu__link::after {
		transform: scaleX(1);
	}

	.bpt-site-header--nav-fade .bpt-site-nav > .bpt-menu > .bpt-menu__item > .bpt-menu__link {
		opacity: 0.75;
	}

	.bpt-site-header--nav-fade .bpt-site-nav > .bpt-menu > .bpt-menu__item:hover > .bpt-menu__link,
	.bpt-site-header--nav-fade .bpt-site-nav > .bpt-menu > .bpt-menu__item:focus-within > .bpt-menu__link {
		opacity: 1;
	}
}

.bpt-site-header--nav-highlight-pill .bpt-site-nav > .bpt-menu > .bpt-menu__item > .bpt-menu__link {
	padding-inline: var(--bpt-space-sm);
	border-radius: var(--bpt-radius-pill);
}

.bpt-site-header--nav-highlight-pill .bpt-site-nav > .bpt-menu > .bpt-menu__item:hover > .bpt-menu__link,
.bpt-site-header--nav-highlight-pill .bpt-site-nav > .bpt-menu > .bpt-menu__item:focus-within > .bpt-menu__link {
	color: var(--bpt-color-primary);
	background: var(--bpt-color-inverse-surface);
}