/* V2 Header */

:root {
  --site-header-height: 3.625rem;

  @media (min-width: 45rem) {
    --site-header-height: 4.375rem;
  }

  @media (min-width: 60rem) {
    --site-header-height: 5.625rem;
  }

  @media (min-width: 100rem) {
    --site-header-height: 5.75rem;
  }
}

.kh-header-wrapper {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.kh-block-sticky-cta {
	position: fixed;
	z-index: 1001;
	inset: auto 0 0 0;
}

.kh-block-sticky-cta .is-btn-sticky {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--block-inner);
	background: var(--wp--custom--color--bg--action);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--custom--color--text--white);
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	transition: background-color .3s ease;
}

.kh-block-sticky-cta .is-btn-sticky .btn-icon {
	display: block;
	width: 1.5rem;
	min-width: 1.5rem;
}

.kh-block-sticky-cta .is-btn-sticky:hover,
.kh-block-sticky-cta .is-btn-sticky:focus-visible {
	background: var(--wp--custom--color--bg--action-hover);
}

.kh-header-wrapper .kh-block-inner {
	position: relative;
	padding: 0;
	overflow: unset;
	min-height: var(--site-header-height);
	transition: transform .3s ease;
}

.kh-header-wrapper.is-hidden .kh-block-inner {
	transform: translateY(-100%);
}

.kh-header-wrapper .kh-block-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(2rem);
}

.kh-header-wrapper .kh-block-layout {
	max-width: none;
}

.header-layout {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	width: 100%;
	max-width: 120rem;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--block-inner);
}

.header-layout .header-logo-wrapper {
	display: flex;
}

.header-layout .header-logo-wrapper .header-logo {
	width: 100%;
	max-width: 6.875rem;
}

.header-layout .header-search-wrapper {
	display: none;
	flex: 0 0 auto;
	justify-content: flex-end;
	margin-inline-start: auto;
	transition: opacity .3s ease;
}

.header-layout .header-search-wrapper .header-search-trigger {
	width: 27.5rem;
	max-width: 100%;
	padding: 2px;
	border-radius: var(--wp--custom--radius--full);
	box-shadow: 0 0 .5rem 0 rgba(140, 48, 245, 0.15);
	cursor: pointer;
	text-align: left;
	border: none;
	background: linear-gradient(-127deg, #8c30f5, #e875a9, #8c30f5, #e875a9);
  background-size: 400% 400%;
	transition: box-shadow .3s ease;
	animation: gradient-animation 10s ease infinite;
}

.header-layout .header-search-wrapper .header-search-trigger-inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--sm);
	background: var(--wp--custom--color--bg--white);
	border-radius: inherit;
	transition: background-color .3s ease;
}

.header-layout .header-search-trigger:hover,
.header-layout .header-search-trigger:focus-visible {
	box-shadow: 0 0 .25rem 0 rgba(140, 48, 245, 0.15);
}

.header-layout .header-search-trigger:hover .header-search-trigger-inner,
.header-layout .header-search-trigger:focus-visible .header-search-trigger-inner {
	background-color: var(--wp--custom--color--bg--action-hover-light);
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.header-layout .header-search-trigger .header-search-icon {
	width: 1.5rem;
	min-width: 1.5rem;
}

.header-layout .header-search-trigger .header-search-placeholder {
	flex: 1;
	min-width: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #2e3c40;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-layout .header-nav-menu {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--custom--color--text--primary);
}

.header-layout .header-nav-menu .header-nav-items {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
	transition: opacity .3s ease;
}

.header-layout .header-nav-menu .header-menu-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding-inline: var(--wp--preset--spacing--xs);
	background: none;
	border: 1px solid var(--wp--custom--color--bg--transparent);
	border-radius: var(--wp--custom--radius--xl);
	cursor: pointer;
	flex-shrink: 0;
	color: var(--wp--custom--color--text--primary);
	transition: gap .3s ease, background-color .3s ease, border-color 0.3s ease;
}

.header-layout .header-nav-menu .header-menu-trigger:hover,
.header-layout .header-nav-menu .header-menu-trigger:focus-visible  {
	background-color: var(--wp--custom--color--bg--action-light);
	border-color: var(--wp--custom--color--bg--action-light);
}

.header-layout .header-menu-trigger .header-menu-icon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
}

