/*
 * Navegación flotante de Laquin Foods.
 *
 * Reproduce el patrón del componente FloatingNav de Aceternity/21st: una
 * píldora centrada que flota sobre el contenido, se esconde al bajar y
 * reaparece al subir, con el último apartado como botón perfilado y su
 * línea de acento.
 *
 * Aquel componente es React con framer-motion y aquí hay WordPress con
 * Astra, así que el patrón se reconstruye sobre el marcado que genera el
 * constructor de cabecera. Astra reparte la cabecera en dos barras: el logo
 * en la primaria y el menú en la de abajo. La píldora es la de abajo, que
 * es justo lo que hace la referencia: navegación sola, sin logo.
 *
 * El color no se copia de la referencia. Aquella es blanca con acento azul;
 * aquí la paleta es vino, bronce y carbón, y el menú vuela sobre un hero
 * oscuro y sobre el fondo vino. Se usa carbón translúcido con acento bronce.
 * Para pasarla a clara basta con cambiar los valores de --lq-nav-*.
 */

:root {
	--lq-nav-fondo: rgba(28, 22, 21, 0.72);
	--lq-nav-fondo-scroll: rgba(24, 19, 18, 0.88);
	--lq-nav-borde: rgba(195, 152, 104, 0.22);
	--lq-nav-texto: #ece2d8;
	--lq-nav-texto-tenue: rgba(236, 226, 216, 0.72);
	--lq-nav-acento: #c39868;
	--lq-nav-acento-fuerte: #d9b184;
	--lq-nav-sombra:
		0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
		0 10px 30px -12px rgba(0, 0, 0, 0.55),
		0 2px 8px -4px rgba(0, 0, 0, 0.4);

	/*
	 * El logo va arriba y el menú debajo, apilados.
	 *
	 * El archivo del logo trae mucho aire transparente: el lienzo mide
	 * 240x192 pero el recuadro rojo sólo ocupa 214x78, o sea el 40,6 % del
	 * alto, con un 29,7 % vacío arriba y otro tanto abajo. La caja de la
	 * imagen es por tanto bastante más alta que lo que se ve, y si no se
	 * descuenta ese aire la píldora queda flotando lejos del logo.
	 *
	 * --lq-logo-vacio se calcula solo a partir del alto, así que para
	 * cambiar el tamaño del logo basta con tocar --lq-logo-alto: el resto
	 * se recalcula. 24px es la separación real que queda con la píldora.
	 */
	--lq-logo-arriba: 20px;
	--lq-logo-alto: 138px;
	--lq-logo-vacio: calc(var(--lq-logo-alto) * 0.297);
	--lq-nav-alto: calc(
		var(--lq-logo-arriba) + var(--lq-logo-alto) - var(--lq-logo-vacio) + 24px
	);

	/* En móvil el logo va dentro de la barra, así que se mide aparte. */
	--lq-logo-alto-movil: 78px;
}

/* ------------------------------------------------------------------ *
 * La píldora
 * ------------------------------------------------------------------ */

