/**
 * THENATHE Terminal — navigation.css
 *
 * The header Navigation block, styled as a terminal "destination" picker.
 * It works with a Page List or with hand-built menu links. Uses native CSS
 * nesting (supported by all current browsers).
 *
 *   ≥ 600px  inline menu, "// SELECT DESTINATION" label, boxed dropdowns
 *   < 600px  full-screen overlay with stacked, boxed links
 */

header .wp-block-navigation {
	--menu-background: var(--tn-panel);
	--menu-text: var(--tn-text);
	--menu-border: var(--tn-border);
	--menu-border-strong: var(--tn-green);
	--menu-hover: var(--tn-green-soft);
	--menu-label: color-mix(in srgb, var(--tn-green) 72%, transparent);

	position: relative;
	z-index: 100;
}

/* Shared "// SELECT DESTINATION" label (menu bar, dropdowns, mobile overlay). */
header .wp-block-navigation__responsive-container-content::before,
header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
	content: "// SELECT DESTINATION";
	display: block;
	box-sizing: border-box;
	color: var(--menu-label);
	border-bottom: 1px solid color-mix(in srgb, var(--menu-text) 15%, transparent);
	font-size: var(--tn-label-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--tn-label-tracking);
	text-transform: uppercase;
	white-space: nowrap;
}

/* In the mobile overlay, one label at the top is enough. */
@media (max-width: 599px) {
	header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
		content: none;
	}
}

header .wp-block-navigation__responsive-container-content::before {
	width: 100%;
	padding: 0.15rem 0.15rem 0.45rem;
	text-align: right;
}

/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 600px) {
	header .wp-block-navigation__responsive-container-content {
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 0.35rem !important;
	}

	header .wp-block-navigation__container,
	header .wp-block-navigation__container > .wp-block-page-list {
		column-gap: 1.75rem !important;
	}

	/* Top-level links (Page List or custom links). */
	header .wp-block-navigation :is(.wp-block-page-list, .wp-block-navigation__container) > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-block: 0.25rem;
		color: var(--tn-text-soft);
		border-bottom: 3px solid transparent;
		font-size: 0.95em;
		letter-spacing: -0.025em;
		text-decoration: none;

		&:hover,
		&:focus-visible {
			color: var(--tn-hover) !important;
			border-bottom-color: var(--tn-hover);
			text-decoration: none;
			outline: none;
		}
	}

	/* You-are-here. */
	header .wp-block-navigation :is(.wp-block-page-list, .wp-block-navigation__container) > :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
		color: var(--tn-green) !important;
		border-bottom-color: var(--tn-green);
		text-shadow: 0 0 14px var(--tn-glow);
	}

	/* Submenu caret: a plain text "∨" instead of the SVG chevron. */
	header .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon {
		display: inline-grid !important;
		place-items: center;
		box-sizing: border-box;
		width: 1.4rem !important;
		height: 1.4rem !important;
		margin-left: 0.3rem !important;
		padding: 0 !important;
		color: var(--menu-text) !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		opacity: 0.7;
		transition: opacity 150ms ease, transform 150ms ease;

		& svg {
			display: none !important;
		}

		&::before {
			content: "∨";
			display: block;
			font-family: inherit;
			font-size: 0.9rem;
			font-weight: 400;
			line-height: 1;
		}

		&:hover,
		&:focus-visible,
		&[aria-expanded="true"] {
			opacity: 1;
			outline: none;
		}

		&[aria-expanded="true"] {
			transform: rotate(180deg);
		}
	}

	/* Dropdown panel. */
	header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		min-width: 17rem !important;
		padding: 0.55rem !important;
		gap: 0.25rem;
		color: var(--menu-text) !important;
		background:
			linear-gradient(145deg, color-mix(in srgb, var(--tn-green) 4.5%, transparent), transparent 55%),
			var(--menu-background) !important;
		border: 1px solid var(--tn-border-strong) !important;
		border-top: 3px solid var(--tn-green) !important;
		border-radius: 0 0 var(--tn-radius) var(--tn-radius);
		box-shadow: 0 18px 45px rgba(0, 0, 0, 0.68), 0 0 30px color-mix(in srgb, var(--tn-green) 7%, transparent);
		isolation: isolate;
		z-index: 1000;

		/* Invisible bridge so the menu does not close while the pointer travels to it. */
		&::after {
			content: "";
			position: absolute;
			right: -0.5rem;
			bottom: 100%;
			left: -0.5rem;
			height: 0.5rem;
		}

		&::before {
			margin: 0 0 0.25rem;
			padding: 0.15rem 0.55rem 0.55rem;
		}
	}

	/* Anchor top-level dropdowns to the right edge of their parent item. */
	header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
	header .wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container {
		right: 0 !important;
		left: auto !important;
		top: calc(100% - 1px) !important;
	}

	header .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: 100%;
		background: transparent !important;
	}

	/* Dropdown links:  > Destination */
	header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 0.7rem 0.8rem !important;
		color: var(--menu-text) !important;
		background: color-mix(in srgb, var(--menu-text) 3.5%, transparent);
		border: 1px solid transparent;
		border-radius: 3px;
		line-height: 1.35;
		white-space: normal;
		text-decoration: none;

		&::before {
			content: ">";
			flex: 0 0 auto;
			margin-right: 0.7rem;
			color: var(--menu-text);
			transition: transform 150ms ease, color 150ms ease;
		}

		&:hover,
		&:focus-visible {
			background: var(--menu-hover) !important;
			border-color: var(--tn-hover);
			outline: none;

			&::before {
				color: var(--tn-green);
				transform: translateX(3px);
			}
		}
	}

	header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		background: color-mix(in srgb, var(--tn-green) 14%, transparent) !important;
		border-color: var(--tn-green);
	}
}

