/**
 * Navegación a pantalla completa: icono de tres líneas y overlay.
 *
 * ESTRUCTURA, NO DISEÑO. Aquí vive lo que hace que el mecanismo funcione —el
 * apilado, la transformación a X, el que el overlay tape la página— y nada más.
 * El color, la tipografía y el espaciado se visten desde el tema con sus presets.
 *
 * Todo valor visible sale de una custom property con fallback al preset del tema:
 * el tema redefine `--zgn-nav-*` en su hoja de cabecera y no necesita reescribir
 * ninguna regla de este fichero. Si el tema no declara nada, se usan los presets
 * `base` y `contrast`, que todo theme.json de Zaguán tiene.
 *
 * Dos aperturas, y las dos tienen que funcionar:
 *   :target        → sin JavaScript. El anchor de apertura apunta a #zgn-nav.
 *   .is-abierto    → con JavaScript, que además atrapa el foco y bloquea scroll.
 * Las reglas van siempre en el mismo selector doble. Escribir solo una deja el
 * menú roto justo en el caso que no se probó.
 */

.zgn-nav,
.zgn-nav-toggle {
	--zgn-nav-fondo: var( --wp--preset--color--base, #fff );
	--zgn-nav-tinta: var( --wp--preset--color--contrast, #111 );
	--zgn-nav-linea: 2px;
	--zgn-nav-icono: 28px;
	--zgn-nav-z: 9000;
}

/* ---------------------------------------------------------------------------
   El disparador: tres líneas que se convierten en X.
   --------------------------------------------------------------------------- */

.zgn-nav-toggle {
	/*
	 * Fijo y no estático: la X tiene que quedarse en su sitio cuando el overlay
	 * ocupa la pantalla. Si el disparador viviera en el flujo de la cabecera,
	 * abrir el menú lo taparía con su propio panel.
	 */
	position: fixed;
	top: var( --zgn-nav-arriba, 1rem );
	right: var( --zgn-nav-derecha, 1rem );

	/* Por encima del overlay: es lo que mantiene la X pulsable. */
	z-index: calc( var( --zgn-nav-z ) + 10 );

	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --zgn-nav-icono );
	height: var( --zgn-nav-icono );
	padding: 0;
	border: 0;
	background: none;
	color: var( --zgn-nav-tinta );
	cursor: pointer;

	/* Área de pulsación cómoda en móvil sin agrandar el icono. */
	box-sizing: content-box;
	padding: 0.5rem;
	margin: -0.5rem;
}

.zgn-nav-toggle__caja {
	position: relative;
	display: block;
	width: 100%;
	height: var( --zgn-nav-icono );
}

.zgn-nav-toggle__caja > span {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: var( --zgn-nav-linea );
	background: currentColor;
	border-radius: var( --zgn-nav-linea );

	/*
	 * La transición va en el hijo y no en el contenedor porque cada línea se
	 * mueve por su cuenta: las dos exteriores rotan y la del medio se desvanece.
	 */
	transition: transform 0.28s ease, opacity 0.18s ease, top 0.28s ease;
}

/* Reparto vertical: 25 % / 50 % / 75 %, centrado por el translate. */
.zgn-nav-toggle__caja > span:nth-child( 1 ) { top: 25%; }
.zgn-nav-toggle__caja > span:nth-child( 2 ) { top: 50%; transform: translateY( -50% ); }
.zgn-nav-toggle__caja > span:nth-child( 3 ) { top: 75%; }

/* El de cerrar nace oculto y ya con forma de X, para que no haya salto al abrir. */
.zgn-nav-toggle--cerrar {
	display: none;
}

.zgn-nav-toggle--cerrar .zgn-nav-toggle__caja > span:nth-child( 1 ) {
	top: 50%;
	transform: translateY( -50% ) rotate( 45deg );
}

.zgn-nav-toggle--cerrar .zgn-nav-toggle__caja > span:nth-child( 2 ) {
	opacity: 0;
}

.zgn-nav-toggle--cerrar .zgn-nav-toggle__caja > span:nth-child( 3 ) {
	top: 50%;
	transform: translateY( -50% ) rotate( -45deg );
}

/*
 * Intercambio de disparadores al abrir.
 *
 * Los dos disparadores se imprimen ANTES del overlay —van en la cabecera, y ahí
 * es donde tienen que estar en el orden de tabulación—, así que desde `:target`
 * no se les puede llegar con `~`, que solo mira hacia delante. Se usa `:has()`,
 * que sí mira hacia atrás, para la apertura sin JavaScript; y la clase del body
 * para la apertura con JavaScript, que es la que cubre los navegadores sin
 * `:has()`. Entre las dos no queda hueco.
 */
body:has( .zgn-nav:target ) .zgn-nav-toggle--abrir,
body.zgn-nav-abierto .zgn-nav-toggle--abrir {
	display: none;
}

body:has( .zgn-nav:target ) .zgn-nav-toggle--cerrar,
body.zgn-nav-abierto .zgn-nav-toggle--cerrar {
	display: flex;
}

/* ---------------------------------------------------------------------------
   Modo morph: un solo control.
   --------------------------------------------------------------------------- */

/*
 * El icono ocupa la caja entera del disparador. En el modo de tres líneas quien
 * da la altura es `.zgn-nav-toggle__caja`, que aquí no existe.
 */
.zgn-nav-toggle--unico > svg {
	width: var( --zgn-nav-icono );
	height: var( --zgn-nav-icono );
	display: block;
}

/*
 * El disparador de cierre de RESERVA: solo se pinta en modo morph y solo tiene
 * sentido sin JavaScript, donde `:target` abre el menú y el control único no
 * puede cerrarlo. En cuanto nav.js arranca marca el <html> y este desaparece,
 * que si no habría dos controles para lo mismo, uno encima del otro.
 *
 * El orden importa: esta regla va DESPUÉS del intercambio de arriba, que es
 * quien le pone `display: flex` al abrir.
 */
.zgn-nav-toggle--reserva {
	display: none;
}

html.zgn-nav-js body:has( .zgn-nav:target ) .zgn-nav-toggle--reserva,
html.zgn-nav-js body.zgn-nav-abierto .zgn-nav-toggle--reserva {
	display: none;
}

/* ---------------------------------------------------------------------------
   El overlay.
   --------------------------------------------------------------------------- */

.zgn-nav {
	position: fixed;
	inset: 0;
	z-index: var( --zgn-nav-z );

	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	overscroll-behavior: contain;

	background: var( --zgn-nav-fondo );

	/*
	 * ENTRA DESLIZANDO DESDE LA DERECHA. Es el comportamiento estándar de los
	 * proyectos FSE de Zaguán, no una variante: un panel que entra dice de dónde
	 * viene y a dónde se va al cerrarse, y un fundido no dice ninguna de las dos.
	 *
	 * Se anima `transform` y no `left`: es la única de las dos que el compositor
	 * resuelve sin recalcular la maqueta, y en un móvil de gama media la
	 * diferencia se ve.
	 *
	 * Cerrado, además de desplazado, `visibility: hidden`: es lo que saca los
	 * enlaces del orden de tabulación. Solo con el desplazamiento seguirían
	 * siendo tabulables y el teclado se perdería en un menú fuera de pantalla.
	 * La visibilidad se retrasa hasta el final de la transición al cerrar, que si
	 * no el panel desaparecería de golpe a mitad de camino.
	 *
	 * El tema cambia el lado con `--zgn-nav-desde: -100%` y el ritmo con
	 * `--zgn-nav-dur`. La estructura no hay que reescribirla.
	 */
	transform: translateX( var( --zgn-nav-desde, 100% ) );
	visibility: hidden;
	transition:
		transform var( --zgn-nav-dur, 0.34s ) cubic-bezier( 0.22, 1, 0.36, 1 ),
		visibility 0s linear var( --zgn-nav-dur, 0.34s );
}

.zgn-nav:target,
.zgn-nav.is-abierto {
	transform: translateX( 0 );
	visibility: visible;
	transition:
		transform var( --zgn-nav-dur, 0.34s ) cubic-bezier( 0.22, 1, 0.36, 1 ),
		visibility 0s linear 0s;
}

.zgn-nav__panel {
	display: flex;
	flex-direction: column;
	gap: var( --zgn-nav-hueco, 2rem );
	width: 100%;
	max-width: var( --wp--style--global--wide-size, 1200px );
	padding: var( --zgn-nav-relleno, 4rem 1.5rem );
	margin-inline: auto;
}

.zgn-nav__logo img {
	max-width: var( --zgn-nav-logo-ancho, 160px );
	height: auto;
}

/* El menú, en vertical: es la petición del diseño, no una consecuencia. */
.zgn-nav__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zgn-nav__nivel {
	display: flex;
	flex-direction: column;
	gap: var( --zgn-nav-hueco-item, 0.25em );
}

.zgn-nav__nivel--hijo {
	padding-inline-start: var( --zgn-nav-sangria, 1.5rem );
}

.zgn-nav__enlace,
.zgn-nav__marca {
	color: var( --zgn-nav-tinta );
	text-decoration: none;
}

.zgn-nav__redes {
	display: flex;
	flex-wrap: wrap;
	gap: var( --zgn-nav-hueco-red, 1rem );
	list-style: none;
	margin: 0;
	padding: 0;
}

.zgn-nav__red-enlace {
	display: inline-flex;
	color: var( --zgn-nav-tinta );
}

/*
 * Con el overlay abierto por JS se añade esta clase al <body>. El JS es el único
 * que puede bloquear el scroll de fondo de forma fiable: sin él, `:target` abre
 * el menú y la página sigue moviéndose detrás. Es una degradación aceptable y
 * conocida, no un olvido.
 */
body.zgn-nav-abierto {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Accesibilidad.
   --------------------------------------------------------------------------- */

/*
 * El foco visible NO se toca: es del tema. Lo único que se garantiza aquí es que
 * el anillo no quede recortado por el overflow del panel.
 */
.zgn-nav :focus-visible {
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.zgn-nav,
	.zgn-nav-toggle__caja > span {
		transition-duration: 0.01ms;
	}
}

/* ---------------------------------------------------------------------------
   Redes.
   --------------------------------------------------------------------------- */

/* En texto, que es el modo por defecto, los nombres van uno debajo de otro: en
   fila y a cuerpo de lectura, tres redes no caben en un móvil estrecho. En modo
   icono siguen en fila, que es donde tiene sentido. */
.zgn-nav__redes--texto {
	flex-direction: column;
	gap: var( --zgn-nav-hueco-red-texto, 0.4em );
}