/* ==========================================================
   VARIABLES
========================================================== */

.monegal-menu {
	--menu-panel-width: 25vw;
	--menu-transition-duration: 300ms;

	--menu-color-1: #ffffff;
	--menu-color-2: #ffffff;
	--menu-color-3: #ffffff;
	--menu-color-text: #181818;
	--menu-color-border: rgba(0, 0, 0, 0.12);

	--menu-z-index: 10000;

}


/* ==========================================================
   RESET BÀSIC
========================================================== */
.monegal-menu,
.monegal-menu *,
.monegal-menu *::before,
.monegal-menu *::after {
	box-sizing: border-box;
}






.monegal-menu button,
.monegal-menu a {
	font: inherit;
}

.monegal-menu button {
	color: inherit;
}


/* Oculta contingut visualment, però el manté accessible */
.monegal-menu .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================
   BLOQUEIG DE L’SCROLL
========================================================== */

html.menu-is-open,
body.menu-is-open {
	overflow: hidden;
}


/* ==========================================================
   BOTÓ HAMBURGUESA
========================================================== */

.monegal-menu .menu-toggle {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: calc(var(--menu-z-index) + 20);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;
	padding: 9px;

	color: var(--menu-color-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.monegal-menu .menu-toggle__icon {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 22px;
}

.monegal-menu .menu-toggle__icon > span {
	display: block;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: center;
	transition:
		transform var(--menu-transition-duration) ease,
		opacity var(--menu-transition-duration) ease;
}


/* Hamburguesa convertida en creu */


body .monegal-menu .menu-toggle.is-open {
	color: #000000 !important;
	filter: none;
}

.monegal-menu .menu-toggle.is-open .menu-toggle__icon > span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

.monegal-menu .menu-toggle.is-open .menu-toggle__icon > span:nth-child(2) {
	opacity: 0;
}

.monegal-menu .menu-toggle.is-open .menu-toggle__icon > span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}


/* Accessibilitat amb teclat */
.monegal-menu .menu-toggle:focus-visible,
.monegal-menu .menu-link:focus-visible,
.monegal-menu .menu-section__open:focus-visible,
.monegal-menu .menu-family__open:focus-visible,
.monegal-menu .menu-back:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.monegal-menu .menu-toggle:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}


/* ==========================================================
   ESTRUCTURA GENERAL DEL MENÚ
========================================================== */

.monegal-menu .main-menu {
	position: relative;
	z-index: var(--menu-z-index);
}

.monegal-menu .menu-list {
	padding: 0;
	margin: 0;
	list-style: none;
}

.monegal-menu .menu-item {
	padding: 0;
	margin: 0;
}

