/**
 * Mobile Menu — WP 7.0 compatible
 *
 * WP 7.0 changed overlayMenu="mobile" architecture:
 *   - No "hidden-by-default" class on the overlay container.
 *   - No standalone ul.wp-block-navigation__container as a direct <nav> child.
 *   - Nav items live INSIDE the overlay div.
 *   - At ≥600px, WP shows the overlay INLINE (display:block) as the desktop nav.
 *   - At  <600px, WP hides the overlay and shows the hamburger.
 *
 * Our approach:
 *   ≥768px  → Overlay wrapper divs are flattened to transparent flex — desktop nav.
 *   ≤767px  → Overlay hidden by default (we add our own hide); hamburger shown.
 *             Clicking hamburger → WP's Interactivity API adds .is-menu-open.
 *             .is-menu-open → full-screen fixed overlay panel.
 *
 * All colour tokens from theme.json — zero hardcoded values.
 */

/* ─── Desktop: hamburger hidden ≥768px ──────────────────────── */

.nivo-header__nav .wp-block-navigation__responsive-container-open {
	display: none;
}

/* ─── Desktop (≥768px): flatten overlay wrappers as inline nav ─ */
/*
 * WP 7.0 renders nav items INSIDE the overlay div. At ≥768px we make
 * all the overlay wrapper divs transparent flex pass-throughs so the
 * nav items appear as a normal horizontal inline nav row.
 */

@media (min-width: 768px) {

	.nivo-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open),
	.nivo-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.nivo-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	.nivo-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		display: flex !important;
		align-items: center;
		width: auto !important;
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
		position: static !important;
		overflow: visible !important;
		box-shadow: none !important;
		border: none !important;
		animation: none !important;
	}

}

/* ─── Mobile (≤767px) ────────────────────────────────────────── */

@media (max-width: 767px) {

	/* Hide overlay by default — WP 7.0 no longer adds hidden-by-default */
	.nivo-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Hide header CTA */
	.nivo-header__actions {
		display: none !important;
	}

	/* ── Hamburger button ──────────────────────────────────────── */

	.nivo-header__nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background-color: var(--wp--preset--color--surface-primary);
		border: 1.5px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--border-radius--full);
		color: var(--wp--preset--color--text-primary);
		cursor: pointer;
		flex-shrink: 0;
		transition:
			background-color var(--wp--custom--transition--fast),
			border-color     var(--wp--custom--transition--fast);
	}

	.nivo-header__nav .wp-block-navigation__responsive-container-open:hover {
		background-color: var(--wp--preset--color--neutral-100);
		border-color: var(--wp--preset--color--neutral-300);
	}

	.nivo-header__nav .wp-block-navigation__responsive-container-open svg {
		width: 18px;
		height: 18px;
	}

	/* ── Overlay panel (open state only) ──────────────────────── */
	/*
	 * Override WP 7.0 default overlay: it sets padding via clamp(), z-index 100000,
	 * overflow auto, and a high-specificity background-color. We reset all with !important.
	 */

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: var(--wp--custom--z-index--modal) !important;
		display: flex !important;
		flex-direction: column !important;
		padding: 0 !important;
		overflow-y: auto !important;
		background-color: var(--wp--preset--color--surface-primary) !important;
		border-top: 3px solid var(--wp--preset--color--primary-500);
		animation: nivo-overlay-in 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	@keyframes nivo-overlay-in {
		from { opacity: 0; transform: translateY(-10px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@media (prefers-reduced-motion: reduce) {
		.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open {
			animation: none;
		}
	}

	/* ── WP structural wrappers (open state) ───────────────────── */

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close,
	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
		display: flex !important;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		position: static !important;
		width: 100% !important;
	}

	/* ── Close button ──────────────────────────────────────────── */
	/*
	 * WP 7.0 sets position:absolute top-right on the close button.
	 * Reset to static so it flows naturally in our column layout.
	 */

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
		position: static !important;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
		border-bottom: 1px solid var(--wp--preset--color--neutral-100);
		border-left: none !important;
		border-right: none !important;
		border-top: none !important;
		flex-shrink: 0;
		width: 100%;
		background: transparent;
		cursor: pointer;
		color: var(--wp--preset--color--text-secondary);
		transition: color var(--wp--custom--transition--fast);
	}

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close:hover {
		color: var(--wp--preset--color--text-primary);
	}

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close svg {
		width: 22px;
		height: 22px;
	}

	/* ── Nav content area ──────────────────────────────────────── */
	/*
	 * WP 7.0 adds padding-top: calc(2rem + 24px) here for the absolute close button.
	 * We reset it — our close button is in normal flow.
	 */

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		flex: 1;
		overflow-y: auto;
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5) !important;
		display: flex !important;
		flex-direction: column;
	}

	/* ── Nav list ──────────────────────────────────────────────── */

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		gap: 0;
		list-style: none;
		margin: 0;
		padding: 0;
		align-items: initial !important;
		justify-content: initial !important;
	}

	/* ── Nav items ─────────────────────────────────────────────── */

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
		display: block !important;
		border-bottom: 1px solid var(--wp--preset--color--neutral-100);
		background: transparent !important;
		color: inherit !important;
	}

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child {
		border-bottom: none;
	}

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		display: block !important;
		padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--2) !important;
		font-size: 1.0625rem !important;
		font-weight: 500 !important;
		color: var(--wp--preset--color--text-primary) !important;
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		text-decoration: none !important;
		transition: color var(--wp--custom--transition--fast) !important;
	}

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--primary-600) !important;
	}

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item > .wp-block-navigation-item__content,
	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content[aria-current="page"] {
		color: var(--wp--preset--color--primary-600) !important;
		font-weight: 600 !important;
	}

	/* ── Mega menu chevron hidden inside overlay ───────────────── */

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.nivo-mega-menu__chevron {
		display: none !important;
	}

	/* ── Submenus in mobile overlay ────────────────────────────── */
	/*
	 * WP 7.0 already resets submenus to position:static inside .is-menu-open.
	 * We reinforce and add our indentation.
	 */

	.nivo-header__nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		border: none !important;
		box-shadow: none !important;
		padding-left: var(--wp--preset--spacing--4) !important;
		transform: none !important;
		pointer-events: auto !important;
		background: transparent !important;
		min-width: 0 !important;
	}

}