.header-layout .header-menu-icon span {
	display: block;
	height: 2px;
	width: 100%;
	background-color: var(--wp--custom--color--icon--primary);
	border-radius: 1px;
	transform-origin: center;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.header-layout .header-menu-trigger .header-menu-label {
	display: none;
	overflow: hidden;
	transition: opacity .3s ease, width .3s ease;
}

@media (min-width: 45rem) {
	.header-layout .header-logo-wrapper .header-logo {
		max-width: 8.5rem;
	}
	
	.header-layout .header-nav-menu .header-nav-items {
		display: flex;
	}

	.header-layout .header-nav-menu .header-nav-items > .is-btn-header {
		display: none;
	}

	.header-layout .header-nav-menu .header-menu-trigger .header-menu-label {
		display: inline;
	}
}
	
@media (min-width: 60rem) {
	.header-layout {
		padding-block: var(--wp--preset--spacing--sm);
	}

	.header-layout .header-logo-wrapper .header-logo {
		max-width: 12.5rem;
	}
}

@media (min-width: 75rem) {

	.header-layout .header-nav-menu .header-nav-items > .is-btn-header {
		display: inline-flex;
	}

	.kh-block-sticky-cta {
		display: none;
	}
}

@media (min-width: 100rem) {
	.header-layout {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.is-inner .header-layout {
		grid-template-columns: 1fr 1fr;
	}

	.header-layout .header-search-wrapper {
		display: flex;
		flex: 1;
		justify-content: center;
		margin-inline-start: 0;
	}

	.is-inner .header-layout .header-search-wrapper {
		display: none;
	}

	.header-layout .header-nav-menu {
		position: relative;
		justify-content: flex-end;
	}

	.header-layout .header-nav-menu .header-nav-items {
		display: flex;
	}

	.header-layout .header-nav-menu .is-search {
		position: absolute;
		inset: 0 6.5rem 0 auto;
		opacity: 0;
		pointer-events: none;
		transition: all .3s ease;
	}

	.is-inner .header-layout .header-nav-menu .is-search {
		position: static;
		inset: auto;
		opacity: 1;
		pointer-events: auto;
	}

	.header-layout .header-nav-menu .header-menu-trigger {
		margin-left: var(--wp--preset--spacing--block-inner);
	}
}

.is-btn-header {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xs);
	background: var(--wp--custom--color--bg--white);
	border: 1px solid var(--wp--custom--color--bg--transparent);
	border-radius: var(--wp--custom--radius--xl);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--custom--color--text-primary);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
	transition: border-color 0.3s ease, background-color .3s ease, color .3s ease;
}

.is-btn-header .btn-icon {
	display: block;
	width: 1.25rem;
	min-width: 1.25rem;
}

.is-btn-header.is-search {
	gap: var(--wp--preset--spacing--xxxs);
	padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xxs);
	background: var(--wp--custom--color--bg--action-light);
	border: 1px solid var(--wp--custom--color--bg--action-light);
}

.is-btn-header.is-search .btn-icon {
	width: 2rem;
}

.is-btn-header:hover,
.is-btn-header:focus-visible {
	background-color: var(--wp--custom--color--bg--action-light);
	border-color: var(--wp--custom--color--bg--action-light);
}

.is-btn-header.is-search:hover,
.is-btn-header.is-search:focus-visible {
	color: var(--wp--custom--color--text--action-hover);
	border-color: var(--wp--custom--color--border--action-hover);
	background-color: var(--wp--custom--color--bg--white);
}


/* ── MyChart dropdown ───────────────────────────────────── */

.header-mychart {
	position: relative;
}

.header-mychart .header-mychart-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	width: 16.75rem;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(2rem);
	border: 1px solid #eaebec;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: 0 12px 24px -4px rgba(46, 60, 64, 0.25);
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 10;
}

.header-mychart .header-mychart-trigger[aria-expanded="true"] + .header-mychart-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.header-mychart .header-mychart-top {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md) var(--wp--preset--spacing--xs);
}

.header-mychart .header-mychart-bottom {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--custom--color--border--ui);
}

.header-mychart .header-mychart-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--wp--preset--spacing--xxs);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--custom--color--text--secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.header-mychart .header-mychart-link svg {
	width: 1rem;
	flex-shrink: 0;
}

.header-mychart .header-mychart-link:hover,
.header-mychart .header-mychart-link:focus-visible {
	color: var(--wp--custom--color--text--action-hover);
}


