/*
Theme Name:   Halo
Theme URI:    https://vaperhouserd.com
Author:       Vaper House RD
Description:  Tema de bloques propio para Vaper House RD. Fondo casi negro de temperatura cálida, carmesí como única voz de acción, iconografía dibujada para el rubro del vapeo. Sin constructores visuales, sin librerías de terceros, sin peso muerto.
Version:      1.0.10
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
License:      Proprietary
Text Domain:  halo
Tags:         full-site-editing, block-patterns, e-commerce, dark
*/

/*
 * Este archivo existe para dos cosas: la cabecera de arriba, que WordPress
 * necesita, y las pocas reglas que theme.json todavía no puede expresar.
 *
 * Todo lo que sea color, tipografía o espaciado vive en theme.json y en ningún
 * otro sitio. Si aparece un color escrito a mano en este archivo, es un error:
 * significa que el sistema de diseño dejó de ser la única fuente de verdad y
 * empezó la deriva que termina con doce tonos de rojo distintos en la tienda.
 */

/* --- Accesibilidad: el foco siempre visible ---------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--crimson-300);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Salto directo al contenido para quien navega con teclado. */
.halo-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--crimson);
	color: #fff;
	font-weight: 700;
}

.halo-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* --- Iconografía propia ------------------------------------------------ */
/*
 * Los glifos se dibujaron sobre rejilla de 24 px con trazo de 1.6. Escalarlos
 * con `width` deformaría ese trazo, así que el grosor se compensa aquí.
 */
.halo-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: -0.35em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
	/* El trazo no debe engordar ni adelgazar al escalar el icono. */
	vector-effect: non-scaling-stroke;
}

.halo-icon--sm { width: 1.125em; height: 1.125em; stroke-width: 1.7; }
.halo-icon--lg { width: 2rem; height: 2rem; stroke-width: 1.35; }

/* --- Cifras que se leen en columna ------------------------------------- */
/*
 * Precios, SKU y cantidades con ancho fijo. Sin esto, en una grilla de
 * productos los precios bailan de fila en fila y la columna se ve rota.
 */
.woocommerce-Price-amount,
.halo-sku,
.halo-stock-count,
.wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* --- Estados de disponibilidad ----------------------------------------- */
/*
 * Nunca sólo color: cada estado lleva texto, y el agotado además va apagado y
 * tachado. Quien no distingue rojo de verde tiene que poder comprar igual.
 */
.halo-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.halo-stock--in { color: var(--wp--preset--color--success); }
.halo-stock--low { color: var(--wp--preset--color--warning); }

.halo-stock--out {
	color: var(--wp--preset--color--muted-off);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* --- Halo de marca ------------------------------------------------------ */
/*
 * La firma visual del sistema, y de donde viene el nombre del tema. El color lo
 * inyecta cada marca en su propio contenedor; el carmesí es sólo el respaldo.
 */
.halo-card {
	--halo-accent: var(--wp--preset--color--crimson);
	transition: box-shadow var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.halo-card:hover,
.halo-card:focus-within {
	border-color: var(--halo-accent);
	box-shadow: 0 0 0 1px var(--halo-accent), 0 0 40px -14px var(--halo-accent);
	transform: translateY(-2px);
}

/* --- Variaciones agotadas: tachadas, no ocultas ------------------------- */
/*
 * Ocultar un sabor sin existencias hace que el cliente crea que no se vende.
 * Tacharlo le dice que existe y que vuelva.
 */
.halo-variant[aria-disabled="true"] {
	color: var(--wp--preset--color--muted-off);
	border-color: var(--wp--preset--color--line);
	text-decoration: line-through;
	cursor: not-allowed;
}

/* --- Respeto por el movimiento reducido -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Pie de página ------------------------------------------------------ */
/*
 * Las listas del pie son navegación, no prosa. Con viñetas y subrayado se leen
 * como un texto con enlaces sueltos; sin ellas, como un menú.
 *
 * Va en la hoja global porque el pie está en todas las páginas.
 */
.wp-block-site-footer .wp-block-list,
footer.wp-block-group .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.wp-block-site-footer .wp-block-list a,
footer.wp-block-group .wp-block-list a {
	display: inline-flex;
	align-items: center;
	/* 36 px de alto: cómodo para el pulgar sin separar tanto que la columna
	   se estire media pantalla. */
	min-height: 36px;
	color: var(--wp--preset--color--smoke);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast);
}

.wp-block-site-footer .wp-block-list a:hover,
footer.wp-block-group .wp-block-list a:hover {
	color: var(--wp--preset--color--vapor);
}

/* El foco sí se marca: quien navega con teclado necesita ver dónde está. */
.wp-block-site-footer .wp-block-list a:focus-visible,
footer.wp-block-group .wp-block-list a:focus-visible {
	color: var(--wp--preset--color--crimson-300);
}

/* El logotipo del pie a un tamaño contenido. Repetir la marca a tamaño de
   cabecera al final de la página es gritar dos veces lo mismo. */
footer .halo-logo,
footer .custom-logo { max-width: 140px; }

/* --- Nada de desplazamiento lateral ------------------------------------- */
/*
 * Red de seguridad. Un solo elemento que se pase unos píxeles del ancho hace
 * que toda la página se desplace de lado, y en móvil se siente rota aunque el
 * resto esté impecable.
 *
 * Va aquí y no en la hoja del catálogo porque debe cubrir cualquier página,
 * incluidas las que un plugin genere en el futuro.
 */
html, body { overflow-x: clip; }