/* Desktop mitjà */
@media (min-width: 1200px) and (max-width: 1399px) {

	.monegal-menu .menu-panel--level-1 {
		padding: 90px 23px 40px;
	}
	
	.monegal-menu .menu-link--level-1 {
	  font-size: 33px;
	}
	
	.monegal-menu .menu-panel--level-1 .menu-link {
		padding-top: 14px;
		padding-bottom: 14px;
	}
	
	.monegal-menu .menu-panel--level-2,
	.monegal-menu .menu-panel--level-3 {
		padding-top: 100px;
	}
	
	.monegal-menu .menu-panel--level-2 .menu-link,
	.monegal-menu .menu-panel--level-3 .menu-link {
		padding-top: 10px;
	}
	
	.monegal-menu .menu-link--family,
	.monegal-menu .menu-link--product {
	  font-size: 12px;
	  text-underline-offset: 8px;
	}


}



/* Desktop petit */
@media (min-width: 1025px) and (max-width: 1199px) {

	.monegal-menu .menu-panel--level-1 {
		padding: 70px 23px 40px;
	}
	
	.monegal-menu .menu-link--level-1 {
	  font-size: 28px;
	}
	
	.monegal-menu .menu-panel--level-1 .menu-link {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	
	.monegal-menu .menu-panel--level-2,
	.monegal-menu .menu-panel--level-3 {
		padding-top: 80px;
	}
	
	.monegal-menu .menu-panel--level-2 .menu-link,
	.monegal-menu .menu-panel--level-3 .menu-link {
		padding-top: 10px;
	}
	
	.monegal-menu .menu-link--family,
	.monegal-menu .menu-link--product {
	  font-size: 12px;
	  text-underline-offset: 5px;
	}

	

}
	
	
	
/* ==========================================================
   MOBILE: UNA CAPA CADA VEGADA
========================================================== */

@media (max-width: 1024px) {
	.monegal-menu {
		/* Alineat amb l'extrem visible de la creu de tancament. */
		--menu-mobile-gutter: 29px;
	}

	.monegal-menu .menu-toggle {
		top: 10px;
		left: 20px;
	}


	/* Propietats compartides per les capes mobile */
	.monegal-menu .menu-panel {
		position: fixed;
		inset: 0;

		width: 100%;
		height: 100vh;
		height: 100dvh;

		padding: 100px var(--menu-mobile-gutter) 40px;
		overflow-x: hidden;
		overflow-y: auto;

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

		transform: translateX(-100%);

		transition:
			transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 300ms ease,
			visibility 0s linear 400ms;
	}


	/*
	 * Capa visible:
	 * entra des de l’esquerra fins a ocupar tota la pantalla.
	 */
	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 {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateX(0);

		transition-delay: 0s;
	}


	/* CAPA 1 */
	.monegal-menu .menu-panel--level-1 {
		z-index: calc(var(--menu-z-index) + 1);
		background: var(--menu-color-1);
		padding-left: calc(var(--menu-mobile-gutter) - 19px);
	}


	/* CAPA 2 */
	.monegal-menu .menu-panel--level-2 {
		z-index: calc(var(--menu-z-index) + 2);
		background: var(--menu-color-2);
		padding-left: calc(var(--menu-mobile-gutter) + 3px);
	}


	/* CAPA 3 */
	.monegal-menu .menu-panel--level-3 {
		z-index: calc(var(--menu-z-index) + 3);
		background: var(--menu-color-3);
		padding-left: calc(var(--menu-mobile-gutter) + 3px);
	}


	/*
	 * En mobile no mostrem la banda 4.
	 * Els productes són l’últim nivell del menú.
	 */
	.monegal-menu .menu-panel--level-4 {
		display: none;
	}


	/* ======================================================
	   BOTONS DE RETORN
	====================================================== */

	.monegal-menu .menu-back {
		display: flex;
		align-items: center;
		gap: 12px;

		width: 100%;
		padding: 0 0 28px;

		color: var(--menu-color-text);
		font-size: 16px;
		text-align: left;
		text-transform: uppercase;

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

	/*
	 * Chevron de retorn. El caràcter de l'HTML queda ocult visualment,
	 * però el contenidor continua sent decoratiu gràcies a aria-hidden.
	 */
	.monegal-menu .menu-back > [aria-hidden="true"] {
		display: block;
		flex: 0 0 11px;
		width: 11px;
		height: 11px;

		font-size: 0;
		border: solid currentColor;
		border-width: 0 1px 1px 0;
		transform: translateX(4px) rotate(135deg);
	}


	/* ======================================================
	   FAMÍLIES
	====================================================== */

	

	.monegal-menu .menu-section__row,
	.monegal-menu .menu-family__row {
		display: flex;
		align-items: stretch;
		width: 100%;
	}
	
	.monegal-menu .menu-section__row .menu-link,
	.monegal-menu .menu-family__row .menu-link {
		display: flex;
		align-items: center;
		flex: 1;
	}


	/*
	 * Els elements que obren un subnivell reben el mateix chevron,
	 * girat cap a la dreta i alineat amb el marge dret del panell.
	 */
	.monegal-menu .menu-section__row [data-menu-open],
	.monegal-menu .menu-family__row [data-menu-open] {
		position: relative;
		padding-right: 34px;
	}

	.monegal-menu .menu-section__row [data-menu-open]::after,
	.monegal-menu .menu-family__row [data-menu-open]::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 2px;

		width: 11px;
		height: 11px;

		border: solid currentColor;
		border-width: 0 1px 1px 0;
		transform: translateY(-50%) rotate(-45deg);
		pointer-events: none;
	}


	/* Mides dels textos mobile */
	.monegal-menu .menu-link--level-1 {
		font-size: 25px;
	}

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

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

	/* En pantalles tàctils no mantenim el subratllat d'hover o actiu. */
	.monegal-menu .menu-link--family,
	.monegal-menu .menu-link--product,
	.monegal-menu .menu-link--family:hover,
	.monegal-menu .menu-link--family:focus,
	.monegal-menu .menu-link--family:focus-visible,
	.monegal-menu .menu-link--family:active,
	.monegal-menu .menu-link--product:hover,
	.monegal-menu .menu-link--product:focus,
	.monegal-menu .menu-link--product:focus-visible,
	.monegal-menu .menu-link--product:active,
	.monegal-menu .menu-family.is-active > .menu-family__row .menu-link--family,
	.monegal-menu .menu-link--product.is-active {
		text-decoration: none !important;
		transition: none;
	}


	/* Sense requadres de focus ni ressaltat tàctil en mobile. */
	.monegal-menu a,
	.monegal-menu button,
	.monegal-menu a:focus,
	.monegal-menu a:focus-visible,
	.monegal-menu a:active,
	.monegal-menu button:focus,
	.monegal-menu button:focus-visible,
	.monegal-menu button:active {
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
		outline: none !important;
		box-shadow: none !important;
		border: 0 !important;
		border-radius: 0;
	}
	
	
	/* promo en mobile*/
	.monegal-menu .menu-panel--promo {
		display: none;
	}

}