/*
Theme Name: Level Theme
Theme URI: https://levelwebstudio.nl/
Update URI: https://updates.levelwebstudio.nl/products/level-theme
Author: Level Webstudio
Author URI: https://levelwebstudio.nl/
Description: A premium block theme for distinctive editorial, portfolio, service, and WooCommerce experiences.
Version: 2.7.1
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: levelwebstudio
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, one-column, style-variations, template-editing, wide-blocks
*/

/*
 * Level Theme keeps its visual layer deliberately small. Most values come from
 * theme.json so they stay editable in Global Styles. These rules cover details
 * that the Site Editor cannot express yet and reusable opt-in block styles.
 */

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/*
 * The page never scrolls sideways. Anything that momentarily pokes past the
 * viewport — most commonly a fade-left/fade-right entrance offset waiting
 * below the fold, which counts as scrollable overflow on phones — is clipped
 * at the root instead of making the page draggable. `clip` (unlike `hidden`)
 * creates no new scroll container, so position: sticky and scroll anchoring
 * keep working. Blocks that scroll sideways on purpose (carousel, marquee,
 * tables) own their overflow locally and are unaffected.
 */
html {
	overflow-x: clip;
}

/*
 * Heroes must fit the first screen. The hero preset is fluid on viewport
 * WIDTH, so wide-but-short laptop windows get 8rem lines that push a hero's
 * CTA row below the fold. Capping the preset against viewport HEIGHT keeps
 * multi-line hero headings (and the section around them) inside the opening
 * view; tall screens never hit the cap and keep the full drama. The doubled
 * class outbids core's preset rule in any load order, the max() floor keeps
 * landscape phones legible, and engines without min()/max() simply fall back
 * to the uncapped preset. The 2XL/3XL spacing steps carry the same guard in
 * theme.json (min(…, 9vh/12vh)) for the identical reason.
 */
.has-hero-font-size.has-hero-font-size {
	font-size: min(var(--wp--preset--font-size--hero), max(2.75rem, 9.75vh)) !important;
}

/*
 * Browser scrollbar treatment — chosen in the Site Editor's "Level · Site"
 * sidebar and applied as a class on <html> server-side, so it holds from the
 * first paint. The viewport scrollbar can only be styled from the root
 * element; body-level classes cannot reach it.
 *
 * `level-scrollbar-hidden` removes the bar entirely (wheel, touch, and
 * keyboard scrolling are untouched). `level-scrollbar-slim` swaps the browser
 * default for a slim rounded thumb on an invisible track. The thumb is a
 * fixed translucent gray: preset color tokens live on <body> and are not
 * visible from <html>, and the translucency keeps it legible on light and
 * dark designs alike. Inner scroll areas (carousels, dropdown panels) keep
 * their own thin scrollbars so overflow stays discoverable.
 */
html.level-scrollbar-hidden {
	scrollbar-width: none;
}

html.level-scrollbar-hidden::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

html.level-scrollbar-slim {
	scrollbar-color: rgb(112 119 130 / 0.55) transparent;
	scrollbar-width: thin;
}

/* Browsers without the standard scrollbar properties (Safari) get the WebKit
 * pseudo styling instead; browsers that do support them ignore these rules. */
@supports not (scrollbar-color: red red) {
	html.level-scrollbar-slim::-webkit-scrollbar {
		background: transparent;
		height: 8px;
		width: 8px;
	}

	html.level-scrollbar-slim::-webkit-scrollbar-track {
		background: transparent;
	}

	html.level-scrollbar-slim::-webkit-scrollbar-thumb {
		background-color: rgb(112 119 130 / 0.55);
		border-radius: 999px;
	}

	html.level-scrollbar-slim::-webkit-scrollbar-thumb:hover {
		background-color: rgb(112 119 130 / 0.8);
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--base);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	box-shadow: 0 0 0 6px var(--wp--preset--color--base);
	outline: 3px solid var(--wp--preset--color--accent-dark);
	outline-offset: 3px;
}

:where(a, button, input, textarea, select, summary):focus:not(:focus-visible) {
	outline: 0;
}

:where(img, video, svg) {
	max-width: 100%;
}

:where([hidden]) {
	display: none !important;
}

/* Accessibility helpers */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	position: absolute !important;
	top: 5px;
	left: 5px;
	z-index: 100000;
	display: block;
	width: auto;
	height: auto;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--small, 0.5rem);
	box-shadow: var(--wp--preset--shadow--soft);
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
}

:where(img, video) {
	height: auto;
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, figcaption) {
	text-wrap: pretty;
}

:where(a) {
	text-underline-offset: 0.16em;
	text-decoration-thickness: 0.08em;
}

.has-text-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

.wp-site-blocks {
	min-height: 100vh;
}

.wp-site-blocks > main {
	min-height: 45vh;
}

.wp-block-post-content :where(ul, ol):not([class]) {
	padding-inline-start: 1.25em;
}

.wp-block-post-content :where(ul, ol):not([class]) li + li {
	margin-block-start: 0.45em;
}

.wp-block-image img,
.wp-block-cover,
.wp-block-media-text__media img {
	border-radius: inherit;
}

/* Header and navigation */
.level-site-header {
	position: relative;
	z-index: 30;
	box-shadow: 0 1px 0 color-mix(in srgb, currentColor 10%, transparent);
	/* Core gives every background-bearing group a default 1.25em block
	 * padding; on header roots that painted a stray strip above full-bleed
	 * top bars. Bar rows own their own padding — an explicit inline padding
	 * on a header root still wins over this reset. */
	padding-block: 0;
}

.level-site-header.is-position-sticky {
	position: sticky;
}

/* The blur lives on a backdrop layer, not on the header itself: backdrop-filter
 * turns an element into the containing block for fixed descendants, which
 * would clip core's fixed mobile navigation overlay to the header bar. */
.level-site-header.is-position-sticky::before,
.level-site-header.level-header-glide.is-scrolled::before {
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.admin-bar .level-site-header.is-position-sticky,
.admin-bar .level-site-header.level-header-glide {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Headers normally render inside a template part whose wrapper is exactly as
 * tall as the header group, so the group's own position:sticky has no room to
 * travel. The wrapper has to carry the stickiness for the header to stick. */
.wp-block-template-part:has(> .level-site-header.is-position-sticky),
.wp-block-template-part:has(> .level-header-glide:not(.level-header-overlay)) {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* While a glide header is hidden, its pinned wrapper still spans the top of
 * the viewport; without this it would swallow clicks on the content below. */
.wp-block-template-part:has(> .level-header-glide:not(.level-header-overlay)) {
	pointer-events: none;
}

.wp-block-template-part:has(> .level-header-glide:not(.level-header-overlay)) > * {
	pointer-events: auto;
}

.admin-bar .wp-block-template-part:has(> .level-site-header.is-position-sticky),
.admin-bar .wp-block-template-part:has(> .level-header-glide:not(.level-header-overlay)) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Preset background classes are opaque (and carry !important), which would
 * hide the sticky blur entirely; feather the two shipped header surfaces
 * while the blur is active. Float headers opt out of the blur. Glide headers
 * only turn glassy once scrolled, so they keep their designed surface at rest. */
.level-site-header.is-position-sticky.has-base-background-color:not(.level-header-float),
.level-site-header.level-header-glide.is-scrolled.has-base-background-color {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent) !important;
}

.level-site-header.is-position-sticky.has-contrast-background-color:not(.level-header-float),
.level-site-header.level-header-glide.is-scrolled.has-contrast-background-color {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent) !important;
}

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

.has-contrast-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--base);
	text-decoration-line: underline;
}

