/**
 * Base: alias de tokens, reset fino, foco y utilidades.
 * Todo con :where() para que el HTML encapsulado (.fa-*) gane sin !important.
 */

:root {
	--cec-header-h: var(--wp--custom--header--height-mobile, 64px);

	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-pill: var(--wp--custom--radius--pill);
	--shadow-soft: var(--wp--preset--shadow--soft);
	--shadow-lift: var(--wp--preset--shadow--lift);

	--cec-navy: var(--wp--preset--color--navy);
	--cec-navy-deep: var(--wp--preset--color--navy-deep);
	--cec-gold: var(--wp--preset--color--gold);
	--cec-sand: var(--wp--preset--color--sand);
	--cec-sand-deep: var(--wp--preset--color--sand-deep);
	--cec-cream: var(--wp--preset--color--cream);
	--cec-white: var(--wp--preset--color--white);
	--cec-muted: var(--wp--preset--color--ink-muted);

	/* Derivados documentados en CLAUDE.md §4.1 */
	--cec-line: color-mix(in srgb, var(--cec-sand) 40%, transparent);
	--cec-line-gold: color-mix(in srgb, var(--cec-gold) 25%, transparent);
	--cec-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 782px) {
	:root {
		--cec-header-h: var(--wp--custom--header--height, 76px);
	}
}

:where(html) {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cec-header-h) + 1rem);
}

:where(body) {
	/* Raleway trae números de estilo antiguo (3, 4, 5, 7, 9 bajan de la línea): se usan los alineados */
	font-variant-numeric: lining-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(img, video) {
	max-width: 100%;
	height: auto;
}

:where(.wp-site-blocks) :where(a:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: text-decoration-color .2s ease, color .2s ease;
}

:where(.wp-site-blocks) :where(a:not(.wp-element-button)):hover {
	text-decoration-color: var(--cec-gold);
}

:where(:focus-visible) {
	outline: 2px solid var(--cec-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: color-mix(in srgb, var(--cec-gold) 35%, transparent);
}

/* Enlace «Ir al contenido» */
.skip-link.screen-reader-text:focus {
	background: var(--cec-navy);
	color: var(--cec-cream);
	border-radius: var(--radius-pill);
	padding: .75rem 1.25rem;
	font-weight: 700;
	text-decoration: none;
	z-index: 100001;
}

/* Contexto nocturno: cualquier sección navy */
:where(.cec-dark, .has-navy-background-color, .has-navy-deep-background-color, .has-night-gradient-background, .has-candle-gradient-background) {
	color: var(--cec-cream);
}

/* Utilidades */
:where(.cec-measure) {
	max-width: var(--wp--custom--measure);
}

:where(.cec-muted) {
	color: var(--cec-muted);
}

:where(.cec-dark) :where(.cec-muted) {
	color: color-mix(in srgb, var(--cec-cream) 75%, transparent);
}

/* Lienzo para HTML encapsulado: sin márgenes ni huecos del tema */
:where(.cec-embed) > * {
	margin-block: 0;
}

/* Los títulos del embed no heredan Philosopher ni el tracking del tema;
   el CSS del embed (.fa-* h2) sigue ganando por orden. */
.cec-embed :is(h1, h2, h3, h4, h5, h6) {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* El pie va pegado al contenido (sin el blockGap global entre main y footer) */
:where(.wp-site-blocks) > .cec-site-footer {
	margin-block-start: 0;
}