/**
 * InfoAsphalt — menú de anclas.
 *
 * Hoja de un componente suelto, como las del carrusel y el desplegable de tipo:
 * la píldora de `[ia_anchors]` no necesita nada del resto de la hoja pública, y
 * una página de bloques que sólo lleve el menú no tiene por qué cargar los
 * rankings, los códigos y las tarjetas de temporada para pintarlo.
 */

/*
 * `[ia_anchors]`: la píldora fija de una página armada con bloques. Es la misma
 * pieza que llevan la ficha de coche y la página de temporada del plugin de
 * plantillas, con dos diferencias que vienen de dónde vive: aquí no se mete en
 * el hueco de ninguna cabecera —una página de Gutenberg no lo tiene— y trae sus
 * propios colores, porque fuera de una plantilla no hay contenedor que los
 * declare. Los seis se pueden cambiar desde el tema sin tocar esta hoja.
 *
 * `width: fit-content` con `margin-left: auto` es lo que clava el borde derecho:
 * ahí está la clave del efecto, porque el rótulo que se abre no puede crecer
 * hacia la derecha y empuja hacia la izquierda a los iconos que tenga delante,
 * sin que ninguno de ellos necesite animación propia.
 */
.ia-anclas {
	/* Alto del menú fijo del tema, que es por debajo de donde tiene que quedarse
	   éste. Es el único sitio donde se toca: el shortcode sólo escribe su atributo
	   `top` en el elemento si se lo dan, y estando ahí le ganaría a esta hoja. */
	--ia-anclas-arriba: 50px;
	--ia-anclas-fondo: rgba( 28, 0, 47, .82 );
	--ia-anclas-borde: rgba( 220, 132, 255, .25 );
	--ia-anclas-tinta: #DC84FF;
	--ia-anclas-tinta-activa: #fff;
	position: sticky;
	top: var( --ia-anclas-arriba );
	z-index: 20;
	width: fit-content;
	margin-left: auto;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: .85rem;
	/* Fondo propio: por debajo pasa el contenido de la página, y sin él los
	   iconos se leerían encima de lo que toque. */
	padding: .6rem 1rem;
	border-radius: 999px;
	background: var( --ia-anclas-fondo );
	border: 1px solid var( --ia-anclas-borde );
	backdrop-filter: blur( 10px );
}

.ia-anclas .ia-ancla {
	display: inline-flex;
	align-items: center;
	/* Sin `gap`: el hueco entre icono y rótulo lo pone el propio rótulo con su
	   padding, que queda recortado mientras está colapsado. Con `gap` quedaría
	   un vacío permanente al lado de cada icono. */
	gap: 0;
	color: var( --ia-anclas-tinta );
	text-decoration: none;
	border-radius: 999px;
	transition: color .25s ease-in-out;
}

.ia-anclas .ia-ancla__icono {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
}

.ia-anclas .ia-ancla__icono svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* `0fr` a `1fr` en lugar de un `max-width` con una cifra inventada: la columna
   se abre exactamente hasta lo que mide el texto, así que la curva de la
   transición se reparte por el recorrido real y no termina a media animación en
   los rótulos cortos. */
.ia-anclas .ia-ancla__texto {
	display: grid;
	grid-template-columns: 0fr;
	opacity: 0;
	font-size: .8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	transition:
		grid-template-columns .35s ease-in-out,
		opacity .25s ease-in-out;
}

.ia-anclas .ia-ancla__texto > span {
	overflow: hidden;
	padding-left: 0;
	transition: padding-left .35s ease-in-out;
}

.ia-anclas .ia-ancla:hover,
.ia-anclas .ia-ancla:focus-visible {
	color: var( --ia-anclas-tinta-activa );
}

.ia-anclas .ia-ancla:hover .ia-ancla__texto,
.ia-anclas .ia-ancla:focus-visible .ia-ancla__texto,
/* Una clave de icono mal escrita deja el enlace sin icono, y con el rótulo
   colapsado no se vería nada: sale puesto para que el fallo se note. */
