/**
 * Polish layer, module "chrome" (docs.ia/build/polish-design.md §16.2,
 * design §8.3 without the cookie bar and the logo). Header enter and exit,
 * scrolled shadow, current navigation item (design §5.1), navigation and
 * footer underline, overlay entrance, page transition. Needs the base
 * module (tokens). The page-transition rule here also gates the cookie
 * module's own view-transition-name (design §8.3): with chrome disabled,
 * @view-transition is not declared and the cookie bar's name has no effect.
 */

header.wp-block-template-part {
	transition: transform 280ms var(--precoin-ease-out), box-shadow var(--precoin-t-2) var(--precoin-ease-out);
}
header.wp-block-template-part.is-hidden {
	transition-duration: 200ms;
	transition-timing-function: var(--precoin-ease-in);
}
header.wp-block-template-part.is-scrolled {
	box-shadow: var(--precoin-elev-2);
}

/* Current item: 2px accent underline at rest; a left bar in the overlay menu. */
.precoin-nav-current .wp-block-navigation-item__label {
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px;
}
.wp-block-navigation__responsive-container.is-menu-open .precoin-nav-current .wp-block-navigation-item__label {
	background-image: none;
	padding-inline-start: var(--wp--preset--spacing--sm);
}
.wp-block-navigation__responsive-container.is-menu-open .precoin-nav-current {
	box-shadow: inset 2px 0 0 var(--wp--preset--color--accent);
}

/* R2: the animated line written once so text-decoration:none cannot separate
   from it (theme.json's a:hover sets native underline). Needs it on both
   .__content (the <a>, where the native rule lands) and .__label (where the
   line paints), or a check reading .__content's own value still sees it. */
header .wp-block-navigation-item:not(.precoin-nav-current) .wp-block-navigation-item__content {
	text-decoration: none;
}
header .wp-block-navigation-item:not(.precoin-nav-current) .wp-block-navigation-item__label,
footer .wp-block-navigation-item:not(.precoin-nav-current) .wp-block-navigation-item__content {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--precoin-t-2) var(--precoin-ease-out);
}
@media (hover: hover) {
	header .wp-block-navigation-item:not(.precoin-nav-current) .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
	footer .wp-block-navigation-item:not(.precoin-nav-current) .wp-block-navigation-item__content:hover {
		background-size: 100% 1px;
		transition-duration: var(--precoin-t-1);
	}
}
header .wp-block-navigation-item:not(.precoin-nav-current) .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label,
footer .wp-block-navigation-item:not(.precoin-nav-current) .wp-block-navigation-item__content:focus-visible {
	background-size: 100% 1px;
	transition-duration: var(--precoin-t-1);
}
.precoin-nav-current .wp-block-navigation-item__label {
	text-decoration: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
	/* Page transition. Guard (K29): a name on the header while the overlay's
	   fixed/absolute ancestor is open would trap its position. */
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 200ms;
	}
	header.wp-block-template-part:not(:has(.is-menu-open)) {
		view-transition-name: precoin-header;
	}

	/* Overlay menu: items enter in sequence, maximum 8. End state equals baseline. */
	@keyframes precoin-nav-item-in {
		from { opacity: 0; translate: 0 var(--precoin-shift-1); }
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		animation: precoin-nav-item-in var(--precoin-t-2) var(--precoin-ease-out) both;
		&:nth-child(1) { animation-delay: 0ms; }
		&:nth-child(2) { animation-delay: 40ms; }
		&:nth-child(3) { animation-delay: 80ms; }
		&:nth-child(4) { animation-delay: 120ms; }
		&:nth-child(5) { animation-delay: 160ms; }
		&:nth-child(6) { animation-delay: 200ms; }
		&:nth-child(7) { animation-delay: 240ms; }
		&:nth-child(8) { animation-delay: 280ms; }
	}
}