/*
 * Marca de Helena Sunday: solo lo que theme.json no puede expresar.
 *
 * Prohibido aqui, igual que en extras.css del tema: un hex, un tamano de
 * fuente en rem o un valor de espaciado sueltos. Todo eso sale de
 * theme.json (la paleta y la tipografia las aplica el filtro
 * wp_theme_json_data_theme en helenasunday-config.php) y se lee aqui con
 * var(--wp--preset--*).
 *
 * Lo que SI vive aqui: el estilo "eyebrow", la microinteraccion de los
 * botones y la flecha de las llamadas a la accion, la seleccion de texto y
 * la tipografia del titulo del sitio. Nada de esto tiene un sitio en
 * theme.json (estados de interaccion, pseudo-elementos, un bloque concreto
 * como site-title).
 */

/* -------------------------------------------------------------------------
 * Titulo del sitio.
 *
 * El bloque site-title no siempre renderiza como h1-h6 (por defecto es un
 * parrafo enlazado; el nivel de encabezado es un ajuste aparte del bloque),
 * asi que el pisado nivel a nivel de los titulares en el filtro de
 * theme.json no le llega siempre. Se fija aqui, directamente sobre el
 * bloque, para que la cabecera lleve Poppins en 700 pese lo que pese el
 * nivel elegido en el editor. En 700, no en 800: el 800 es solo para el
 * titular del hero (docs/DIRECCION-VISUAL.md, "Tipografia"), y el titulo del
 * sitio no es ese titular.
 * ---------------------------------------------------------------------- */

.wp-block-site-title,
.wp-block-site-title a {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
}

/* Logotipo (filtro render_block_core/site-title en helenasunday-config.php):
 * avatar redondo a la izquierda, "Helena" en Poppins y "Sunday" en Playfair
 * itálica. El avatar mide 1.75em para seguir al tamaño de fuente del bloque
 * (large en la cabecera, medium en el pie), que sale de theme.json. */
.wp-block-site-title a:has(.helenasunday-logo__avatar) {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	text-decoration: none;
}

.helenasunday-logo__avatar {
	width: 1.75em;
	height: 1.75em;
	margin-inline-end: 0.2em;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	outline: 2px solid var(--wp--preset--color--primary-container);
	outline-offset: 2px;
}

/* Altura x igualada, medida en los ficheros de fuente (unidades sobre 1000):
 * Poppins 600, 554 (plano de la «x»); Playfair itálica, 514 declarada en
 * OS/2 y 528 en el remate de la «u» y la «n». Se toma 521, entre las dos,
 * porque el remate de la serifa engaña al ojo hacia arriba. 554 / 521 =
 * 1,065: a ese tamaño la caja de las minúsculas de «elena» y «unday»
 * coincide. Si cambia el peso de Poppins o la fuente, hay que volver a
 * medir. */
