/**
 * SigmaGraft Elements — Header.
 *
 * Defaults only: every value here is overridable by the widget's controls.
 *
 * The nav and the buttons share one wrapper, .sgx-hd__nav-wrap. Above the
 * collapse breakpoint it is a row at the end of the bar; below it, the same
 * element becomes the drop-down panel. Nothing is duplicated in the DOM, so
 * there is only ever one copy of each link for assistive technology.
 */

.sgx-hd {
	--sgx-hd-t: 260ms;

	position: relative;
	z-index: 100;
	isolation: isolate;
	background-color: #FFFFFF;
	transition:
		background-color var(--sgx-hd-t) ease,
		box-shadow var(--sgx-hd-t) ease;
}

.sgx-hd-sticky-on .sgx-hd {
	position: sticky;
	top: 0;
}

.sgx-hd__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.sgx-hd__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	min-height: 64px;
	margin-inline: auto;
	padding-inline: 24px;
	transition: min-height var(--sgx-hd-t) ease;
}

.sgx-hd--container-full .sgx-hd__inner {
	max-width: none;
}

/* ═════════ Brand ═════════ */

.sgx-hd__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.sgx-hd__logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.sgx-hd__logo {
	display: block;
	width: 150px;
	max-width: 100%;
	max-height: 40px;
	height: auto;
	object-fit: contain;
}

/* The alternative logo only appears once the bar is stuck. */
.sgx-hd__logo--stuck {
	display: none;
}

.sgx-hd.is-stuck .sgx-hd__logo--stuck {
	display: block;
}

.sgx-hd.is-stuck .sgx-hd__logo:not(.sgx-hd__logo--stuck) {
	display: none;
}

.sgx-hd__logo-text {
	color: #0E2E5C;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

/* ═════════ Nav wrapper ═════════ */

.sgx-hd__nav-wrap {
	--sgx-panel-t: 240ms;
	--sgx-panel-line: #EDF1F6;

	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
	min-width: 0;
}

.sgx-hd__nav {
	min-width: 0;
}

.sgx-hd__menu {
	--sgx-m-t: 200ms;
	--sgx-ul-color: #12386E;
	--sgx-ul-h: 2px;
	--sgx-ul-y: 0px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex so the link and its drop-down button sit side by side; the button is
   a sibling of the link, not a child, because an interactive element inside
   an anchor is invalid. */
.sgx-hd__menu > li {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.sgx-hd__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.sgx-hd__sub-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sgx-hd__menu > li > a,
.sgx-hd__menu > li > span {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 2px;
	color: #3D4F63;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--sgx-m-t) ease;
}

.sgx-hd__menu > li > a:hover,
.sgx-hd__menu > li.current-menu-item > a,
.sgx-hd__menu > li.is-current > a {
	color: #12386E;
}

.sgx-hd__menu a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ═════════ Underline ═════════ */

.sgx-hd-underline-grow .sgx-hd__menu > li > a::after,
.sgx-hd-underline-slide .sgx-hd__menu > li > a::after,
.sgx-hd-underline-fixed .sgx-hd__menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--sgx-ul-y));
	height: var(--sgx-ul-h);
	background-color: var(--sgx-ul-color);
	transition: transform var(--sgx-m-t) ease, opacity var(--sgx-m-t) ease;
}

.sgx-hd-underline-grow .sgx-hd__menu > li > a::after {
	transform: scaleX(0);
}

.sgx-hd-underline-grow .sgx-hd__menu > li > a:hover::after,
.sgx-hd-underline-grow .sgx-hd__menu > li.current-menu-item > a::after,
.sgx-hd-underline-grow .sgx-hd__menu > li.is-current > a::after {
	transform: scaleX(1);
}

.sgx-hd-underline-slide .sgx-hd__menu > li > a::after {
	transform: scaleX(0);
	transform-origin: left center;
}

.sgx-hd-underline-slide .sgx-hd__menu > li > a:hover::after,
.sgx-hd-underline-slide .sgx-hd__menu > li.current-menu-item > a::after,
.sgx-hd-underline-slide .sgx-hd__menu > li.is-current > a::after {
	transform: scaleX(1);
}

[dir="rtl"] .sgx-hd-underline-slide .sgx-hd__menu > li > a::after {
	transform-origin: right center;
}

/* ═════════ Drop-downs ═════════ */

.sgx-hd__sub-icon {
	flex: 0 0 auto;
	font-size: 9px;
	width: 9px;
	height: 9px;
	transition: transform var(--sgx-m-t) ease;
}

.sgx-hd__menu .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 20;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	border: 1px solid #E6ECF3;
	border-radius: 4px;
	background-color: #FFFFFF;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity var(--sgx-m-t) ease,
		transform var(--sgx-m-t) ease,
		visibility var(--sgx-m-t);
}