/* The pill works with the class on a navigation item or on the navigation
 * block itself; the `a` element keeps the color ahead of core's later-loading
 * .wp-block-navigation.has-text-color … { color: inherit } rule. */
.wp-block-navigation .level-home-action a.wp-block-navigation-item__content,
.wp-block-navigation.level-home-action a.wp-block-navigation-item__content {
	background: var(--wp--preset--color--contrast);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	font-weight: 700;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
}

.wp-block-navigation .level-home-action a.wp-block-navigation-item__content:hover,
.wp-block-navigation.level-home-action a.wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--base);
}

/* Inside the open overlay menu core resets item padding and row typography;
 * restate the pill there so the action still reads as a button. Scoped to
 * both states so the pill also survives the close animation's exit hold. */
.wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .level-home-action a.wp-block-navigation-item__content {
	align-items: center;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--medium);
	justify-content: center;
	line-height: 1.2;
	padding: 0.75rem 1.5rem;
	width: fit-content;
}

.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}

@media (hover: hover) {
	.level-site-header .wp-block-navigation-item__content::after {
		position: absolute;
		right: 0;
		bottom: -0.35em;
		left: 0;
		height: 2px;
		background: currentColor;
		content: "";
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.level-site-header .wp-block-navigation-item__content:hover::after,
	.level-site-header .current-menu-item > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	/* Submenu links are full-width rows, so the sliding bar reads as a
	 * panel-wide divider — and escapes below the dropdown on the last item.
	 * Swap it for a text-width underline with the same weight and offset. */
	.level-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		content: none;
	}

	.level-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.level-site-header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		text-decoration-line: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}
}

/* Mobile navigation overlay. The burger and close controls get a real touch
 * target with press feedback, the sheet opens as blurred glass matched to the
 * navigation's declared palette, links rise in with a tight stagger, and the
 * close is a real exit (content fades, the glass melts, then the overlay
 * releases). Everything animates transform/opacity only; the global
 * reduced-motion block collapses all of it to an instant swap.
 *
 * Architecture, because none of it is accidental:
 * - The glass lives on a ::before layer that never moves and whose container
 *   never animates, so the expensive full-screen backdrop blur is rendered
 *   once and only a cheap opacity ramp composites on top. (The old sheet
 *   faded the blur layer itself, which is exactly what stuttered on phones.)
 * - Core removes `.is-menu-open` instantly on close, so the exit rides on
 *   `transition: display … allow-discrete` on the container: modern browsers
 *   keep the overlay rendered while the exit plays; older ones drop the
 *   declaration and snap closed exactly as before.
 * - Everything core scopes to `.is-menu-open` evaporates on the FIRST exit
 *   frame, which would reflow the sheet mid-fade. `.hidden-by-default`
 *   containers (overlayMenu:"always", the theme convention) are never the
 *   inline menu, so open-layout styles are declared state-independently on
 *   that class, plus low-specificity exit clones of core's own open rules.
 * - Core's open-state fade/padding/white background load after style.css at
 *   up to (0,5,0); the tripled state classes below outrank them in any load
 *   order, for both the WP 6.8 and 7.0 rule shapes. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.55rem;
	transition: background-color var(--wp--custom--transition--fast, 160ms) ease, transform var(--wp--custom--transition--fast, 160ms) ease;
}

@media (hover: hover) {
	.wp-block-navigation__responsive-container-open:hover,
	.wp-block-navigation__responsive-container-close:hover {
		background-color: color-mix(in srgb, currentColor 10%, transparent);
	}

	.wp-block-navigation__responsive-container-close:hover svg {
		transform: rotate(90deg);
	}
}

.wp-block-navigation__responsive-container-open:active,
.wp-block-navigation__responsive-container-close:active {
	transform: scale(0.88);
}

.wp-block-navigation__responsive-container-close svg {
	transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* State-independent scaffolding for the overlay container. flex-direction,
 * overflow, and z-index mirror core's open values so the held exit frame
 * keeps its layout, stacking (above sticky headers), and scroll position;
 * `animation: none` retires core's abrupt 100ms container fade in favour of
 * the layered choreography below. */
.wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default {
	animation: none;
	flex-direction: column;
	overflow: auto;
	overscroll-behavior: contain;
	transition: display 260ms allow-discrete;
	z-index: 100000;
}

/* A closing sheet must not eat the tap that dismissed it. */
.wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
	pointer-events: none;
}

/* Own the sheet padding in every state (core scopes it to `.is-menu-open`,
 * which would shift the layout on the first close frame) and give it
 * safe-area floors for notched phones. Values mirror core's. */
.wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default:not(.disable-default-overlay) {
	padding-top: max(clamp(1rem, var(--wp--style--root--padding-top, 2rem), 20rem), env(safe-area-inset-top, 0px));
	padding-right: max(clamp(1rem, var(--wp--style--root--padding-right, 2rem), 20rem), env(safe-area-inset-right, 0px));
	padding-bottom: max(clamp(1rem, var(--wp--style--root--padding-bottom, 2rem), 20rem), env(safe-area-inset-bottom, 0px));
	padding-left: max(clamp(1rem, var(--wp--style--root--padding-left, 2rem), 20rem), env(safe-area-inset-left, 0px));
}

/* The sheet content clears the pinned close control: the menu starts below
 * the anchored X (`--level-burger-bottom`, measured from the viewport top,
 * minus the container padding restated from the rule above) even when the
 * trigger sits low in a tall header, and never higher than core's own
 * `calc(2rem + 24px)` offset. Declared for both states — tripled open arm to
 * outrank core's open-state padding in any load order, state-independent arm
 * so nothing reflows on the first close frame. */
.wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: max(calc(2rem + 24px), min(calc(var(--level-burger-bottom, 0px) + 1.25rem - max(clamp(1rem, var(--wp--style--root--padding-top, 2rem), 20rem), env(safe-area-inset-top, 0px))), 45vh));
}

/* Core offsets the open dialog below the admin bar with a margin scoped to
 * `.has-modal-open … .is-menu-open` — both classes vanish on the first close
 * frame, so the held exit jumped the whole menu up by the admin-bar height.
 * The pinned close control and the clearance calc below already position
 * everything from the measured trigger rect (which includes any admin bar),
 * so the margin is retired state-independently instead of cloned. */
body.admin-bar .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}

/* …except in drawer form: there the close stays anchored to the panel, so the
 * panel itself must keep clearing the admin bar (state-independently — same
 * exit-jump reasoning). Without this the drawer's X slides under the
 * admin-bar avatar, which then swallows its taps. Values mirror core's. */
body.admin-bar .level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
	margin-top: 46px;
}

@media (min-width: 782px) {
	body.admin-bar .level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
		margin-top: 32px;
	}
}

/* Exit clones of core's `.is-menu-open` layout (WP 6.8/7.0), applied only
 * while the class is absent, at :where() specificity inside so they never
 * fight core while the menu is open. Without these the list would reflow to
 * its inline shape on the first frame of the close animation. */
.wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default:not(.is-menu-open):not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	align-items: var(--navigation-layout-justification-setting, inherit);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow: visible;
}

.wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default:not(.is-menu-open) :where(.wp-block-navigation__container, .wp-block-page-list, .wp-block-navigation-item) {
	align-items: var(--navigation-layout-justification-setting, initial);
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default:not(.is-menu-open) :where(.wp-block-navigation__submenu-icon) {
	display: none;
}

.wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default:not(.is-menu-open) :where(.has-child .wp-block-navigation__submenu-container) {
	background: transparent;
	border: none;
	color: inherit;
	height: auto;
	min-width: 200px;
	opacity: 1;
	overflow: initial;
	padding: var(--wp--style--block-gap, 2em) 2rem 0;
	position: static;
	visibility: visible;
	width: auto;
}

.wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default:not(.is-menu-open) :where(.wp-block-navigation-item__content) {
	padding: 0;
}

/* Exit choreography: links fade first (fast, no stagger — exits should feel
 * resolved, not re-choreographed)… */
.wp-block-navigation__responsive-container.hidden-by-default :is(.wp-block-navigation__container, .wp-block-page-list) > li {
	opacity: 0;
	transform: translateY(0.35rem);
	transition: opacity 160ms cubic-bezier(0.4, 0, 1, 1), transform 160ms cubic-bezier(0.4, 0, 1, 1);
}

/* The close control is pinned to the exact spot of the burger that opened the
 * sheet: header.js measures the trigger on the opening tap and writes its
 * viewport rect as `--level-burger-*` vars on the container, so open/close
 * reads as one control morphing in place instead of an X materialising in a
 * corner the trigger never occupied. position:fixed lifts it out of the
 * dialog flow (no ancestor of it ever transforms in sheet form) and keeps it
 * glued to the trigger while the sheet content scrolls; the fallbacks
 * reproduce the padded top-right corner whenever nothing measured (no-JS,
 * editor canvas). Both states share the rule so the pin survives the exit
 * hold. The drawer variant restores its panel-anchored close below. */
.wp-block-navigation__responsive-container:is(.hidden-by-default, .is-menu-open):not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	box-sizing: border-box;
	height: var(--level-burger-size, auto);
	position: fixed;
	right: var(--level-burger-right, max(clamp(1rem, var(--wp--style--root--padding-right, 2rem), 20rem), env(safe-area-inset-right, 0px)));
	top: var(--level-burger-top, max(clamp(1rem, var(--wp--style--root--padding-top, 2rem), 20rem), env(safe-area-inset-top, 0px)));
	width: var(--level-burger-width, auto);
}

/* …the close control counter-morphs in place — opacity and rotation only,
 * never a translate: an anchored control must not drift off its anchor. */
.wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-container-close {
	opacity: 0;
	transform: scale(0.7) rotate(-90deg);
	transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1), transform 150ms cubic-bezier(0.4, 0, 1, 1);
}

/* …then the glass melts just after, and only once both are done does the
 * held `display` release. The sheet is a fixed, never-animated layer: the
 * blur renders once, stays glued to the viewport while the overlay content
 * scrolls, and only its opacity composites. z-index -1 keeps it under the
 * links but over the page. The container-level `:not(.has-background)` guards
 * throughout hand the sheet over to core's own "Submenu & overlay" colors the
 * moment a navigation declares them — an overlay color IS the custom sheet. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay):not(.has-background)::before {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 220ms cubic-bezier(0.4, 0, 1, 1);
	will-change: opacity;
	z-index: -1;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default.is-menu-open:not(.disable-default-overlay):not(.has-background)::before {
	animation: level-overlay-in 280ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
	opacity: 1;
}

/* Palette tiers for the glass, matched to the navigation's declared colors.
 * A navigation that declares a text color opens onto the paired opposite
 * surface — the token contract defines base/contrast as opposites in every
 * style variation, so base-colored links get the contrast sheet. */
.wp-block-navigation.has-text-color:not(.has-contrast-color):not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.has-background)::before {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 92%, transparent);
}

/* on-gradient text is contrast-checked against the brand gradient, so that
 * navigation opens onto the gradient itself (opaque — skip the blur). */
.wp-block-navigation.has-text-color.has-on-gradient-color:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.has-background)::before {
	background: var(--wp--preset--gradient--brand-spectrum);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* on-dark text is only guaranteed against dark media, never against contrast
 * (which flips light in dark variations); use a fixed photographic scrim. */
.wp-block-navigation.has-text-color.has-on-dark-color:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.has-background)::before {
	background-color: rgb(10 13 17 / 0.82);
}

/* Core paints the open overlay flat white unless the navigation declares its
 * own colors; hand the surface to the ::before glass instead. The tripled
 * state class outranks core's later-loading default in any order. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.hidden-by-default:not(.has-background) {
	background-color: transparent;
}

/* A declared text color must keep inheriting — a color set directly on the
 * container would override it for every link inside. */
.wp-block-navigation:not(.has-background):not(.has-text-color) .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default):not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

/* Core's overlay colors ("Submenu & overlay" on the navigation block) land as
 * classes and inline styles on the container itself. The glass layer steps
 * aside above; the colored container fades as a whole — the same cheap
 * opacity ramp as a background-bearing navigation below. */
.wp-block-navigation__responsive-container.hidden-by-default.has-background {
	opacity: 0;
	transition: opacity 220ms cubic-bezier(0.4, 0, 1, 1), display 260ms allow-discrete;
}

.wp-block-navigation__responsive-container.hidden-by-default.has-background.is-menu-open {
	animation: level-overlay-in 280ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
	opacity: 1;
}

/* A navigation with an explicit background keeps its chosen surface on the
 * container (core inherits it there); fading the container is cheap because
 * no backdrop blur is involved. */
.wp-block-navigation.has-background .wp-block-navigation__responsive-container.hidden-by-default {
	opacity: 0;
	transition: opacity 220ms cubic-bezier(0.4, 0, 1, 1), display 260ms allow-discrete;
}

.wp-block-navigation.has-background .wp-block-navigation__responsive-container.hidden-by-default.is-menu-open {
	animation: level-overlay-in 280ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
	opacity: 1;
}

/* While a sheet is open, bright header chrome recedes behind the glass:
 * accent CTA pills, logos, and taglines otherwise ghost through the
 * translucent sheet right under the first menu links, reading as stray
 * highlight states. Only leaf chrome that can never contain the navigation
 * is dimmed — the navigation subtree is exempt (the overlay itself lives
 * inside it, and the ghosted trigger under the pinned X is the morph's
 * continuity cue), and no dimmed element may be an overlay ancestor, since
 * ancestor opacity would composite the fixed sheet itself. */
