/*
 * Régua de destaques e data de hoje.
 *
 * As cores de TEXTO usam `--mec-color-accent-text`, que troca no modo escuro, e
 * não `--mec-color-accent`, que é o azul da marca e serve para fundo. Sobre o
 * fundo escuro o azul chapado dá razão de contraste 1,8 — o mesmo defeito que o
 * plugin de revistas teve. Apontado no review, que viu um dos usos; são três.
 *
 * O plugin não depende do tema: cada medida tem reserva, e os tokens do
 * `omecanico-2026` são usados quando existem. Sob outro tema a régua continua
 * legível, só perde o acento da casa.
 */

.omec-headline {
	display: flex;
	align-items: center;
	gap: var(--mec-space-sm, 10px);
	/* A régua não pode empurrar a barra: ela cede o que sobrar da linha. */
	min-width: 0;
}

.omec-headline__rotulo {
	flex: 0 0 auto;
	color: var(--mec-color-accent-text, #004489);
	font-size: var(--mec-font-size-xs, 0.6875rem);
	font-weight: 700;
	letter-spacing: var(--mec-letter-spacing-wide, 0.05em);
	text-transform: uppercase;
}

/*
 * A janela recorta; a trilha desliza dentro dela.
 *
 * `overflow: hidden` é o recorte quando o deslize está ligado. Quando não está
 * — sem JS, ou com movimento reduzido — a regra lá embaixo troca por `auto` e a
 * mesma janela vira uma área rolável, que é a razão de ela ser focável.
 */
.omec-headline__janela {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	/*
	 * Esmaecido de 16px nas duas pontas. Sem ele o título é cortado a seco na
	 * borda, e encostado no rótulo isso lê como texto quebrado em vez de
	 * rolagem.
	 *
	 * `mask-image` degrada sozinho: onde não houver suporte, a janela apenas
	 * recorta como antes — nada some nem se desloca.
	 */
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 16px,
		#000 calc(100% - 16px),
		transparent 100%
	);
}

.omec-headline__janela:focus-visible {
	outline: 2px solid var(--mec-color-accent-text, #004489);
	outline-offset: -2px;
}

.omec-headline__trilha {
	display: flex;
	align-items: center;
	/*
	 * `max-content` impede que os itens se espremam: sem isso o flex encolhe
	 * cada título até caber na janela, e a régua vira uma pilha de reticências
	 * em vez de deslizar.
	 */
	width: max-content;
	gap: var(--mec-space-lg, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.omec-headline__item {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* O ponto entre um título e outro. O primeiro não leva. */
.omec-headline__item + .omec-headline__item::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: var(--mec-space-lg, 20px);
	border-radius: 50%;
	background-color: currentcolor;
	opacity: 0.45;
	vertical-align: middle;
}

.omec-headline__item a {
	color: inherit;
	font-size: var(--mec-font-size-sm, 0.75rem);
	text-decoration: none;
}

.omec-headline__item a:hover,
.omec-headline__item a:focus-visible {
	color: var(--mec-color-accent-text, #004489);
}

/*
 * O deslize.
 *
 * `--omec-headline-duracao` vem do JS, calculada a partir da largura real da
 * trilha, para a régua correr sempre na mesma velocidade em pixels por segundo.
 * Com duração fixa, uma régua de 3 títulos passaria devagar e uma de 20 voaria.
 *
 * O laço é sem emenda porque o JS duplica a lista e a animação anda exatamente
 * metade da trilha: ao terminar, o que está na tela é o começo da cópia, igual
 * ao quadro inicial.
 */
.omec-headline--anima .omec-headline__trilha {
	animation: omec-headline-desliza var(--omec-headline-duracao, 40s) linear infinite;
}

@keyframes omec-headline-desliza {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/*
 * Parar para ler é o mínimo que uma régua em movimento deve permitir.
 *
 * `--pausada` é o caso do TOQUE, onde não existe hover: o JS a põe enquanto o
 * dedo está na tela. Sem isso, no celular o alvo se desloca entre o momento em
 * que o leitor mira e o momento em que toca — a régua anda 45px por segundo e
 * um toque leva mais de 100ms.
 */
.omec-headline--anima:hover .omec-headline__trilha,
.omec-headline--anima:focus-within .omec-headline__trilha,
.omec-headline--pausada .omec-headline__trilha {
	animation-play-state: paused;
}

/*
 * Sem animação, a janela vira área rolável — o conteúdo continua alcançável,
 * por arrasto, por roda ou pelo teclado.
 */
.omec-headline:not(.omec-headline--anima) .omec-headline__janela {
	overflow-x: auto;
	scrollbar-width: none;
}

.omec-headline:not(.omec-headline--anima) .omec-headline__janela::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.omec-headline--anima .omec-headline__trilha {
		animation: none;
	}

	.omec-headline--anima .omec-headline__janela {
		overflow-x: auto;
	}
}

/* ---------- Data ---------- */

.omec-data {
	color: inherit;
	font-size: var(--mec-font-size-sm, 0.75rem);
	white-space: nowrap;
}