/*
Theme Name: Govira
Theme URI: https://sutakalpa.com
Author: MerakiLoop
Author URI: https://merakiloop.com
Description: Block theme (FSE) para la tienda WooCommerce de Sutakalpa — artesanía, inciensos y productos espirituales. Mobile-first, 100% bloques nativos.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Requires Plugins: woocommerce
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: govira
Tags: block-theme, full-site-editing, e-commerce, woo-commerce, mobile-first

Este archivo solo contiene lo que theme.json no puede expresar: pseudo-clases
sin soporte de "elements" (:active con transform), reskin mínimo de partes de
bloques nativos (drawer de navegación, badges sobre imagen de producto),
scroll horizontal en filas de chips, y accesibilidad (foco visible,
prefers-reduced-motion, skip-link). El sistema de diseño (color, tipografía,
spacing, sombras, radios de botón) vive en theme.json.
*/

/* -----------------------------------------------------------------------
   Reset mínimo. WordPress no aplica box-sizing:border-box por defecto;
   sin esto, los inputs del formulario de contacto (width:100% + padding)
   desbordan el viewport en móvil.
   ----------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------
   Accesibilidad
   ----------------------------------------------------------------------- */

.skip-link {
	background: var( --wp--preset--color--surface-page );
	color: var( --wp--preset--color--text-strong );
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--40 );
	position: absolute;
	left: var( --wp--preset--spacing--20 );
	top: -100px;
	z-index: 100000;
	transition: top 140ms ease;
}

.skip-link:focus {
	top: var( --wp--preset--spacing--20 );
}

:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -----------------------------------------------------------------------
   Motion de botones — theme.json ya cubre color/fondo en :hover/:active;
   el desplazamiento de 1px al pulsar es un transform, que theme.json no
   puede expresar.
   ----------------------------------------------------------------------- */

.wp-block-button__link,
.wc-block-components-button {
	transition: background-color 140ms ease, border-color 140ms ease, transform 100ms ease;
}

.wp-block-button__link:active,
.wc-block-components-button:active {
	transform: translateY( 1px );
}

/* -----------------------------------------------------------------------
   Filas con scroll horizontal (categorías rápidas, chips de ordenación,
   galería del taller, "también te puede gustar"). No hay un tipo de layout
   nativo para "fila con scroll-snap horizontal"; se aplica como clase de
   utilidad puntual sobre el Group de cada pattern, no como framework.
   ----------------------------------------------------------------------- */