.ia-anclas .ia-ancla--sin-icono .ia-ancla__texto {
	grid-template-columns: 1fr;
	opacity: 1;
}

.ia-anclas .ia-ancla:hover .ia-ancla__texto > span,
.ia-anclas .ia-ancla:focus-visible .ia-ancla__texto > span {
	padding-left: .5rem;
}

/* Donde no hay puntero no hay hover, y un menú de iconos sin rótulo no se
   entiende. En pantalla táctil los rótulos salen puestos. */
@media ( hover: none ) {
	.ia-anclas {
		flex-wrap: wrap;
	}

	.ia-anclas .ia-ancla__texto {
		grid-template-columns: 1fr;
		opacity: 1;
	}

	.ia-anclas .ia-ancla__texto > span {
		padding-left: .5rem;
	}
}

/* Quien pide menos movimiento sigue viendo el rótulo al pasar por encima; lo que
   se va es el deslizamiento, que es lo que molesta. */
@media ( prefers-reduced-motion: reduce ) {
	.ia-anclas .ia-ancla,
	.ia-anclas .ia-ancla__texto,
	.ia-anclas .ia-ancla__texto > span {
		transition: none;
	}
}

/* En el móvil el menú es sólo iconos, centrado: los rótulos no caben a lo ancho
   y dejarlos puestos parte la píldora en varias líneas.
 *
 * Va después del bloque de `hover: none` para ganarle: un teléfono cumple las
 * dos condiciones, y aquí manda el ancho. */
@media ( max-width: 600px ) {
	.ia-anclas {
		margin-inline: auto;
		justify-content: center;
	}

	/* Escondido para la vista, no para quien lee la página en voz alta: el icono
	   es `aria-hidden`, así que este texto es el único nombre que tiene el
	   enlace. Con `display: none` serían enlaces sin nombre. */
	.ia-anclas .ia-ancla__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
		opacity: 1;
	}

	/* Menos el del enlace sin icono, que se sigue viendo: es el aviso de que la
	   clave está mal escrita. */
	.ia-anclas .ia-ancla--sin-icono .ia-ancla__texto {
		position: static;
		width: auto;
		height: auto;
		clip-path: none;
	}
}

/* Aire por arriba al saltar desde el menú: por encima del destino se quedan el
   menú fijo del tema (40px) y, debajo, la propia píldora (3.1rem), así que el
   destino tiene que caer más abajo que los dos juntos. Los 40px sueltos son el
   aire que se le añade encima: sin ellos el título aterriza justo al canto de la
   píldora y —sobre todo en el móvil, donde va centrada y a todo lo ancho— queda
   tapado por ella. La cuenta es la misma en las dos anchuras porque la cabecera
   del tema ya mide igual en las dos.

   Va como `scroll-padding-top` del contenedor de scroll y no como
   `scroll-margin-top` de cada destino porque el margen hay que acertar a
   ponérselo al elemento exacto, y el padding se lo pide al que scrollea, que es
   siempre el mismo: vale para cualquier destino sin saber cómo está montada la
   página. La hoja sólo se carga donde hay menú, así que no toca ninguna otra.

   Esto es la red, no el salto de verdad. Un tema que se quede los clics en los
   enlaces `#` y calcule el destino a su manera se salta esta medida entera, y es
   lo que pasa aquí: de eso se ocupa `anclas.js`, que mide la píldora en vivo. Lo
   de abajo es lo que vale al entrar por una URL con `#` y lo que queda si el
   script no llega a cargar, así que la cifra sigue haciendo falta.

   Los 40px de la cabecera son los que trae por defecto el atributo `top` del
   shortcode. Van repetidos aquí porque el valor de verdad viaja en una variable
   puesta sobre la propia píldora, y desde la raíz no se ve. */
:root {
	scroll-padding-top: calc( 40px + 3.1rem + 40px );
}