/**
 * A faixa de avisos do topo.
 *
 * Duas decisões que não são estéticas:
 *
 * 1. **Altura reservada** (`min-height` + as mensagens empilhadas no mesmo
 *    lugar por `position:absolute`): sem isso a página "pula" quando a faixa
 *    troca de uma mensagem curta para uma longa, e o clique do cliente cai no
 *    lugar errado. Layout que se mexe sozinho é defeito, não animação.
 * 2. **Só a mensagem ativa recebe evento de mouse** (`pointer-events`): as
 *    outras continuam no HTML (é o que permite a troca sem recarregar) mas não
 *    podem roubar o clique de quem está mirando a que está à vista.
 */

.sn-faixa {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	background: #2f5233; /* verde escuro da marca, o mesmo do "Como a gente vende" */
	color: #fff;
	text-align: center;
	font-size: 0.95rem;
	line-height: 1.35;
	overflow: hidden;
}

.sn-faixa__item {
	position: absolute;
	left: 1rem;
	right: 1rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.45s ease;
}

.sn-faixa__item.is-ativo {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.sn-faixa__item:hover,
.sn-faixa__item:focus {
	text-decoration: underline;
}

/* No celular a faixa ganha corpo: a mensagem quebra em duas linhas e, sem
   altura extra, a segunda linha sairia cortada. */
@media (max-width: 600px) {
	.sn-faixa {
		min-height: 3.5rem;
		font-size: 0.875rem;
	}

	.sn-faixa__item {
		left: 0.75rem;
		right: 0.75rem;
	}
}

/* Quem pediu menos movimento no sistema continua vendo as mensagens girarem
   (a informação é a mesma para todo mundo), mas sem o esmaecer. */
@media (prefers-reduced-motion: reduce) {
	.sn-faixa__item {
		transition: none;
	}
}