/* Header: sticky + translucent. Not expressible via theme.json/block settings
   (position:sticky + backdrop-filter). Tokens still come from theme.json.
   The blur lives on a ::before pseudo, NOT the header element: backdrop-filter
   creates a containing block for position:fixed descendants, which otherwise
   traps the mobile nav overlay inside the header bounds instead of the viewport. */
.wb-header.has-background {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: transparent;
}
.wb-header.has-background::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Translucent paper so content blurs through on scroll. */
	background-color: color-mix(in srgb, var(--wp--preset--color--paper) 86%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
}

/* Nav links: ink at rest, clay on hover/current (design spec). */
.wb-header .wp-block-navigation a:hover,
.wb-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--clay);
}

/* Sub-navigation dropdown (DESKTOP only): match the site's card surface —
   rounded, soft shadow, hairline border — all from tokens so it flips in dark
   mode. Scoped to the inline desktop nav so it doesn't turn the mobile
   overlay's inline submenus into floating cards. */
@media (min-width: 600px) {
	.wb-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--card);
		color: var(--wp--preset--color--ink);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 12px; /* matches card radius (subscribe/biz cards) */
		box-shadow: var(--wp--preset--shadow--lg);
	}
}

/* === Mobile header + overlay ===
   Selectors here mirror WordPress core's own overlay selector depth and are
   scoped under .wb-header, so they out-specify core's defaults on their own —
   no !important. (Core keeps its overlay rules low with :where(), but several
   still land at 4 classes; ours sit one class above them.) */

/* Closed mobile header: the desktop nav links give the header its height via
   their spacing--50 padding; on mobile they collapse to the hamburger, so add
   that breathing room here. Padding goes on the inner row group (not .wb-header)
   because the header group carries a stale inline spacing token from the scale
   refactor — padding a clean element sidesteps it without !important. */
@media (max-width: 600px) {
	.wb-header > .wp-block-group {
		padding-block: var(--wp--preset--spacing--50);
	}
}

/* Keep the header above page content; raise the logo above the open overlay
   (but below the close button at 100002) so it stays visible when open. */
.wb-header.has-background {
	z-index: 100001; /* sticky header above page content */
}
.wb-header .wp-block-site-logo {
	position: relative;
	z-index: 100001;
}
/* Overlay surface: theme-aware paper/ink. Core forces white/black via
   .wp-block-navigation:not(.has-background|has-text-color) ...is-menu-open
   (0,4,0); mirroring that path under .wb-header lands at (0,5,0) and wins. */
.wb-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--paper);
}
.wb-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
	color: var(--wp--preset--color--ink);
}

/* Close (X) sits exactly where the hamburger does: the header's vertical
   padding (+4px to optically center the 24px icon in the ~32px logo row) and the
   root-padding inset on the right. Keeps the toggle from jumping between states. */
.wb-header .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc(var(--wp--preset--spacing--50) + 4px);
	/* the hamburger's right edge sits at root padding (spacing--50) + the nav's
	   own inset (spacing--40) from the viewport edge — match it exactly so the
	   icon doesn't shift left when the menu opens. */
	right: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--40));
	z-index: 100002;
	color: var(--wp--preset--color--ink);
}
/* The admin bar pushes the sticky header (and hamburger) down 46px on mobile;
   match it so the X still lands on the hamburger when logged in. */
.admin-bar .wb-header .wp-block-navigation__responsive-container-close {
	top: calc(var(--wp--preset--spacing--50) + 4px + 46px);
}

/* Open menu = one even, full-width list. Clear the sticky header first, then
   uniform tappable rows (all spacing on the anchor) each closed by a full-width
   hairline, so parents and children share a single rhythm. Every selector below
   mirrors core's overlay path (responsive-container.is-menu-open > ...-content >
   ...) under .wb-header, sitting one class above core's (0,4,0) rules — so they
   win on specificity, no !important. */
.wb-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	/* clear the ~81px sticky header (logo) before row 1 (+admin bar below) */
	padding-block-start: var(--wp--preset--spacing--80);
	padding-inline: var(--wp--preset--spacing--50);
}
.admin-bar .wb-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-block-start: calc(var(--wp--preset--spacing--80) + 46px);
}
/* No inter-item gap at any level — rows are separated by padding + the divider. */
.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	gap: 0;
}
/* Full-width, left-aligned rows (override the desktop nav's right-justify leak). */
.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	width: 100%;
	align-items: stretch;
	justify-content: flex-start;
	text-align: left;
}
/* Submenu sits flush under its parent — drop core's leading pad + fixed width. */
.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	padding: 0;
	margin: 0;
	width: 100%;
	min-width: 0;
}
/* Every row is exactly 100% of the container (border-box so padding stays
   inside that width) with the same vertical padding (~46px, tappable) and a
   full-width hairline. Horizontal padding is zeroed so the divider spans edge to
   edge identically for every row — sub-rows get their indent from left padding
   alone (below), which lives inside the 100% width and never widens the row. */
.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: 0;
	font-size: var(--wp--preset--font-size--medium);
	border-block-end: 1px solid var(--wp--preset--color--line);
}
/* Sub-items: indent the text with left padding only — the row/divider stay full
   width because the box is border-box. */
.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-inline-start: var(--wp--preset--spacing--40);
}