/**
 * Mobile navigation (<=1024): full-viewport panel with second-level panels.
 * Replaces the placeholder reduced header from the responsive pass.
 *
 * The panel is inset like the bands and the header row sits ON TOP of it, so
 * the row never moves between the closed and open states. ONE panel serves
 * both header shells (see inc/header.php): it cannot live inside them,
 * because the transformed compact bar would become the containing block for
 * a fixed child.
 */

/* Desktop: nothing here exists. */
.site-header__burger,
.mobile-nav {
	display: none;
}

@media (max-width: 1024px) {
	/* The pill sits at the page inset here rather than 22px down, so it lines
	   up with the panel and the bands; the static-bar body padding follows. */
	:root {
		--header-bar-offset: 6px;
	}

	/* ------------------------------------------------------------------
	 * Header row at this width: nav, language and CTA move into the panel
	 * ------------------------------------------------------------------ */

	.site-header__nav {
		display: none;
	}

	/* 16px inside the panel inset, so the row sits in the same place open or
	   closed and the pill aligns with the panel edge.
	   The overlay shell is positioned at top: var(--page-inset), so like its
	   desktop rule this declares the VIEWPORT-EDGE target minus the inset:
	   16 - 6 = 10 puts the logo 16px from the top, matching the subpage header
	   and matching --container-pad at this width. The bar shell keeps a flat
	   16px because its own margin-top already carries the inset. */
	.site-header--top .site-header__shell {
		padding-top: calc(16px - var(--page-inset));
	}

	.site-header--bar .site-header__shell {
		padding-top: 16px;
	}

	.site-header--bar .site-header__shell {
		margin-top: var(--page-inset);
	}

	.site-header__row {
		padding-inline: 16px;
	}

	/* The row spans the whole shell here, so the pill skin can only grow
	   vertically without pushing its corners off screen. */
	.site-header--bar .site-header__row::before {
		inset: -16px 0;
	}

	.site-header__burger {
		position: relative;
		z-index: 2; /* above the panel surface */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px; /* optical: the icon aligns with the row edge */
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		color: var(--color-heading-text-on-dark);
	}

	.site-header__burger-box {
		position: relative;
		display: block;
		width: 24px;
		height: 14px;
	}

	/* Two lines that rotate and converge: a real morph, reversible mid-flight
	   because it is a transition rather than an icon swap. */
	.site-header__burger-line {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: currentColor;
		transition: transform 400ms var(--motion-ease-interaction);
	}

	.site-header__burger-line:first-child {
		top: 0;
		transform: translateY(0) rotate(0deg);
	}

	.site-header__burger-line:last-child {
		bottom: 0;
		transform: translateY(0) rotate(0deg);
	}

	.site-header__burger[aria-expanded="true"] .site-header__burger-line:first-child {
		transform: translateY(6px) rotate(45deg);
	}

	.site-header__burger[aria-expanded="true"] .site-header__burger-line:last-child {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* The bar's visibility is driven by scroll position, and the body lock
	   resets scrollY to 0, which would slide the pill away the instant the
	   menu opens and leave the panel with no row, no logo and no close
	   control. While the menu is open its shell is pinned regardless. */
	.site-header--bar.is-mobile-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	/* Opening recolors the bar exactly as the desktop megamenu does: the dark
	   glass pill can never sit over the light panel. */
	.site-header--bar.is-mobile-open .site-header__row::before {
		opacity: 0;
	}

	/* Open: the row sits on the light panel, so its ink flips. The subpage
	   variant is on the light page background from the start, so it takes the
	   same ink without waiting for the panel to open. */
	.site-header.is-mobile-open .site-header__burger,
	.site-header.is-mobile-open .site-header__logo,
	.site-header--page .site-header__burger {
		color: var(--color-heading-text);
	}

	/* ------------------------------------------------------------------
	 * The panel
	 * ------------------------------------------------------------------ */

	/* [hidden] is a UA rule at element specificity, so the class below would
	   otherwise win and leave an invisible full-screen panel intercepting
	   every click on the page while the menu is closed. */
	.mobile-nav[hidden] {
		display: none;
	}

	.mobile-nav {
		/* Set by the JS from whichever header row is on screen; the fallback
		   covers the top shell (16px pad + 53px logo + the 6px page inset). */
		--mobile-row-bottom: 75px;
		position: fixed;
		inset: 0; /* full bleed by ruling: no page inset, no radius */
		z-index: 95; /* above the page, below both header shells */
		display: flex;
		flex-direction: column;
		background-color: var(--color-page-bg);
		pointer-events: auto;
		opacity: 0;
		transform: translateY(-12px);
		transition:
			opacity 300ms var(--motion-ease),
			transform 300ms var(--motion-ease);
	}

	.mobile-nav.is-open {
		opacity: 1;
		transform: translateY(0);
		transition-duration: 450ms;
	}

	/* One clipped track holding BOTH levels, each absolutely positioned and
	   always laid out. Nothing is display-toggled: hiding a level mid-flight
	   cancels its transition, which is what made the old version jump. Each
	   level scrolls internally, so a transform is never applied to the same
	   element that scrolls. Visibility is delayed by the duration on the way
	   out, so an interrupted tap simply reverses. */
	.mobile-nav__levels {
		position: relative;
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}

	.mobile-nav__level {
		position: absolute;
		inset: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: calc(var(--mobile-row-bottom) + 32px) 16px 16px;
		visibility: hidden;
		transition:
			transform 450ms var(--motion-ease),
			opacity 450ms var(--motion-ease),
			visibility 0s linear 450ms;
	}

	/* Level 1 holds the track until a child takes over, then steps aside by a
	   short distance rather than clearing the screen. */
	.mobile-nav__level--root {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
		transition:
			transform 450ms var(--motion-ease),
			opacity 450ms var(--motion-ease),
			visibility 0s;
	}

	.mobile-nav__levels.has-child .mobile-nav__level--root {
		transform: translateX(-15%);
		opacity: 0;
		visibility: hidden;
		transition:
			transform 450ms var(--motion-ease),
			opacity 450ms var(--motion-ease),
			visibility 0s linear 450ms;
	}

	.mobile-nav__level--child {
		transform: translateX(100%);
		opacity: 0;
	}

	.mobile-nav__level--child.is-active {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
		transition:
			transform 450ms var(--motion-ease),
			opacity 450ms var(--motion-ease),
			visibility 0s;
	}

	/* ------------------------------------------------------------------
	 * Rows
	 * ------------------------------------------------------------------ */

	.mobile-nav__list {
		list-style: none;
		padding: 0;
	}

	/* Square separators: nothing here carries a radius, so a border is safe. */
	.mobile-nav__item + .mobile-nav__item {
		border-top: 1px solid var(--color-border-subtle);
	}

	.mobile-nav__row {
		display: block;
		width: 100%;
		min-height: 56px;
		padding: 12px 0;
		border: 0;
		background: none;
		text-align: left;
		text-decoration: none;
		color: inherit;
		cursor: pointer;
	}

	/* The mask and riser are the word-reveal machinery, retimed for menu
	   rows: 400ms each, 40ms apart, released when the level is revealed. */
	.mobile-nav .text-reveal__mask {
		display: block;
		overflow: hidden;
	}

	.mobile-nav .text-reveal__word {
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		opacity: 0;
		transform: translateY(110%);
		transition:
			transform 400ms var(--motion-ease),
			opacity 400ms var(--motion-ease);
		transition-delay: calc(var(--word-index, 0) * 40ms);
	}

	.mobile-nav__level.is-revealed .text-reveal__word {
		opacity: 1;
		transform: translateY(0);
	}

	.mobile-nav__index {
		flex-shrink: 0;
		color: var(--color-text-secondary);
	}

	.mobile-nav__label {
		font-family: var(--font-heading);
		font-size: 1.75rem; /* 28px */
		line-height: normal;
		font-weight: 600;
		color: var(--color-heading-text);
	}

	.mobile-nav__chevron {
		margin-left: auto;
		flex-shrink: 0;
		color: var(--color-text-secondary);
	}

	/* ------------------------------------------------------------------
	 * Second level
	 * ------------------------------------------------------------------ */

	.mobile-nav__back {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		color: var(--color-text-secondary);
		text-transform: uppercase;
	}

	.mobile-nav__headline {
		margin-top: 24px; /* leads the panel now that the eyebrow is gone */
		font-family: var(--font-heading);
		font-size: var(--type-h3-size);
		line-height: var(--type-h3-line);
		font-weight: var(--type-h3-weight);
		color: var(--color-heading-text);
	}

	.mobile-nav__overview {
		margin-top: 24px;
	}

	.mobile-nav__list--children {
		margin-top: 32px;
	}

	.mobile-nav__row--child .text-reveal__word {
		align-items: flex-start;
	}

	.mobile-nav__child-body {
		display: block;
	}

	.mobile-nav__child-title {
		display: block;
		font-family: var(--font-body);
		font-size: 1.25rem; /* 20px */
		line-height: normal;
		font-weight: 500;
		color: var(--color-heading-text);
	}

	.mobile-nav__child-desc {
		display: block;
		margin-top: 4px;
		font-size: 0.8125rem; /* 13px */
		line-height: normal;
		color: var(--color-text-secondary);
	}

	/* ------------------------------------------------------------------
	 * Pinned bottom bar
	 * ------------------------------------------------------------------ */

	.mobile-nav__bottom {
		flex-shrink: 0;
		padding: 16px;
		border-top: 1px solid var(--color-border-subtle);
		background-color: var(--color-page-bg); /* content scrolls behind it */
	}

	.mobile-nav__actions {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.mobile-nav__actions .site-header__lang {
		flex-shrink: 0;
	}

	.mobile-nav__actions .site-header__lang-item,
	.mobile-nav__actions .site-header__lang-sep {
		color: var(--color-text-secondary);
	}

	.mobile-nav__actions .site-header__lang-item.is-current {
		color: var(--color-heading-text);
	}

	.mobile-nav__actions .btn-primary {
		flex: 1;
		justify-content: space-between;
	}


	/* Body lock while the panel is open. */
	body.has-mobile-nav-open {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}
}

/* Reduced motion: states are instant, nothing slides or staggers. The global
   stub already zeroes durations and delays; these rules remove the offsets so
   there is nothing to jump from. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	.mobile-nav {
		transform: none;
	}

	.mobile-nav .text-reveal__word {
		transform: none;
		opacity: 1;
	}

	.mobile-nav__levels.has-child .mobile-nav__level--root {
		transform: none;
	}

	.mobile-nav__level--child,
	.mobile-nav__level--child.is-active {
		transform: none;
	}
}