/*
 * Header menus. Loaded after core's navigation styles.
 *
 * Desktop (.ts-nav-primary): pill links with a lilac hover and current state,
 * 44px tall for touch. At 1100px and below (.ts-nav-compact) core's overlay
 * becomes a panel that drops under the header bar; core still handles the
 * toggle, focus trap and Escape key.
 */

/*
 * The links' side padding grows with the window, from 6px just above 1100px
 * to the board's 14px at 1280px and above, so the logo, the menu and the
 * two buttons share one row on every desktop width.
 */
.ts-nav-primary .wp-block-navigation-item__content {
	padding: 12px clamp(6px, calc(6px + (100vw - 1101px) * 8 / 179), 14px);
	border-radius: var(--wp--preset--border-radius--pill);
	transition: background-color var(--wp--custom--motion--duration);
}

.ts-nav-primary .wp-block-navigation-item__content:hover,
.ts-nav-primary .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--lilac);
}

/* The menu and close buttons: a 44px lilac circle in the same spot. */
.ts-nav-compact .wp-block-navigation__responsive-container-open,
.ts-nav-compact .wp-block-navigation__responsive-container-close {
	display: grid;
	place-items: center;
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background-color: var(--wp--preset--color--lilac);
	color: var(--wp--preset--color--plum);
}

.ts-nav-compact .wp-block-navigation__responsive-container-open:focus-visible,
.ts-nav-compact .wp-block-navigation__responsive-container-close:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--plum);
	outline-offset: var(--wp--custom--focus--offset);
}

.wp-block-navigation.ts-nav-compact {
	position: static;
}

.wp-block-navigation.ts-nav-compact .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	top: 100%;
	right: 0;
	bottom: auto;
	left: 0;
	padding: 12px var(--wp--preset--spacing--gutter) 8px;
	overflow: visible;
	border-bottom: 1px solid var(--wp--preset--color--line);
	animation: none;
}

/* The close button sits above the panel, so the list scrolls instead. */
.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__responsive-container-content {
	max-height: calc(100dvh - 120px);
	overflow-y: auto;
}

.admin-bar .wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}

.wp-block-navigation.ts-nav-compact .wp-block-navigation__responsive-container-close {
	top: calc(-1 * (12px + var(--ts-header-pad, 12px) + var(--wp--custom--touch-target)));
	right: 0;
}

.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 0;
}

.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
}

.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 12px 14px;
	border-radius: var(--wp--preset--border-radius--sm);
	font-size: 1.0625rem;
}

.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation.ts-nav-compact .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--lilac);
}

.wp-block-navigation.ts-nav-compact .ts-nav-compact__ctas {
	flex-wrap: nowrap;
	padding-top: 8px;
}

.wp-block-navigation.ts-nav-compact .ts-nav-compact__ctas .wp-block-button {
	flex: 1;
	text-align: center;
}

.wp-block-navigation.ts-nav-compact .ts-nav-compact__ctas .wp-block-button__link {
	width: 100%;
}

@media (width <= 640px) {

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation-item__content {
		padding: 12px;
		font-size: 1rem;
	}
}

/*
 * Opening the panel, for visitors who accept motion: it unrolls from under
 * the header bar, the links rise in one after another and the buttons last,
 * and the cross turns into place over the menu button's bars. On closing the
 * bars swing back. Core takes the panel away the moment it closes, and its
 * layout with it, so the panel itself does not animate out.
 */
