/*
 * Fundaciones accesibles de ACE Commerce.
 *
 * Aca solo va lo que theme.json no puede expresar: estados de foco, salto al
 * contenido, respeto por "reducir movimiento" y tamano minimo de las cosas que
 * se tocan con el dedo.
 *
 * Regla: ningun valor escrito a mano. Todo sale de los tokens de theme.json.
 * Ver TOKENS.md.
 */

/* -------------------------------------------------------------------------
 * 0. Caja de todos los elementos
 *
 * Sin esto, el navegador cuenta el borde y el relleno APARTE del ancho que
 * se le pide a un elemento -asi que un boton con `width:100%` y relleno
 * termina siendo mas ancho que su contenedor y se sale-. Es la primera
 * regla del CSS del prototipo (`*,*::before,*::after{box-sizing:border-box}`)
 * y faltaba en el tema: quedo en evidencia recien al construir el catalogo,
 * con el boton "Agregar" saliendose de la tarjeta.
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * 0.5. El sitio es claro, siempre
 *
 * Sin esto, un telefono con el modo oscuro del sistema activado dibuja los
 * controles nativos del navegador -el cuadro cerrado de un <select>, no solo
 * su lista desplegable- con la paleta oscura del sistema operativo, aunque
 * el resto de la pagina siga en claro: texto lavado/casi invisible y un
 * borde con el color de acento del sistema (celeste en iOS). Encontrado en
 * el selector de variante de producto (talle), pero afecta a cualquier
 * <select> o <input> del sitio en un telefono con modo oscuro.
 * ---------------------------------------------------------------------- */

:root {
	color-scheme: light;
}

/* -------------------------------------------------------------------------
 * 1. Foco visible
 *
 * Quien navega con teclado necesita ver donde esta parado. :focus-visible
 * muestra el anillo solo cuando el foco llego por teclado, asi que el mouse no
 * deja marcas indeseadas.
 * ---------------------------------------------------------------------- */

:where(a, button, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width, 2px) solid
		var(--wp--custom--focus--color, currentColor);
	outline-offset: var(--wp--custom--focus--offset, 2px);
	border-radius: var(--wp--preset--border-radius--small, 6px);
}

/* Sin :focus-visible el navegador viejo debe seguir mostrando algo. */
:where(a, button, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/*
 * Campos de formulario (input/select/textarea): un solo trazo que cambia de
 * color al enfocar, no el aro de foco generico de arriba sumado al borde
 * propio de cada campo. Antes convivian los dos -el aro de accesibilidad de
 * la regla anterior + el `border-color` que cada formulario (login,
 * checkout, direcciones) le pone en foco- y se veian como un doble borde.
 * El cambio de color + un halo fino de 1px cumple la misma funcion de
 * accesibilidad sin duplicar el trazo. `:where()` deja la especificidad en
 * 0 para que cualquier color propio de un formulario siga pudiendo pisarlo.
 */
:where(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--pc-primary, var(--wp--custom--focus--color, currentColor));
	box-shadow: 0 0 0 1px var(--pc-primary, var(--wp--custom--focus--color, currentColor));
}

:where(input, select, textarea):focus:not(:focus-visible) {
	outline: none;
}

/* -------------------------------------------------------------------------
 * 1.5. Etiqueta flotante (fusion etiqueta + placeholder)
 *
 * La etiqueta del campo vive DENTRO de la caja, como si fuera el
 * placeholder. Al enfocar o completar el campo, sube y queda apoyada sobre
 * el borde superior, del mismo tamano y alineada verticalmente con la
 * linea del borde -igual que el patron de Google/Material.
 *
 * Se usa `:has()` a proposito: no exige que el <label> venga despues del
 * <input> en el marcado (la mayoria de las plantillas del sitio ya traen el
 * label ANTES), asi que el mismo bloque sirve para envoltorios existentes
 * (`.field`, `.form-row`, etc.) agregandoles la clase `.ace-field` sin
 * reordenar el HTML. El input SI necesita `placeholder=" "` (un espacio) si
 * no tiene placeholder propio, porque `:placeholder-shown` depende de que
 * el atributo exista.
 * ---------------------------------------------------------------------- */

.ace-field {
	position: relative;
}