html.has-modal-open .level-site-header :is(.wp-block-buttons, .wp-block-button, .wp-block-site-logo, .wp-block-site-title, .wp-block-social-links, .wp-block-search, p):not(.wp-block-navigation *) {
	opacity: 0.25;
	transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Entry choreography: keyframes (not transitions) drive the entrance so it
 * replays cleanly every time core re-displays the overlay, in every browser.
 * The whole cascade lands in under 0.8s. fill-mode must stay `backwards`,
 * never `both`/`forwards`: the settled values are the plain declarations
 * below, and a forwards fill would keep them animation-derived — Chromium
 * refuses to start the exit transitions from animation-held values, which
 * silently kills the close animation. */
/* The pinned close control morphs in on its anchor — a quarter-turn unwinds
 * while the trigger underneath dissolves into the glass, so burger and X read
 * as the same control changing state, not two controls swapping. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	animation: level-burger-morph-in 340ms cubic-bezier(0.22, 1, 0.36, 1) 40ms backwards;
	opacity: 1;
	transform: none;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li {
	animation: level-overlay-rise 460ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	animation-delay: 60ms;
	opacity: 1;
	transform: none;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li:nth-child(2) {
	animation-delay: 100ms;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li:nth-child(3) {
	animation-delay: 140ms;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li:nth-child(4) {
	animation-delay: 180ms;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li:nth-child(5) {
	animation-delay: 220ms;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li:nth-child(6) {
	animation-delay: 260ms;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li:nth-child(7) {
	animation-delay: 300ms;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li:nth-child(n+8) {
	animation-delay: 330ms;
}

/* Editorial-scale links inside the open sheet. The home-action pill keeps its
 * own sizing, and nested submenu items stay at their inherited size. Scoped
 * to both states so the type also survives the close animation. */
.wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .wp-block-navigation__container > .wp-block-navigation-item:not(.level-home-action) > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .wp-block-page-list > .wp-block-pages-list__item > .wp-block-pages-list__item__link {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* Sheet extras: header blocks mirrored into the overlay by the theme's
 * render filter (the `level-burger-mirror` class / "Show in the burger menu"
 * toggle). They sit after the menu list as their own group under a short
 * hairline tick, rise in as one unit once the first links have landed, and
 * share the links' exit fade. Layout is state-independent so the group holds
 * its place during the close animation's exit hold. */
.wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .level-burger-extras {
	align-items: var(--navigation-layout-justification-setting, flex-start);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block-start: clamp(1.75rem, 5vh, 3rem);
	padding-block-start: 1.5rem;
	position: relative;
	width: 100%;
}

.wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .level-burger-extras::before {
	background: color-mix(in srgb, currentColor 28%, transparent);
	block-size: 1px;
	content: "";
	inline-size: 2.75rem;
	inset-block-start: 0;
	inset-inline-start: 0;
	position: absolute;
}

/* Inside an overlayMenu:"mobile" navigation the same container doubles as
 * the inline desktop menu — the extras belong to the open sheet only. */
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .level-burger-extras {
	display: none;
}

/* Exit: the extras resolve as quickly as the links… */
.wp-block-navigation__responsive-container.hidden-by-default .level-burger-extras {
	opacity: 0;
	transform: translateY(0.35rem);
	transition: opacity 160ms cubic-bezier(0.4, 0, 1, 1), transform 160ms cubic-bezier(0.4, 0, 1, 1);
}

/* …and enter as one rise, timed to land right behind the link stagger. */
.wp-block-navigation__responsive-container.is-menu-open .level-burger-extras {
	animation: level-overlay-rise 460ms cubic-bezier(0.16, 1, 0.3, 1) 240ms backwards;
	opacity: 1;
	transform: none;
}

/* Submenu accordion. Core neutralises dropdowns inside the open sheet: the
 * chevron toggle is display:none'd and every submenu is force-expanded, so
 * child links just sit as unexplained smaller text under their parent. Give
 * parents a real disclosure instead — label and chevron share a grid row,
 * and the submenu list sits in a 0fr second row that eases open to 1fr when
 * the toggle reports aria-expanded="true". No theme JS is involved: core's
 * Interactivity API keeps owning the toggle click, the focus-out close, and
 * the aria state — this is presentation only. Rules are state-independent
 * (`.hidden-by-default`, tripled) so the exit hold keeps the accordion
 * shape, and the `.is-menu-open` arm serves overlayMenu:"mobile" sheets;
 * both outrank core's later-loading (0,5,0) forced expansion in any order.
 * The block is gated on :has() support plus a rendered toggle button — when
 * either is missing (old engines, navigations with "Show icon" off, where
 * nothing could ever open a collapsed submenu), the always-expanded exit
 * clones above and core's own overlay rules stay in charge. */
@supports selector(:has(a)) {
	/* Parent row: label + chevron up top, submenu in the collapsed 0fr row.
	 * The opacity/transform entries restate the sheet's exit-fade timings —
	 * transition is a single property, and this rule outranks the exit rule
	 * that normally carries them on top-level items. */
	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) .has-child:has(> .wp-block-navigation-submenu__toggle) {
		align-items: center;
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto 0fr;
		justify-content: var(--navigation-layout-justification-setting, start);
		row-gap: 0;
		transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 1, 1), row-gap 260ms cubic-bezier(0.4, 0, 1, 1), opacity 160ms cubic-bezier(0.4, 0, 1, 1), transform 160ms cubic-bezier(0.4, 0, 1, 1);
	}

	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) .has-child:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
		grid-template-rows: auto 1fr;
		row-gap: 0.75rem;
		transition: grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1), row-gap 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms cubic-bezier(0.4, 0, 1, 1), transform 160ms cubic-bezier(0.4, 0, 1, 1);
	}

	/* The submenu list: static, clipped by the 0fr track (min-height 0 +
	 * overflow hidden are what let the track collapse), out of the tab order
	 * while closed, and padded inline-only so the collapsed track measures
	 * zero height. The inline-start rail draws the parent→children thread. */
	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) .has-child:has(> .wp-block-navigation-submenu__toggle) > .wp-block-navigation__submenu-container {
		align-items: var(--navigation-layout-justification-setting, initial);
		align-self: stretch;
		background: transparent;
		border: none;
		border-inline-start: 1px solid color-mix(in srgb, currentColor 22%, transparent);
		color: inherit;
		display: flex;
		flex-direction: column;
		grid-column: 1 / -1;
		height: auto;
		justify-content: flex-start;
		margin: 0;
		min-height: 0;
		min-width: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0;
		padding-inline-start: 1.1rem;
		position: static;
		row-gap: 0.6rem;
		transform: translateY(-0.3rem);
		transition: opacity 180ms cubic-bezier(0.4, 0, 1, 1), transform 220ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 260ms;
		visibility: hidden;
		width: auto;
	}

	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) .has-child:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
		opacity: 1;
		transform: none;
		transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1) 60ms, transform 340ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
		visibility: visible;
	}

	/* The chevron is the tap target: burger-button sized with the same chip
	 * feedback, and it owns the rotation inside the sheet so the desktop
	 * flyout's -90° nested variant can't leak through at wide widths. */
	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) .wp-block-navigation__submenu-icon {
		align-items: center;
		border-radius: 999px;
		display: inline-flex;
		justify-content: center;
		margin: 0;
		margin-inline-start: 0.15rem;
		min-height: 2.75rem;
		min-width: 2.75rem;
		padding: 0.55rem;
		transition: background-color var(--wp--custom--transition--fast, 160ms) ease, transform var(--wp--custom--transition--fast, 160ms) ease;
	}

	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) .wp-block-navigation__submenu-icon:active {
		transform: scale(0.88);
	}

	/* Open state marks the control itself; `+` covers openSubmenusOnClick
	 * navigations, where the label button toggles and the icon is a span. */
	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) :is(.wp-block-navigation__submenu-icon[aria-expanded="true"], [aria-expanded="true"] + .wp-block-navigation__submenu-icon) {
		background-color: color-mix(in srgb, currentColor 10%, transparent);
	}

	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) .wp-block-navigation__submenu-icon svg {
		height: auto;
		transform: rotate(0deg);
		transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
		width: 1.15rem;
	}

	.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) :is(.wp-block-navigation__submenu-icon[aria-expanded="true"], [aria-expanded="true"] + .wp-block-navigation__submenu-icon) svg {
		transform: rotate(180deg);
	}

	@media (hover: hover) {
		.wp-block-navigation__responsive-container:is(.hidden-by-default.hidden-by-default.hidden-by-default, .is-menu-open.is-menu-open.is-menu-open) .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle:hover {
			background-color: color-mix(in srgb, currentColor 10%, transparent);
		}
	}
}

