/* Nocturnalia · accesibilidad transversal */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--nocturnalia-accent, #c9271b);
	outline-offset: 3px;
}

/*
 * El rojo de marca (#e33b2f) funciona como acento gráfico, pero no alcanza
 * AA para texto pequeño sobre el papel editorial. Esta variante mantiene la
 * identidad cromática con contraste suficiente para etiquetas de 10–11px.
 */
.front-visual-feature__eyebrow,
.front-visuals__secondary-eyebrow {
	color: var(--ed-accent-text-on-paper, #c9271b);
}

/*
 * Un estado editorial no puede reducir el contraste de todo su contenido.
 * "Finalizado" ya comunica el estado en texto, así que no necesitamos
 * atenuar la tarjeta completa mediante opacity.
 */
.recommendation-item--finished {
	opacity: 1;
}

/* La opacidad del rail de compartir no debe degradar su etiqueta textual. */
.article-share__label {
	color: var(--ed-ink, #101010);
}

/*
 * WCAG 1.4.12: los ajustes de espaciado no pueden ocultar contenido.
 * Los extractos ya llegan podados editorialmente desde WordPress; el clamp
 * visual de dos líneas añadía una segunda truncación y podía recortar texto.
 */
.ed-card__excerpt {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}

.skip-link {
	background: #101010;
	color: #f7f3ea;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 800;
	left: 12px;
	padding: 10px 14px;
	position: fixed;
	top: 12px;
	transform: translateY(-180%);
	transition: transform 120ms ease;
	z-index: 100000;
}

.skip-link:focus,
.skip-link:focus-visible {
	color: #f7f3ea;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline-color: Highlight;
	}
}