/*
Theme Name: Impresiona2
Theme URI: https://impresiona2.es
Author: Impresiona2
Author URI: https://impresiona2.es
Description: Tema de bloques (FSE) para la tienda WooCommerce Impresiona2, imprenta española de regalos personalizados. Diseño minimalista en blanco y negro con acentos de color en hover, badges e iconos. Sin dependencias externas ni proceso de compilación.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Requires Plugins: woocommerce
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: impresiona2
Tags: e-commerce, block-theme, custom-colors, custom-menu, editor-style, full-site-editing, one-column

Este fichero cubre lo que theme.json no resuelve por sí solo: fuente autoalojada,
cabecera fija, menú móvil, estados hover con color y pequeños detalles de accesibilidad.
La mayor parte del diseño (colores, tipografía, espaciados) vive en theme.json.
*/

/* ==========================================================================
   1. Fuente autoalojada (opcional)
   --------------------------------------------------------------------------
   Por defecto el tema usa la pila de fuentes del sistema (rápida, sin
   peticiones externas). Si más adelante quieres la geométrica "Outfit":
   1) Descarga "Outfit" (variable, woff2) desde Google Fonts.
   2) Guarda el archivo en assets/fonts/outfit-variable.woff2
   3) Descomenta el bloque @font-face de abajo.
   theme.json ya declara "Outfit" como primera opción de la pila, así que en
   cuanto exista el archivo se usará automáticamente sin tocar nada más.
   ========================================================================== */

/*
@font-face {
	font-family: 'Outfit';
	src: url('assets/fonts/outfit-variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
*/

/* ==========================================================================
   2. Accesibilidad: foco visible y saltar al contenido
   ========================================================================== */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--magenta);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100000;
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
	padding: 0.75em 1.25em;
	border-radius: var(--wp--custom--radio-borde);
	transition: top var(--wp--custom--transicion);
}

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

/* Respeta la preferencia de 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;
	}
}

/* ==========================================================================
   3. Cabecera fija (sticky) y menú móvil
   ========================================================================== */

.i2-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--superficie);
}

/* Botón hamburguesa: viene del "overlay menu" del bloque Navigation,
   aquí solo lo afinamos visualmente */
.i2-header .wp-block-navigation__responsive-container-open {
	border: 2px solid var(--wp--preset--color--contraste);
	border-radius: var(--wp--custom--radio-borde);
}

.i2-header .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--magenta);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
}

/* Icono del carrito con contador */
.i2-carrito {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.i2-carrito .contador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.3em;
	border-radius: 999px;
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--base);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

/* ==========================================================================
   3b. Footer: forzar todo el texto en blanco
   --------------------------------------------------------------------------
   El fondo del footer es negro (contraste) y el texto base es blanco, pero
   los enlaces tienen su propio color global (negro, definido en theme.json
   para el resto del sitio) que no hereda el blanco del footer: sobre fondo
   negro quedaban invisibles. "a" queda fuera del :where() a propósito: al
   ir dentro de :where() no sumaba especificidad y perdía siempre contra la
   regla global de enlaces, así que aquí se iguala con un selector normal
   (clase + elemento) y, para no depender de cómo genere WordPress esa
   regla en cada versión, se remata con !important.
   ========================================================================== */

.i2-pie,
.i2-pie :where(p, h1, h2, h3, h4, h5, h6, li, span) {
	color: var(--wp--preset--color--base);
}

.i2-pie a,
.i2-pie a:visited {
	color: var(--wp--preset--color--base) !important;
}

.i2-pie a:hover,
.i2-pie a:focus-visible {
	color: var(--wp--preset--color--magenta) !important;
}

/* Las badges de pago mantienen su propio fondo claro y texto oscuro */
.i2-pie .i2-badge {
	color: var(--wp--preset--color--contraste);
}

/* ==========================================================================
   4. Categorías de la home: color de acento por tarjeta
   ========================================================================== */

.i2-categorias .i2-categoria {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--superficie);
	border-radius: var(--wp--custom--radio-tarjeta);
	transition: transform var(--wp--custom--transicion), border-color var(--wp--custom--transicion);
}

.i2-categorias .i2-categoria:hover,
.i2-categorias .i2-categoria:focus-within {
	transform: translateY(-4px);
}

.i2-categorias .i2-categoria::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--i2-acento, var(--wp--preset--color--magenta));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--transicion);
}

.i2-categorias .i2-categoria:hover::before,
.i2-categorias .i2-categoria:focus-within::before {
	transform: scaleX(1);
}

.i2-categorias .i2-categoria:hover .i2-categoria-icono,
.i2-categorias .i2-categoria:focus-within .i2-categoria-icono {
	color: var(--i2-acento, var(--wp--preset--color--magenta));
}

/* Asigna un acento distinto a cada tarjeta según su posición */
.i2-categorias .i2-categoria:nth-child(6n+1) { --i2-acento: var(--wp--preset--color--magenta); }
.i2-categorias .i2-categoria:nth-child(6n+2) { --i2-acento: var(--wp--preset--color--naranja); }
.i2-categorias .i2-categoria:nth-child(6n+3) { --i2-acento: var(--wp--preset--color--violeta); }
.i2-categorias .i2-categoria:nth-child(6n+4) { --i2-acento: var(--wp--preset--color--verde); }
.i2-categorias .i2-categoria:nth-child(6n+5) { --i2-acento: var(--wp--preset--color--rosa); }
.i2-categorias .i2-categoria:nth-child(6n+6) { --i2-acento: var(--wp--preset--color--amarillo); }

.i2-categoria-icono {
	display: block;
	font-size: 2rem;
	line-height: 1;
	transition: color var(--wp--custom--transicion);
}

/* ==========================================================================
   6. Badges (personalizable, envío, etc.)
   ========================================================================== */

.i2-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--contraste);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.i2-badge.es-magenta { background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--base); }
.i2-badge.es-naranja { background: var(--wp--preset--color--naranja); color: var(--wp--preset--color--base); }
.i2-badge.es-verde { background: var(--wp--preset--color--verde); color: var(--wp--preset--color--base); }

/* ==========================================================================
   7. Producto: tarjeta en cuadrícula y ficha individual
   ========================================================================== */

.wc-block-product-template .type-product,
.products .product {
	position: relative;
	transition: transform var(--wp--custom--transicion);
}

.wc-block-product-template .type-product:hover,
.products .product:hover {
	transform: translateY(-4px);
}

.wc-block-product-template .type-product img,
.products .product img {
	border-radius: var(--wp--custom--radio-tarjeta);
	transition: opacity var(--wp--custom--transicion);
}

.wc-block-product-template .type-product:hover img,
.products .product:hover img {
	opacity: 0.9;
}

/* ==========================================================================
   8. Utilidades varias
   ========================================================================== */

.i2-envuelto {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Precio tachado / oferta con color de marca en vez del rojo por defecto */
.woocommerce del { color: var(--wp--preset--color--apagado); }
.woocommerce ins {
	text-decoration: none;
	color: var(--wp--preset--color--magenta);
}

/* Estrellas de valoración con el color de marca en vez del amarillo genérico */
.star-rating span::before,
.wc-block-components-product-rating .wc-block-components-product-rating__stars::before {
	color: var(--wp--preset--color--amarillo);
}

/* Mensajes de WooCommerce (avisos, errores, éxito) con la paleta del tema */
.woocommerce-message,
.wc-block-components-notice-banner.is-info {
	border-left: 4px solid var(--wp--preset--color--violeta);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left: 4px solid var(--wp--preset--color--magenta);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-success {
	border-left: 4px solid var(--wp--preset--color--verde);
}