/* ==========================================================================
   Vértice Commerce 2 — core/reset.css
   Reset moderno + base tipográfica del MOTOR. Sin estética de marca: todos
   los valores de color/tipografía/forma salen del contrato de tokens
   semánticos (assets/css/design/tokens.css). Porta la mecánica de las
   secciones 2-3 de theme.css de la implementación de referencia (v1).

   Fixes de auditoría aplicados acá:
   - theme.css:105 → scroll-behavior:smooth SOLO dentro de
     @media (prefers-reduced-motion: no-preference).
   - theme.css:316 → :focus-visible global del contrato (anillo AA con
     --focus-ring). En este archivo y en todo el core NUNCA se usa
     outline:none sin reemplazo visible.

   !important permitidos y documentados en este archivo (utilidades):
   - .screen-reader-text → patrón estándar de WordPress: debe ganar a
     cualquier display/position que un módulo le ponga al elemento.
   - [hidden] → varios componentes del core fijan display (grid/flex) en
     elementos que el motor alterna con el atributo hidden (.vc-cart-count,
     .vc-sticky-atc, .vc-wishlist__*, .vc-livesearch, mensajes del
     newsletter). Sin este guard, ese display pisaría al hidden nativo.
   ========================================================================== */

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

* { margin: 0; }

/* ------------------------------ Documento ------------------------------ */
html { -webkit-text-size-adjust: 100%; }

/* Fix theme.css:105: el smooth scroll es movimiento; solo si el usuario no
   pidió reducirlo. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ------------------------------ Media ---------------------------------- */
img,
picture,
svg,
video { display: block; max-width: 100%; height: auto; }

/* ------------------------------ Formularios ---------------------------- */
input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

/* ------------------------------ Enlaces -------------------------------- */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }

/* ------------------------------ Listas --------------------------------- */
ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

/* ------------------------------ Tablas --------------------------------- */
table { border-collapse: collapse; border-spacing: 0; }

/* ------------------------------ Tipografía base ------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: var(--lh-tight);
	color: var(--ink);
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 { font-size: var(--fs-body); }

/* OJO (gotcha heredado de v1): acá NO se limita el ancho de <p> globalmente.
   El p{max-width:66ch} global de v1 rompía párrafos de UI (topbar, footer,
   drawers). La medida de lectura vive SOLO en .vc-prose (core/layout.css),
   acotada a hijos directos. */
p + p { margin-top: var(--sp-4); }

/* ------------------------------ Foco (contrato) ------------------------ */
/* Fix theme.css:316: anillo de foco AA único para TODO el sitio. Ningún
   módulo del core lo apaga; a lo sumo suma border-color al estado. */
:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ------------------------------ Selección ------------------------------ */
::selection { background: var(--brand-soft); color: var(--ink); }

/* ------------------------------ Utilidades ----------------------------- */
/* hidden nativo SIEMPRE gana (ver cabecera: !important documentado). */
[hidden] { display: none !important; }

/* Patrón estándar de WordPress (a11y). !important documentado en cabecera. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* El skip-link (header.php: a.skip-link.screen-reader-text) se revela al
   recibir foco por teclado. z: token --z-toast (lo más alto de la escala)
   para que nada del chrome DEL TEMA lo tape; la admin bar de WP (z-index
   99999) es imbatible, así que el offset usa su custom property (mismo fix
   theme.css:344 que aplica core/nav.css al header sticky). */
.skip-link:focus {
	position: fixed !important; /* revierte el absolute de .screen-reader-text (utilidad documentada) */
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sp-2));
	left: var(--sp-2);
	z-index: var(--z-toast);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--surface-inverse);
	color: var(--surface);
	border-radius: var(--radius-sm);
}