.sgx-hd__menu > li:hover > .sub-menu,
.sgx-hd__menu > li:focus-within > .sub-menu,
.sgx-hd__menu > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sgx-hd__menu > li:hover > .sgx-hd__sub-toggle .sgx-hd__sub-icon,
.sgx-hd__menu > li.is-open > .sgx-hd__sub-toggle .sgx-hd__sub-icon {
	transform: rotate(180deg);
}

.sgx-hd__menu .sub-menu a {
	display: block;
	padding: 9px 16px;
	color: #3D4F63;
	font-size: 13px;
	text-decoration: none;
	transition: color var(--sgx-m-t) ease, background-color var(--sgx-m-t) ease;
}

.sgx-hd__menu .sub-menu a:hover {
	color: #12386E;
	background-color: #F2F6FB;
}

/* ═════════ Actions ═════════ */

.sgx-hd__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 0 0 auto;
	gap: 10px;
}

/* ═════════ Top bar ═════════ */

.sgx-hd__topbar {
	position: relative;
	z-index: 3;
	background-color: #0E2E5C;
	color: rgba(255, 255, 255, .85);
	font-size: 12px;
}

.sgx-hd__topbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding: 8px 24px;
}

.sgx-hd--container-full .sgx-hd__topbar-inner {
	max-width: none;
}

.sgx-hd__topbar-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.sgx-hd__topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.sgx-hd__topbar a:hover {
	color: #FFFFFF;
}

.sgx-hd__topbar .sgx-icon {
	font-size: 1em;
	width: 1em;
	height: 1em;
}

/* ═════════ Item separators ═════════ */

.sgx-hd-sep-on .sgx-hd__menu {
	--sgx-sep-color: #E1E8F0;
	--sgx-sep-w: 1px;
	--sgx-sep-h: 16px;
}

.sgx-hd-sep-on .sgx-hd__menu > li + li::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-1 * var(--sgx-gap-half, 11px));
	top: 50%;
	height: var(--sgx-sep-h);
	border-inline-start: var(--sgx-sep-w) solid var(--sgx-sep-color);
	transform: translateY(-50%);
	pointer-events: none;
}

/* ═════════ Backdrop & close ═════════ */

