@layer components {
	body.admin-bar {
		--klt-admin-bar-offset: var(--wp-admin--admin-bar--height, 32px);
	}

	@media (max-width: 782px) {
		body.admin-bar {
			--klt-admin-bar-offset: var(--wp-admin--admin-bar--height, 46px);
		}
	}

	.klt-site-header {
		position: relative;
		z-index: 10;
		background: var(--klt-header-background, color-mix(in srgb, var(--klt-color-bg, Canvas) var(--klt-opacity, 76%), transparent));
		color: var(--klt-color-text, CanvasText);
	}

	.klt-site-header--sticky {
		position: sticky;
		top: var(--klt-sticky-top, var(--klt-admin-bar-offset, 0px));
	}

	.klt-site-header--overlays-opening.is-overlay-ready,
	.klt-body:has([data-klt-opening-overlay-target]) .klt-site-header--overlays-opening,
	.klt-body:has(.klt-main > .klt-composition > :first-child > :first-child:is(.klt-story-collection--hero, .klt-story-collection--feature)) .klt-site-header--overlays-opening {
		position: fixed;
		inset-block-start: var(--klt-sticky-top, var(--klt-admin-bar-offset, 0px));
		inset-inline: 0;
		width: var(--klt-sticky-inline-size, 100%);
	}

	.klt-site-header--sticky-hides.is-sticky-ready {
		transition: transform var(--klt-duration-interactive) ease;
	}

	.klt-site-header--sticky-hides.is-hidden {
		transform: translateY(-100%);
	}

	.klt-site-header--condenses.is-sticky-ready [data-klt-condense="drop"] {
		max-block-size: 8rem;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
		transition: max-block-size var(--klt-duration-interactive) ease, opacity var(--klt-duration-interactive) ease, visibility 0s linear;
	}

	.klt-site-header--condenses.is-stuck [data-klt-condense="drop"] {
		max-block-size: 0;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition-delay: 0s, 0s, var(--klt-duration-interactive);
	}

	@media (min-width: 60.001rem) {
		.klt-site-header--condenses:not(.is-stuck) [data-klt-condense="drop"] {
			overflow: visible;
		}
	}

	.klt-site-header__bar,
	.klt-site-header__navigation-inner,
	.klt-site-header__actions {
		display: flex;
		gap: var(--klt-space-s);
		align-items: center;
	}

	.klt-site-header__bar {
		position: relative;
		justify-content: space-between;
		padding-block: var(--klt-space-s);
	}

	.klt-site-header__actions {
		margin-inline-start: auto;
	}

	.klt-site-header__navigation-inner {
		flex-wrap: wrap;
		justify-content: space-between;
		padding-block: var(--klt-space-xs);
	}

	.klt-site-header__reading-progress {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		display: block;
		inline-size: 100%;
		block-size: 0.2rem;
		margin: 0;
		border: 0;
		background: transparent;
		color: var(--klt-reading-progress-color, var(--klt-color-accent));
		accent-color: var(--klt-reading-progress-color, var(--klt-color-accent));
	}

	.klt-site-header__reading-progress[hidden] {
		display: none;
	}

	.klt-site-header__reading-progress::-webkit-progress-value {
		transition: inline-size var(--klt-duration-interactive) linear;
	}

	.klt-site-header__reading-progress::-moz-progress-bar {
		transition: inline-size var(--klt-duration-interactive) linear;
	}

	.klt-site-header__menu-toggle,
	.klt-site-header__search-toggle,
	.klt-site-header__scheme-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		cursor: pointer;
	}

	.klt-site-header .klt-icon {
		display: block;
		width: 1.25rem;
		height: 1.25rem;
	}

	.klt-site-header__menu-toggle {
		display: none;
	}

	.klt-site-header__menu-icon--close,
	.klt-site-header__menu-toggle[aria-expanded="true"] .klt-site-header__menu-icon--open {
		display: none;
	}

	.klt-site-header__menu-toggle[aria-expanded="true"] .klt-site-header__menu-icon--close {
		display: block;
	}

	.klt-site-header__scheme-icon--dark,
	.klt-site-header__scheme-toggle[aria-pressed="true"] .klt-site-header__scheme-icon--light {
		display: none;
	}

	.klt-site-header__scheme-toggle[aria-pressed="true"] .klt-site-header__scheme-icon--dark,
	:root[data-klt-scheme="dark"] .klt-site-header__scheme-icon--dark {
		display: block;
	}

	:root[data-klt-scheme="dark"] .klt-site-header__scheme-icon--light {
		display: none;
	}

	.klt-site-header__search {
		position: relative;
		display: flex;
		justify-content: flex-end;
	}

	.klt-site-header__search-panel {
		position: absolute;
		top: calc(100% + var(--klt-space-xs));
		inset-inline-end: 0;
		z-index: 2;
		width: min(24rem, calc(100vw - 2rem));
		padding: var(--klt-space-s);
		opacity: 0;
		transform: translateY(-0.4rem);
		visibility: hidden;
		transition: opacity 160ms ease, transform 160ms ease, visibility 160ms step-end;
	}

	.klt-site-header__search-close {
		display: none;
	}

	.klt-site-header--overlays-opening.is-overlay-ready.is-search-overlay-active .klt-site-header__search-panel {
		position: fixed;
		inset: 0;
		z-index: 20;
		display: grid;
		width: 100vw;
		height: 100dvh;
		padding: clamp(1rem, 4vw, 3rem);
		place-items: center;
		transform: scale(0.985);
	}

	.klt-site-header--overlays-opening.is-overlay-ready.is-search-overlay-active .klt-site-header__search-panel .klt-search-form {
		width: min(46rem, 100%);
	}

	.klt-site-header--overlays-opening.is-overlay-ready.is-search-overlay-active .klt-site-header__search-close {
		position: absolute;
		top: clamp(1rem, 3vw, 2rem);
		inset-inline-end: clamp(1rem, 3vw, 2rem);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		cursor: pointer;
	}

	.klt-site-header__search-panel[hidden] {
		display: none;
	}

	.klt-site-header__search.is-open .klt-site-header__search-panel {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		transition: opacity var(--klt-duration-interactive) ease, transform var(--klt-duration-interactive) ease;
	}

	.klt-site-header--overlays-opening.is-overlay-ready.is-search-overlay-active .klt-site-header__search.is-open .klt-site-header__search-panel {
		transform: scale(1);
	}

	:root.klt-search-overlay-open,
	:root.klt-search-overlay-open body {
		overflow: hidden;
	}

	:root.klt-search-overlay-open .klt-site-header {
		z-index: 110;
	}

	.klt-site-header__search:is(.is-open, .is-closing) .klt-site-header__search-toggle {
		display: none;
	}

	.klt-site-header__search.is-revealing .klt-site-header__search-toggle {
		animation: klt-search-toggle-reveal 160ms ease-out both;
	}

	@keyframes klt-search-toggle-reveal {
		from {
			opacity: 0;
			transform: scale(0.84);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.klt-site-header__search-panel .klt-search-form__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.klt-site-header__search-panel .klt-search-form__field {
		min-width: 0;
	}

	.klt-site-header__search-panel .klt-search-form .klt-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}

	.klt-site-header :is(.klt-utility-nav__list) {
		display: flex;
		align-items: center;
		gap: var(--klt-space-xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.klt-site-header .klt-nav__item {
		position: relative;
	}

	.klt-site-header :is(.klt-nav__link, .klt-utility-nav__link) {
		display: flex;
		align-items: center;
		inline-size: 100%;
		block-size: 100%;
	}

	.klt-site-header .klt-nav__submenu-toggle {
		display: none;
	}

	.klt-site-header .klt-nav__submenu-icon {
		display: block;
		width: 1rem;
		height: 1rem;
		background: currentcolor;
		-webkit-mask-image: url("../../svg/ui/chevron-right.svg");
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-image: url("../../svg/ui/chevron-right.svg");
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		transform: rotate(90deg);
		transition: transform var(--klt-duration-interactive) ease;
	}

	.klt-site-header .klt-nav__submenu-toggle[aria-expanded="true"] .klt-nav__submenu-icon {
		transform: rotate(-90deg);
	}

	.klt-site-header .klt-nav__item > .sub-menu {
		position: absolute;
		z-index: 4;
		top: 100%;
		inset-inline-start: 0;
		display: grid;
		min-width: 13rem;
		gap: var(--klt-space-xs);
		margin: 0;
		padding: var(--klt-space-xs);
		background: var(--klt-header-submenu-background, var(--wp--preset--color--bg, Canvas)) !important;
		color: var(--klt-header-submenu-color, var(--wp--preset--color--text, CanvasText)) !important;
		list-style: none;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-0.35rem);
		visibility: hidden;
		transition: opacity var(--klt-duration-interactive) ease, transform var(--klt-duration-interactive) ease, visibility var(--klt-duration-interactive) step-end;
	}

	.klt-site-header .klt-nav__item > .sub-menu .klt-nav__link {
		justify-content: center;
		text-align: center;
		color: inherit !important;
	}

	.klt-site-header .klt-nav__item > .sub-menu[hidden] {
		display: none;
	}

	.klt-site-header .klt-nav__item:not(.is-submenu-closed):is(:hover, :focus-within) > .sub-menu {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		visibility: visible;
		transition: opacity var(--klt-duration-interactive) ease, transform var(--klt-duration-interactive) ease;
	}

	@media (min-width: 60.001rem) {
		.klt-site-header .klt-nav__item > .sub-menu {
			inset-inline-start: 50%;
			transform: translate(-50%, -0.35rem);
		}

		.klt-site-header .klt-nav__item:not(.is-submenu-closed):is(:hover, :focus-within) > .sub-menu {
			transform: translate(-50%, 0);
		}
	}

	@media (max-width: 60rem) {
		.klt-site-header--condenses:not(.is-stuck) [data-klt-condense="drop"]:not([hidden]) {
			max-block-size: calc(100dvh - 4.1rem);
		}

		.klt-site-header.is-ready .klt-nav__item.menu-item-has-children {
			display: grid;
			grid-template-columns: minmax(0, 1fr) 2.75rem;
		}

		.klt-site-header.is-ready .klt-nav__submenu-toggle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 2.75rem;
			min-height: 2.75rem;
			padding: 0;
		}

		.klt-site-header__bar {
			display: grid;
			grid-template-columns: minmax(0, 1fr) repeat(3, 2.75rem);
			gap: var(--klt-space-xs);
		}

		.klt-site-header.is-ready .klt-site-header__menu-toggle {
			display: inline-flex;
		}

		.klt-site-header__menu-toggle {
			grid-column: 4;
			grid-row: 1;
		}

		.klt-site-header .klt-brand {
			grid-column: 1;
			grid-row: 1;
			min-width: 0;
		}

		.klt-site-header__actions {
			display: contents;
		}

		.klt-site-header__search-toggle {
			grid-column: 2;
			grid-row: 1;
		}

		.klt-site-header__scheme-toggle {
			grid-column: 3;
			grid-row: 1;
		}

		.klt-site-header .klt-utility-nav {
			grid-column: 1 / -1;
			grid-row: 2;
			max-width: 100%;
			overflow-x: auto;
			padding-block-end: var(--klt-space-xs);
		}

		.klt-site-header__navigation-inner,
		.klt-site-header__navigation-inner .klt-nav__list,
		.klt-site-header__navigation-inner .klt-utility-nav__list {
			align-items: stretch;
			flex-direction: column;
		}

		.klt-site-header__navigation-inner {
			max-block-size: calc(100dvh - 4rem);
			overflow-y: auto;
			overscroll-behavior: contain;
			padding-block: var(--klt-space-s);
		}

		.klt-site-header__navigation-inner .klt-utility-nav__list {
			align-items: flex-start;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.klt-site-header .klt-nav__item > .sub-menu {
			position: static;
			grid-column: 1 / -1;
			inline-size: calc(100% - 2 * var(--klt-space-s));
			min-width: 0;
			margin-block-start: var(--klt-space-xs);
			margin-inline: auto;
			overflow: hidden;
			opacity: 1;
			pointer-events: auto;
			transform: none;
			visibility: visible;
		}

		.klt-site-header.is-ready .klt-nav__item > .sub-menu {
			margin-block-start: 0;
			opacity: 0;
			transition: height var(--klt-duration-interactive) ease, margin-block-start var(--klt-duration-interactive) ease, opacity var(--klt-duration-interactive) ease;
		}

		.klt-site-header.is-ready .klt-nav__item.is-submenu-open > .sub-menu {
			margin-block-start: var(--klt-space-xs);
			opacity: 1;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.klt-site-header__reading-progress::-webkit-progress-value {
			transition: none;
		}

		.klt-site-header__reading-progress::-moz-progress-bar {
			transition: none;
		}

		.klt-site-header__search-panel {
			transition: none;
		}

		.klt-site-header--sticky-hides.is-sticky-ready,
		.klt-site-header--condenses.is-sticky-ready [data-klt-condense="drop"] {
			transition: none;
		}

		.klt-site-header .klt-nav__submenu-icon {
			transition: none;
		}

		.klt-site-header .klt-nav__item > .sub-menu {
			transition: none;
		}

	}
}