/* Navigation. Core's defaults are sized for a menu of one-word labels; this
   site has labels like "Pre-opening and mobilisation". */

.wp-block-navigation {
	--navigation-layout-gap: 28px;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 6px;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-submenu__toggle {
	padding-inline-end: 4px;
}

/* Submenus size to their content with a sane ceiling. Core defaults to a
   narrow fixed width, which wraps the longer labels onto three lines.
   Depth comes from the ground, so the shadow takes the ink hue, not black. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: none;
	border-radius: var(--wp--custom--radius--card);
	padding: 10px;
	min-width: max-content;
	max-width: 340px;
	width: auto;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 12px 34px -18px rgba(12, 43, 39, 0.4);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 12px;
	border-radius: var(--wp--custom--radius--chip);
	white-space: nowrap;
	width: 100%;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--mist);
}

/* A submenu of a submenu should never fly off-screen on the right. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	inset-inline-start: 100%;
	inset-block-start: 0;
}

/* ---------------------------------------------------------------------------
   Where the bar gives way to the overlay

   Core hands over at 600px. This menu cannot hold a bar that narrow, or much
   wider: eight top level items, two of them carrying a submenu arrow, labels
   as long as "The method" and "Resources", a Contact pill, and a site title of
   twenty five characters beside them. That measures out at roughly 1050px of
   content, so anywhere below about 1150px the items wrap under themselves and
   the header grows to three lines.

   The overlay therefore runs up to 1023px, and the band above it takes a
   tighter gap and a smaller label so the bar has room before it has to wrap.
   Both rules match the weight of the core rule they replace and sit after it
   in the cascade, which is what decides them.
   ------------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (max-width: 1200px) {
	.ca-nav {
		gap: 18px;
	}

	.ca-nav .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--small);
	}

	.ca-nav .ca-nav-cta > .wp-block-navigation-item__content {
		padding-inline: 15px;
	}
}

/*
 * Above 600px core paints an unstyled overlay white on black, on the
 * assumption that a menu open at that width has no overlay colours of its own.
 * This one does, they are set on the block, and the ground is bone rather than
 * white. Pure black is also the one colour this design never uses.
 */
@media (min-width: 600px) {
	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background-color: var(--wp--preset--color--base);
	}

	.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		color: var(--wp--preset--color--contrast);
	}
}

/* ---------------------------------------------------------------------------
   Mobile overlay

   Every selector below repeats .is-menu-open, and that is not a typo.

   Core guards its own overlay rules with :not(.disable-default-overlay). It
   reads as a no-op, because nothing here carries that class, but it counts as
   a class for specificity, so the shipped declarations sit three and four
   deep. The one class versions of the padding, the content offset and the
   submenu indent were all written in this file already and none of them ever
   reached the page. A stylesheet cannot out-order a rule it cannot outrank, so
   the weight has to be matched deliberately.
   ------------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--30) clamp(22px, 4vw, 64px) var(--wp--preset--spacing--70);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding-block-start: var(--wp--preset--spacing--60);
}

/*
 * The overlay reads from the left, whatever the bar does.
 *
 * Core hands the overlay the bar's own justification. This menu is right
 * justified in the header, so --navigation-layout-justification-setting
 * resolves to flex-end and the full screen menu arrives with every item pushed
 * against the right edge, sitting under the close button, with the submenu
 * indent falling away from the side it should be measured from. A vertical
 * list of links reads from the left.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	align-items: flex-start;
	text-align: start;
}

/*
 * Rhythm comes from the rows, not from a gap.
 *
 * Core strips the padding off every link in the overlay and spaces the list
 * with the block gap instead, which leaves eight 24px targets floating in
 * whitespace. Padding on the link makes each row a full width tap target of
 * the height a thumb expects, and a hairline between rows says list rather
 * than pile.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-block-start: var(--wp--custom--rule);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:first-child {
	border-block-start: none;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 13px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}

/*
 * A submenu in the overlay is a child list, not a floating panel. It drops the
 * card treatment the bar version needs, indents from the start edge, and lets
 * a label as long as "Pre-opening and mobilisation" wrap instead of running
 * off the screen.
 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	max-width: none;
	gap: 0;
	padding: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 9px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	white-space: normal;
	color: var(--wp--preset--color--muted);
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

/*
 * Both toggles are a 24px glyph, which is a small target for a thumb. The
 * padding takes the hit area to 44px and the matching negative margin keeps
 * the glyph optically where it was.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}

/* ---------------------------------------------------------------------------
   The Contact item as the bar's call to action
   ------------------------------------------------------------------------- */

/*
 * This replaces the separate "Work with me" pill, which pointed at the same
 * page as the Contact item beside it. One destination, one control, and the
 * word people actually scan for.
 */
.wp-block-navigation .ca-nav-cta > .wp-block-navigation-item__content {
	padding: 9px 20px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	transition: background-color var(--wp--custom--transition--tap);
}

.wp-block-navigation .ca-nav-cta > .wp-block-navigation-item__content:hover,
.wp-block-navigation .ca-nav-cta > .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

/*
 * In the overlay the items are already display sized and full width, so a pill
 * around one of them reads as a stray button rather than emphasis.
 */
.wp-block-navigation__responsive-container.is-menu-open .ca-nav-cta > .wp-block-navigation-item__content {
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--accent);
}