.sgx-hd__backdrop {
	position: fixed;
	inset: 0;
	z-index: 25;
	background-color: rgba(11, 35, 64, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 240ms ease, visibility 240ms;
}

.sgx-hd__close {
	display: none;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	width: 40px;
	height: 40px;
	margin-bottom: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: #0E2E5C;
	cursor: pointer;
}

.sgx-hd__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sgx-hd__close .sgx-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ═════════ Hide on scroll ═════════ */

.sgx-hd-autohide-on .sgx-hd {
	transition:
		background-color var(--sgx-hd-t) ease,
		box-shadow var(--sgx-hd-t) ease,
		transform var(--sgx-hd-t) ease;
}

.sgx-hd-autohide-on .sgx-hd.is-hidden {
	transform: translateY(-100%);
}

/* Never slide the bar away while its own panel is open. */
.sgx-hd-autohide-on .sgx-hd.is-open.is-hidden {
	transform: none;
}

/* ═════════ Toggle ═════════ */

.sgx-hd__toggle {
	--sgx-bar-w: 20px;
	--sgx-bar-h: 2px;
	--sgx-bar-c: #0E2E5C;

	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	order: 3;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background-color: transparent;
	cursor: pointer;
}

.sgx-hd__toggle:focus-visible {
	outline: 2px solid var(--sgx-bar-c);
	outline-offset: 2px;
}

/* Middle bar is the element; the other two are its pseudo-elements. */
.sgx-hd__bars,
.sgx-hd__bars::before,
.sgx-hd__bars::after {
	display: block;
	width: var(--sgx-bar-w);
	height: var(--sgx-bar-h);
	border-radius: 2px;
	background-color: var(--sgx-bar-c);
	transition: transform 220ms ease, opacity 160ms ease;
}

.sgx-hd__bars {
	position: relative;
}

.sgx-hd__bars::before,
.sgx-hd__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.sgx-hd__bars::before {
	top: -6px;
}

.sgx-hd__bars::after {
	top: 6px;
}

.sgx-hd.is-open .sgx-hd__bars {
	background-color: transparent;
}

.sgx-hd.is-open .sgx-hd__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.sgx-hd.is-open .sgx-hd__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ═════════ Collapsed panel ═════════ */

/*
 * Repeated per breakpoint rather than written once, because the collapse
 * point is a control and CSS cannot take a media query from a variable.
 */
@media (max-width: 1024px) {

	.sgx-hd-collapse-tablet .sgx-hd__toggle {
		display: inline-flex;
	}

	.sgx-hd-collapse-tablet .sgx-hd__nav-wrap {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 16px 24px 24px;
		background-color: #FFFFFF;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity var(--sgx-panel-t) ease,
			transform var(--sgx-panel-t) ease,
			visibility var(--sgx-panel-t);
	}

	.sgx-hd-collapse-tablet .sgx-hd.is-open .sgx-hd__nav-wrap {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.sgx-hd-collapse-tablet .sgx-hd__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sgx-hd-collapse-tablet .sgx-hd__menu > li + li {
		border-top: 1px solid var(--sgx-panel-line);
	}

	.sgx-hd-collapse-tablet .sgx-hd__menu > li > a,
	.sgx-hd-collapse-tablet .sgx-hd__menu > li > span {
		flex: 1 1 auto;
		justify-content: space-between;
		padding: 13px 0;
		white-space: normal;
	}

	.sgx-hd-collapse-tablet .sgx-hd__menu > li > .sub-menu {
		flex: 1 0 100%;
	}

	.sgx-hd-collapse-tablet .sgx-hd__menu > li > a::after {
		content: none;
	}

	.sgx-hd-collapse-tablet .sgx-hd__menu .sub-menu {
		position: static;
		min-width: 0;
		margin: 0 0 8px;
		padding: 0 0 0 14px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.sgx-hd-collapse-tablet .sgx-hd__menu > li.is-open > .sub-menu {
		display: block;
	}

	.sgx-hd-collapse-tablet .sgx-hd__actions {
		margin-top: 18px;
	}

	.sgx-hd-collapse-tablet .sgx-hd__actions .sgx-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (max-width: 767px) {

	.sgx-hd-collapse-mobile .sgx-hd__toggle {
		display: inline-flex;
	}

	.sgx-hd-collapse-mobile .sgx-hd__nav-wrap {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 16px 24px 24px;
		background-color: #FFFFFF;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity var(--sgx-panel-t) ease,
			transform var(--sgx-panel-t) ease,
			visibility var(--sgx-panel-t);
	}

	.sgx-hd-collapse-mobile .sgx-hd.is-open .sgx-hd__nav-wrap {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.sgx-hd-collapse-mobile .sgx-hd__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sgx-hd-collapse-mobile .sgx-hd__menu > li + li {
		border-top: 1px solid var(--sgx-panel-line);
	}

	.sgx-hd-collapse-mobile .sgx-hd__menu > li > a,
	.sgx-hd-collapse-mobile .sgx-hd__menu > li > span {
		flex: 1 1 auto;
		justify-content: space-between;
		padding: 13px 0;
		white-space: normal;
	}

	.sgx-hd-collapse-mobile .sgx-hd__menu > li > .sub-menu {
		flex: 1 0 100%;
	}

	.sgx-hd-collapse-mobile .sgx-hd__menu > li > a::after {
		content: none;
	}

	.sgx-hd-collapse-mobile .sgx-hd__menu .sub-menu {
		position: static;
		min-width: 0;
		margin: 0 0 8px;
		padding: 0 0 0 14px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.sgx-hd-collapse-mobile .sgx-hd__menu > li.is-open > .sub-menu {
		display: block;
	}

	.sgx-hd-collapse-mobile .sgx-hd__actions {
		margin-top: 18px;
	}

	.sgx-hd-collapse-mobile .sgx-hd__actions .sgx-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (max-width: 1024px) {

	/* ── Panel variants ── */

	.sgx-hd-close-on.sgx-hd-collapse-tablet .sgx-hd__close {
		display: inline-flex;
	}

	.sgx-hd-backdrop-on.sgx-hd-collapse-tablet .sgx-hd .is-open ~ .sgx-hd__backdrop,
	.sgx-hd-backdrop-on.sgx-hd-collapse-tablet .sgx-hd.is-open .sgx-hd__backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* Slide-in and full-screen panels leave the document flow entirely, so
	   they scroll on their own and reach the full viewport height. */
	.sgx-hd-collapse-tablet.sgx-hd-panel-slide-end .sgx-hd__nav-wrap,
	.sgx-hd-collapse-tablet.sgx-hd-panel-slide-start .sgx-hd__nav-wrap,
	.sgx-hd-collapse-tablet.sgx-hd-panel-fullscreen .sgx-hd__nav-wrap {
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 40;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.sgx-hd-collapse-tablet.sgx-hd-panel-slide-end .sgx-hd__nav-wrap {
		inset-inline-end: 0;
		inset-inline-start: auto;
		left: auto;
		right: 0;
		width: min(var(--sgx-panel-w, 320px), 100vw);
		transform: translateX(100%);
	}

	.sgx-hd-collapse-tablet.sgx-hd-panel-slide-start .sgx-hd__nav-wrap {
		inset-inline-start: 0;
		inset-inline-end: auto;
		left: 0;
		right: auto;
		width: min(var(--sgx-panel-w, 320px), 100vw);
		transform: translateX(-100%);
	}

	[dir="rtl"] .sgx-hd-collapse-tablet.sgx-hd-panel-slide-end .sgx-hd__nav-wrap {
		transform: translateX(-100%);
	}

	[dir="rtl"] .sgx-hd-collapse-tablet.sgx-hd-panel-slide-start .sgx-hd__nav-wrap {
		transform: translateX(100%);
	}

	.sgx-hd-collapse-tablet.sgx-hd-panel-fullscreen .sgx-hd__nav-wrap {
		left: 0;
		right: 0;
		width: 100%;
		transform: none;
		opacity: 0;
	}

	.sgx-hd-collapse-tablet.sgx-hd-panel-slide-end .sgx-hd.is-open .sgx-hd__nav-wrap,
	.sgx-hd-collapse-tablet.sgx-hd-panel-slide-start .sgx-hd.is-open .sgx-hd__nav-wrap {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	.sgx-hd-collapse-tablet.sgx-hd-panel-fullscreen .sgx-hd.is-open .sgx-hd__nav-wrap {
		opacity: 1;
		visibility: visible;
	}

	.sgx-hd-collapse-tablet.sgx-hd-panel-fullscreen .sgx-hd__menu {
		justify-content: center;
	}
}

@media (max-width: 767px) {

	/* ── Panel variants ── */

	.sgx-hd-close-on.sgx-hd-collapse-mobile .sgx-hd__close {
		display: inline-flex;
	}

	.sgx-hd-backdrop-on.sgx-hd-collapse-mobile .sgx-hd .is-open ~ .sgx-hd__backdrop,
	.sgx-hd-backdrop-on.sgx-hd-collapse-mobile .sgx-hd.is-open .sgx-hd__backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* Slide-in and full-screen panels leave the document flow entirely, so
	   they scroll on their own and reach the full viewport height. */
	.sgx-hd-collapse-mobile.sgx-hd-panel-slide-end .sgx-hd__nav-wrap,
	.sgx-hd-collapse-mobile.sgx-hd-panel-slide-start .sgx-hd__nav-wrap,
	.sgx-hd-collapse-mobile.sgx-hd-panel-fullscreen .sgx-hd__nav-wrap {
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 40;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.sgx-hd-collapse-mobile.sgx-hd-panel-slide-end .sgx-hd__nav-wrap {
		inset-inline-end: 0;
		inset-inline-start: auto;
		left: auto;
		right: 0;
		width: min(var(--sgx-panel-w, 320px), 100vw);
		transform: translateX(100%);
	}

	.sgx-hd-collapse-mobile.sgx-hd-panel-slide-start .sgx-hd__nav-wrap {
		inset-inline-start: 0;
		inset-inline-end: auto;
		left: 0;
		right: auto;
		width: min(var(--sgx-panel-w, 320px), 100vw);
		transform: translateX(-100%);
	}

	[dir="rtl"] .sgx-hd-collapse-mobile.sgx-hd-panel-slide-end .sgx-hd__nav-wrap {
		transform: translateX(-100%);
	}

	[dir="rtl"] .sgx-hd-collapse-mobile.sgx-hd-panel-slide-start .sgx-hd__nav-wrap {
		transform: translateX(100%);
	}

	.sgx-hd-collapse-mobile.sgx-hd-panel-fullscreen .sgx-hd__nav-wrap {
		left: 0;
		right: 0;
		width: 100%;
		transform: none;
		opacity: 0;
	}

	.sgx-hd-collapse-mobile.sgx-hd-panel-slide-end .sgx-hd.is-open .sgx-hd__nav-wrap,
	.sgx-hd-collapse-mobile.sgx-hd-panel-slide-start .sgx-hd.is-open .sgx-hd__nav-wrap {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	.sgx-hd-collapse-mobile.sgx-hd-panel-fullscreen .sgx-hd.is-open .sgx-hd__nav-wrap {
		opacity: 1;
		visibility: visible;
	}

	.sgx-hd-collapse-mobile.sgx-hd-panel-fullscreen .sgx-hd__menu {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sgx-hd,
	.sgx-hd__inner,
	.sgx-hd__nav-wrap,
	.sgx-hd__menu .sub-menu,
	.sgx-hd__bars,
	.sgx-hd__bars::before,
	.sgx-hd__bars::after {
		transition: none !important;
	}
}