/**
 * Base — elementos HTML y escala tipográfica.
 *
 * Se carga después de style.css (normalize + _s) y reescribe los valores
 * genéricos de Underscores con la identidad de la marca.
 *
 * @package SilviaGarcia
 */

html {
	scroll-behavior: smooth;

	/* Evita que el header fijo tape el destino de los anclas. */
	scroll-padding-top: calc(var(--sg-header-height) + 24px);
}

body {
	background-color: var(--sg-linen);
	color: var(--sg-fir);
	font-family: var(--sg-font-body);
	font-size: var(--sg-body-md);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

::selection {
	background-color: var(--sg-clay);
	color: var(--sg-linen);
}

/* Tipografía ------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--sg-font-heading);
	font-weight: var(--sg-heading-weight);
	color: var(--sg-fir);
	line-height: 1.2;
	margin-block: 0 0.5em;
	text-wrap: balance;
}

h5,
h6 {
	font-family: var(--sg-font-body);
	color: var(--sg-fir);
	margin-block: 0 0.5em;
}

h1 {
	font-size: var(--sg-display);
	line-height: var(--sg-display-lh);
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--sg-h2-size);
	line-height: 1.25;
	letter-spacing: -0.015em;
}

h3 {
	font-size: var(--sg-h3-size);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

h4 {
	font-size: 1.25rem;
	line-height: 1.35;
}

h5 {
	font-size: var(--sg-body-md);
	font-weight: 600;
}

/**
 * Margen inferior de los titulares — ojo con la especificidad.
 *
 * WordPress aplica a todos los hijos de un grupo:
 *
 *     :root :where(.is-layout-flow) > * { margin-block-start: 1.5rem; margin-block-end: 0 }
 *
 * Ese selector vale (0,1,0). Un selector de elemento como `h2 { }` vale (0,0,1)
 * y pierde SIEMPRE, sin importar el orden de carga: por eso el margen inferior
 * no se aplicaba y solo funcionaba escrito como estilo en línea (que gana a
 * cualquier hoja).
 *
 * La solución es igualar la especificidad con la misma técnica que usa el
 * núcleo, `:root :where(...)` = (0,1,0), y apoyarse en el orden: nuestras hojas
 * se encolan después de global-styles, así que ganan el desempate. Se mantiene
 * en (0,1,0) a propósito, para que cualquier clase del tema —`.sg-title-sm`,
 * `.page-hero__title`, `.post-card__title`— siga pudiendo sobrescribirlo.
 *
 * El margen superior se deja en manos del blockGap de WordPress (1.5rem).
 */
:root :where(h1) {
	margin-bottom: calc(var(--sg-unit) * 4);
}

:root :where(h2) {
	margin-bottom: var(--sg-heading-gap);
}

/**
 * Ritmo condicional: el hueco bajo un titular depende de lo que venga detrás.
 *
 * 1. Si le sigue un párrafo o una lista, eso es su bajada: forman una unidad
 *    y el hueco se reduce. Con el hueco de sección quedaban desparejados.
 *    (Una lista es texto corrido, como en las páginas legales.)
 * 2. Si a ese párrafo le sigue un componente (rejilla, panel, botones…), es él
 *    quien abre el aire de la sección.
 * 3. Si al titular le sigue directamente un componente, mantiene el hueco
 *    grande, que es el caso de "Cómo puedo ayudarte" o "Áreas".
 *
 * El caso 2 se limita a los hijos directos de una sección a ancho completo:
 * dentro de un recuadro, un párrafo seguido de un botón no debe separarse.
 *
 * `:has()` no está en navegadores muy antiguos; ahí todo mantiene el hueco
 * grande, que es el comportamiento anterior. Degrada sin romperse.
 *
 * Solo se aplica al H2. Con `:has()` el selector sube a (0,1,1), y si abarcara
 * también a los H3 le ganaría a `.sg-title-sm` (0,1,0), estropeando los
 * titulares compactos de los recuadros y del bento.
 */
:root :where(h2):has(+ p, + ul, + ol) {
	margin-bottom: var(--sg-heading-gap-tight);
}

:root :where(.alignfull > p):has(+ .wp-block-columns, + .wp-block-group, + .wp-block-buttons, + .wp-block-list, + .wp-block-details, + .wp-block-image, + .wp-block-quote) {
	margin-bottom: var(--sg-lead-gap);
}

:root :where(h3, h4) {
	margin-bottom: calc(var(--sg-unit) * 2);
}

:root :where(h5, h6) {
	margin-bottom: calc(var(--sg-unit) * 1.5);
}

h6 {
	font-size: var(--sg-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--sg-label-tracking);
	text-transform: uppercase;
	color: var(--sg-clay);
}

p {
	margin-block: 0 1.25em;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 600;
}

em,
i,
cite,
dfn {
	font-style: italic;
}

small {
	font-size: var(--sg-label);
}

hr {
	background-color: var(--sg-fir-10);
	border: 0;
	height: 1px;
	margin-block: calc(var(--sg-unit) * 6);
}

blockquote {
	margin: calc(var(--sg-unit) * 5) 0;
	padding-left: calc(var(--sg-unit) * 4);
	border-left: 2px solid var(--sg-clay);
	font-family: var(--sg-font-quote);
	font-style: italic;
	font-weight: 500;
	font-size: var(--sg-headline-sm);
	line-height: 1.45;
	color: var(--sg-fir);
}

blockquote cite {
	display: block;
	margin-top: calc(var(--sg-unit) * 2);
	font-family: var(--sg-font-body);
	font-size: var(--sg-label);
	font-style: normal;
	letter-spacing: var(--sg-label-tracking);
	text-transform: uppercase;
	color: var(--sg-clay);
}

/* Listas ----------------------------------------------------------------- */

ul,
ol {
	margin: 0 0 1.25em;
	padding-left: 1.4em;
}

li {
	margin-bottom: 0.5em;
}

li::marker {
	color: var(--sg-sage);
}

/* Enlaces ---------------------------------------------------------------- */

/**
 * Ojo con :visited. La regla `a:visited { color: … }` tiene más especificidad
 * (0,1,1) que cualquier selector de clase simple como `.header-cta` (0,1,0), de
 * modo que teñía de arcilla el texto de los botones ya visitados y los dejaba
 * ilegibles sobre su propio fondo arcilla. No hace falta declararla: el color
 * de `a` ya se aplica a los enlaces visitados, porque los estilos de autor
 * prevalecen sobre los del navegador.
 */
a {
	color: var(--sg-clay);
	text-decoration-color: var(--sg-clay-50);
	text-underline-offset: 0.2em;
	transition: color var(--sg-transition), text-decoration-color var(--sg-transition);
}

a:hover,
a:focus {
	color: var(--sg-fir);
	text-decoration-color: currentcolor;
}

:focus-visible {
	outline: 2px solid var(--sg-clay);
	outline-offset: 3px;
	border-radius: var(--sg-radius-sm);
}

/* Imágenes y multimedia --------------------------------------------------- */

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

figure {
	margin: 0;
}

/* Formularios ------------------------------------------------------------ */

input,
select,
textarea,
button {
	font-family: inherit;
	font-size: var(--sg-body-md);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--sg-white);
	border: 1px solid var(--sg-sage-40);
	border-radius: var(--sg-radius);
	color: var(--sg-fir);
	transition: border-color var(--sg-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
	border-color: var(--sg-clay);
	color: var(--sg-fir);
	outline: none;
}

textarea {
	min-height: 160px;
	resize: vertical;
}

label {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: var(--sg-label);
	font-weight: 600;
	letter-spacing: var(--sg-label-tracking);
	text-transform: uppercase;
	color: var(--sg-fir-70);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sg-button-padding);
	background-color: var(--sg-clay);
	border: 1px solid transparent;
	border-radius: var(--sg-radius-button);
	color: var(--sg-linen);
	font-size: var(--sg-button-size);
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color var(--sg-transition), color var(--sg-transition),
		border-color var(--sg-transition), transform var(--sg-transition);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: var(--sg-fir);
	border-color: var(--sg-fir);
	color: var(--sg-linen);
	transform: translateY(-2px);
}

/* Tablas ----------------------------------------------------------------- */

table {
	width: 100%;
	border-collapse: collapse;
	margin-block: calc(var(--sg-unit) * 4);
	font-size: var(--sg-body-md);
}

th,
td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--sg-fir-10);
	text-align: left;
	vertical-align: top;
}

th {
	font-size: var(--sg-label);
	font-weight: 600;
	letter-spacing: var(--sg-label-tracking);
	text-transform: uppercase;
	color: var(--sg-fir-70);
}