@media (min-width: 922px) {

	/*
	 * Las dos barras salen del flujo y se fijan, apiladas: el logo arriba y
	 * el menú debajo. Ocupan todo el ancho para poder centrar, pero no
	 * interceptan clics: sólo el logo y la píldora los reciben.
	 */
	.ast-main-header-wrap,
	.ast-below-header-wrap {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
		pointer-events: none;
		will-change: transform;
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.28s ease;
	}

	.ast-main-header-wrap {
		top: var(--lq-logo-arriba);
	}

	.ast-below-header-wrap {
		top: var(--lq-nav-alto);
	}

	/*
	 * Al bajar se retiran hacia arriba; al subir vuelven.
	 *
	 * El desplazamiento se calcula desde las variables y no con un número
	 * fijo: con uno fijo, al agrandar el logo la píldora bajaba y se
	 * quedaba asomando un pixel por arriba.
	 */
	.lq-nav-oculto .ast-main-header-wrap,
	.lq-nav-oculto .ast-below-header-wrap {
		transform: translateY(calc(-1 * (var(--lq-nav-alto) + 120px)));
		opacity: 0;
	}

	/* ---------------- El logo, arriba y a su tamaño ---------------- */

	.ast-main-header-wrap .ast-primary-header-bar,
	.ast-main-header-wrap .site-primary-header-wrap {
		background: none;
		border: 0;
		padding: 0;
		min-height: 0;
	}

	.ast-main-header-wrap .ast-builder-grid-row {
		justify-content: center;
	}

	/*
	 * Astra le pone 16 px arriba y abajo, que descuadran la separación con
	 * la píldora. Sin ellos la posición del logo es la que dicen las
	 * variables y nada más.
	 */
	.ast-main-header-wrap .site-branding {
		pointer-events: auto;
		padding: 0;
	}

	.ast-main-header-wrap .custom-logo-link img,
	.ast-main-header-wrap .astra-logo-svg {
		width: auto;
		height: var(--lq-logo-alto);
		max-height: var(--lq-logo-alto);
		/*
		 * Astra emite `header .custom-logo-link img{max-width:120px}` desde
		 * el ancho de logo del Personalizador. Con el alto fijado aquí, ese
		 * tope no encoge la imagen: la aplasta, porque el alto sigue siendo
		 * el nuestro. Se suelta para que mande la proporción del archivo.
		 */
		max-width: none;
		display: block;
		/*
		 * El logo vuela sobre el hero oscuro y sobre el fondo vino. Una
		 * sombra corta lo despega de los dos sin que parezca pegatina.
		 */
		filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
	}

	/* Astra deja ahí el nombre y la descripción del sitio, que sobran. */
	.ast-main-header-wrap .ast-site-title-wrap {
		display: none;
	}

	.ast-below-header-wrap .ast-below-header-bar,
	.ast-below-header-wrap .site-below-header-wrap {
		background: none;
		border: 0;
		padding: 0;
		min-height: 0;
	}

	.ast-below-header-wrap .ast-builder-grid-row {
		justify-content: center;
	}

	/*
	 * Esto es la píldora.
	 *
	 * El relleno es mayor por la derecha que en la referencia, donde el
	 * botón queda casi tocando el borde. Con 20 px respira y no parece
	 * pegado.
	 */
	.ast-below-header-wrap .ast-builder-menu-1 {
		pointer-events: auto;
		display: flex;
		align-items: center;
		background: var(--lq-nav-fondo);
		-webkit-backdrop-filter: blur(16px) saturate(140%);
		backdrop-filter: blur(16px) saturate(140%);
		border: 1px solid var(--lq-nav-borde);
		border-radius: 999px;
		box-shadow: var(--lq-nav-sombra);
		transition: background-color 0.3s ease, border-color 0.3s ease,
			box-shadow 0.3s ease;
	}

	/*
	 * El relleno va aparte y con el id de la cabecera por delante.
	 * Astra fija a cero el relleno horizontal de .ast-builder-menu-1 con
	 * una regla más específica que la de arriba, y sin el id ganaba ella:
	 * el botón de Contacto quedaba pegado al borde de la píldora.
	 */
	#ast-desktop-header .ast-below-header-wrap .ast-builder-menu-1 {
		padding: 7px 20px;
	}

	/* Una vez que se ha bajado, la píldora se asienta un poco más. */
	.lq-nav-desplazado .ast-below-header-wrap .ast-builder-menu-1 {
		background: var(--lq-nav-fondo-scroll);
		border-color: rgba(195, 152, 104, 0.32);
	}

	.ast-below-header-wrap .main-header-menu {
		gap: 4px;
		align-items: center;
	}

	.ast-below-header-wrap .main-header-menu > .menu-item > .menu-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		padding: 8px 14px;
		border-radius: 999px;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0.01em;
		color: var(--lq-nav-texto-tenue);
		transition: color 0.18s ease, background-color 0.18s ease;
	}

	.ast-below-header-wrap .main-header-menu > .menu-item > .menu-link:hover,
	.ast-below-header-wrap .main-header-menu > .menu-item > .menu-link:focus-visible {
		color: var(--lq-nav-texto);
		background: rgba(255, 255, 255, 0.06);
	}

	/*
	 * Apartado en pantalla. El sitio es una sola página con anclas, así que
	 * saber dónde estás es lo que más aporta a una navegación así.
	 */
	.ast-below-header-wrap .main-header-menu > .menu-item.lq-nav-activo > .menu-link {
		color: var(--lq-nav-acento-fuerte);
	}

	.ast-below-header-wrap .main-header-menu > .menu-item.lq-nav-activo > .menu-link::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 2px;
		width: 16px;
		height: 2px;
		margin-left: -8px;
		border-radius: 2px;
		background: var(--lq-nav-acento);
	}

	/* ---------------- El último apartado, como botón ---------------- */

	.ast-below-header-wrap .main-header-menu > .menu-item:last-child > .menu-link {
		margin-left: 10px;
		padding: 9px 22px;
		color: var(--lq-nav-texto);
		font-weight: 600;
		border: 1px solid rgba(236, 226, 216, 0.28);
		background: rgba(255, 255, 255, 0.04);
	}

	.ast-below-header-wrap .main-header-menu > .menu-item:last-child > .menu-link:hover,
	.ast-below-header-wrap .main-header-menu > .menu-item:last-child > .menu-link:focus-visible {
		border-color: var(--lq-nav-acento);
		background: rgba(195, 152, 104, 0.14);
		color: #fff;
	}

	/*
	 * La línea de acento bajo el botón, que en la referencia es azul y se
	 * desvanece por los extremos.
	 */
	.ast-below-header-wrap .main-header-menu > .menu-item:last-child > .menu-link::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -1px;
		width: 60%;
		height: 1px;
		margin-left: -30%;
		background: linear-gradient(
			90deg,
			transparent,
			var(--lq-nav-acento-fuerte),
			transparent
		);
		opacity: 0.9;
	}

	/* El punto de apartado activo no debe aparecer en el botón. */
	.ast-below-header-wrap .main-header-menu > .menu-item:last-child.lq-nav-activo > .menu-link::after {
		display: none;
	}

}

