/**
 * Arte Dolciaria — mega menu categorie con miniature (solo desktop ≥ 1025px).
 *
 * Sotto i 1025px il pannello è sempre nascosto e il menu resta quello nativo
 * di Elementor/WordPress. Personalizzazioni rapide: variabili qui sotto.
 */
:root {
	--ad-mega-bg: #fff;
	--ad-mega-band: #ebdfe2;            /* fascia rosa superiore */
	--ad-mega-ink: #38343a;
	--ad-mega-accent: #d1a1ae;
	--ad-mega-thumb: 120px;             /* lato miniatura */
	--ad-mega-card: 150px;              /* larghezza colonna */
	--ad-mega-max: 1440px;              /* larghezza massima contenuto */
	--ad-mega-z: 1000;
}

/* Il pannello non esiste fuori dal desktop né nel menu a tendina mobile. */
.ad-mega {
	display: none;
}

/* Mai nel footer (che può usare lo stesso menu dell'header). */
.elementor-location-footer .ad-mega,
.site-footer .ad-mega,
footer .ad-mega {
	display: none !important;
}

@media (min-width: 1025px) {
	.ad-has-mega {
		position: relative;
	}

	/* Sub-menu nativo nascosto su desktop solo dove c'è il pannello.
	 * Escluso il menu a tendina mobile di Elementor e di Hello. */
	nav:not(.elementor-nav-menu--dropdown):not(.site-navigation-dropdown) .ad-has-mega > .sub-menu {
		display: none !important;
	}

	nav:not(.elementor-nav-menu--dropdown):not(.site-navigation-dropdown) .ad-has-mega > .ad-mega {
		position: absolute;
		z-index: var(--ad-mega-z);
		top: 100%;
		left: var(--ad-mega-left, 0);
		display: block;
		box-sizing: border-box;
		/* Larghezza e posizione calcolate dal JS per coprire esattamente la
		 * finestra: il pannello chiuso non deve mai sporgere a destra
		 * (altrimenti compare la barra di scorrimento orizzontale). */
		width: var(--ad-mega-width, 0px);
		overflow: var(--ad-mega-overflow, hidden);
		padding-top: var(--ad-mega-gap, 0px); /* ponte invisibile: l'hover non si interrompe */
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
		text-align: left;
		white-space: normal;
		letter-spacing: normal;
		text-transform: none;
	}

	nav:not(.elementor-nav-menu--dropdown):not(.site-navigation-dropdown) .ad-has-mega:hover > .ad-mega,
	nav:not(.elementor-nav-menu--dropdown):not(.site-navigation-dropdown) .ad-has-mega:focus-within > .ad-mega,
	nav:not(.elementor-nav-menu--dropdown):not(.site-navigation-dropdown) .ad-has-mega.ad-mega-open > .ad-mega {
		width: var(--ad-mega-width, 100vw);
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}

	nav:not(.elementor-nav-menu--dropdown):not(.site-navigation-dropdown) .ad-has-mega.ad-mega-closed > .ad-mega {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	nav .ad-has-mega .ad-mega .ad-mega__inner {
		border-top: 14px solid var(--ad-mega-band);
		background: var(--ad-mega-bg);
		box-shadow: 0 18px 36px rgba(32, 23, 41, .08);
	}

	nav .ad-has-mega .ad-mega .ad-mega__group {
		box-sizing: border-box;
		max-width: var(--ad-mega-max);
		margin: 0 auto;
		padding: 22px clamp(20px, 3vw, 48px) 24px;
	}

	nav .ad-has-mega .ad-mega .ad-mega__group + .ad-mega__group {
		padding-top: 0;
	}

	nav .ad-has-mega .ad-mega .ad-mega__head {
		margin: 0 0 6px;
	}

	nav .ad-has-mega .ad-mega .ad-mega__head-link,
	nav .ad-has-mega .ad-mega .ad-mega__all {
		display: inline-flex;
		gap: 6px;
		padding: 4px 0;
		line-height: 1.4;
		white-space: normal;
		color: var(--ad-mega-ink);
		font-size: .78rem;
		font-weight: 500;
		letter-spacing: .14em;
		text-decoration: none;
		text-transform: uppercase;
	}

	nav .ad-has-mega .ad-mega .ad-mega__head-link:hover,
	nav .ad-has-mega .ad-mega .ad-mega__all:hover,
	nav .ad-has-mega .ad-mega .ad-mega__head-link:focus-visible,
	nav .ad-has-mega .ad-mega .ad-mega__all:focus-visible {
		color: var(--ad-mega-accent);
	}

	nav .ad-has-mega .ad-mega .ad-mega__foot {
		margin-top: 8px;
		text-align: center;
	}

	nav .ad-has-mega .ad-mega .ad-mega__rail {
		position: relative;
	}

	nav .ad-has-mega .ad-mega .ad-mega__list {
		display: flex;
		justify-content: safe center;
		gap: 8px;
		margin: 0;
		padding: 6px 2px 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	nav .ad-has-mega .ad-mega .ad-mega__list::-webkit-scrollbar {
		display: none;
	}

	nav .ad-has-mega .ad-mega .ad-mega__card {
		flex: 0 0 var(--ad-mega-card);
		scroll-snap-align: start;
	}

	nav .ad-has-mega .ad-mega .ad-mega__link {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 6px 4px;
		color: var(--ad-mega-ink);
		text-align: center;
		text-decoration: none;
		white-space: normal;
		line-height: normal;
	}

	/* Disco fisso: qualunque proporzione dell'immagine caricata viene
	 * ritagliata in un cerchio, tutti della stessa dimensione. */
	nav .ad-has-mega .ad-mega .ad-mega__media {
		position: relative;
		display: block;
		flex: 0 0 auto;
		box-sizing: border-box;
		width: var(--ad-mega-thumb);
		height: var(--ad-mega-thumb);
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		overflow: hidden;
		background: #f4f1ec;
		/* Safari: mantiene il ritaglio tondo durante lo zoom in hover. */
		-webkit-mask-image: -webkit-radial-gradient(white, black);
		isolation: isolate;
	}

	nav .ad-has-mega .ad-mega .ad-mega__media .ad-mega__img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0;
		border-radius: 0;
		object-fit: cover;
		object-position: center;
		transition: transform .35s ease;
	}

	nav .ad-has-mega .ad-mega .ad-mega__placeholder {
		position: absolute;
		inset: 0;
		display: block;
		background: #f4f1ec;
	}

	nav .ad-has-mega .ad-mega .ad-mega__label {
		font-size: .92rem;
		font-weight: 400;
		line-height: 1.25;
	}

	nav .ad-has-mega .ad-mega .ad-mega__link:hover .ad-mega__img,
	nav .ad-has-mega .ad-mega .ad-mega__link:focus-visible .ad-mega__img {
		transform: scale(1.07);
	}

	nav .ad-has-mega .ad-mega .ad-mega__link:hover .ad-mega__label,
	nav .ad-has-mega .ad-mega .ad-mega__link:focus-visible .ad-mega__label,
	nav .ad-has-mega .ad-mega .ad-mega__card.is-current .ad-mega__label {
		color: var(--ad-mega-accent);
	}

	/* Frecce: compaiono solo se le categorie non stanno in una riga. */
	nav .ad-has-mega .ad-mega .ad-mega__nav {
		position: absolute;
		z-index: 2;
		top: calc(var(--ad-mega-thumb) / 2 + 12px);
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(56, 52, 58, .15);
		border-radius: 50%;
		color: var(--ad-mega-ink);
		background: #fff;
		box-shadow: 0 4px 14px rgba(32, 23, 41, .12);
		font-size: 1.35rem;
		line-height: 1;
		cursor: pointer;
		transform: translateY(-50%);
	}

	nav .ad-has-mega .ad-mega .ad-mega__nav[hidden] {
		display: none;
	}

	nav .ad-has-mega .ad-mega .ad-mega__nav:hover,
	nav .ad-has-mega .ad-mega .ad-mega__nav:focus {
		color: var(--ad-mega-ink);
		background: #f4f1ec;
	}

	nav .ad-has-mega .ad-mega .ad-mega__nav--prev {
		left: -8px;
	}

	nav .ad-has-mega .ad-mega .ad-mega__nav--next {
		right: -8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-mega,
	.ad-mega__img {
		transition: none !important;
	}
}