/* ==========================================================================
   Nav Overlay — Split layout con immagini hover
   ========================================================================== */

/* ---- Layout split 50/50 — solo desktop ---------------------------------- */
@media (min-width: 768px) {

	/* Rimuovi padding sull'overlay stesso */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 0 !important;
	}

	/* Content area: grid 1 riga, 2 colonne, altezza piena */
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		height: 100vh;
		width: 100%;
		padding: 0 !important;
		align-items: stretch;
	}

	/* ---- Pannello immagini — colonna sinistra, altezza piena ------------ */
	.nav-overlay-image-panel {
		grid-column: 1;
		position: relative;
		overflow: hidden;
	}

	.nav-overlay-image-panel img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100vh;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.45s ease;
		pointer-events: none;
		will-change: opacity;
	}

	.nav-overlay-image-panel img.is-active {
		opacity: 1;
	}

	/* ---- Pulsante chiusura — assoluto in alto a destra dell'overlay ----- */
	.wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 1.5rem;
		right: 1.5rem;
		z-index: 10;
	}

	/* ---- Menu — colonna destra, colonnato verticalmente, centrato ------- */
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
		grid-column: 2;
		align-self: top;
		flex-direction: column !important;
		align-items: flex-end !important;
		justify-content: center;
		gap: var(--wp--preset--spacing--20, 1rem) !important;
		padding-right: 3rem;
		padding-top: 5rem; /* spazio per non sovrapporre la X */
	}
}

/* ---- Mobile: nessun pannello immagini ----------------------------------- */
@media (max-width: 767px) {
	.nav-overlay-image-panel {
		display: none;
	}
}