/*
 * Redes junto al logotipo de la cabecera (helenasunday-redes.php).
 *
 * Comportamiento:
 * - Al pasar sobre el nombre (o enfocarlo con el teclado) los iconos salen
 *   hacia la derecha con fundido y muelle, uno detrás de otro.
 * - Al salir se quedan medio segundo antes de replegarse, para que dé
 *   tiempo a llegar a ellos. Mientras tanto siguen visibles y se pueden
 *   tocar: si el cursor llega, el :hover del <p> vuelve a mandar.
 * - Cada icono enseña su nombre en un tooltip si te detienes sobre él.
 * - Esc lo repliega todo (redes.js), como pide WCAG 1.4.13.
 *
 * Por qué visibility y no solo opacidad: un icono invisible pero
 * alcanzable estorbaría al cursor y al tabulador. visibility con retardo
 * lo mantiene vivo exactamente mientras se ve (medio segundo más la
 * animación de cierre) y lo saca después. Al enfocar el nombre con el
 * teclado el grupo ya está abierto por :focus-within, así que el tabulador
 * llega a los iconos.
 *
 * Colores del tono de la página (tonos.css), con los tokens como respaldo.
 */

.helenasunday-header-bar .wp-block-site-title {
	--helenasunday-redes-espera: 0.5s;
	position: relative;
}

.helenasunday-redes {
	position: absolute;
	top: 50%;
	left: 100%;
	display: flex;
	align-items: center;
	gap: 0.15em;
	/* El hueco entre el nombre y el primer icono es relleno y no margen:
	   así forma parte de la zona que mantiene el :hover. */
	padding-inline-start: 0.5em;
	transform: translateY(-50%);
	visibility: hidden;
	transition: visibility 0s linear calc(var(--helenasunday-redes-espera) + 0.35s);
}

/* Selector con (0,3,1) a propósito: el tema da a todo enlace dentro de un
   grupo su propia transición de color con .wp-block-group
   a:not(.wp-element-button):not(...), también (0,3,1). Empatan y gana esta
   hoja por ir detrás (AGENTS.md, «Empates de especificidad»). Con un
   selector más ligero la espera de cierre desaparecía: el tema pisaba la
   transición y los iconos se iban al instante. */
.helenasunday-header-bar .wp-block-site-title a.helenasunday-redes__enlace {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Objetivo de 1.9em (unos 40 px con el tamaño large de la cabecera):
	   por encima de los 24 px de WCAG 2.5.8. */
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	color: var(--helenasunday-tono-texto, var(--wp--preset--color--on-surface));
	text-decoration: none;
	opacity: 0;
	transform: translateX(-0.75em) scale(0.6);
	/* Cierre: espera medio segundo y se recoge del último al primero. */
	transition:
		opacity 0.2s var(--helenasunday-ease-effect) calc(var(--helenasunday-redes-espera) + (2 - var(--helenasunday-redes-i, 0)) * 40ms),
		transform 0.3s var(--helenasunday-ease-effect) calc(var(--helenasunday-redes-espera) + (2 - var(--helenasunday-redes-i, 0)) * 40ms),
		background-color 0.2s var(--helenasunday-ease-effect);
}

.helenasunday-redes__enlace svg {
	width: 1em;
	height: 1em;
	transition: transform 0.4s var(--helenasunday-spring);
}

/* --- Abierto ------------------------------------------------------------ */

.helenasunday-header-bar .wp-block-site-title:is(:hover, :focus-within):not(.helenasunday-redes--cerrado) .helenasunday-redes {
	visibility: visible;
	transition-delay: 0s;
}

.helenasunday-header-bar .wp-block-site-title:is(:hover, :focus-within):not(.helenasunday-redes--cerrado) .helenasunday-redes__enlace {
	opacity: 1;
	transform: none;
	/* Apertura: sin espera, en cascada, con el muelle del panel. */
	transition:
		opacity 0.25s var(--helenasunday-ease-effect) calc(var(--helenasunday-redes-i, 0) * 60ms),
		transform 0.55s var(--helenasunday-spring) calc(var(--helenasunday-redes-i, 0) * 60ms),
		background-color 0.2s var(--helenasunday-ease-effect);
}

.helenasunday-header-bar .wp-block-site-title a.helenasunday-redes__enlace:hover {
	/* El glifo no cambia de color: son logotipos oficiales y sus guías
	   solo permiten el color de marca o un solo color (el del texto). La
	   reacción la pone el círculo de detrás. */
	color: var(--helenasunday-tono-texto, var(--wp--preset--color--on-surface));
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.helenasunday-redes__enlace:hover svg {
	transform: scale(1.12);
}

.helenasunday-redes__enlace:focus-visible {
	outline: 2px solid var(--helenasunday-tono-acento, var(--wp--preset--color--primary));
	outline-offset: 2px;
}

/* --- Tooltip -----------------------------------------------------------
 * Aparece si te detienes 0,4 s sobre el icono (0,15 s con el teclado, que
 * ya es una acción deliberada). Se puede pasar el cursor por encima sin que
 * se cierre, porque está dentro del enlace. Solo con el grupo abierto: un hijo
 * con visibility: visible escapa del hidden de su padre, y tras Esc el
 * tooltip se quedaba flotando. Invertido respecto al tono: si
 * la página es clara, tooltip oscuro, y al revés. */

.helenasunday-redes__tooltip {
	position: absolute;
	top: calc(100% + 0.35em);
	left: 50%;
	padding: 0.3em 0.65em;
	border-radius: 999px;
	background-color: var(--helenasunday-tono-texto, var(--wp--preset--color--on-surface));
	color: var(--helenasunday-tono-fondo, var(--wp--preset--color--surface));
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -0.3em) scale(0.92);
	transform-origin: 50% 0;
	transition:
		opacity 0.15s var(--helenasunday-ease-effect),
		transform 0.2s var(--helenasunday-ease-effect),
		visibility 0s linear 0.2s;
}