/* ------------------------------------------------------------------ *
 * Móvil: la barra de Astra, con el mismo lenguaje
 * ------------------------------------------------------------------ */

@media (max-width: 921px) {

	#ast-mobile-header .ast-main-header-wrap {
		position: fixed;
		top: 12px;
		left: 12px;
		right: 12px;
		z-index: 999;
		background: var(--lq-nav-fondo-scroll);
		-webkit-backdrop-filter: blur(16px) saturate(140%);
		backdrop-filter: blur(16px) saturate(140%);
		border: 1px solid var(--lq-nav-borde);
		border-radius: 22px;
		box-shadow: var(--lq-nav-sombra);
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.28s ease;
	}

	.lq-nav-oculto #ast-mobile-header .ast-main-header-wrap {
		transform: translateY(-140%);
		opacity: 0;
	}

	#ast-mobile-header .ast-primary-header-bar {
		background: none;
		padding-inline: 6px;
	}

	/*
	 * El logo de la barra. Astra lo deja en 60px de ancho, que con el aire
	 * transparente del archivo se queda en un recuadro de unos 53x19.
	 *
	 * Se agranda la caja y se descuenta ese aire con margen negativo, así
	 * que en el flujo sólo ocupa el recuadro rojo y la barra no crece.
	 */
	#ast-mobile-header .custom-logo-link img,
	#ast-mobile-header .site-logo-img img {
		width: auto;
		height: var(--lq-logo-alto-movil);
		max-width: none;
		margin-block: calc(-1 * var(--lq-logo-alto-movil) * 0.297);
		display: block;
	}

	/* El desplegable, en el mismo tono que la barra. */
	#ast-mobile-header .ast-mobile-header-content {
		background: var(--lq-nav-fondo-scroll);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border-radius: 22px;
		margin: 8px 12px 0;
		padding: 8px 4px;
		border: 1px solid var(--lq-nav-borde);
	}

	#ast-mobile-header .menu-link {
		border-radius: 12px;
		color: var(--lq-nav-texto-tenue);
	}

	#ast-mobile-header .menu-item.lq-nav-activo > .menu-link {
		color: var(--lq-nav-acento-fuerte);
		background: rgba(195, 152, 104, 0.12);
	}
}

/* ------------------------------------------------------------------ *
 * Desplazamiento entre apartados
 * ------------------------------------------------------------------ */

/*
 * La portada es de una sola página: todos los apartados del menú son anclas
 * de la misma. Sin esto el navegador salta de golpe, y en una navegación así
 * el salto se lee como un cambio de página —justo lo contrario de lo que
 * cuenta la píldora, que se queda quieta y va marcando dónde estás.
 *
 * Va en `html` y no en un guion porque desde ahí lo aprovecha todo lo que
 * desplaza la página: los apartados del menú, el enlace a la portada del pie
 * y el salto al contenido del teclado.
 *
 * Quien pida menos movimiento lo sigue recibiendo de golpe: ver el bloque
 * del final del archivo.
 */
html {
	scroll-behavior: smooth;
}

/*
 * El aire que hay que dejar arriba al aterrizar en un apartado: es lo que
 * ocupa la cabecera fija —el logo y la píldora, apilados— más un respiro.
 * Sin esto la sección aterriza pegada al borde de arriba y la cabecera le
 * tapa el título.
 *
 * Quien manda de verdad es menu.js, que mide la cabecera en vez de dar por
 * buenos estos números y además corrige el destino cuando la sección aún
 * está desplazada por su animación de entrada. Esto es la red por si el
 * guion no llega a ejecutarse, y lo que usa el navegador cuando se entra
 * directamente con una dirección que ya trae ancla.
 */
html {
	scroll-padding-top: 206px;
}

@media (max-width: 921px) {

	html {
		scroll-padding-top: 96px;
	}
}

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

/* El foco de teclado tiene que verse sobre la píldora oscura. */
.ast-below-header-wrap .menu-link:focus-visible,
#ast-mobile-header .menu-link:focus-visible {
	outline: 2px solid var(--lq-nav-acento-fuerte);
	outline-offset: 2px;
}

/*
 * Quien pida menos movimiento no recibe el deslizamiento: la barra
 * aparece y desaparece sin transición, nunca se queda escondida, y los
 * apartados se alcanzan de un salto en vez de recorriendo la página.
 */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.ast-below-header-wrap,
	#ast-mobile-header .ast-main-header-wrap,
	.ast-below-header-wrap .ast-builder-menu-1,
	.ast-below-header-wrap .menu-link {
		transition: none;
	}

	.lq-nav-oculto .ast-below-header-wrap,
	.lq-nav-oculto #ast-mobile-header .ast-main-header-wrap {
		transform: none;
		opacity: 1;
	}
}