/* ─── KH Nav: header override when open ─────────────────────────── */
body.kh-nav--open {
	overflow: hidden;
}

body.kh-nav--open .header-nav-items,
body.kh-nav--open .header-search-wrapper {
	opacity: 0;
	pointer-events: none;
}

body.kh-nav--open .header-layout .header-search-trigger-mobile {
	opacity: 1;
	pointer-events: auto;
}

body.kh-nav--open .header-nav-menu .header-menu-trigger {
	gap: 0;
}

body.kh-nav--open .header-menu-icon span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

body.kh-nav--open .header-menu-icon span:nth-child(2) {
	opacity: 0;
}

body.kh-nav--open .header-menu-icon span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

body.kh-nav--open .header-nav-menu .header-menu-trigger .header-menu-label {
	opacity: 0;
	width: 0;
}


/* ─── KH Nav overlay ─────────────────────────────────────────────── */
.kh-nav {
	--nav-spacing: 3rem;
	--nav-spacing-v: 7rem;

	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
}

.kh-nav-left {
	position: relative;
	width: 100%;
	flex-shrink: 0;
	background: #F3F9F8;
	overflow-y: auto;
	overflow-x: hidden;
}

.kh-nav-left .kh-nav-left-inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl);
	min-height: 100%;
	padding: 6rem var(--wp--preset--spacing--block-inner) 3rem;
}

.kh-nav-left .kh-nav-primary {
	margin: 0;
}

.kh-nav-primary .kh-nav-item {
	border-top: 1px solid var(--wp--custom--color--border--01);
	transition: border .3s ease;
}

.kh-nav-item .kh-nav-item-inner {
	background-color: var(--wp--custom--color--bg--transparent);
	border-radius: var(--wp--custom--radius--4-xl);
	transition: background-color .3s ease;
}

.kh-nav-primary .kh-nav-item:first-child {
	border-top: none;
}

.kh-nav-item .kh-nav-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--wp--preset--spacing--sm);
	background: none;
	border: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--custom--color--text--primary);
	text-align: left;
	line-height: 1.15;
	transition: color .3s ease;
}

.kh-nav-item .kh-nav-trigger:hover,
.kh-nav-item .kh-nav-trigger:focus-visible {
	color: var(--wp--custom--color--text--action);
}

.kh-nav-trigger span {
	flex: 1;
}

.kh-nav-trigger .kh-nav-chevron {
	flex-shrink: 0;
	width: 1.5rem;
	transition: transform 0.3s ease;
}

.kh-nav-trigger .kh-nav-x {
	display: none;
	flex-shrink: 0;
	width: 1.5rem;
}

.kh-nav-item .kh-nav-sub {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	max-height: 0;
	overflow: hidden;
	padding: 0 var(--wp--preset--spacing--sm) 0;
	transition: max-height .3s ease, padding .3s ease;
}

.kh-nav-sub span {
	font-weight: 600;
	display: none;
}

.kh-nav-sub ul {
	list-style: none;
	margin: 0;
}

.kh-nav-sub ul li + li {
	margin-top: 0.125rem;
}

.kh-nav-sub a {
	display: block;
	padding: var(--wp--preset--spacing--xxxs) 0;
	font-weight: 600;
	color: var(--wp--custom--color--text--secondary);
	text-decoration: none;
	transition: color 0.3s ease;
}

.kh-nav-sub a:hover,
.kh-nav-sub a:focus-visible {
	color: var(--wp--custom--color--text--action);
}

.kh-nav-item.is-active {
	border-top-color: var(--wp--custom--color--border--transparent);
}

.kh-nav-item.is-active + .kh-nav-item {
	border-top-color: var(--wp--custom--color--border--transparent);
}

.kh-nav-item.is-active .kh-nav-item-inner {
	background-color: var(--wp--custom--color--bg--white);
}

.kh-nav-item.is-active .kh-nav-trigger {
	color: var(--wp--custom--color--text--action-hover);
}

.kh-nav-item.is-active .kh-nav-chevron {
	transform: rotate(180deg);
}

.kh-nav-item.is-active .kh-nav-sub {
	max-height: 40em;
	padding-bottom: var(--wp--preset--spacing--sm);
}

.kh-nav-left .kh-nav-secondary {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--sm);
}