/* overlayMenu:"mobile" navigations (not the theme convention) keep the
 * original container-level glass: their responsive container doubles as the
 * inline desktop menu, so it cannot carry a state-independent sheet layer.
 * They open with the same stagger and still close instantly. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open:not(.hidden-by-default):not(.has-background) {
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
}

.wp-block-navigation.has-text-color:not(.has-contrast-color):not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.hidden-by-default):not(.has-background) {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 92%, transparent);
}

.wp-block-navigation.has-text-color.has-on-gradient-color:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.hidden-by-default):not(.has-background) {
	background: var(--wp--preset--gradient--brand-spectrum);
}

.wp-block-navigation.has-text-color.has-on-dark-color:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.hidden-by-default):not(.has-background) {
	background-color: rgb(10 13 17 / 0.82);
}

/* Locking body scroll removes the classic scrollbar; keep its gutter
 * reserved so the page behind the sheet doesn't shift sideways. Overlay
 * scrollbars (phones, macOS default) reserve nothing and are unaffected. */
html.has-modal-open {
	scrollbar-gutter: stable;
}

/* Visitors who ask for reduced transparency get a near-solid sheet. */
@media (prefers-reduced-transparency: reduce) {
	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay):not(.has-background)::before {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 98%, transparent);
	}

	.wp-block-navigation.has-text-color:not(.has-contrast-color):not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.has-background)::before {
		background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 98%, transparent);
	}

	.wp-block-navigation.has-text-color.has-on-dark-color:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.has-background)::before {
		background-color: rgb(10 13 17 / 0.98);
	}
}

@keyframes level-overlay-in {
	from {
		opacity: 0;
	}
}

@keyframes level-overlay-rise {
	from {
		opacity: 0;
		transform: translateY(1.1rem);
	}
}

@keyframes level-burger-morph-in {
	from {
		opacity: 0;
		transform: scale(0.7) rotate(90deg);
	}
}

/* Burger menu variants — driven by `level-burger-*` classes on the header
 * group (written by the "Level · Header" panel in the editor, or by hand via
 * Additional CSS classes). Everything composes with the layered overlay
 * architecture above: containers never animate or transform, entry keyframes
 * keep `backwards` fill, exits ride transitions, and every surface rule keeps
 * the container-level `:not(.has-background)` guard so an explicit overlay
 * color set on the navigation block still wins over any preset. */

/* — Sheet surface presets. They outrank the palette tiers (header scoping
 *   adds specificity) and force both surface and text pairing; the second
 *   selector arm covers overlayMenu:"mobile" navigations, whose container
 *   doubles as the inline menu and carries its glass directly. */
.level-site-header.level-burger-sheet-light .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay):not(.has-background)::before,
.level-site-header.level-burger-sheet-light .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open:not(.hidden-by-default):not(.has-background) {
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
}

.level-site-header.level-burger-sheet-light .wp-block-navigation .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default):not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

.level-site-header.level-burger-sheet-contrast .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay):not(.has-background)::before,
.level-site-header.level-burger-sheet-contrast .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open:not(.hidden-by-default):not(.has-background) {
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 92%, transparent);
}

.level-site-header.level-burger-sheet-contrast .wp-block-navigation .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default):not(.has-text-color) {
	color: var(--wp--preset--color--base);
}

/* Dark is a fixed photographic scrim, never palette-derived, so it also
 * works in dark style variations where contrast flips light. */
.level-site-header.level-burger-sheet-dark .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay):not(.has-background)::before,
.level-site-header.level-burger-sheet-dark .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open:not(.hidden-by-default):not(.has-background) {
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	background: rgb(10 13 17 / 0.88);
}

.level-site-header.level-burger-sheet-dark .wp-block-navigation .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default):not(.has-text-color) {
	color: rgb(237 240 245);
}

.level-site-header.level-burger-sheet-gradient .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay):not(.has-background)::before,
.level-site-header.level-burger-sheet-gradient .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open:not(.hidden-by-default):not(.has-background) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: var(--wp--preset--gradient--brand-spectrum);
}

.level-site-header.level-burger-sheet-gradient .wp-block-navigation .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default):not(.has-text-color) {
	color: var(--wp--preset--color--on-gradient, #fff);
}

/* — Alignment. Core, the exit clones, the accordion, and the extras all read
 *   the same justification custom property; overriding it on the container
 *   re-aligns every layer at once. */
.level-site-header.level-burger-align-center .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) {
	--navigation-layout-justification-setting: center;
	text-align: center;
}

.level-site-header.level-burger-align-center .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .level-burger-extras::before {
	inset-inline: 0;
	margin-inline: auto;
}

/* — Menu typography scales. Same double arm as the editorial default above,
 *   with the header scoping lifting these over it. */