@media (prefers-reduced-motion: no-preference) {

	/* The cut reaches above the panel: the close button sits up there, over
	   the menu button, and must never be clipped. */
	.wp-block-navigation.ts-nav-compact .wp-block-navigation__responsive-container.is-menu-open {
		animation: ts-menu-unroll 0.45s var(--wp--custom--motion--ease--out-strong) backwards;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li,
	.wp-block-navigation.ts-nav-compact .is-menu-open .ts-nav-compact__ctas {
		animation: ts-menu-rise 0.4s var(--wp--custom--motion--ease--out) calc(0.06s + var(--ts-menu-place, 0) * 0.04s) backwards;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li:nth-child(2) {
		--ts-menu-place: 1;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li:nth-child(3) {
		--ts-menu-place: 2;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li:nth-child(4) {
		--ts-menu-place: 3;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li:nth-child(5) {
		--ts-menu-place: 4;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li:nth-child(6) {
		--ts-menu-place: 5;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li:nth-child(7) {
		--ts-menu-place: 6;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li:nth-child(n + 8),
	.wp-block-navigation.ts-nav-compact .is-menu-open .ts-nav-compact__ctas {
		--ts-menu-place: 7;
	}

	/* Core moves the focus to the first link; from the keyboard that link
	   is there at once, not fading in under the focus ring. Its animation is
	   left alone: taken away, it would play again once the focus moved on. */
	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__container > li:has(:focus-visible) {
		opacity: 1 !important;
		translate: none !important;
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation-item__content {
		transition: background-color var(--wp--custom--motion--duration);
	}

	.wp-block-navigation.ts-nav-compact .is-menu-open .wp-block-navigation__responsive-container-close svg {
		animation: ts-menu-cross 0.4s var(--wp--custom--motion--ease--out-strong) backwards;
	}

	/* The bars wait turned away under the cross, so they swing back into
	   place when the menu closes. */
	.wp-block-navigation.ts-nav-compact .wp-block-navigation__responsive-container-open svg {
		transition:
			rotate 0.4s var(--wp--custom--motion--ease--out-strong),
			opacity 0.2s;
	}

	.wp-block-navigation.ts-nav-compact:has(.is-menu-open) .wp-block-navigation__responsive-container-open svg {
		rotate: 90deg;
		opacity: 0;
		transition: none;
	}
}

@keyframes ts-menu-unroll {

	from {
		clip-path: inset(-80px 0 100% 0);
	}

	to {
		clip-path: inset(-80px 0 0 0);
	}
}

@keyframes ts-menu-rise {

	from {
		opacity: 0;
		translate: 0 12px;
	}
}

@keyframes ts-menu-cross {

	from {
		opacity: 0;
		rotate: -90deg;
		scale: 0.6;
	}
}

/*
 * Filter chips (.ts-nav-chips): 44px pills with a line border, 8px apart; the
 * current filter is plum. Tablets and phones get the design's smaller pills,
 * and on phones the row scrolls sideways instead of wrapping.
 */
.wp-block-navigation.ts-nav-chips {
	gap: 8px;
}

.wp-block-navigation.ts-nav-chips .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: var(--wp--custom--touch-target);
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--white);
	font-size: 1rem;
	font-weight: 700;
}

/* Event type icon, added by the plugin. */
.wp-block-navigation.ts-nav-chips .wp-block-navigation-item__content svg {
	flex: none;
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

.wp-block-navigation.ts-nav-chips .wp-block-navigation-item__content:hover {
	border-color: var(--wp--preset--color--saffron);
}

.wp-block-navigation.ts-nav-chips .current-menu-item > .wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--plum);
	background-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--white);
}

@media (width <= 1100px) {

	.wp-block-navigation.ts-nav-chips .wp-block-navigation-item__content {
		gap: 6px;
		padding: 10px 16px;
		font-size: 0.9375rem;
	}

	.wp-block-navigation.ts-nav-chips .wp-block-navigation-item__content svg {
		width: 18px;
		height: 18px;
	}
}

/*
 * Phones: one row from edge to edge of the screen. The side padding is the
 * page gutter the row gives up; the 4px above and below keep a focus ring
 * inside the scroll box, which would cut it off.
 */
@media (width <= 640px) {

	nav.wp-block-navigation.ts-nav-chips {
		flex: none;
		width: calc(100% + 2 * var(--wp--preset--spacing--gutter));
		margin-inline: calc(-1 * var(--wp--preset--spacing--gutter));
	}

	.wp-block-navigation.ts-nav-chips .wp-block-navigation__container {
		flex: 1;
		flex-wrap: nowrap;
		margin-block: -4px;
		padding: 4px var(--wp--preset--spacing--gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.wp-block-navigation.ts-nav-chips .wp-block-navigation-item {
		flex: none;
	}

	.wp-block-navigation.ts-nav-chips .wp-block-navigation-item__content {
		padding: 10px 14px;
		font-size: 0.875rem;
	}
}