/*
 * Layer: components. Inner-page header (kit .inner-bar): logo, pill nav (core/navigation
 * is-style-pill), the utils account pill slot, and the burger below 1100px.
 * The overlay the burger opens is styled in menu.css.
 */
@layer components {

	/* Sticky bar: the template-part wrapper sticks, so the bar spans the page, not its parent. */
	:where(.wp-block-template-part):has(> .nd-header) {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 5;
		background: linear-gradient(var(--wp--preset--color--porcelain) 60%, transparent);
	}

	.nd-header {
		box-sizing: border-box;
		align-items: center;
		padding: 20px var(--wp--style--root--padding-right) 20px var(--wp--style--root--padding-left);
	}

	/*
	 * Glass pill (kit .nd-pill). Generic so the utils account pill can opt in with the class.
	 * The nav's glass sits on its <ul>, not the <nav>: a backdrop-filter on an ancestor would
	 * trap core's position:fixed overlay inside the bar. Closed state only: the open dialog hides
	 * this list and shows the overlay part, whose nested nav must not inherit the pill.
	 */
	/*
	 * display sits in a plain selector list: inside :is() the nav branch's specificity would
	 * also apply to .nd-pill and beat the ≤1100px hide rule below.
	 */
	.nd-pill,
	.wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		display: inline-flex;
	}

	:is(.nd-pill, .wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container) {
		box-sizing: border-box;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		padding: 6px;
		border: 1px solid var(--wp--custom--glass--pill-border);
		border-radius: var(--wp--preset--border-radius--pill);
		background-color: var(--wp--custom--glass--bg);
		box-shadow: var(--wp--preset--shadow--pill);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 500;
		line-height: 1;
		-webkit-backdrop-filter: var(--wp--custom--blur--base);
		backdrop-filter: var(--wp--custom--blur--base);
	}

	/* Core gives items `background-color: inherit`, which re-layers the pill's glass per item. */
	.wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item {
		background-color: transparent;
	}

	/*
	 * M15: header items never wrap. Between the burger breakpoint and ~1260px the kit's 18px item
	 * padding no longer fits logo + seven items + account pill on one line, so it eases down to 10px
	 * at 1101px (fluid, not stepped) and items keep one line each.
	 */
	:is(.nd-header, .nd-pill) {
		--nd-pill-pad: clamp(10px, calc(5vw - 45px), 18px);
	}

	:is(.nd-pill .nd-pill__link, .wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content) {
		padding: 12px var(--nd-pill-pad);
		white-space: nowrap;
		border-radius: var(--wp--preset--border-radius--pill);
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		transition: background-color var(--wp--custom--duration--fast);
	}

	:is(.nd-pill .nd-pill__link, .wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content):is(:hover, [aria-current="page"]) {
		background-color: var(--wp--custom--glass--tint);
		color: var(--wp--preset--color--ink);
	}

	:is(.nd-pill .nd-pill__link, .wp-block-navigation.is-style-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content):focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	/* Join / Dashboard inside the account pill (kit .nd-btn--primary.nd-btn--sm). */
	.nd-pill .nd-pill__cta {
		min-height: 40px;
		padding: 13px calc(var(--nd-pill-pad) + 2px);
		white-space: nowrap;
		font-size: var(--wp--preset--font-size--meta);
	}

	/* Burger (kit .nd-burger): core's open button as a glass circle. */
	.wp-block-navigation__responsive-container-open {
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border: 1px solid var(--wp--custom--glass--pill-border);
		border-radius: 50%;
		background-color: var(--wp--custom--glass--bg);
		color: var(--wp--preset--color--ink);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease);
	}

	.wp-block-navigation__responsive-container-open:hover {
		transform: scale(1.06);
	}

	.wp-block-navigation__responsive-container-open:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	/*
	 * The kit's one breakpoint (L24): burger up to 1100px, inline menu above. Core switches at
	 * 600px in the wordpress layer; this layer wins by position.
	 */
	@media (max-width: 1100px) {

		.wp-block-navigation__responsive-container-open:not(.always-shown) {
			display: flex;
		}

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

		/* The kit hides the account pill with the nav; the overlay carries the menu instead. */
		.nd-header > .wp-block-nourishingdestiny-account-pill {
			display: none;
		}
	}

	@media (min-width: 1101px) {

		.wp-block-navigation__responsive-container-open:not(.always-shown) {
			display: none;
		}

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

	/* Logged-in on narrow screens the admin bar scrolls away with the page. */
	@media (max-width: 600px) {

		:where(.wp-block-template-part):has(> .nd-header) {
			top: 0;
		}
	}

	/*
	 * Front-page header (parts/header-overlay.html, kit .hero__bar): the same bar laid over the
	 * hero, transparent, scrolling away with it. Its nav and pills follow the rules above.
	 */
	:where(.wp-block-template-part):has(> .nd-header--overlay) {
		position: absolute;
		top: var(--wp-admin--admin-bar--height, 0px);
		right: 0;
		left: 0;
		background: none;
	}

	.nd-header.nd-header--overlay {
		padding-top: 24px;
		padding-bottom: 0;
	}

	@media (max-width: 600px) {

		:where(.wp-block-template-part):has(> .nd-header--overlay) {
			top: var(--wp-admin--admin-bar--height, 0px);
		}
	}
}