/*
Theme Name: Arlex
Description: Tema hijo de bloques para Vidrios Arlex, basado en Twenty Twenty-Five. El diseño se define en theme.json, plantillas y patrones de bloques.
Author: Vidrios Arlex
Template: twentytwentyfive
Version: 0.5.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arlex
*/

/*
 * Los estilos van en theme.json. Aquí solo hay reglas que theme.json no
 * puede expresar; cada una explica por qué.
 */

/*
 * 1. Encabezado fijo (opcional).
 * Se activa con la clase "arlex-header-fija" en el grupo raíz de
 * parts/header.html; quitar la clase lo desactiva. La posición "sticky"
 * nativa del bloque Grupo no funciona dentro de una parte de plantilla,
 * porque el contenedor <header> mide lo mismo que el grupo. theme.json
 * tampoco puede dar estilo al contenedor de la parte.
 */
.wp-site-blocks > header.wp-block-template-part:has(> .arlex-header-fija) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
}

/* En móvil la barra de administración no es fija. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part:has(> .arlex-header-fija) {
		top: 0;
	}
}

/* Evita que el encabezado fijo tape el destino de los enlaces internos (#proyectos). */
html:has(.arlex-header-fija) {
	scroll-padding-top: 6rem;
}

/*
 * 2. Visibilidad por ancho, con el mismo punto de corte (600 px) que el
 * menú móvil del bloque Navegación. theme.json no permite ocultar bloques
 * según el ancho. Uso: botón del encabezado (solo escritorio) y enlace
 * "Cotiza tu proyecto" del menú (solo en el menú móvil).
 */
@media (max-width: 599px) {
	.arlex-solo-escritorio {
		display: none !important;
	}
}

@media (min-width: 600px) {
	.arlex-solo-movil {
		display: none !important;
	}
}

/*
 * 3. Hero: proporción 4:5 en móvil y 16:9 desde 600 px. theme.json no
 * admite proporciones distintas por punto de corte. Se usa min-height
 * (no aspect-ratio) para que el contenido crezca si no cabe; el tope en
 * svh evita que el hero supere la pantalla en monitores grandes.
 */
.wp-block-cover.arlex-hero {
	min-height: min(125vw, 92svh);
}

@media (min-width: 600px) {
	.wp-block-cover.arlex-hero {
		min-height: min(56.25vw, 92svh);
	}
}

/*
 * 4. Color del foco. El tema padre fija grosor y estilo del contorno de
 * foco, pero no el color, y el navegador usa el color de acento del
 * sistema (puede no contrastar con el fondo). Se usa el color del texto:
 * grafito sobre fondos claros, blanco hueso en las secciones oscuras.
 * theme.json solo cubre enlaces y botones de bloque, no el botón del menú
 * ni el <summary> de las preguntas frecuentes.
 */
:where(.wp-site-blocks *:focus-visible) {
	outline-color: currentColor;
}

/*
 * 5. Botón flotante de WhatsApp (bloque Iconos sociales con la clase
 * "arlex-whatsapp" en parts/footer.html). theme.json no admite
 * position: fixed. El anillo claro lo separa de las secciones grafito.
 */
.wp-block-social-links.arlex-whatsapp {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 20;
	margin: 0;
}

.arlex-whatsapp .wp-social-link {
	box-shadow: 0 0 0 2px var(--wp--preset--color--blanco-hueso);
}

/* Foco visible sobre fondo claro u oscuro: anillo claro, grafito y claro. */
.arlex-whatsapp .wp-social-link a:focus-visible {
	outline: none;
}

.arlex-whatsapp .wp-social-link:has(a:focus-visible) {
	box-shadow:
		0 0 0 2px var(--wp--preset--color--blanco-hueso),
		0 0 0 4px var(--wp--preset--color--grafito),
		0 0 0 6px var(--wp--preset--color--blanco-hueso);
}