.monegal-menu .menu-panel__title {
	margin: 0 0 28px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* ==========================================================
   ENLLAÇOS I BOTONS
========================================================== */

.monegal-menu .menu-link {
	display: block;
	width: 100%;
	padding: 16px 0;

	color: var(--menu-color-text);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;

	background: transparent;
	border: 0;
	cursor: pointer;

}


.monegal-menu .menu-link--level-1 {
	font-family: "Optima", Sans-serif;
	position: relative;
	/*
	 * Reservem sempre l’espai del bullet.
	 * Així el text no es desplaça quan apareix.
	 */
	padding-left: 20px;
	font-size: 36px;
	font-weight: 400;
	text-transform: uppercase;
}

.monegal-menu .menu-link--family {
	font-size: 14px;
	text-transform: uppercase;
}

.monegal-menu .menu-link--product {
	font-size: 14px;
	text-transform: uppercase;
}

/* Manté la x de les col·laboracions en minúscula */
.monegal-menu .menu-collaboration-x {
	text-transform: lowercase;
}

/* Perfums de la col·lecció Katharsis */
.monegal-menu .menu-family[data-family="katharsis"]
	.menu-link--product:not(.menu-link--all-products) {
	color: #ff5242;
}

/* Enllaç "Ver todas las familias" */
.monegal-menu .menu-item--all-families .menu-link {
	font-weight: 500;
}

.monegal-menu .menu-item--all-products .menu-link{
	font-weight: 500;
}

/* ==========================================================
   SEGON I TERCER NIVELL: SUBRATLLAT
========================================================== */

.monegal-menu .menu-link--family,
.monegal-menu .menu-link--product {
	opacity: 1;

	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 10px;
	text-decoration-skip-ink: auto;

	transition: text-decoration-color 180ms ease;
}


/* Segon nivell: família en hover, focus o activa */
.monegal-menu .menu-link--family:hover,
.monegal-menu .menu-link--family:focus-visible,
.monegal-menu .menu-family.is-active
	> .menu-family__row
	.menu-link--family {
	opacity: 1;
	text-decoration-color: currentColor;
}


/* Tercer nivell: perfum en hover, focus o actiu */
.monegal-menu .menu-link--product:hover,
.monegal-menu .menu-link--product:focus-visible,
.monegal-menu .menu-link--product.is-active {
	opacity: 1;
	text-decoration-color: currentColor;
}



/* Fila que conté l’enllaç de família i la fletxa mobile */
.monegal-menu .menu-section__row,
.monegal-menu .menu-family__row {
	display: flex;
	align-items: center;
	width: 100%;
}

.monegal-menu .menu-section__row .menu-link,
.monegal-menu .menu-family__row .menu-link {
	flex: 1;
}


/* En desktop no mostrem els botons de retorn */
.monegal-menu .menu-back {
	display: none;
}


/* ==========================================================
   DESKTOP: QUATRE BANDES
========================================================== */

@media (min-width: 1025px) {

	/*
	 * En desktop la zona de hover acaba amb el text.
	 * La fila continua ocupant tota la banda, però ja no activa
	 * una opció quan el cursor passa pel seu espai buit.
	 */
	.monegal-menu .menu-section__row .menu-link,
	.monegal-menu .menu-family__row .menu-link,
	.monegal-menu .menu-panel--level-3 .menu-link--product {
		flex: 0 1 auto;
		width: fit-content;
		max-width: 100%;
	}

	/* Propietats compartides per totes les bandes */
	.monegal-menu .menu-panel {
		position: fixed;
		top: 0;

		width: var(--menu-panel-width);
		height: 100vh;
		height: 100dvh;

		padding: 100px 23px 40px;
		overflow-x: hidden;
		overflow-y: auto;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		border-right: 1px solid var(--menu-color-border);

		/*
		 * Canvi instantani entre bandes en desktop.
		 * El hover intent del JavaScript ja evita canvis accidentals
		 * i així no es deixa veure el contingut de la web durant el fade.
		 */
		transition: none;
	}


	/* Estat visible compartit */
	body.menu-is-open
		.monegal-menu
		.menu-panel--level-1,
	.monegal-menu
		.menu-branch.is-open
		> .menu-panel--level-2,
	.monegal-menu
		.menu-family__detail.is-open
		> .menu-panel--level-3,
	.monegal-menu
		.menu-family__detail.is-open
		> .menu-panel--level-4 {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	
		transition-delay: 0s;
	}


	/* BANDA 1 */
	.monegal-menu .menu-panel--level-1 {
		left: 0;
		z-index: calc(var(--menu-z-index) + 1);
		background: var(--menu-color-1);
	}


	/* BANDA 2 */
	.monegal-menu .menu-panel--level-2 {
		left: 25vw;
		z-index: calc(var(--menu-z-index) + 2);
	
		/*
		 * Eliminem el padding lateral del panell perquè
		 * les famílies arribin fins al límit de la banda 3.
		 */
		padding-right: 0;
		padding-left: 0;
	
		background: var(--menu-color-2);
	}
	
	
	/*
	 * Recuperem visualment el padding al títol.
	 */
	.monegal-menu .menu-panel--level-2 > .menu-panel__title {
		padding-right: 2.5vw;
		padding-left: 2.5vw;
	}
	
	
	/*
	 * La llista ocupa tota l’amplada de la banda.
	 */
	.monegal-menu .menu-panel--level-2 > .menu-list {
		width: 100%;
	}
	
	
	/*
	 * El padding passa del panell a la fila interactiva.
	 * D’aquesta manera, el padding també activa la família.
	 */
	.monegal-menu .menu-panel--level-2 .menu-family__row {
		width: 100%;
		padding-right: 2.5vw;
		padding-left: 2.5vw;
	}


	/* BANDA 3 */
	.monegal-menu .menu-panel--level-3 {
		left: 50vw;
		z-index: calc(var(--menu-z-index) + 3);
		background: var(--menu-color-3);
	}


	/* BANDA 4 */
	.monegal-menu .menu-panel--level-4 {
		left: 75vw;
		z-index: calc(var(--menu-z-index) + 4);

		padding: 0;
		overflow: hidden;

		background: var(--menu-color-3);
		border-right: 0;
	}
	
	
	/* Contingut sobre la imatge de la banda 4 */
	.monegal-menu .menu-product-image__content {
		position: absolute;
		left: 30px;
		right: 30px;
		bottom: 30px;
		z-index: 2;
	
		color: #ffffff;
	}
	
	.monegal-menu .menu-product-image__title {
		margin: 0 0 8px;
	
		font-size: 24px;
		font-weight: 600;
		line-height: 1.1;
		text-transform: uppercase;
	}
	
	.monegal-menu .menu-product-image__subtitle {
		margin: 0 0 20px;	
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
	}
	
	.monegal-menu .menu-product-image__button {
		display: inline-block;
		width: auto;
		padding: 10px 18px;	
		color: #000;
		font-size: 12px;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
		background-color: #fff;
		border-radius: 20px;
		
	}
	
	.monegal-menu .menu-product-image__button:hover,
	.monegal-menu .menu-product-image__button:focus-visible {
		color: #fff;
		background: #000;
	}




	
	/* ======================================================
	   PRIMER NIVELL: BULLET EN HOVER I ACTIU
	====================================================== */
	

	
	
	/* Bullet ocult inicialment */
	.monegal-menu .menu-link--level-1::before {
		content: "";
	
		position: absolute;
		top: 50%;
		left: 0;
	
		width: 7px;
		height: 7px;
	
		background-image: url("https://monegalperfumes.com/wp-content/uploads/2026/04/bullet.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	
		opacity: 0;
		transform: translateY(-50%);
	
		transition: opacity 180ms ease;
	}
	
	
	/* Hover */
	.monegal-menu .menu-link--level-1:hover::before,
	
	/* Navegació amb teclat */
	.monegal-menu .menu-link--level-1:focus-visible::before,
	
	/* Submenú obert */
	.monegal-menu .menu-link--level-1[aria-expanded="true"]::before,
	
	/* Pàgina actual */
	.monegal-menu .menu-link--level-1[aria-current="page"]::before {
		opacity: 1;
	}


	/* ======================================================
	   IMATGES DE LA BANDA 4
	====================================================== */

	.monegal-menu .menu-product-image {
		position: absolute;
		inset: 0;

		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transition:
			opacity var(--menu-transition-duration) ease,
			visibility 0s linear var(--menu-transition-duration);
	}

	.monegal-menu .menu-product-image.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: none;
	
		transition-delay: 0s;
	}
	
	/*
	 * Només la imatge de la família que està oberta
	 * pot rebre clics.
	 */
	.monegal-menu
		.menu-family__detail.is-open
		> .menu-panel--level-4
		> .menu-product-image.is-active {
		pointer-events: auto;
	}

	.monegal-menu .menu-product-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	
	/* sombreta per si no es llegeixen be els textos inferiors*/
	
	.monegal-menu .menu-product-image::after {
		content: "";
	
		position: absolute;
		inset: 0;
		z-index: 1;
	
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.65) 0%,
			rgba(0, 0, 0, 0) 55%
		);
	
		pointer-events: none;
	}
	
	/* Promoció que ocupa conjuntament les bandes 3 i 4 */
	.monegal-menu .menu-panel--promo {
		left: 50vw;
		z-index: calc(var(--menu-z-index) + 2);
	
		width: 50vw;
		padding: 0;
		overflow: hidden;
	
		background: var(--menu-color-3);
		border-right: 0;
	}
	
	/* Mostrem la promoció quan la seva branca està oberta */
	.monegal-menu
		.menu-branch.is-open
		> .menu-panel--promo {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	
		transition-delay: 0s;
	}
	
	.monegal-menu .menu-section-promo {
		position: relative;
	
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}
	
	.monegal-menu .menu-section-promo > img {
		display: block;
	
		width: 100%;
		height: 100%;
	
		object-fit: cover;
		object-position: center;
	}

	/* Diverses imatges seleccionables dins d'una promoció de secció. */
	.monegal-menu
		.menu-panel--promo
		> .menu-section-promo.menu-product-image {
		position: absolute;
		inset: 0;
	}

	.monegal-menu
		.menu-branch.is-open:not(:has(.menu-family__detail.is-open))
		> .menu-panel--promo
		> .menu-section-promo.menu-product-image.is-active {
		pointer-events: auto;
	}

	/*
	 * Amaguem la promoció general de la secció
	 * quan s'obre una família.
	 */
	.monegal-menu
		.menu-branch:has(.menu-family__detail.is-open)
		> .menu-panel--promo {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	
		transition: none;
	}

}




/* ==========================================================
   USUARIS QUE PREFEREIXEN MENYS ANIMACIÓ
========================================================== */

@media (prefers-reduced-motion: reduce) {

	.monegal-menu .menu-toggle__icon > span,
	.monegal-menu .menu-panel,
	.monegal-menu .menu-product-image,
	.monegal-menu .menu-link {
		transition-duration: 1ms;
	}

}