/**
 * Mobile navigation overlay — editorial panel (max-width 782px).
 * Bar chrome stays in style.css; open menu only here.
 */

@media (max-width: 782px) {
	@keyframes studio-mobile-nav-fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes studio-mobile-nav-rise {
		from {
			opacity: 0;
			transform: translateY(0.65rem);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Full-screen ink panel (overrides WP default white sheet) */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		--studio-nav-ink: #0e1a1f;
		--studio-nav-glow: rgba(61, 122, 140, 0.45);
		background: linear-gradient(
			155deg,
			#0a0a0a 0%,
			var(--studio-nav-ink) 38%,
			#163640 72%,
			#1a4a56 100%
		) !important;
		color: #ececec !important;
		animation: studio-mobile-nav-fade 0.22s ease-out both;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open::before {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(ellipse 90% 55% at 100% 100%, var(--studio-nav-glow), transparent 58%),
			radial-gradient(ellipse 70% 45% at 0% 0%, rgba(44, 95, 110, 0.2), transparent 50%);
		opacity: 0.9;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open::after {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		opacity: 0.05;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
	}

	/* Close control — 44×44px touch target */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
		right: max(calc(var(--wp--style--root--padding-right, 1.5rem) - 0.35rem), env(safe-area-inset-right, 0px)) !important;
		z-index: 3;
		min-width: 2.75rem !important;
		min-height: 2.75rem !important;
		padding: 0.625rem !important;
		color: rgba(236, 236, 236, 0.85) !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 1.25rem !important;
		height: 1.25rem !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
		color: #fff !important;
	}

	/* Menu body */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: var(--studio-wide-size, 1200px);
		margin-inline: auto;
		padding: calc(3.25rem + env(safe-area-inset-top, 0px))
			max(var(--wp--style--root--padding-right, 1.5rem), env(safe-area-inset-right, 0px))
			max(2.5rem, env(safe-area-inset-bottom, 0px))
			max(var(--wp--style--root--padding-left, 1.5rem), env(safe-area-inset-left, 0px)) !important;
		gap: 0 !important;
		justify-content: flex-end !important;
		min-height: 100dvh;
		box-sizing: border-box;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
		content: 'Navigate';
		display: block;
		font-family: var(--wp--preset--font-family--sans);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--studio-teal-light, #3d7a8c);
		margin-bottom: 1.75rem;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		counter-reset: studio-mobile-nav;
		width: 100%;
		gap: 0 !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		counter-increment: studio-mobile-nav;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		animation: studio-mobile-nav-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) {
		animation-delay: 0.06s;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) {
		animation-delay: 0.11s;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) {
		animation-delay: 0.16s;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) {
		animation-delay: 0.21s;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex !important;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 1rem;
		row-gap: 0.3rem;
		width: 100%;
		padding: 1.1rem 0 1.15rem !important;
		font-family: var(--wp--preset--font-family--serif) !important;
		font-size: clamp(2rem, 9vw, 2.65rem) !important;
		font-weight: 300 !important;
		line-height: 1.05 !important;
		letter-spacing: -0.02em;
		color: rgba(250, 249, 247, 0.94) !important;
		text-decoration: none !important;
		transition: color 0.15s ease, padding-inline-start 0.2s ease;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
		content: counter(studio-mobile-nav, decimal-leading-zero);
		flex: 0 0 auto;
		font-family: var(--wp--preset--font-family--sans);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		color: var(--studio-teal-light, #3d7a8c);
		line-height: 1.4;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
		flex: 1 1 auto;
	}

	/* Lane descriptors — proof-type hint under each link */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		flex: 0 0 100%;
		font-family: var(--wp--preset--font-family--sans);
		font-size: 0.8125rem;
		font-weight: 400;
		line-height: 1.35;
		color: rgba(236, 236, 236, 0.48);
		letter-spacing: 0.01em;
	}

	.site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content[href$='/work/']::after {
		content: 'Healthcare · Security · Civic';
	}

	.site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content[href$='/projects/']::after {
		content: 'Shipped & in progress';
	}

	.site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content[href$='/essays/']::after {
		content: 'Argument threads';
	}

	.site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content[href$='/about/']::after {
		content: 'Practice & bio';
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		color: #fff !important;
		padding-inline-start: 0.35rem !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after,
	.site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:focus-visible::after {
		color: rgba(236, 236, 236, 0.62);
	}

	.site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.current-menu-item
		.wp-block-navigation-item__content {
		color: #fff !important;
	}

	.site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.current-menu-item
		.wp-block-navigation-item__content::before {
		color: #8ec4d4;
	}

	@media (prefers-reduced-motion: reduce) {
		.site-header .wp-block-navigation__responsive-container.is-menu-open,
		.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
			animation: none;
		}
	}
}