/**
 * The header menu.
 *
 * Replaces core's navigation block, so this carries both the desktop row and the
 * mobile panel core used to provide. The theme's existing header rules that keyed
 * on `.wp-block-navigation` are mirrored onto `.tc-nav` in the theme's blocks.css —
 * appearance that belongs to the design stays with the design; the mechanics are
 * here.
 */

.tc-nav {
	display: flex;
	align-items: center;
}

.tc-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-nav__list li {
	margin: 0;
}

.tc-nav__list a {
	color: inherit;
	text-decoration: none;
	/* Matches the mockups: 关于 STAR TRIP and the rest are letter-spaced. */
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--medium, 1rem);
}

.tc-nav__list a:hover,
.tc-nav__list a:focus-visible {
	text-decoration: underline;
}

/* The page being viewed, marked by weight and nothing else — no colour change.
   WordPress puts these classes on the <li>, and Polylang sets them correctly
   within each language's own menu. */
.tc-nav__list .current-menu-item > a,
.tc-nav__list .current_page_item > a,
.tc-nav__list .current-menu-ancestor > a {
	font-weight: 700;
}

/* ---- Submenus (depth 2) -------------------------------------------------- */
.tc-nav__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.tc-nav__list > li {
		position: relative;
	}

	.tc-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		display: none;
		min-width: 12rem;
		padding: 0.5rem 0;
		border-radius: 6px;
		background: #fff;
		box-shadow: 0 8px 24px rgba(29, 54, 83, 0.14);
	}

	.tc-nav__list .sub-menu a {
		display: block;
		padding: 0.45rem 1rem;
		color: var(--wp--preset--color--primary, #1D3653);
	}

	/* focus-within as well as hover, or the submenu is unreachable by keyboard. */
	.tc-nav__list > li:hover > .sub-menu,
	.tc-nav__list > li:focus-within > .sub-menu {
		display: block;
	}

	/* No panel above the breakpoint. */
	.tc-nav__toggle,
	.tc-nav__close {
		display: none;
	}
}

/* ---- Mobile panel -------------------------------------------------------- */
/* The breakpoint is repeated in nav-menu.js, which cannot read this file. */
@media (max-width: 899px) {
	.tc-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.tc-nav__panel {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: calc(var(--wp--preset--spacing--80, 4rem) + 1rem) var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--50, 1.5rem);
		overflow-y: auto;
		background: var(--wp--preset--color--primary, #1D3653);
		color: #fff;

		/* Hidden so it cannot be reached, rather than merely moved off-screen: a
		   panel that is only translated away still takes Tab focus, and the
		   keyboard walks through an invisible menu. `visibility` is animatable and
		   `display` is not, which is why both are here. */
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5rem);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}

	.tc-nav.is-open .tc-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.tc-nav__close {
		position: absolute;
		top: var(--wp--preset--spacing--50, 1.5rem);
		right: var(--wp--preset--spacing--50, 1.5rem);
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.tc-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.tc-nav__list a {
		display: block;
		padding: 0.85rem 0;
		font-size: var(--wp--preset--font-size--large, 1.25rem);
		color: #fff;
	}

	.tc-nav__list .sub-menu a {
		padding-left: 1rem;
		font-size: var(--wp--preset--font-size--medium, 1rem);
		opacity: 0.85;
	}
}

/* The page behind must not scroll while the panel is open. On the <html> element
   rather than <body>: iOS Safari ignores overflow:hidden on body often enough that
   the trick is not worth relying on. */
.tc-nav-locked {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.tc-nav__panel {
		transition: none;
	}
}

/* Shared with the rest of the theme, repeated here so the block's own stylesheet is
   self-sufficient — the labels inside the two icon buttons are the only text these
   buttons have. */
.tc-nav .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}