/* ==========================================================================
   Header
   ========================================================================== */

.ut-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ut-header-padding-y) var(--ut-header-padding-x);
	background-color: var(--wp--preset--color--warm);
}

.ut-header__logo {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	display: flex;
	align-items: center;
	line-height: 1;
}

.ut-header__logo-svg {
	height: var(--ut-header-nav-size);
	width: auto;
	display: block;
}

.ut-header__logo-svg path {
	color: var(--wp--preset--color--foreground);
}

body:not(.ut-home-intro) .ut-header__logo-svg path,
html.ut-skip-home-intro body.ut-home-intro .ut-header__logo-svg path {
	animation: ut-logo-color-cycle 0.95s var(--ut-ease-out-spring) both;
}

body:not(.ut-home-intro) .ut-header__logo-svg path:nth-of-type(1),
html.ut-skip-home-intro body.ut-home-intro .ut-header__logo-svg path:nth-of-type(1) {
	animation-delay: 0.03s;
}

body:not(.ut-home-intro) .ut-header__logo-svg path:nth-of-type(2),
html.ut-skip-home-intro body.ut-home-intro .ut-header__logo-svg path:nth-of-type(2) {
	animation-delay: 0.08s;
}

body:not(.ut-home-intro) .ut-header__logo-svg path:nth-of-type(3),
html.ut-skip-home-intro body.ut-home-intro .ut-header__logo-svg path:nth-of-type(3) {
	animation-delay: 0.13s;
}

body:not(.ut-home-intro) .ut-header__logo-svg path:nth-of-type(4),
html.ut-skip-home-intro body.ut-home-intro .ut-header__logo-svg path:nth-of-type(4) {
	animation-delay: 0.18s;
}

body:not(.ut-home-intro) .ut-header__logo-svg path:nth-of-type(5),
html.ut-skip-home-intro body.ut-home-intro .ut-header__logo-svg path:nth-of-type(5) {
	animation-delay: 0.23s;
}

body:not(.ut-home-intro) .ut-header__logo-svg path:nth-of-type(6),
html.ut-skip-home-intro body.ut-home-intro .ut-header__logo-svg path:nth-of-type(6) {
	animation-delay: 0.28s;
}

body:not(.ut-home-scroll-locked) .ut-header__logo:is(:hover, :focus-visible) .ut-header__logo-svg path {
	animation: ut-logo-color-cycle-replay 0.95s var(--ut-ease-out-spring) both;
}

body:not(.ut-home-scroll-locked) .ut-header__logo:is(:hover, :focus-visible) .ut-header__logo-svg path:nth-of-type(1) {
	animation-delay: 0.03s;
}

body:not(.ut-home-scroll-locked) .ut-header__logo:is(:hover, :focus-visible) .ut-header__logo-svg path:nth-of-type(2) {
	animation-delay: 0.08s;
}

body:not(.ut-home-scroll-locked) .ut-header__logo:is(:hover, :focus-visible) .ut-header__logo-svg path:nth-of-type(3) {
	animation-delay: 0.13s;
}

body:not(.ut-home-scroll-locked) .ut-header__logo:is(:hover, :focus-visible) .ut-header__logo-svg path:nth-of-type(4) {
	animation-delay: 0.18s;
}

body:not(.ut-home-scroll-locked) .ut-header__logo:is(:hover, :focus-visible) .ut-header__logo-svg path:nth-of-type(5) {
	animation-delay: 0.23s;
}

body:not(.ut-home-scroll-locked) .ut-header__logo:is(:hover, :focus-visible) .ut-header__logo-svg path:nth-of-type(6) {
	animation-delay: 0.28s;
}

.ut-header__nav ul {
	display: flex;
	gap: var(--ut-header-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

@keyframes ut-logo-color-cycle {
	0% {
		color: var(--wp--preset--color--contrast);
	}

	62% {
		color: var(--wp--preset--color--contrast);
	}

	82% {
		color: var(--wp--preset--color--accent);
	}

	100% {
		color: var(--wp--preset--color--foreground);
	}
}

@keyframes ut-logo-color-cycle-replay {
	0% {
		color: var(--wp--preset--color--contrast);
	}

	62% {
		color: var(--wp--preset--color--contrast);
	}

	82% {
		color: var(--wp--preset--color--accent);
	}

	100% {
		color: var(--wp--preset--color--foreground);
	}
}

.ut-header__nav a {
	font-family: var(--wp--preset--font-family--pp-woodland);
	font-size: var(--ut-header-nav-size);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	vertical-align: text-bottom;
}