.govira-hscroll {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.govira-hscroll::-webkit-scrollbar {
	display: none;
}

.govira-hscroll > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Anchos fijos puntuales. El bloque Group no admite un ancho fijo como
   atributo validado (solo min-height) — para evitar el "block validation
   failed" que da WordPress cuando el estilo en línea no coincide con lo
   que el bloque declara, estos anchos van por clase en vez de por style
   en línea.
   ----------------------------------------------------------------------- */

.govira-avatar-64 {
	width: 64px;
}

.govira-avatar-120 {
	width: 120px;
	margin-inline: auto;
}

.govira-gallery-tile {
	width: 200px;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Logo de cabecera. El bloque Site Logo solo permite fijar el ancho; el
   archivo real del cliente tiene mucho margen interno alrededor de la
   marca, así que sin tope de alto la cabecera queda desproporcionada.
   ----------------------------------------------------------------------- */

.wp-block-site-logo img {
	max-height: 40px;
	width: auto;
}

/* -----------------------------------------------------------------------
   Drawer de navegación (menú móvil). El bloque Navegación de WordPress ya
   resuelve la lógica de apertura/cierre, foco y tecla ESC — aquí solo se
   re-viste: por defecto, ".responsive-container.is-menu-open" (no
   ".responsive-dialog") es el elemento que ocupa toda la pantalla con
   fondo sólido; lo convertimos en el scrim oscuro, y ".responsive-dialog"
   (que por defecto no tiene tamaño ni fondo propios) pasa a ser el panel
   real de 80% de ancho anclado a la izquierda. El cierre al pulsar fuera y
   el swipe sí son propios (no hay bloque nativo para ninguno de los dos);
   ver assets/js/nav-drawer.js — ambos simplemente disparan el botón de
   cierre nativo, no reimplementan el estado del menú.
   ----------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) {
	background-color: rgba( 30, 27, 18, 0.5 ) !important;
	padding: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) .wp-block-navigation__responsive-dialog {
	position: absolute;
	inset: 0 auto 0 0;
	width: 80%;
	max-width: 400px;
	height: 100%;
	overflow-y: auto;
	background: var( --wp--preset--color--surface-page );
	color: var( --wp--preset--color--text-strong );
	box-shadow: var( --wp--preset--shadow--flotante );
	padding: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--40 );
}

@media not ( prefers-reduced-motion ) {
	@keyframes govira-drawer-slide-in {
		from {
			transform: translateX( -100% );
		}
		to {
			transform: translateX( 0 );
		}
	}

	.wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) .wp-block-navigation__responsive-dialog {
		animation: govira-drawer-slide-in 220ms ease-out;
	}
}

.wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) .wp-block-navigation-item a {
	text-decoration: none;
}

/* -----------------------------------------------------------------------
   Insignias sobre la imagen de producto (Oferta / Agotado). Son bloques
   nativos de WooCommerce (Product Sale Badge / Product Stock Indicator);
   aquí solo se posicionan en la esquina de la imagen, que theme.json no
   puede expresar (position/inset).
   ----------------------------------------------------------------------- */

.wp-block-woocommerce-product-image {
	position: relative;
}

.wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: var( --wp--preset--spacing--20 );
	left: var( --wp--preset--spacing--20 );
	z-index: 1;
}

.wc-block-components-product-stock-indicator {
	background: var( --wp--preset--color--surface-sunken );
	color: var( --wp--preset--color--text-muted );
	border-radius: var( --wp--custom--radius--pill );
	padding: 0.125rem 0.625rem;
	font-size: var( --wp--preset--font-size--auxiliar );
}

.govira-product-card .wc-block-components-product-stock-indicator {
	position: absolute;
	top: var( --wp--preset--spacing--20 );
	left: var( --wp--preset--spacing--20 );
	z-index: 1;
}

/* -----------------------------------------------------------------------
   Barra inferior fija de "Añadir al carrito" en ficha de producto.
   ----------------------------------------------------------------------- */

.govira-sticky-atc {
	position: sticky;
	bottom: 0;
	z-index: 10;
	background: var( --wp--preset--color--surface-card );
}

/* -----------------------------------------------------------------------
   Meta de producto (SKU, etiquetas) en ficha de producto. El bloque
   Product Meta no declara soporte de "spacing" en su block.json, así que
   el padding no es un atributo válido del bloque — va por CSS.
   ----------------------------------------------------------------------- */

.wp-block-woocommerce-product-meta {
	padding-top: var( --wp--preset--spacing--50 );
	padding-bottom: var( --wp--preset--spacing--50 );
}

/* -----------------------------------------------------------------------
   Resumen de descripción de producto (bloque dinámico
   govira/product-description). El texto completo empieza oculto; el
   toggle es JS mínimo vanilla, ver assets/js/product-description.js.
   ----------------------------------------------------------------------- */

.govira-product-description__toggle {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	margin-top: var( --wp--preset--spacing--20 );
	color: var( --wp--preset--color--primary );
	font-family: inherit;
	font-size: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* -----------------------------------------------------------------------
   Botón de búsqueda + overlay a pantalla completa. No hay bloque nativo
   para un "modal de búsqueda con productos destacados", así que es
   custom — ver assets/js/search-overlay.js para el toggle (reutiliza la
   clase "has-modal-open" del bloque Navigation para el scroll-lock, en
   vez de reimplementarlo).
   ----------------------------------------------------------------------- */

.govira-search-trigger,
.govira-search-close {
	background: none;
	border: none;
	padding: var( --wp--preset--spacing--20 );
	margin: 0;
	line-height: 0;
	cursor: pointer;
	color: var( --wp--preset--color--text-strong );
}

.govira-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001;
	overflow-y: auto;
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--70 );
}

.govira-search-overlay:not( .is-open ) {
	display: none;
}

.govira-search-close {
	margin-left: auto;
}

.govira-search-form {
	margin-top: var( --wp--preset--spacing--50 );
}

.govira-search-form input[type="search"] {
	width: 100%;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1.125rem;
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
	border: 1.5px solid var( --wp--preset--color--border-default );
	border-radius: var( --wp--custom--radius--input );
	background: var( --wp--preset--color--surface-inset );
	color: var( --wp--preset--color--text-strong );
}

.govira-search-form input[type="search"]:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Barra de envío gratis (bloque dinámico govira/free-shipping-bar).
   ----------------------------------------------------------------------- */

.govira-shipping-bar__track {
	background: var( --wp--preset--color--primary-tint );
	border-radius: var( --wp--custom--radius--pill );
	height: 8px;
	overflow: hidden;
}

.govira-shipping-bar__fill {
	background: var( --wp--preset--color--primary );
	height: 100%;
	border-radius: var( --wp--custom--radius--pill );
	transition: width 140ms ease;
}