/* =========================================================
   Mobile overlay
   ========================================================= */

@media (max-width: 599px) {
	header .wp-block-navigation__responsive-container-open {
		color: var(--tn-green);
	}

	header .wp-block-navigation__responsive-container.is-menu-open {
		box-sizing: border-box;
		padding: 1.25rem !important;
		color: var(--menu-text) !important;
		background-color: var(--menu-background) !important;
		background-image:
			linear-gradient(90deg, var(--tn-grid) 1px, transparent 1px),
			linear-gradient(0deg, var(--tn-grid) 1px, transparent 1px) !important;
		background-size: 36px 36px !important;
	}

	header .wp-block-navigation__responsive-close {
		width: 100%;
		max-width: 34rem;
		margin-inline: auto;
	}

	header .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		padding-top: 3.75rem !important;

		&::before {
			margin-bottom: 0.25rem;
			text-align: left;
		}
	}

	header .wp-block-navigation__container,
	header .wp-block-navigation__responsive-container-content .wp-block-page-list {
		width: 100%;
		align-items: stretch !important;
		gap: 0.5rem !important;
	}

	header .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		box-sizing: border-box;
		width: 100%;
		align-items: stretch !important;
		color: var(--menu-text) !important;
		background: transparent !important;
		box-shadow: none !important;
		outline: none !important;
	}

	/* Main links. */
	header .wp-block-navigation__responsive-container-content .wp-block-navigation-item > .wp-block-navigation-item__content {
		box-sizing: border-box;
		width: 100%;
		padding: 0.8rem 1rem !important;
		color: var(--menu-text) !important;
		background: color-mix(in srgb, var(--menu-text) 4%, transparent);
		border: 1px solid var(--menu-border);
		border-radius: 0 !important;
		line-height: 1.35;
		text-decoration: none;
	}

	/* Nested submenu: indented with a rail. */
	header .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
		box-sizing: border-box !important;
		width: calc(100% - 0.6rem) !important;
		min-width: 0 !important;
		margin: 0.2rem 0 0.35rem 0.6rem !important;
		padding: 0.25rem 0 0.25rem 0.8rem !important;
		gap: 0.25rem !important;
		background: transparent !important;
		border: 0 !important;
		border-left: 2px solid var(--menu-border) !important;
		box-shadow: none !important;

		& .wp-block-navigation-item__content {
			padding: 0.65rem 0.8rem !important;
			background: color-mix(in srgb, var(--menu-text) 7%, transparent);
			border: 0;

			&::before {
				content: ">\00a0";
				color: var(--tn-green);
			}
		}
	}

	header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
	header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible {
		color: var(--menu-text) !important;
		background: var(--tn-green-soft) !important;
		border-color: var(--tn-hover) !important;
		text-decoration: none;
		outline: none;
	}

	header .wp-block-navigation__responsive-container-content .current-menu-item {
		background: transparent !important;
		box-shadow: none !important;
		outline: none !important;

		& > .wp-block-navigation-item__content {
			color: var(--tn-green) !important;
			background: color-mix(in srgb, var(--tn-green) 9%, transparent) !important;
			border-color: var(--tn-border-strong) !important;
		}
	}

	/* Square close button. */
	header .wp-block-navigation__responsive-container-close {
		padding: 0.55rem;
		color: var(--tn-green);
		background: color-mix(in srgb, var(--menu-text) 8%, transparent);
		border: 1px solid var(--menu-border);
		border-radius: 0 !important;

		&:hover,
		&:focus-visible {
			background: var(--tn-green-soft) !important;
			border-color: var(--tn-hover) !important;
			box-shadow: none !important;
			outline: none;
		}
	}
}