/*!
 * Hauteur — Navigation block
 *
 * No icons and no pseudo-elements. A parent item is recognised by a short
 * brass/gold rule under its label; the rule grows to full width when the
 * submenu opens (and on hover on large screens).
 *
 * 1. Large screens: hairline dropdown panels.
 * 2. Small screens: full-screen overlay where every parent is an accordion,
 *    folded by default (core unfolds everything in its overlay).
 *
 * State of a submenu is always read from aria-expanded on the parent's
 * trigger (set by core on click-mode buttons, by navigation.js on links) or
 * from the .is-open class used for touch devices.
 */

:root {
	interpolate-size: allow-keywords; /* lets height: 0 -> auto animate where supported */
	--hauteur-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
	--hauteur-hairline: color-mix(in srgb, var(--wp--preset--color--gold) 30%, transparent);
}

.wp-block-navigation a:focus-visible,
.wp-block-navigation button:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* No chevrons, whatever the menu settings say. Hidden = not a tab stop either. */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-icon {
	display: none;
}

.wp-block-navigation .wp-block-navigation-item.open-on-click > .wp-block-navigation-submenu__toggle {
	padding-inline-end: 0;
}

/* Click-mode parents are <button>s: make them look like the links around them. */
.wp-block-navigation button.wp-block-navigation-item__content {
	background-color: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.wp-block-navigation-item.has-child > a.wp-block-navigation-item__content:not([href]),
.wp-block-navigation-item.has-child > a.wp-block-navigation-item__content[href="#"] {
	cursor: pointer;
}

/* ==========================================================================
   1. Large screens
   ========================================================================== */

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	gap: 0.5rem 2.75rem;
}

/* Top-level labels carry a rule under them: short on parents, none on others. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-block: 0.45rem;
	background-image: linear-gradient(var(--wp--preset--color--brass), var(--wp--preset--color--brass));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 1px;
	transition: background-size 0.5s var(--hauteur-ease);
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	background-size: 1.1rem 1px;
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.has-child:is(.is-open, :focus-within) > .wp-block-navigation-item__content {
	background-size: 100% 1px;
}

/* Dropdown panel. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container {
	min-width: 16rem;
	padding: 0.75rem 0;
	background-color: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--ink);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 60%, transparent);
	box-shadow: 0 22px 44px -28px rgb(15 14 13 / 0.4);
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Keyboard and touch: open on focus within, or when navigation.js marks it open. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:is(.is-open, :focus-within, :has(> [aria-expanded="true"])) > .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	overflow: visible;
	width: auto;
	height: auto;
}

/* Escape dismisses the dropdown even while focus is still inside it. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child.is-dismissed > .wp-block-navigation__submenu-container {
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
	width: 0;
	height: 0;
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0.75rem 1.75rem;
	transition: color 0.25s ease, background-color 0.25s ease, padding-inline-start 0.4s var(--hauteur-ease);
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	padding-inline-start: 2.15rem;
	background-color: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--brass);
}

/* Focus ring on the light panel needs a darker colour than the gold used on ink. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a:focus-visible {
	outline-color: var(--wp--preset--color--brass);
	outline-offset: -3px;
}

/* ==========================================================================
   2. Small screens: the button, and the overlay
   ========================================================================== */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.6rem;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
}

.wp-block-navigation__responsive-container-close {
	transition: transform 0.5s var(--hauteur-ease);
}

.wp-block-navigation__responsive-container-close:hover {
	transform: rotate(90deg);
}

/* Overlay frame. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 38rem;
	margin-inline: auto;
	padding-top: clamp(4.5rem, 12vh, 7rem);
	align-items: stretch;
	text-align: start;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}

/* Top-level rows: a hairline between each, big serif type. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--hauteur-hairline);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.9rem, 7.5vw, 2.75rem);
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.15;
	text-transform: none;
	padding-block: 0.85rem;
	transition: color 0.4s ease;
}

/*
 * The signal: a gold rule over the row's hairline. Short on a parent (there
 * is more inside), full width once opened. Core forces "background: ... !important"
 * on overlay items, hence the !important here.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child {
	flex-direction: column;
	flex-wrap: nowrap;
	background-image: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)) !important;
	background-repeat: no-repeat !important;
	background-position: left bottom !important;
	background-origin: border-box !important;
	background-size: 2.25rem 1px !important;
	transition: background-size 0.6s var(--hauteur-ease);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child:is(.is-open, :has(> [aria-expanded="true"])) {
	background-size: 100% 1px !important;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child:is(.is-open, :has(> [aria-expanded="true"])) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}

/* Every row reads from the left, leaves and parents alike. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	width: 100%;
	text-align: start;
}

/* Submenu: folded by default. Core unfolds it; we fold it back. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	gap: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden; /* folded links must not be reachable with Tab */
	transition: height 0.5s var(--hauteur-ease), opacity 0.3s ease, visibility 0s linear 0.5s;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:is(.is-open, :has(> [aria-expanded="true"])) > .wp-block-navigation__submenu-container {
	height: auto;
	opacity: 1;
	visibility: visible;
	transition: height 0.5s var(--hauteur-ease), opacity 0.5s ease 0.1s, visibility 0s;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child {
	margin-top: 0.15rem;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
	margin-bottom: 1.1rem;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 0.8rem 0 0.8rem 1rem;
	color: color-mix(in srgb, currentColor 78%, transparent);
	transition: color 0.25s ease, padding-inline-start 0.4s var(--hauteur-ease);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	padding-inline-start: 1.5rem;
	color: var(--wp--preset--color--gold);
}

/* The opening: rows rise in one after the other. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes hauteur-rise {
		from {
			opacity: 0;
			transform: translateY(14px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		animation: hauteur-rise 0.7s var(--hauteur-ease) both;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.06s; }
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.12s; }
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.18s; }
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.24s; }
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.3s; }
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.36s; }
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+7) { animation-delay: 0.42s; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation__responsive-container-close,
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open * {
		transition-duration: 0.01ms !important;
	}
}