/* Yatra — estilos que no caben en theme.json.
   Regla: si algo se puede expresar como token en theme.json, va allí. Este
   archivo es solo para comportamiento (scroll, foco, motion). */

/* Un scroll suave que respeta a quien lo tenga desactivado. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Foco visible en todo. No negociable. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
}

/* Saltar al contenido, para teclado y lectores de pantalla. */
.yatra-skip {
	position: absolute;
	left: -9999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--chalk);
	padding: 0.75rem 1rem;
	z-index: 999;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.75rem;
	text-transform: uppercase;
}
.yatra-skip:focus { left: 1rem; top: 1rem; }

/* Día a día del itinerario: cada jornada entra al aparecer.
   Animación nativa de CSS, sin librería ni JS. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.yatra-etapa-dia {
			animation: yatra-entrar linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 28%;
		}
	}
}

@keyframes yatra-entrar {
	from { opacity: 0; transform: translateY(1.5rem); }
	to   { opacity: 1; transform: none; }
}

/* Texto largo con medida legible, aunque el bloque sea ancho. */
.entry-content > p,
.wp-block-post-content > p {
	max-width: var(--wp--custom--measure, 62ch);
}

/* Numeración del itinerario. Aquí SÍ tiene sentido numerar: es una secuencia
   real de días y el orden es información que el lector necesita. */
.yatra-etapa-dia { counter-increment: dia; }

.yatra-etapa-dia__numero::before {
	content: "Día " counter(dia, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dust);
}

/* Selección con el azul de la casa. */
::selection {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--chalk);
}

/* Logo: los patterns yatra/logo-header y yatra/logo-footer. */
.yatra-logo {
	margin: 0;
	line-height: 0;
}

.yatra-logo img {
	height: auto;
	display: block;
}

/* Cabecera: 170px en escritorio, 130px en móvil para no empujar el botón del menú. */
.yatra-logo--header img {
	width: 170px;
}

@media (max-width: 600px) {
	.yatra-logo--header img {
		width: 130px;
	}
}

.yatra-logo--footer {
	margin-bottom: var(--wp--preset--spacing--30, 1rem);
}

.yatra-logo--footer img {
	width: 240px;
}