.helenasunday-logo__apellido {
	font-family: var(--wp--preset--font-family--playfair);
	font-style: italic;
	font-weight: 500;
	font-size: 1.065em;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * Acento tipografico: <em> dentro de un titular.
 *
 * docs/DIRECCION-VISUAL.md, "Tipografia": una o dos palabras por titular se
 * marcan con <em> (semantico, valido en el editor) y pasan a Playfair
 * Display italica, un peso intermedio (500-600) y un punto mas grande que
 * la Poppins que las rodea -la itálica tiene menor altura de x, así que a
 * igual tamaño se leería más pequeña-. letter-spacing vuelve a "normal"
 * porque el tracking cerrado de los titulares (-0.02em) es un ajuste
 * pensado para Poppins en mayúsculas de caja alta/baja normal, no para una
 * cursiva con ligaduras: cerrarla también la apelmaza.
 *
 * Selector por elemento (h1-h6) y no por herencia de fontFamily: así
 * también entran los <em> dentro de .helenasunday-display en elementos que
 * no son encabezados (por ejemplo, un párrafo con esa clase), sin depender
 * de qué heredó cada uno.
 * ---------------------------------------------------------------------- */

:is(h1, h2, h3, h4, h5, h6, .helenasunday-display) em {
	font-family: var(--wp--preset--font-family--playfair);
	font-style: italic;
	font-weight: 600;
	font-size: 1.08em;
	letter-spacing: normal;
}

/* -------------------------------------------------------------------------
 * Estilo "eyebrow".
 *
 * La etiqueta pequena en mayusculas que antecede a un titular o marca una
 * pildora (ver docs/DIRECCION-VISUAL.md, "Etiquetas pequenas en mayusculas
 * con tracking abierto"). Un className de bloque, no un bloque nuevo: se
 * aplica a cualquier parrafo o span que lo necesite.
 * ---------------------------------------------------------------------- */

.helenasunday-eyebrow {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Seleccion de texto.
 *
 * Sin esto el navegador usa su azul de sistema, que desentona con una
 * paleta calida. El texto seleccionado pasa a leerse en el contenedor
 * primario, que ya cumple contraste AA/AAA con su "on" (ver
 * docs/DIRECCION-VISUAL.md).
 * ---------------------------------------------------------------------- */

::selection {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

::-moz-selection {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

/* -------------------------------------------------------------------------
 * Foco visible.
 *
 * NO se repite aqui: extras.css del tema ya pone un anillo de foco
 * coherente con la marca en todo elemento interactivo
 * (:where(a, button, input, select, textarea, summary, [tabindex])), leido
 * de var(--wp--preset--color--primary). Al cambiar la paleta en el filtro
 * de theme.json, ese anillo ya sale en el color de marca sin tocar una
 * linea de CSS (magenta en la revision 2; era cobre en la v1).
 * Anadir otra regla aqui solo arriesgaria un empate de especificidad con
 * extras.css por la via mas tonta (ver AGENTS.md, "Trampas conocidas").
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Microinteraccion de los botones.
 *
 * Pulsacion: el boton se encoge un 3% al presionar y vuelve con la curva de
 * muelle del panel de movimiento (--helenasunday-spring, publicada por
 * inc/animation.php). Sin prefers-reduced-motion: no-preference no hay ni
 * escala ni transicion, tal como pide docs/DIRECCION-VISUAL.md
 * ("Movimiento y microinteracciones"): con movimiento reducido el boton se
 * queda quieto, no solo mas lento.
 *
 * La lista de "transition" repite la de extras.css (box-shadow, transform,
 * background-color) a proposito: esta hoja se encola detras de la del tema
 * y empata en especificidad con el mismo selector, asi que declarar solo
 * "transform" aqui pisaba la lista entera y dejaba el box-shadow y el
 * background-color del :hover sin animar (ver AGENTS.md, "Trampas
 * conocidas"). Solo "transform" cambia de verdad, a la curva de muelle.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.wp-element-button,
	.wp-block-button__link {
		transition:
			box-shadow 0.3s var(--helenasunday-ease-effect),
			transform 0.2s var(--helenasunday-spring),
			background-color 0.25s var(--helenasunday-ease-effect);
	}

	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: scale(0.97);
	}
}

/* -------------------------------------------------------------------------
 * Flecha de las llamadas a la accion.
 *
 * Un glifo o icono con esta clase, dentro de un enlace o boton, se
 * desplaza 3px hacia el lado de lectura al pasar el raton. La clase va en
 * el glifo, no en el enlace, porque el desplazamiento es del glifo: el
 * texto de al lado se queda quieto (referencia: la flecha de las tarjetas
 * de servicio y del CTA final, docs/DIRECCION-VISUAL.md).
 * ---------------------------------------------------------------------- */

.helenasunday-arrow {
	display: inline-flex;
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-arrow {
		transition: transform 0.2s var(--helenasunday-ease-effect);
	}

	a:hover .helenasunday-arrow,
	a:focus-visible .helenasunday-arrow,
	.wp-element-button:hover .helenasunday-arrow,
	.wp-element-button:focus-visible .helenasunday-arrow {
		transform: translateX(3px);
	}
}