.level-site-header.level-burger-type-compact .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .wp-block-navigation__container > .wp-block-navigation-item:not(.level-home-action) > .wp-block-navigation-item__content,
.level-site-header.level-burger-type-compact .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .wp-block-page-list > .wp-block-pages-list__item > .wp-block-pages-list__item__link {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.level-site-header.level-burger-type-statement .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .wp-block-navigation__container > .wp-block-navigation-item:not(.level-home-action) > .wp-block-navigation-item__content,
.level-site-header.level-burger-type-statement .wp-block-navigation__responsive-container:is(.is-menu-open, .hidden-by-default) .wp-block-page-list > .wp-block-pages-list__item > .wp-block-pages-list__item__link {
	font-size: clamp(2.1rem, 5.2vh + 1rem, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

/* — Entry choreography variants: swapping the animation name keeps every
 *   duration, delay, and stagger from the base rules intact. The pinned close
 *   control is deliberately not included — anchored to its trigger, it always
 *   morphs in place regardless of how the menu content enters. */
.level-site-header.level-burger-anim-fade .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li,
.level-site-header.level-burger-anim-fade .wp-block-navigation__responsive-container.is-menu-open .level-burger-extras {
	animation-name: level-overlay-in;
}

.level-site-header.level-burger-anim-slide .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > li,
.level-site-header.level-burger-anim-slide .wp-block-navigation__responsive-container.is-menu-open .level-burger-extras {
	animation-name: level-burger-slide-in;
}

@keyframes level-burger-slide-in {
	from {
		opacity: 0;
		transform: translateX(1.5rem);
	}
}

/* "None" collapses the whole choreography — entries, exits, glass ramps, and
 *   the held display release — to an instant swap, exactly like the global
 *   reduced-motion block. Longhands beat the shorthands of every base rule. */
.level-site-header.level-burger-anim-none .wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default,
.level-site-header.level-burger-anim-none .wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default::before,
.level-site-header.level-burger-anim-none .wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default *,
.level-site-header.level-burger-anim-none .wp-block-navigation__responsive-container.is-menu-open.is-menu-open,
.level-site-header.level-burger-anim-none .wp-block-navigation__responsive-container.is-menu-open.is-menu-open::before,
.level-site-header.level-burger-anim-none .wp-block-navigation__responsive-container.is-menu-open.is-menu-open * {
	animation-delay: 0s;
	animation-duration: 0s;
	transition-delay: 0s;
	transition-duration: 0s;
}

/* — Drawer: the sheet becomes a right-hand panel. The container keeps its
 *   full-viewport, never-animated role as scrim holder, tap-catcher, and
 *   scroller; the dialog carries the surface and the slide, so the fixed
 *   glass contract above stays intact and no fixed descendant ever gains a
 *   transforming containing block. */
.level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default.hidden-by-default:not(.disable-default-overlay) {
	padding: 0;
}

.level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-close {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	max-width: none;
	min-height: 100%;
}

.level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-dialog {
	backdrop-filter: blur(24px) saturate(150%);
	-webkit-backdrop-filter: blur(24px) saturate(150%);
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	border-inline-start: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	box-sizing: border-box;
	min-height: 100%;
	padding-top: max(clamp(1.25rem, var(--wp--style--root--padding-top, 2rem), 20rem), env(safe-area-inset-top, 0px));
	padding-right: max(clamp(1.25rem, var(--wp--style--root--padding-right, 2rem), 20rem), env(safe-area-inset-right, 0px));
	padding-bottom: max(clamp(1.5rem, var(--wp--style--root--padding-bottom, 2rem), 20rem), env(safe-area-inset-bottom, 0px));
	padding-left: max(clamp(1.25rem, var(--wp--style--root--padding-left, 2rem), 20rem), env(safe-area-inset-left, 0px));
	width: min(24rem, 92vw);
}

/* The drawer keeps its close anchored inside the sliding panel: the panel
 * transforms during entry/exit, so a viewport-pinned (fixed) close would
 * detach from it mid-slide. This restores core's absolute positioning and
 * unwinds the trigger-matched sizing from the sheet pin above. */
.level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-container-close {
	height: auto;
	inset-block-start: 0.9rem;
	inset-inline-end: 0.9rem;
	position: absolute;
	width: auto;
}

/* And the drawer's menu content keeps core's own top offset — the clearance
 * calc above restates the sheet's container padding, which the drawer zeroes. */
.level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.hidden-by-default.hidden-by-default:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: calc(2rem + 24px);
}

/* The full-viewport glass becomes a plain dim scrim behind the panel. */
.level-site-header.level-burger-drawer .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.hidden-by-default:not(.disable-default-overlay):not(.has-background)::before {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: rgb(10 13 17 / 0.4);
}

/* Sheet presets restyle the panel instead of the scrim in drawer form. */
.level-site-header.level-burger-drawer.level-burger-sheet-light .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-dialog {
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
}

.level-site-header.level-burger-drawer.level-burger-sheet-contrast .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-dialog {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 94%, transparent);
}

.level-site-header.level-burger-drawer.level-burger-sheet-dark .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-dialog {
	background: rgb(10 13 17 / 0.94);
}

.level-site-header.level-burger-drawer.level-burger-sheet-gradient .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-dialog {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: var(--wp--preset--gradient--brand-spectrum);
}

/* Panel slide: exit first in source order, entry after, so the open state
 *   wins while both classes are present. */
.level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
	transform: translateX(102%);
	transition: transform 240ms cubic-bezier(0.4, 0, 1, 1);
}

.level-site-header.level-burger-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	animation: level-burger-drawer-in 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
	transform: none;
}

@keyframes level-burger-drawer-in {
	from {
		transform: translateX(102%);
	}
}

/* — Trigger styles for the burger button itself (and its close twin). */
.level-site-header.level-burger-trigger-chip .wp-block-navigation__responsive-container-open,
.level-site-header.level-burger-trigger-chip .wp-block-navigation__responsive-container-close {
	border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

.level-site-header.level-burger-trigger-solid .wp-block-navigation__responsive-container-open {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (hover: hover) {
	.level-site-header.level-burger-trigger-solid .wp-block-navigation__responsive-container-open:hover {
		background-color: var(--wp--preset--color--accent-dark, var(--wp--preset--color--contrast));
		color: var(--wp--preset--color--base);
	}
}

/* Header archetypes */
.level-header-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: transparent;
	box-shadow: none;
}

.admin-bar .level-header-overlay {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.level-header-float {
	box-shadow: none;
}

.level-header-float.is-position-sticky::before {
	content: none;
}

.level-header-pill {
	border: 1px solid var(--wp--preset--color--line);
}

/* The page's first section under the header bar: `level-bleed-top`.
 * assets/js/bleed.js (printed in <head> only on pages that use the class)
 * measures how far the section starts below the top of the site container
 * and sets that distance as the inline --level-bleed property before the
 * section is first painted. The section is pulled up by that distance and
 * gets it back as a transparent top border, so its content keeps its exact
 * position; the background is laid out over border and padding as one
 * surface, so a gradient runs on behind the header without a seam. A preset
 * gradient class sets the `background` shorthand with !important, which
 * resets background-origin; hence the !important here.
 * Every rule keys on the inline property, so a section the script leaves
 * alone (no JavaScript, not the page's leading content, an author-set top
 * margin, border, radius, or shaped top edge) renders exactly as authored. */
:root .level-bleed-top[style*="--level-bleed:"] {
	margin-top: calc(-1 * var(--level-bleed));
	border-top: var(--level-bleed) solid transparent !important;
	background-origin: border-box !important;
}

/* Sections size border-box: a declared minimum height grows by the band so
 * the bottom edge stays put. With the default `auto` the sum is invalid and
 * min-height stays auto, which needs no compensation. */
:root .level-layout-section.level-bleed-top[style*="--level-bleed:"] {
	min-height: calc(var(--level-section-min-height, 0px) + var(--level-bleed));
}

.level-topbar {
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.02em;
}

.level-topbar .wp-block-paragraph a,
.level-topbar a {
	text-decoration: none;
}

.level-header-stacked .wp-block-site-title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	letter-spacing: -0.04em;
}

.level-nav-uppercase .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Header scroll motion — state classes applied by assets/js/header.js.
 * Sticky headers condense and gain elevation once the page scrolls; headers
 * that are not sticky become "glide" headers that slide away while scrolling
 * down and return as a glassy bar on the first upward scroll. Motion sticks
 * to transform/opacity plus a short padding transition on the bar itself.
 * A glide header only carries a transform while hidden or travelling; at rest
 * the property clears, so the header never becomes the containing block for
 * core's fixed navigation overlay. Without JavaScript none of these classes
 * appear and headers behave exactly as before. */
.level-site-header.is-position-sticky:not(.level-header-float) {
	transition: padding-top 240ms cubic-bezier(0.22, 1, 0.36, 1), padding-bottom 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms ease, box-shadow 240ms ease;
}

/* The attribute guard keeps the condensed override on headers that declare
 * their own bar padding, so padding-free header roots do not gain any. */
.level-site-header.is-position-sticky.is-scrolled:not(.level-header-float)[style*="padding-top"] {
	padding-bottom: var(--wp--preset--spacing--20) !important;
	padding-top: var(--wp--preset--spacing--20) !important;
}

.level-site-header.is-scrolled:not(.level-header-float):not(.level-header-overlay):not(.is-unpinned) {
	box-shadow: 0 1px 0 color-mix(in srgb, currentColor 12%, transparent), var(--wp--preset--shadow--soft);
}

.level-site-header.level-header-glide {
	position: sticky;
	top: 0;
}

/* Reveal decelerates softly into place; the curve deliberately spends its
 * speed early while the bar is still off-screen. */
.level-site-header.level-header-glide.is-ready {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms ease, box-shadow 240ms ease;
}

/* Hiding accelerates away instead of borrowing the reveal's front-loaded
 * ease-out — that curve finished most of its travel in the first frames and
 * read as the header teleporting off. */
.level-site-header.level-header-glide.is-ready.is-unpinned {
	transition-duration: 280ms, 240ms, 240ms;
	transition-timing-function: cubic-bezier(0.4, 0, 1, 1), ease, ease;
}

.level-site-header.level-header-glide.is-unpinned {
	box-shadow: none;
	transform: translateY(-104%);
}

/* Only admin-bar viewers need extra travel: the bar offsets the pinned header,
 * so without it a sliver would stay visible below the toolbar. Visitors keep
 * the tight travel — a long overshoot made every reveal start with a dead
 * stretch of invisible movement. */
.admin-bar .level-site-header.level-header-glide.is-unpinned {
	transform: translateY(calc(-104% - var(--wp-admin--admin-bar--height, 32px) - 16px));
}

/* Overflow fallback (class set by assets/js/header.js): when the desktop
 * menu cannot fit on one line — many pages, long labels, a half-width
 * window — the header falls back to its paired burger navigation instead of
 * wrapping into a multi-row bar. The doubled specificity beats the
 * !important on the generated level-hide-* utilities. */
.level-site-header.is-nav-collapsed .wp-block-navigation.level-hide-mobile.level-hide-tablet {
	display: none !important;
}

.level-site-header.is-nav-collapsed .wp-block-navigation.level-hide-desktop {
	display: flex !important;
}

/* Manual counterpart to the overflow fallback: `level-header-burger` on the
 * header group (the "Always use the burger menu" toggle in the Level
 * inspector) keeps the paired burger navigation active on every screen size,
 * desktop included. Same specificity trick as above. */
.level-site-header.level-header-burger .wp-block-navigation.level-hide-mobile.level-hide-tablet {
	display: none !important;
}

.level-site-header.level-header-burger .wp-block-navigation.level-hide-desktop {
	display: flex !important;
}

/* Glide headers without a surface of their own still need one when they
 * return over page content. */
.level-site-header.level-header-glide.is-scrolled:not(.has-background):not(.level-header-overlay) {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
}

/* The transparent overlay archetype lives out of flow, so it glides as a
 * fixed bar instead. Once scrolled it gains a photographic scrim: a fixed
 * dark tone, like the media it overlays, so its on-dark text stays readable
 * even in dark style variations where `contrast` flips light. */
.level-site-header.level-header-overlay.level-header-glide {
	position: fixed;
}

.level-site-header.level-header-overlay.is-scrolled {
	background-color: rgb(10 13 17 / 0.72);
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.08);
}

