/**
 * @layer components — menú off-canvas mobile (<dialog> nativo), con
 * transición de entrada/salida (fila #2 del inventario de movimiento):
 * opacity + translateX en el panel, blur en el ::backdrop, vía
 * @starting-style + transition-behavior: allow-discrete — sin JS, el
 * diálogo sigue siendo funcional y accesible vía showModal()/close().
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.menu-offcanvas {
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		background:
			radial-gradient(circle at 50% 165%, color-mix(in oklab, var(--c-white) 30%, var(--c-accent-600)) 0%, transparent 65%),
			var(--c-accent-600);
		color: var(--c-white);
		opacity: 0;
		transform: translateX(24px);
		transition:
			opacity var(--dur-3) var(--ease-glide),
			transform var(--dur-3) var(--ease-glide),
			overlay var(--dur-3) allow-discrete,
			display var(--dur-3) allow-discrete;
	}

	.menu-offcanvas[open] {
		opacity: 1;
		transform: translateX(0);
	}

	@starting-style {
		.menu-offcanvas[open] {
			opacity: 0;
			transform: translateX(24px);
		}
	}

	.menu-offcanvas::backdrop {
		background: oklch(0.15 0.01 100 / 0);
		transition:
			background var(--dur-3) var(--ease-glide),
			backdrop-filter var(--dur-3) var(--ease-glide),
			overlay var(--dur-3) allow-discrete,
			display var(--dur-3) allow-discrete;
	}

	.menu-offcanvas[open]::backdrop {
		background: oklch(0.15 0.01 100 / .35);
		backdrop-filter: blur(6px);
	}

	@starting-style {
		.menu-offcanvas[open]::backdrop {
			background: oklch(0.15 0.01 100 / 0);
			backdrop-filter: blur(0);
		}
	}

	@media (width >= 1024px) {
		.menu-offcanvas {
			display: none;
		}
	}

	.menu-offcanvas[open] {
		display: flex;
		flex-direction: column;
	}

	.menu-offcanvas__cabecera {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-4) var(--gutter);
		border-bottom: 1px solid color-mix(in oklab, var(--c-white) 20%, transparent);
	}

	.menu-offcanvas__telefono {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-family: var(--font-body);
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--c-white) !important;
		text-decoration: none !important;
	}

	.menu-offcanvas__cerrar {
		display: inline-flex;
		padding: var(--space-2);
	}

	.menu-offcanvas__cerrar .icono {
		width: 24px;
		height: 24px;
	}

	.menu-offcanvas__nav {
		flex: 1;
		overflow-y: auto;
		padding: var(--space-5) var(--gutter);
	}

	.nav-principal__lista.nav-principal__lista--offcanvas {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		text-align: left;
	}

	/* .menu-offcanvas como ancla extra de especificidad: sin esto,
	   ".nav-principal__lista > li > a:not(.boton)" de nav.css (escritorio,
	   sin el modificador --offcanvas, pero el <ul> del offcanvas lleva las
	   dos clases) empata en especificidad y gana por cargar después
	   (alfabético) — pisando tamaño, peso y color acá abajo. */
	.menu-offcanvas .nav-principal__lista--offcanvas > li > a:not(.boton) {
		display: block;
		padding-block: var(--space-3);
		font-family: var(--font-body);
		font-size: 13px !important;
		font-weight: 700;
		text-align: left;
		color: var(--c-white) !important;
		text-decoration: none !important;
		border-bottom: none !important;
	}

	.nav-principal__lista--offcanvas .nav-principal__submenu,
	.nav-principal__lista--offcanvas .sub-menu {
		position: static;
		display: block;
		margin: 0;
		padding: 0 0 var(--space-2) var(--space-4);
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.nav-principal__lista--offcanvas .nav-principal__submenu li a,
	.nav-principal__lista--offcanvas .sub-menu li a {
		display: block;
		padding: var(--space-2) 0;
		font-family: var(--font-body);
		font-size: var(--text-base);
		font-weight: 400;
		text-align: left;
		color: var(--c-white) !important;
		text-decoration: none !important;
	}

	.nav-principal__lista--offcanvas .nav-principal__submenu li a:hover,
	.nav-principal__lista--offcanvas .sub-menu li a:hover,
	.nav-principal__lista--offcanvas .nav-principal__submenu li a:focus-visible,
	.nav-principal__lista--offcanvas .sub-menu li a:focus-visible {
		color: var(--c-accent-400) !important;
		background: transparent;
	}

	.nav-principal__lista--offcanvas .nav-principal__cta {
		margin-top: var(--space-4);
	}

	/* El link real de "Contacto" (armado en Apariencia > Menús) no puede
	   llevar la clase .boton en el <a> —WP sólo permite clases custom en
	   el <li>—, así que cae en la regla genérica ".../li > a:not(.boton)"
	   de más arriba (más específica, pinta todo de blanco). Estos
	   selectores repiten esa misma forma (li.nav-principal__cta > a) para
	   empatarle en especificidad y ganar por venir después en el archivo,
	   y no dependen de que el <a> tenga .boton para verse como botón. */
	.menu-offcanvas .nav-principal__lista--offcanvas .nav-principal__cta .boton,
	.menu-offcanvas .nav-principal__lista--offcanvas li.nav-principal__cta > a {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		padding: 14px 28px;
		border-bottom: 0;
		background: var(--c-white) !important;
		color: var(--c-ink-900) !important;
	}
}