/*
 * 6. Preguntas frecuentes de las páginas de servicio: bloque FAQ de Rank
 * Math con la clase "arlex-faq". El bloque genera el FAQPage del JSON-LD a
 * partir del mismo texto visible, pero en el frontend su marcado sale de un
 * render_callback del plugin sin la clase .wp-block-rank-math-faq-block, así
 * que theme.json no puede darle estilo. Se replica el aspecto de core/details
 * en la portada: línea plata entre preguntas y pregunta en tamaño "large".
 */
.rank-math-block.arlex-faq .rank-math-list-item {
	border-bottom: 1px solid var(--wp--preset--color--plata-champan);
	padding-block: var(--wp--preset--spacing--30);
}

.rank-math-block.arlex-faq .rank-math-question {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.rank-math-block.arlex-faq .rank-math-answer > * {
	margin-block: var(--wp--preset--spacing--30) 0;
}

/*
 * 7. Tablas de especificaciones (patrón arlex/servicio-materiales). El CSS de
 * bloque de theme.json se imprime dentro de :root :where(), con menos
 * especificidad que la regla del núcleo .wp-block-table td (borde en las
 * cuatro caras), así que no puede reemplazarla. Aquí: líneas plata solo
 * entre filas, encabezado en Jost y palabras sin cortar en columnas angostas.
 */
.wp-block-table table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--plata-champan);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
	text-align: left;
	vertical-align: top;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.wp-block-table table thead {
	border-bottom: 0;
}

.wp-block-table table thead th {
	border-bottom-color: var(--wp--preset--color--grafito);
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 500;
}

/*
 * 8. Formulario "Cotiza tu proyecto" (Contact Form 7, página /cotizar/). El
 * formulario sale de un shortcode, no de bloques: theme.json solo da estilo a
 * bloques y a elementos (enlace, títulos, botón…), no tiene elemento para
 * input, select ni textarea, y el elemento botón se aplica a la clase
 * .wp-element-button, que el envío de CF7 no lleva. Aquí: campos con el borde
 * grafito y el radio de 2 px del bloque Búsqueda, envío con los valores del
 * botón de theme.json (styles.elements.button), foco de 2 px como el de los
 * botones y avisos de validación en grafito, porque el rojo de CF7 (#dc3232)
 * no llega a 4,5:1 sobre blanco hueso. Los <br> los añade el autop de CF7;
 * se ocultan porque el espaciado lo dan los márgenes.
 */
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.wpcf7-form > *,
.wpcf7-form fieldset > * {
	margin-block: 0;
}

.wpcf7-form br {
	display: none;
}

.wpcf7-form label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.wpcf7-form label ~ label {
	margin-top: var(--wp--preset--spacing--30);
}

.wpcf7-form label > .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
}

.wpcf7-form :is(.wpcf7-text, .wpcf7-select, .wpcf7-textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: calc(1.6em + 2 * var(--wp--preset--spacing--20) + 2px); /* el select ignora line-height */
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--grafito);
	border-radius: 2px;
	background-color: var(--wp--preset--color--blanco-hueso);
	color: var(--wp--preset--color--grafito);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.6;
}

.wpcf7-form .wpcf7-textarea {
	resize: vertical;
}

/* Campos de fotos: el botón del selector imita la variación outline. */
.wpcf7-form fieldset:not(.hidden-fields-container) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--plata-champan);
	border-radius: 2px;
}