/* Float headers keep their transparent bar; the floating card inside deepens
 * its elevation instead. */
.level-header-float > .wp-block-group {
	transition: box-shadow 300ms ease;
}

.level-header-float.is-scrolled > .wp-block-group {
	box-shadow: var(--wp--preset--shadow--elevated) !important;
}

/* The oversized masthead condenses into a slim bar when it glides back in.
 * Below 768px the responsive safeguard already caps the title at medium, so
 * the condense only runs where the masthead is actually oversized. */
.level-header-stacked .wp-block-site-title {
	transition: font-size 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
	.level-header-stacked.level-header-glide.is-scrolled .wp-block-site-title {
		font-size: clamp(1.6rem, 3.2vw, 2.25rem);
	}
}

/* Buttons and form controls */
.wp-element-button,
.wp-block-button__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 3rem;
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	background-image: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: inherit;
}

@media (hover: hover) {
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		box-shadow: var(--wp--preset--shadow--soft);
		transform: translateY(-2px);
	}
}

.is-style-level-text-link .wp-block-button__link {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	color: currentColor;
	min-height: auto;
	padding: 0.25rem 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

@media (hover: hover) {
	.is-style-level-text-link .wp-block-button__link:hover {
		box-shadow: none;
		transform: translateX(0.25rem);
	}

	.is-style-level-text-link .wp-block-button__link:dir(rtl):hover {
		transform: translateX(-0.25rem);
	}
}

:where(
	input:not([type]),
	input:is(
		[type="text"],
		[type="email"],
		[type="tel"],
		[type="url"],
		[type="password"],
		[type="search"],
		[type="date"],
		[type="datetime-local"],
		[type="month"],
		[type="time"],
		[type="week"]
	),
	textarea
) {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
	width: 100%;
}

:where(select) {
	max-width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	min-height: 3rem;
	padding: 0.7rem 2.5rem 0.7rem 0.9rem;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

label {
	display: inline-block;
	font-weight: 650;
	margin-block-end: 0.35rem;
}

/* Reusable block styles */
.is-style-level-card,
.level-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--subtle);
	padding: var(--wp--preset--spacing--50);
}

.is-style-level-card:not(.has-background),
.level-card:not(.has-background) {
	background: var(--wp--preset--color--base);
}

.is-style-level-card:not(.has-background):not(.has-text-color),
.level-card:not(.has-background):not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

/* One lift spec across theme and plugin: 320ms, the ease-out family, the
 * elevated shadow token. The plugin's hover utilities use the same numbers. */
.is-style-level-lift:not(.level-hover-lift):not(.level-hover-scale):not(.level-hover-glow),
.level-lift:not(.level-hover-lift):not(.level-hover-scale):not(.level-hover-glow) {
	transition: border-color 220ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.is-style-level-lift:not(.level-hover-lift):not(.level-hover-scale):not(.level-hover-glow):hover,
	.level-lift:not(.level-hover-lift):not(.level-hover-scale):not(.level-hover-glow):hover {
		border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--line));
		box-shadow: var(--wp--preset--shadow--elevated);
		transform: translateY(-0.4rem);
	}
}

.is-style-level-glass,
.level-glass {
	border: 1px solid var(--wp--preset--color--line);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 58%, transparent);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}

.is-style-level-glass:not(.has-background),
.level-glass:not(.has-background) {
	background: var(--wp--preset--color--base);
	background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
}

.is-style-level-glass:not(.has-background):not(.has-text-color),
.level-glass:not(.has-background):not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

.is-style-level-outline {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--50);
}

.is-style-level-rounded img,
img.is-style-level-rounded {
	border-radius: var(--wp--custom--radius--medium);
}

.is-style-level-shadow img,
img.is-style-level-shadow {
	box-shadow: var(--wp--preset--shadow--elevated);
}

.is-style-level-quote {
	border: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--50);
	position: relative;
}

.is-style-level-quote::before {
	color: var(--wp--preset--color--accent);
	content: "“";
	font-size: 3em;
	inset-inline-start: 0;
	line-height: 1;
	position: absolute;
	top: -0.1em;
}

/* Root blockGap is content rhythm, not page chrome: without this the gap
 * renders as a body-background strip under the header and above the footer. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Stacked full-bleed sections join flush; each section spaces itself with
 * padding. Explicit per-block margins still win (spacing supports are inline). */
:is(.level-section, .level-hero, .level-layout-section) + :is(.level-section, .level-hero, .level-layout-section) {
	margin-block-start: 0;
}