.kh-nav-secondary li a {
	display: block;
	padding: var(--wp--preset--spacing--xxxs) 0;
	font-weight: 500;
	color: var(--wp--custom--color--text--secondary);
	text-decoration: none;
	transition: color 0.3s ease;
}

.kh-nav-secondary li a:hover,
.kh-nav-secondary li a:focus-visible {
	color: var(--wp--custom--color--text--action);
}

.kh-nav-left .kh-nav-social {
	margin: 0;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--sm) 0;
}

.kh-nav-social ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.kh-nav-social ul a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
}

.kh-nav-social ul img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.kh-nav-right {
	display: none;
	position: relative;
	flex-shrink: 0;
	width: 50%;
	background: var(--wp--custom--color--bg--white);
	overflow: hidden;
}

.kh-nav-right .kh-nav-intro {
	position: fixed;
	top: 0;
	left: 50%;
	width: 50%;
	max-width: 45rem;
	height: 100dvh;
	max-height: none;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 301;
	transition: opacity 0.3s ease;
	padding: var(--nav-spacing-v) 5rem var(--nav-spacing-v) var(--nav-spacing);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--md);
}

.kh-nav-right .kh-nav-intro > * {
	margin: 0;
}

.kh-nav-right .kh-nav-intro .kh-nav-intro-heading {
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--custom--color--text--heading-primary);
}

.kh-nav-right .kh-nav-intro .kh-nav-intro-body {
	color: var(--wp--custom--color--text--secondary);
}

.kh-nav-right .kh-nav-intro a {
	margin-top: var(--wp--preset--spacing--xs);
}

.kh-nav.has-active .kh-nav-intro {
	opacity: 0;
	pointer-events: none;
}

@media (min-width: 50rem) {
	.kh-nav-left {
		width: 50%;
	}

	.kh-nav-left .kh-nav-left-inner {
		max-width: 45rem;
		margin-inline-start: auto;
		padding: var(--nav-spacing-v) var(--nav-spacing) var(--nav-spacing-v) 5rem;
	}

	.kh-nav-primary .kh-nav-item {
		border: none;
	}

	.kh-nav-item .kh-nav-item-inner {
		background-color: var(--wp--custom--color--bg--transparent);
		border-radius: unset;
	}

	.kh-nav-item .kh-nav-trigger {
		font-size: clamp(1.5rem, 2.25vw, 2rem);
		padding: var(--wp--preset--spacing--xs) 0;
		gap: var(--wp--preset--spacing--md);
		justify-content: flex-start;
	}

	.kh-nav-item .kh-nav-chevron {
		display: none;
	}

	.kh-nav-item .kh-nav-sub {
		position: fixed;
		top: 0;
		left: 50%;
		width: 50%;
		max-width: 45rem;
		height: 100dvh;
		max-height: none;
		overflow-y: auto;
		overflow-x: hidden;
		background: #fff;
		z-index: 301;
		pointer-events: none;
		transition: opacity 0.3s ease;
		padding: var(--nav-spacing-v) 5rem var(--nav-spacing-v) var(--nav-spacing);
		display: flex;
		flex-direction: column;
		opacity: 0;
	}

	.kh-nav-item .kh-nav-sub span {
		display: block;
	}

	.kh-nav-item .kh-nav-sub ul {
		padding: 0;
	}

	.kh-nav-item .kh-nav-sub ul li + li {
		margin-top: 0;
	}

	.kh-nav-item .kh-nav-sub strong {
		font-size: 0.75rem;
		margin-bottom: 1rem;
	}

	.kh-nav-item .kh-nav-sub a {
		font-weight: 600;
		padding: var(--wp--preset--spacing--xxs) 0;
	}

	.kh-nav-item.is-active .kh-nav-item-inner {
		background-color: unset;
	}

	.kh-nav-item.is-active .kh-nav-x {
		display: block;
	}

	.kh-nav-item.is-active .kh-nav-sub {
		opacity: 1;
		pointer-events: auto;
		max-height: none;
	}

	.kh-nav-left .kh-nav-secondary,
	.kh-nav-left .kh-nav-social {
		padding-inline: 0;
	}

	.kh-nav-right {
		display: block;
	}
}

@media (min-width: 70rem) {
	.kh-nav {
		--nav-spacing: 10rem;
		--nav-spacing-v: 12rem;
	}
}

@media (min-width: 85rem) {
	.kh-nav {
		--nav-spacing-v: 16rem;
	}
}