/*
 * Panel del menú móvil de Beduria A.
 *
 * Compañero de js/nav.js. Ambos se encolan de forma GLOBAL desde functions.php
 * para las 6 páginas, así el arreglo vive en un único sitio (la barra está
 * hardcodeada en cada HTML, pero su comportamiento se centraliza aquí).
 *
 * En ≤768px el CSS de cada página oculta .nav-links (display:none) y muestra el
 * botón. Aquí definimos el estado ABIERTO: al añadir la clase `nav-open` a la
 * barra, .nav-links se despliega como panel sólido debajo de la barra.
 *
 * Los var(--token, valor) llevan respaldo por si esta hoja cargara antes que la
 * de la página que define los tokens en :root.
 */

@media (max-width: 768px) {
	/* La barra necesita ser referencia de posicionamiento del panel. */
	.nav {
		position: fixed; /* ya lo es en las páginas; lo reafirmamos por robustez */
	}

	/* Estado abierto: el panel se muestra como columna sólida bajo la barra. */
	.nav.nav-open .nav-links {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-sm, 1rem);

		position: absolute;
		top: 100%;
		left: 0;
		right: 0;

		padding: var(--space-md, 1.5rem) var(--space-gutter, 1.5rem) var(--space-lg, 2.5rem);
		background: var(--bg-primary, #faf8f4); /* sólido, no translúcido */
		border-bottom: 1px solid var(--border, #ddd5c8);
		box-shadow: var(--shadow-md, 0 4px 16px rgba(26,24,20,0.08));
	}

	/* Enlaces del menú a tamaño cómodo para el dedo. */
	.nav.nav-open .nav-links a {
		padding: 0.6rem 0;
		font-size: 0.95rem;
	}

	/* El selector de idioma pasa a fila propia, sin el borde izquierdo de escritorio. */
	.nav.nav-open .nav-lang {
		margin-left: 0;
		padding-left: 0;
		padding-top: var(--space-xs, 0.5rem);
		border-left: none;
		border-top: 1px solid var(--border, #ddd5c8);
		justify-content: flex-start;
	}

	/* El botón Reservar ocupa el ancho del panel y queda destacado al final. */
	.nav.nav-open .nav-cta {
		text-align: center;
		margin-top: var(--space-xs, 0.5rem);
	}

	/* Animación sutil de despliegue (respeta prefers-reduced-motion). */
	@media (prefers-reduced-motion: no-preference) {
		.nav.nav-open .nav-links {
			animation: beduria-nav-drop 0.22s ease;
		}
		@keyframes beduria-nav-drop {
			from { opacity: 0; transform: translateY(-8px); }
			to   { opacity: 1; transform: translateY(0); }
		}
	}
}