/* Pattern helpers */
.level-section {
	position: relative;
}

.level-hero {
	isolation: isolate;
	overflow: clip;
	position: relative;
}

.level-hero::before {
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent) 0%, transparent 68%);
	content: "";
	filter: blur(2px);
	height: min(60vw, 48rem);
	pointer-events: none;
	position: absolute;
	right: min(-18vw, -8rem);
	top: min(-18vw, -8rem);
	width: min(60vw, 48rem);
	z-index: -1;
}

.level-hero-badge {
	font-weight: 650;
	letter-spacing: 0.02em;
}

.level-index-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.level-index-list li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.35em 0;
}

.level-index-list li:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.level-index-list a {
	display: block;
	font-weight: 650;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast, 160ms) ease, transform var(--wp--custom--transition--fast, 160ms) ease;
}

@media (hover: hover) {
	.level-index-list a:hover {
		color: var(--wp--preset--color--accent-dark);
		transform: translateX(0.35rem);
	}
}

.level-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 750;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.level-gradient-text {
	background-image: var(--wp--preset--gradient--brand-spectrum);
	background-position: 0 92%;
	background-repeat: no-repeat;
	background-size: 100% 0.18em;
	color: inherit;
}

.level-number {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.level-number:not(.has-text-color) {
	color: var(--wp--preset--color--accent-dark);
}

/* Ticket cards: the main body and tear-off stub sit side by side with the
 * same background; each side punches a half-circle notch at both ends of
 * the shared seam (two mask layers, intersected), and the stub carries a
 * dashed perforation rule. Whatever sits behind the card shows through the
 * notches, so tickets work on any section background. */
.level-ticket-main {
	-webkit-mask-image: radial-gradient(circle 11px at 100% 0, transparent 10px, #000 11px), radial-gradient(circle 11px at 100% 100%, transparent 10px, #000 11px);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(circle 11px at 100% 0, transparent 10px, #000 11px), radial-gradient(circle 11px at 100% 100%, transparent 10px, #000 11px);
	mask-composite: intersect;
}

.level-ticket-stub {
	border-inline-start: 2px dashed color-mix(in srgb, currentColor 38%, transparent);
	-webkit-mask-image: radial-gradient(circle 11px at 0 0, transparent 10px, #000 11px), radial-gradient(circle 11px at 0 100%, transparent 10px, #000 11px);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(circle 11px at 0 0, transparent 10px, #000 11px), radial-gradient(circle 11px at 0 100%, transparent 10px, #000 11px);
	mask-composite: intersect;
}

.level-logo-row {
	filter: grayscale(1);
	opacity: 0.68;
}

.level-logo-mark,
.level-stat-value,
.level-team-initials {
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin-block: 0;
}

.level-avatar img {
	border-radius: 999px;
	object-fit: cover;
}

.level-aspect-landscape img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.level-aspect-wide img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.level-overflow-hidden {
	overflow: hidden;
}

.level-measure-narrow {
	max-width: 42rem;
}

.level-divider {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.level-footer-wordmark {
	font-size: clamp(3.5rem, 12vw, 11rem);
	letter-spacing: -0.04em;
	line-height: 0.95;
}

.level-site-footer .wp-block-list {
	list-style: none;
	padding-inline-start: 0;
}

.level-site-footer .wp-block-list li + li {
	margin-block-start: 0.55rem;
}

.wp-block-details {
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-details summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	list-style-position: outside;
}

.wp-block-details[open] summary {
	margin-block-end: var(--wp--preset--spacing--30);
}

.level-float:not([data-level-animation]) {
	animation: level-float 6s ease-in-out infinite;
	will-change: transform;
}

@keyframes level-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -0.65rem, 0); }
}

/* Query loops and editorial details */
.wp-block-post-template > li {
	min-width: 0;
}

.wp-block-post-featured-image a,
.wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

.wp-block-post-featured-image img {
	transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.level-project-card:hover .wp-block-post-featured-image img {
		transform: scale(1.025);
	}
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.35rem;
}

.wp-block-query-pagination-numbers .page-numbers {
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
	min-width: 2.5rem;
	padding-inline: 0.7rem;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-comments .commentlist {
	padding-inline-start: 0;
}

.wp-block-comment-template {
	list-style: none;
}

/* Commerce wrappers are owned by Level templates; Woo block internals remain untouched. */
.level-product-card {
	position: relative;
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--subtle);
	overflow: clip;
	transition: border-color 220ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.level-product-card :where(img) {
	border-radius: calc(var(--wp--custom--radius--medium) * 0.72);
	transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
	.level-product-card:hover,
	.level-product-card:focus-within {
		border-color: color-mix(in srgb, var(--wp--preset--color--accent) 48%, var(--wp--preset--color--line));
		box-shadow: var(--wp--preset--shadow--elevated);
		transform: translateY(-0.3rem);
	}

	.level-product-card:hover :where(img),
	.level-product-card:focus-within :where(img) {
		transform: scale(1.025);
	}
}

.level-product-layout {
	align-items: flex-start;
}

.level-product-summary {
	position: sticky;
	top: clamp(6rem, 12vh, 9rem);
}

.level-site-header .wp-block-search {
	width: min(30rem, 34vw);
}

/* Responsive safeguards. The 767px boundary matches the block plugin's
 * mobile breakpoint (level-hide-* utilities), so the theme and plugin agree
 * on where "mobile" ends — 768-781px used to fall between the two systems. */
@media (max-width: 767px) {
	.level-reverse-mobile {
		flex-direction: column-reverse;
	}

	.level-site-header .wp-block-site-title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.level-site-header .wp-block-site-logo img,
	.level-site-header .custom-logo {
		height: auto;
		max-width: min(48vw, 100%);
	}

	.level-product-summary {
		position: relative;
		top: auto;
	}

	.level-site-header .wp-block-search {
		order: 3;
		width: 100%;
	}

	.level-mobile-full,
	.level-mobile-full .wp-block-button,
	.level-mobile-full .wp-block-button__link {
		width: 100%;
	}
}

/* WordPress unsticks its admin bar below 600px; pinned headers must return
 * to the true top there or they hover 46px too low. */
@media (max-width: 600px) {
	.admin-bar .level-site-header.is-position-sticky,
	.admin-bar .level-site-header.level-header-glide:not(.level-header-overlay) {
		top: 0;
	}

	.admin-bar .wp-block-template-part:has(> .level-site-header.is-position-sticky),
	.admin-bar .wp-block-template-part:has(> .level-header-glide:not(.level-header-overlay)) {
		top: 0;
	}
}

@media (forced-colors: active) {
	.level-gradient-text {
		background-image: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	.level-float:not([data-level-animation]) {
		animation: none !important;
		transform: none !important;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.is-style-level-lift:not(.level-hover-lift):not(.level-hover-scale):not(.level-hover-glow):hover,
	.level-lift:not(.level-hover-lift):not(.level-hover-scale):not(.level-hover-glow):hover,
	.level-project-card:hover .wp-block-post-featured-image img,
	.level-product-card:hover,
	.level-product-card:focus-within,
	.level-product-card:hover :where(img),
	.level-product-card:focus-within :where(img) {
		transform: none !important;
	}

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.level-site-header,
	.level-site-footer,
	.wp-block-navigation,
	.wp-block-comments,
	.wp-block-post-navigation-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	a {
		color: inherit !important;
		text-decoration: underline;
	}
}