.wpcf7-form legend {
	padding-inline: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.wpcf7-form fieldset > p:not(:has(label)) {
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7-form .wpcf7-file {
	width: 100%;
	font: inherit;
	font-weight: 400;
}

.wpcf7-form .wpcf7-file::file-selector-button {
	margin-inline-end: var(--wp--preset--spacing--30);
	padding: calc(var(--wp--preset--spacing--20) - 1px) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--grafito);
	border-radius: 2px;
	background-color: transparent;
	color: var(--wp--preset--color--grafito);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.wpcf7-form .wpcf7-file:hover::file-selector-button {
	background-color: var(--wp--preset--color--plata-champan);
}

/* Casilla de autorización: casilla y texto en dos columnas. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
	font-weight: 400;
	cursor: pointer;
}

.wpcf7-form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0;
	accent-color: var(--wp--preset--color--grafito);
	cursor: pointer;
}

.wpcf7-form .wpcf7-submit {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-radius: 2px;
	background-color: var(--wp--preset--color--grafito);
	color: var(--wp--preset--color--blanco-hueso);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: inherit;
	cursor: pointer;
}

.wpcf7-form .wpcf7-submit:is(:hover, :focus) {
	background-color: var(--wp--preset--color--plata-champan);
	color: var(--wp--preset--color--grafito);
}

.wpcf7-form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--grafito);
	outline-offset: 2px;
}

/* Validación: borde doble en el campo y mensaje en grafito. */
.wpcf7-form .wpcf7-not-valid {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--grafito);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--grafito);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Mismo selector que los de CF7 por estado (form.sent, form.invalid…) para reemplazar sus colores. */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--grafito);
	border-inline-start-width: 4px;
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	background-color: var(--wp--preset--color--aqua-palido);
}

/*
 * 9. Filtros del portafolio (archivo de proyectos y taxonomías): grupo
 * "arlex-filtros" con un enlace "Todos" y el bloque Categorías de la
 * taxonomía tipo_proyecto. El bloque imprime una lista con viñetas y marca el
 * tipo activo solo con la clase current-cat de wp_list_categories (functions.php
 * le añade aria-current). theme.json no puede quitar las viñetas de esa lista
 * ni dar estilo al enlace activo: el CSS de bloque se imprime con especificidad
 * mínima y pierde frente a los estilos de enlace.
 */
.arlex-filtros :is(p, ul) {
	margin: 0;
}

.arlex-filtros ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
}

/*
 * Subtipos (showHierarchy): el bloque los anida en una lista "children" dentro
 * del tipo superior (Empresas → Divisiones de oficina). Van en la misma fila,
 * después de su tipo, y la lista anidada conserva la jerarquía para los
 * lectores de pantalla.
 */
.arlex-filtros li:has(> .children) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.arlex-filtros a {
	display: inline-block;
	padding: calc(var(--wp--preset--spacing--20) - 1px) calc(var(--wp--preset--spacing--30) - 1px);
	border: 1px solid var(--wp--preset--color--plata-champan);
	border-radius: 2px;
	text-decoration: none;
}

.arlex-filtros a:hover,
.arlex-filtros a:focus-visible {
	border-color: currentColor;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.arlex-filtros a[aria-current="page"] {
	background-color: var(--wp--preset--color--grafito);
	border-color: var(--wp--preset--color--grafito);
	color: var(--wp--preset--color--blanco-hueso);
}

/* Sin proyectos publicados el bloque imprime "No hay categorías": no hay nada que filtrar. */
:where(body:not(.editor-styles-wrapper)) .arlex-filtros:has(.cat-item-none) {
	display: none;
}

/*
 * 10. Bloques que dependen del contenido. Una sección de proyectos (clase
 * "arlex-seccion-proyectos": portada, páginas de servicio y relacionados) se
 * oculta si su Query Loop no devuelve nada: el bloque "Sin resultados" lleva la
 * clase "arlex-sin-proyectos". En la ficha técnica del proyecto, una fila se
 * oculta si su dato está vacío: el párrafo enlazado al metadato queda vacío o
 * el bloque de términos no imprime nada. theme.json no puede ocultar un bloque
 * según el contenido de otro. Solo en el sitio: en el editor se ve todo.
 */
:where(body:not(.editor-styles-wrapper)) :is(
	.arlex-seccion-proyectos:has(.arlex-sin-proyectos),
	.arlex-ficha-dato:has(> .arlex-ficha-valor:empty),
	.arlex-ficha-dato:not(:has(> .arlex-ficha-valor))
) {
	display: none;
}