.helenasunday-header-bar .wp-block-site-title:not(.helenasunday-redes--cerrado) .helenasunday-redes__enlace:hover .helenasunday-redes__tooltip,
.helenasunday-header-bar .wp-block-site-title:not(.helenasunday-redes--cerrado) .helenasunday-redes__enlace:focus-visible .helenasunday-redes__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
	transition:
		opacity 0.2s var(--helenasunday-ease-effect) 0.4s,
		transform 0.4s var(--helenasunday-spring) 0.4s,
		visibility 0s linear 0.4s;
}

.helenasunday-header-bar .wp-block-site-title:not(.helenasunday-redes--cerrado) .helenasunday-redes__enlace:focus-visible .helenasunday-redes__tooltip {
	transition-delay: 0.15s;
}

/* --- Sin hover real -------------------------------------------------------
 * En pantallas táctiles no hay forma de "pasar por encima": el despliegue
 * no se puede provocar y los iconos solo estorbarían. No se muestran. */

/* Por debajo de 480 px, aunque haya ratón (una ventana de escritorio muy
 * estrecha), los iconos pisarían el botón del menú. */
@media not ((hover: hover) and (pointer: fine)), (max-width: 480px) {
	.helenasunday-redes {
		display: none;
	}
}

/* --- Movimiento reducido ----------------------------------------------------
 * Sin desplazamiento ni muelle: solo fundido corto. Las esperas se quedan,
 * porque no son decoración: son las que dan tiempo a llegar a los iconos. */

@media (prefers-reduced-motion: reduce) {
	.helenasunday-redes__enlace,
	.helenasunday-redes__tooltip,
	.helenasunday-header-bar .wp-block-site-title:is(:hover, :focus-within):not(.helenasunday-redes--cerrado) .helenasunday-redes__enlace,
	.helenasunday-redes__enlace:hover .helenasunday-redes__tooltip,
	.helenasunday-redes__enlace:focus-visible .helenasunday-redes__tooltip {
		transform: none;
	}

	.helenasunday-redes__tooltip {
		translate: -50% 0;
	}

	.helenasunday-redes__enlace:hover svg {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Redes en el pie (iconos oficiales, helenasunday-redes.php)
 *
 * Fila bajo el logotipo del pie. Color del texto del tono; al pasar, el
 * acento y un pequeño salto con muelle. Objetivo de 44 px.
 * ---------------------------------------------------------------------- */

/* Mismo tamaño que el avatar del logotipo de encima, nunca mayor: el
   avatar mide 1,75em del tamaño de fuente del título del pie (medium) más
   su aro (2 px de contorno y 2 px de separación por lado). Aquí la lista
   toma ese mismo tamaño de fuente, así que los círculos lo siguen si cambia.
   Y la fila empieza donde empieza el aro, que sobresale 4 px de la caja de
   la imagen. (Feedback del 26 sep: los círculos de 44 px abultaban más que
   su foto y no estaban alineados.) */
.helenasunday-redes-pie {
	display: flex;
	gap: 0.5em;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--medium);
	/* translate y no margen: el diseño restringido del tema fuerza los
	   márgenes laterales de sus hijos con !important. */
	translate: -4px 0;
}

.helenasunday-redes-pie__enlace {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	width: calc(1.75em + 8px);
	height: calc(1.75em + 8px);
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 50%;
	color: var(--helenasunday-tono-texto, var(--wp--preset--color--on-surface));
}

.wp-site-blocks > footer .helenasunday-redes-pie__enlace {
	color: var(--helenasunday-tono-texto, var(--wp--preset--color--on-surface));
}

.helenasunday-redes-pie__enlace svg {
	width: 0.95em;
	height: 0.95em;
}

/* Mismo criterio que en la cabecera: el logotipo oficial no se tiñe; al
   pasar, se marca el círculo. */
.wp-site-blocks > footer .helenasunday-redes-pie__enlace:hover {
	border-color: currentColor;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.helenasunday-redes-pie__enlace:focus-visible {
	outline: 2px solid var(--helenasunday-tono-acento, var(--wp--preset--color--primary));
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-redes-pie__enlace {
		transition: color 0.2s var(--helenasunday-ease-effect), border-color 0.2s var(--helenasunday-ease-effect), translate 0.4s var(--helenasunday-spring);
	}

	.helenasunday-redes-pie__enlace:hover {
		translate: 0 -2px;
	}
}

/* Los glifos oficiales llenan su caja (los de Tabler traían aire): un
   punto más pequeños para que pesen lo mismo que antes junto al nombre. */
.helenasunday-redes__enlace svg {
	width: 0.85em;
	height: 0.85em;
}