/**
 * Openstream — Mobile Burger Menu enhancements
 *
 * Builds on the core Navigation block's responsive overlay (the burger menu
 * that appears below 600px). We do NOT change the block markup; everything here
 * targets core's own classes:
 *
 *   .wp-block-navigation__responsive-container-open   the hamburger toggle
 *   .wp-block-navigation__responsive-container-close  the X toggle (inside overlay)
 *   .wp-block-navigation__responsive-container         the overlay container
 *   .is-menu-open / body.has-modal-open                open state
 *
 * What we add:
 *   1. Burger → X morph — both toggles share the same fixed spot and draw their
 *      icon with CSS bars, so swapping open↔close reads as a morph.
 *   2. Flyout — the overlay panel slides in from the right; menu items glide in
 *      staggered.
 *   3. Bigger typography for links and the search field.
 *   4. The Openstream claim pinned to the bottom of the overlay (injected by
 *      mobile-menu.js).
 *
 * Scoped to the mobile overlay only (max-width: 599.98px, matching core's
 * min-width:600px breakpoint), so the desktop header is untouched.
 */

@media (max-width: 599.98px) {

	/* ---------------------------------------------------------------------
	 * 1. Burger / X toggle — draw our own bars, morph between states
	 * ------------------------------------------------------------------- */

	/* Hide core's SVG icons; we draw the icon ourselves. */
	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-close svg {
		display: none;
	}

	/* Common frame for both toggles: a fixed 24px box that hosts the bars.
	 * The open button lives in the header flow; the close button is placed
	 * fixed by core inside the overlay. We give both the same visual box so
	 * the icon appears to stay in place while morphing. */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		width: 2.75rem;
		height: 2.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: currentColor;
	}

	/* Pin BOTH toggles to the exact same viewport spot (top-right), so the X
	 * lands precisely where the burger was — the morph stays anchored. The
	 * right offset mirrors the header's horizontal padding (spacing-50); the
	 * top offset sits just below the status bar (spacing-30). Fixed positioning
	 * makes this page-independent (the burger's in-flow top otherwise varies
	 * with header height). */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		position: fixed;
		top: var( --wp--preset--spacing--30, 20px );
		right: clamp( 30px, 5vw, 50px );
		left: auto;
		bottom: auto;
		margin: 0;
		z-index: 100;
	}

	/* Suppress the focus outline that "sticks" after a touch tap on the burger
	 * and the X (Twenty Twenty-Five draws a 3px outline on :focus). Keyboard
	 * users still get a visible focus ring via :focus-visible. */
	.wp-block-navigation__responsive-container-open:focus:not(:focus-visible),
	.wp-block-navigation__responsive-container-close:focus:not(:focus-visible) {
		outline: none;
	}

	/* The bar host: a 26px-wide zone centred in the button. Middle bar is the
	 * element itself; ::before / ::after are the top and bottom bars. */
	.wp-block-navigation__responsive-container-open::before,
	.wp-block-navigation__responsive-container-open::after,
	.wp-block-navigation__responsive-container-close::before,
	.wp-block-navigation__responsive-container-close::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 26px;
		height: 2.5px;
		border-radius: 2px;
		background: currentColor;
		/* transform origin at the centre of the box for clean rotation */
		transform-origin: center;
		transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
			opacity 0.2s ease;
		will-change: transform;
	}

	/* --- Hamburger (open button): two bars offset up / down --- */
	.wp-block-navigation__responsive-container-open::before {
		transform: translate(-50%, -50%) translateY(-6px);
	}
	.wp-block-navigation__responsive-container-open::after {
		transform: translate(-50%, -50%) translateY(6px);
	}

	/* Middle bar of the hamburger — drawn on a child span if present, else we
	 * fake a third line via a box-shadow-free approach using the button's own
	 * outline is not reliable, so core's two-line icon is fine. Core actually
	 * ships a 2-line burger (see path data), so two bars matches the brand. */

	/* --- X (close button): the two bars cross in the centre --- */
	.wp-block-navigation__responsive-container-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.wp-block-navigation__responsive-container-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* Nudge the close toggle to sit where the burger was (top-right), so the
	 * morph feels anchored. Core already fixes it top-right; align padding. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		margin: 0;
	}

	/* ---------------------------------------------------------------------
	 * 2. Flyout — overlay panel slides in from the right
	 * ------------------------------------------------------------------- */

	/* The open (fixed, fullscreen) overlay. Core sets position:fixed + inset.
	 * IMPORTANT: core ships its own `overlay-menu__fade-in-animation` which
	 * applies a translateY transform to the container. Any transform here makes
	 * the container the containing block for the position:fixed X toggle, so the
	 * X drifts ~9px off the burger. We override that animation with an
	 * opacity-only fade AND force transform:none, so the container never becomes
	 * a containing block and the X stays pinned to the viewport (= on the
	 * burger). The slide-in lives on the content wrapper instead. */
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: os-overlay-in 0.3s ease both !important;
		transform: none !important;
	}

	@keyframes os-overlay-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	/* Comfortable padding + vertical layout inside the overlay. The content
	 * wrapper carries the slide-in-from-right transform (the X sits outside it,
	 * so it stays anchored while the menu flies in). */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		padding: 5.5rem 2rem 2rem;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		min-height: 100%;
		animation: os-content-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	@keyframes os-content-in {
		from { transform: translateX(12%); }
		to { transform: translateX(0); }
	}

	/* The menu list — vertical, right-aligned, generous gaps. Right-aligned on
	 * ALL pages: the home header justifies its nav differently than the inner
	 * DB header, which used to leave the menu left-aligned on subpages and
	 * right-aligned on the home page. Force right everywhere for consistency. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-end !important;
		justify-content: flex-start;
		gap: 0.35rem;
		width: 100%;
		text-align: right;
	}

	/* Right-align the item labels and the search field to match. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		text-align: right;
	}
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item .wp-block-navigation-item__content {
		text-align: right;
	}

	/* ---------------------------------------------------------------------
	 * 3. Staggered item flyout from the right
	 * ------------------------------------------------------------------- */

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content > .wp-block-search,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-search {
		opacity: 0;
		animation: os-item-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	@keyframes os-item-in {
		from {
			opacity: 0;
			transform: translateX(28px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* Stagger: delay each item a little more than the last. Nav items first,
	 * then the search field, then the claim (claim handled in section 4). */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:nth-child(1) { animation-delay: 0.10s; }
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:nth-child(2) { animation-delay: 0.16s; }
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:nth-child(3) { animation-delay: 0.22s; }
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:nth-child(4) { animation-delay: 0.28s; }
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:nth-child(5) { animation-delay: 0.34s; }
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:nth-child(6) { animation-delay: 0.40s; }

	/* Search field animates in after the links. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
		animation-delay: 0.46s;
	}

	/* ---------------------------------------------------------------------
	 * 4. Bigger typography — links + search
	 * ------------------------------------------------------------------- */

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		font-size: clamp(1.9rem, 9vw, 2.75rem);
		font-weight: 500;
		line-height: 1.15;
		letter-spacing: -0.01em;
		padding-block: 0.15em;
	}

	/* Muted grey to match the footer's tone, not near-black. accent-4 is
	 * remapped for dark mode automatically (#9aa2ad). We target the anchor
	 * with !important because core generates a per-block wp-elements-<hash>
	 * rule from overlayTextColor that paints the links white — that rule would
	 * otherwise win on specificity and blow out the links in both modes. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open
		a.wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item a {
		color: var( --wp--preset--color--accent-4, #686868 ) !important;
	}

	/* Suppress the sticky focus outline on menu links after a touch tap (the
	 * box around "Blog" in the open overlay). Keyboard focus keeps its ring. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:focus:not(:focus-visible),
	.wp-block-navigation__responsive-container.is-menu-open
		a:focus:not(:focus-visible) {
		outline: none;
	}

	/* Search: bigger input, roomy tap target. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
		width: 100%;
		margin-top: 1.5rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-search .wp-block-search__input {
		font-size: 1.25rem;
		padding: 0.75rem 1rem;
		border-radius: 8px;
		width: 100%;
	}

	/* ---------------------------------------------------------------------
	 * 5. Openstream claim, pinned to the bottom of the overlay
	 *    (element injected by mobile-menu.js: .os-mobile-claim)
	 * ------------------------------------------------------------------- */

	.os-mobile-claim {
		margin-top: auto;          /* pushes claim to the bottom of the flex column */
		padding-top: 2.5rem;
		opacity: 0;
		animation: os-item-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
		animation-delay: 0.54s;
		/* Claim stays LEFT-aligned even though the menu above is right-aligned. */
		align-self: flex-start;
		width: 100%;
		text-align: left;
	}

	/* Wordmark in the logo typeface, matching the footer's big OPENSTREAM
	 * (Albula Pro, 700, uppercase, -0.5px tracking, accent-4 grey). */
	.os-mobile-claim__brand {
		display: block;
		font-family: var( --wp--preset--font-family--albula-pro, "Albula Pro", sans-serif );
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: -0.5px;
		line-height: 1;
		font-size: clamp(1.5rem, 8vw, 2.25rem);
		margin-bottom: 0.4rem;
		color: var( --wp--preset--color--accent-4, #686868 );
	}

	.os-mobile-claim__text {
		font-size: clamp(1.15rem, 5.5vw, 1.6rem);
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: -0.01em;
		margin: 0;
		/* Same muted grey as the footer copy; drop the opacity dimming so the
		 * colour is exactly accent-4 rather than a washed-out contrast. */
		color: var( --wp--preset--color--accent-4, #686868 );
	}

	/* Hide the claim on desktop / when overlay is closed (belt & braces —
	 * it lives inside the container which is display:none when closed). */
	.wp-block-navigation__responsive-container:not(.is-menu-open) .os-mobile-claim {
		display: none;
	}

	/* ---------------------------------------------------------------------
	 * 6. Dark mode
	 *
	 * The core Navigation block freezes overlayBackgroundColor:base to a fixed
	 * hex (#fff) at render time, so it ignores our --wp--preset--color--base
	 * override and the overlay stays white in dark mode. Repaint it explicitly
	 * to the dark surface, and fix the search field's colours to match.
	 * ------------------------------------------------------------------- */
	html[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var( --wp--preset--color--base, #16181c ) !important;
		color: var( --wp--preset--color--contrast, #e8e8ea );
	}

	html[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-search__input {
		background-color: var( --wp--preset--color--base-2, #202329 );
		border-color: var( --wp--preset--color--30, #333740 );
		color: var( --wp--preset--color--contrast, #e8e8ea );
	}

	/* The X (and burger) bars use currentColor. Core freezes the toggle colour
	 * to a dark hex, so in dark mode the X would be near-invisible. Force the
	 * light ink. Applies to both toggles; the open burger sits over the dark
	 * page header, which is also dark, so it needs the light ink too. */
	html[data-theme="dark"] .wp-block-navigation__responsive-container-open,
	html[data-theme="dark"] .wp-block-navigation__responsive-container-close {
		color: var( --wp--preset--color--contrast, #e8e8ea );
	}
}

/* Never show the injected claim outside the mobile overlay context. */
@media (min-width: 600px) {
	.os-mobile-claim { display: none !important; }
}

/* ---------------------------------------------------------------------
 * Reduced motion: honour the user's preference — no slides, no stagger.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-search,
	.os-mobile-claim {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.wp-block-navigation__responsive-container-open::before,
	.wp-block-navigation__responsive-container-open::after,
	.wp-block-navigation__responsive-container-close::before,
	.wp-block-navigation__responsive-container-close::after {
		transition: none !important;
	}
}