.ace-field > label {
	position: absolute;
	left: 14px;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 4px;
	max-width: calc(100% - 28px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: var(--pc-white, #fafaf9);
	color: var(--pc-dark-gray, #3a3a3a);
	pointer-events: none;
	transform-origin: left center;
	transition: top 0.15s var(--pc-ease-out, ease-out), transform 0.15s var(--pc-ease-out, ease-out), color 0.15s var(--pc-ease-out, ease-out);
}

/*
 * WooCommerce envuelve el input de contrasena en <span class="password-input">
 * (para el icono nativo de mostrar/ocultar) con `position:relative`. Al
 * quedar despues del <label> en el marcado y con position propio, ese span
 * tapaba la etiqueta -pintaba encima, mismo orden de apilamiento, ultimo en
 * el HTML gana-. El z-index de arriba saca al label de esa competencia.
 */
.ace-field .password-input {
	width: 100%;
}

.ace-field > input,
.ace-field > select,
.ace-field > textarea {
	width: 100%;
}

.ace-field:has(input:focus) > label,
.ace-field:has(select:focus) > label,
.ace-field:has(textarea:focus) > label,
.ace-field:has(input:not(:placeholder-shown)) > label,
.ace-field:has(textarea:not(:placeholder-shown)) > label,
.ace-field:has(select) > label {
	top: 0;
	transform: translateY(-50%) scale(0.85);
}

.ace-field:has(input:focus) > label,
.ace-field:has(select:focus) > label,
.ace-field:has(textarea:focus) > label {
	color: var(--pc-primary, #ce2731);
}

/* Un <select> siempre muestra un valor (nunca queda "vacio" como un texto),
 * asi que su etiqueta queda arriba siempre, sin animacion de por medio. */
.ace-field:has(select) > label {
	transition: none;
}

/* -------------------------------------------------------------------------
 * 2. Salto al contenido
 *
 * WordPress agrega solo el enlace "Ir al contenido" en los temas de bloques.
 * Aca se le da forma para que aparezca al recibir el foco.
 * ---------------------------------------------------------------------- */

.skip-link.screen-reader-text {
	background-color: var(--wp--preset--color--surface, #fff);
	border-radius: var(--wp--preset--border-radius--small, 6px);
	box-shadow: var(--wp--preset--shadow--popover);
	color: var(--wp--preset--color--accent-strong, #000);
	font-family: var(--wp--preset--font-family--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	left: var(--wp--preset--spacing--30, 1rem);
	line-height: normal;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-decoration: none;
	top: var(--wp--preset--spacing--30, 1rem);
	z-index: var(--wp--custom--layer--toast, 400);
}

/* -------------------------------------------------------------------------
 * 3. Texto solo para lectores de pantalla
 *
 * Oculta a la vista sin ocultar a la tecnologia asistiva. display:none si
 * ocultaria, y por eso no se usa.
 * ---------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	position: fixed;
	width: auto;
}

/* -------------------------------------------------------------------------
 * 4. Tamano minimo de lo que se toca
 *
 * 44px es el minimo recomendado para que un dedo acierte sin ampliar. Se
 * aplica con :where() para que cualquier estilo posterior pueda ganarle sin
 * pelear especificidad.
 *
 * OJO al construir un boton mas chico a proposito (un icono de 32px, por
 * ejemplo): `min-block-size`/`min-inline-size` son propiedades DISTINTAS de
 * `height`/`width`. Ponerle `!important` a `width`/`height` no alcanza para
 * ganarle a esta regla -no compiten por la misma propiedad-; hay que fijar
 * tambien `min-width`/`min-height` (o sus equivalentes logicos) en el
 * selector propio. Paso por esto en la tarjeta del catalogo: el corazon y
 * el compartir del prototipo miden 32px, y quedaban en 44px hasta que se
 * les fijo el minimo explicitamente.
 * ---------------------------------------------------------------------- */

:where(.wp-block-button__link, .wp-element-button, button, [type="submit"], [type="button"]) {
	min-block-size: var(--wp--custom--target--min, 2.75rem);
	min-inline-size: var(--wp--custom--target--min, 2.75rem);
}

:where(.wp-block-navigation__container) :where(a) {
	min-block-size: var(--wp--custom--target--min, 2.75rem);
	display: flex;
	align-items: center;
}

/* -------------------------------------------------------------------------
 * 5. Movimiento
 *
 * Quien pidio en su sistema operativo "reducir movimiento" suele tener un
 * motivo medico. Se respeta sin excepciones.
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * 6. Anclas debajo de una cabecera fija
 *
 * Sin esto, ir a #seccion deja el titulo tapado por la cabecera.
 * ---------------------------------------------------------------------- */

:where(:target) {
	scroll-margin-block-start: calc(
		var(--wp--custom--bar--header-mobile, 3.5rem) + var(--wp--preset--spacing--30, 1rem)
	);
}

@media ( min-width: 62rem ) {
	:where(:target) {
		scroll-margin-block-start: calc(
			var(--wp--custom--bar--header-desktop, 6rem) + var(--wp--preset--spacing--30, 1rem)
		);
	}
}

/* -------------------------------------------------------------------------
 * 7. Legibilidad
 * ---------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, dd) {
	text-wrap: pretty;
}

/* Ninguna imagen puede desbordar su contenedor y romper el ancho de la pagina. */
:where(img, svg, video, canvas, iframe) {
	max-inline-size: 100%;
	block-size: auto;
}

/* Los campos de formulario heredan la tipografia; el navegador no lo hace solo. */
:where(input, select, textarea, button) {
	font: inherit;
}

::selection {
	background-color: var(--wp--preset--color--accent-surface);
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * 7b. Tamano base de los iconos propios (`inc/icons.php`, `ace_icon()`)
 *
 * Mismo criterio que `.icon` en el CSS del prototipo: un icono sin clase de
 * tamano propia tiene que verse chico y prolijo, nunca al tamano que le
 * quede libre en su contenedor. Sin esta regla, un `<svg>` sin ancho/alto
 * explicito solo queda acotado por `max-inline-size:100%` (seccion 7): en
 * un boton ancho eso significa un icono gigante -asi se detecto el problema,
 * en la ficha de producto, donde ademas cada componente define su propio
 * tamano (`.ace-product-detail__qty .ace-icon`, etc.) sobre esta base.
 * ---------------------------------------------------------------------- */

.ace-icon {
	block-size: 1.375rem;
	flex-shrink: 0;
	inline-size: 1.375rem;
}

/* -------------------------------------------------------------------------
 * 7c. Botones propios (`.ace-btn`)
 *
 * Se mudan aca desde `filters.css`: son el mismo boton "pildora, negrita,
 * altura minima tactil" que usa el panel de filtros (Ordenar/Filtrar) y la
 * ficha de producto (Agregar al pedido) por igual -es un componente del
 * sistema de diseno, no algo propio del catalogo-. Estar solo en
 * `filters.css` significaba que cualquier pantalla sin filtros (la ficha de
 * producto, por ejemplo) mostraba el boton sin ningun estilo: un link de
 * texto azul subrayado en vez de un boton.
 * ---------------------------------------------------------------------- */

.ace-btn {
	align-items: center;
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 600;
	justify-content: center;
	min-block-size: var(--wp--custom--target--min, 2.75rem);
	padding-inline: 1.25rem;
	text-decoration: none;
}

/*
 * Cuando `.ace-btn` es un link (`<a>`, como "Agregar al pedido"), el
 * navegador le pone subrayado por defecto -y lo mantiene aunque el elemento
 * ya se vea como un boton en todo lo demas. Pasaba por alto en la tarjeta
 * del catalogo (boton solo icono, no hay texto que subrayar) y quedaba a
 * la vista recien en la ficha de producto, donde el boton si tiene texto.
 */
.ace-btn:hover,
.ace-btn:focus,
.ace-btn:visited {
	text-decoration: none;
}

.ace-btn--outline {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--hairline, #e2e1de);
	color: var(--wp--preset--color--contrast, #1c1c1c);
}

/*
 * Calcado del prototipo (`.btn-dark`, `_project/prototipo/css/style.css`):
 * gris claro en reposo, texto gris oscuro; se invierte recien al pasar el
 * mouse. "Dark" nombra el estado de foco/hover, no el color de reposo -se
 * habia armado con el acento de marca (azul marino) todo el tiempo, valor
 * que no esta en el prototipo para este boton.
 */
.ace-btn--dark {
	background: var(--wp--preset--color--hairline, #e2e1de);
	border: 0;
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
}

.ace-btn--dark:hover {
	background: var(--wp--preset--color--contrast-alt, #3a3a3a);
	color: var(--wp--preset--color--surface, #fff);
}

.ace-btn--block {
	inline-size: 100%;
}

/*
 * Calcado del prototipo (`.btn-whatsapp`, `_project/prototipo/css/style.css`):
 * es el mismo verde de marca de WhatsApp en cualquier boton de contacto del
 * sitio (esta pagina, el flotante de la cabecera, etc.), no un tono propio.
 */
.ace-btn--whatsapp {
	background: #25d366;
	border: 0;
	color: #fafaf9;
}

.ace-btn--whatsapp:hover {
	background: #1da851;
	color: #fafaf9;
}

/* -------------------------------------------------------------------------
 * 8. Estructura de pagina
 *
 * El pie queda abajo aunque el contenido sea corto.
 * ---------------------------------------------------------------------- */

body {
	display: flex;
	flex-direction: column;
	min-block-size: 100svb;
}

.wp-site-blocks {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	inline-size: 100%;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/*
 * Cabecera pegada al hacer scroll: la franja superior, la cabecera y el
 * menu de categorias viven como tres bloques hermanos dentro de UN SOLO
 * `<header>` (parts/header.html) -igual que el prototipo, donde los tres
 * tambien son hijos directos de `<header class="site-header">`.
 *
 * `position:sticky` en `.ace-header` y `.ace-desktop-nav` (adentro de cada
 * componente) nunca iba a funcionar ahi: un elemento sticky solo puede
 * quedarse pegado dentro de la altura de SU PROPIO padre, y el padre de los
 * dos es este `<header>`, que mide apenas lo que miden sus tres franjas
 * juntas (unos 170px) -no el largo de la pagina-. Apenas se scrolleaban esos
 * 170px, se soltaba: por eso "no se pegaba", aunque el CSS de adentro
 * estuviera bien escrito.
 *
 * La solucion es pegar el `<header>` entero, no sus hijos: su padre real es
 * `.wp-site-blocks`, que si mide el largo de toda la pagina. Se le da un
 * `top` negativo del alto exacto de la franja superior
 * (`--wp--custom--bar--topbar`) para que esa franja sea lo unico que se
 * scrollea afuera de la pantalla; la cabecera y el menu de categorias, que
 * vienen justo despues, quedan pegados arriba del todo.
 */
header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--wp--custom--bar--topbar, 2.25rem));
	z-index: var(--wp--custom--layer--header, 100);
}

/*
 * Los componentes de adentro ya no necesitan pegarse por su cuenta -el
 * `<header>` que los contiene lo hace por los tres a la vez-. Se apaga su
 * propio `position:sticky` solo en este ensamblado real del sitio: el
 * atributo "Fijo al hacer scroll" de cada bloque sigue existiendo para
 * cuando se use suelto en una pagina armada a mano con el editor.
 */
header.wp-block-template-part .ace-header.is-sticky,
header.wp-block-template-part .ace-desktop-nav.is-sticky {
	position: relative;
	top: auto;
}

/*
 * Una sola linea fina entre el buscador y el menu de categorias, calcada
 * del prototipo (`.header-nav{border-top:1px}`, `.header-main` no lleva
 * borde propio): `.ace-header` trae su propia `border-block-end` para
 * cuando se usa solo (por ejemplo en el editor de Elementor), pero acá
 * `.ace-desktop-nav` ya pone la linea de arriba pegada justo debajo -las
 * dos juntas se veian como una sola raya gruesa de 2px, el doble de ancha
 * que cualquier otra del sitio.
 */
header.wp-block-template-part .ace-header {
	border-block-end: 0;
}

/*
 * La sombra de "cabecera pegada al scrollear" viaja con `.ace-header`
 * (`.is-scrolled`, ver Header/view.js), pero ahora quien queda fijo arriba
 * es el `<header>` entero -cabecera y menu de categorias juntos, ver arriba-:
 * una sombra debajo solo de la cabecera cortaria justo en el medio del
 * bloque pegado, arriba del menu. Se repite la sombra en el borde de abajo
 * del `<header>` completo para que quede debajo de las dos franjas.
 */
header.wp-block-template-part:has(.ace-header.is-scrolled) {
	box-shadow: var(--wp--preset--shadow--header, 0 2px 8px rgba(0, 0, 0, 0.1));
}

/*
 * La regla de arriba reemplaza a esta, no se suma: `.ace-header` trae su
 * propia sombra en `.is-scrolled` (Header/style.css) para cuando se usa
 * suelta. Sin apagarla aca, quedaban las dos dibujandose juntas -una
 * pegada al buscador, la de arriba pegada a todo el bloque- y se leian
 * como una sombra duplicada.
 */
header.wp-block-template-part .ace-header.is-scrolled {
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * 9. Barra de scroll: una sola apariencia sutil en todo el sitio
 *
 * Pedido de Adriano del 24/08: la barra por defecto del navegador -gruesa,
 * con flechas, tapando contenido en el popup de opiniones- se reemplaza por
 * una version fina y discreta, igual en cualquier lugar del sitio que
 * scrollee (este popup, el carrusel de categorias, la pagina entera). Sin
 * esto cada navegador dibuja la suya, con un ancho que varia bastante.
 *
 * `scrollbar-width`/`scrollbar-color` son el estandar (Firefox, y Chrome/
 * Edge recientes); `::-webkit-scrollbar-*` cubre a los que todavia no lo
 * soportan (Safari). No hay boton "atras/adelante": esa es la apariencia
 * fina que se pidio, no un descuido.
 * ---------------------------------------------------------------------- */

* {
	scrollbar-color: var(--wp--preset--color--hairline, #e2e1de) transparent;
	scrollbar-width: thin;
}

*::-webkit-scrollbar {
	block-size: 0.375rem;
	inline-size: 0.375rem;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--hairline, #e2e1de);
	border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--contrast-muted, #6b6b6b);
}