/* Cabecera y pie: lo mínimo que todo proyecto necesita, y nada de diseño.
 *
 * QUÉ HAY AQUÍ
 *
 * El cambio entre el menú horizontal y el panel de móvil, que es la única parte
 * del menú estándar que el plugin NO puede resolver por su cuenta: depende del
 * umbral en el que el menú de cada proyecto deja de caber, y eso lo sabe el
 * tema. El resto —la apertura lateral, el icono que morfea, el orden del panel,
 * el foco atrapado, el Esc, el bloqueo de scroll— viene entero de Zaguán FSE
 * Core. Ver docs/convenciones-fse.md §2.0.
 *
 * QUÉ HACER AL VOLCAR
 *
 * Ajustar el umbral y los `--zgn-nav-*` de abajo a la paleta y la tipografía del
 * proyecto. Si hace falta reescribir alguna regla de estructura del panel, es
 * señal de que le falta un token al plugin: se añade allí (§9).
 *
 * @package zaguan
 */

/* --- Vestido del panel ---------------------------------------------------
   Todo lo visible del menú de móvil sale de estas variables. Los valores por
   defecto del plugin son `base` y `contrast`, que todo theme.json de Zaguán
   tiene; aquí se dejan explícitos para que se vean de un vistazo y se cambien
   sin ir a buscarlos. */
.zgn-nav,
.zgn-nav-toggle {
	--zgn-nav-fondo: var(--wp--preset--color--contrast);
	--zgn-nav-tinta: var(--wp--preset--color--base);
	--zgn-nav-icono: 26px;

	/* Duración de la entrada. El lado se cambia con `--zgn-nav-desde: -100%`,
	   que hace que el panel entre por la izquierda. */
	--zgn-nav-dur: 0.34s;
}

/* --- El cambio de cabecera ----------------------------------------------
   UMBRAL DEL PROYECTO. 991px es un punto de partida razonable —un menú de cinco
   entradas deja de caber antes de que el contenido se apile—, no una medida
   sagrada: medir cuándo el menú horizontal empieza a apretar y mover esto.

   Los dos lados son necesarios. Sin el `min-width`, el disparador se ve también
   en escritorio, encima del menú horizontal. */
@media (min-width: 992px) {
	.zgn-nav,
	.zgn-nav-toggle {
		display: none;
	}
}

@media (max-width: 991px) {
	/*
	 * Por el hijo directo, y no `.zgn-menu` a secas. WordPress emite las reglas
	 * de layout del bloque —`body .is-layout-flex`,
	 * `.wp-container-core-navigation-is-layout-…`— en un `<style>` que llega
	 * DESPUÉS de las hojas del tema, así que a igual especificidad gana él y el
	 * menú horizontal se queda visible en móvil. Con el hijo directo son dos
	 * clases y no hace falta `!important`.
	 *
	 * Ojo: core copia la clase del bloque a su contenedor interno, así que hay
	 * dos elementos con `.zgn-menu`. Se apunta al que cuelga de la barra.
	 */
	.zgn-barra > .zgn-menu {
		display: none;
	}
}