/**
 * Ajustes do tema sobre o CSS compilado do site original (app.css).
 *
 * O app.css só traz as classes utilitárias que o site original usava, então
 * os ajustes aqui usam classes próprias (prefixo obs-) e keyframes com
 * prefixo, para não colidir com o Tailwind.
 */

/* -------------------------------------------------------------------------
 * Hero da home: indicação de "rolar para baixo" (texto, trilho com ponto
 * descendo em loop e seta).
 * ---------------------------------------------------------------------- */
.obs-scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
	animation: obs-fade-in 1s ease-out 800ms both;
}

.obs-scroll:hover {
	color: var(--signal);
}

.obs-scroll__trilho {
	position: relative;
	display: block;
	width: 1px;
	height: 3.5rem;
	overflow: hidden;
	background-color: color-mix(in oklab, var(--border) 60%, transparent);
}

.obs-scroll__ponto {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 1px;
	height: 0.75rem;
	background-color: var(--signal);
	transform: translate(-50%, -100%);
	animation: obs-scroll-hint 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.obs-scroll__seta {
	display: block;
	width: 0.375rem;
	height: 0.375rem;
	border-right: 1px solid color-mix(in oklab, var(--signal) 70%, transparent);
	border-bottom: 1px solid color-mix(in oklab, var(--signal) 70%, transparent);
	transform: rotate(45deg);
	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.obs-scroll:hover .obs-scroll__seta {
	transform: translateY(2px) rotate(45deg);
}

@keyframes obs-scroll-hint {
	0% {
		transform: translate(-50%, -100%);
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		transform: translate(-50%, 400%);
		opacity: 0;
	}
}

@keyframes obs-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.obs-scroll__ponto {
		animation: none;
		transform: translateX(-50%);
	}
}

/* -------------------------------------------------------------------------
 * Home, Observatório na Mídia: o quadro da imagem tem sempre a mesma largura
 * (a coluna, até 36rem, como o max-w-xl da imagem), qualquer que seja o
 * tamanho do arquivo. Sem isto o w-fit acompanharia a largura natural da
 * imagem (e seria zero antes do carregamento lazy).
 * ---------------------------------------------------------------------- */
.obs-midia__quadro {
	width: 100%;
	max-width: 36rem;
}

/* -------------------------------------------------------------------------
 * Home, indicadores (texto "Observatório" + círculos).
 *
 * A seção é um container de largura: 50cqw é metade da largura da seção
 * (sem a barra de rolagem, ao contrário de 100vw), para alinhar o texto
 * com o conteúdo do .section-x das outras seções (até 80rem, centralizado,
 * 1.5rem de cada lado) sem mudar a grade nem o tamanho dos círculos.
 * ---------------------------------------------------------------------- */
.obs-indicadores {
	container-type: inline-size;
}

@media (width >= 64rem) {
	/* Mesmo recuo do .section-x: a grade já tem 1.5rem; aqui entra a sobra
	   dos lados quando a seção passa de 80rem. O texto fica na coluna dele
	   (min-width: 0), então quebra em mais linhas em vez de invadir os
	   números. */
	.obs-indicadores__texto {
		min-width: 0;
		padding-left: max(0px, 50cqw - 40rem);
	}

	/* Círculos encostados na borda direita: desloca o bloco pelo padding
	   direito da grade (1.5rem), sem mudar o tamanho; o overflow-hidden da
	   seção corta o que passa da borda, sem rolagem horizontal. */
	.obs-indicadores__circulos {
		left: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * O Observatório, Rede de Observatórios: mapa sempre dentro da tela.
 *
 * O mapa é um quadrado de lado --obs-rede-s, sem transform no conjunto.
 * Em telas grandes o lado é o mesmo de antes (1.15 × a coluna mais a margem
 * negativa que ela tinha, -2.5rem/-4rem), na mesma posição; onde não cabe,
 * o lado diminui para que mapa + etiqueta do Pernambuco fiquem a 1.5rem da
 * borda (o respiro do .section-x) e a silhueta caiba na altura da janela.
 *
 * Medidas do mapa-brasil.svg e dos pontos, em fração do lado do quadrado:
 * silhueta de 8.93% a 91.07% na largura e 86% da altura; o ponto do
 * Pernambuco fica a 90.862% da largura.
 *
 * Os marcadores (pontos e etiquetas) mantêm o tamanho que tinham com o
 * scale do mapa: --obs-rede-k, com a escala a partir do centro do ponto.
 * ---------------------------------------------------------------------- */
.obs-rede {
	container-type: inline-size;
	--obs-rede-k: 1.05;
}

.obs-rede__marca,
.obs-rede__etiqueta {
	scale: var(--obs-rede-k);
}

/* O botão do Pernambuco fica por cima (z-20) e a Paraíba está a ~2% do
   lado do mapa: com o mapa menor, o botão e a pulsação (decorativa) dele
   cobririam o ponto da Paraíba. No Pernambuco, só o próprio ponto recebe o
   mouse/toque; teclado e leitor de tela continuam usando o botão. */
.obs-rede__mapa button[aria-label="Observatório de Pernambuco"],
.obs-rede__pulso {
	pointer-events: none;
}

.obs-rede__mapa button[aria-label="Observatório de Pernambuco"] .obs-rede__marca:not(.obs-rede__pulso) {
	pointer-events: auto;
}

/* Origem da escala da etiqueta = centro do ponto (meio botão de 1.5rem +
   a margem de 0.25rem entre o botão e a etiqueta). */
.obs-rede__etiqueta--right {
	transform-origin: -1rem 50%;
}

.obs-rede__etiqueta--left {
	transform-origin: calc(100% + 1rem) 50%;
}

.obs-rede__etiqueta--top {
	transform-origin: 50% calc(100% + 1rem);
}

.obs-rede__etiqueta--bottom {
	transform-origin: 50% -1rem;
}

@media (width >= 64rem) {
	.obs-rede {
		--obs-rede-k: 1.15;
		/* O que fica acima do mapa na janela: cabeçalho e o padding da seção. */
		--obs-rede-topo: 4.5rem;
		--obs-rede-mr: 2.5rem;
	}

	body.admin-bar .obs-rede {
		--obs-rede-topo: calc(4.5rem + 32px);
	}

	.obs-rede__coluna {
		min-width: 0;
	}

	/* Contas em relação à coluna real do mapa (o % de width e margin é a
	   largura dela), ancoradas na borda direita, que é a do .section-x:
	   a coluna da esquerda pode ficar mais larga que 0.62fr em notebook
	   (a linha "25 Observatórios" não quebra). */
	.obs-rede__mapa {
		/* Respiro à direita da coluna até a borda da tela (.section-x). */
		--obs-rede-g: calc((100cqw - min(100cqw, 80rem)) / 2 + 1.5rem);
		/* Espaço da etiqueta do Pernambuco à direita do ponto: meio botão,
		   margem e w-40, na escala dos marcadores. */
		--obs-rede-etq: calc(11rem * var(--obs-rede-k));
		--obs-rede-s: min(
			/* tamanho de antes: 1.15 × (coluna + margem negativa) */
			calc((100% + var(--obs-rede-mr)) * 1.15),
			/* silhueta (86% do lado) na altura da janela */
			calc((100svh - var(--obs-rede-topo) - 6rem) / 0.86),
			/* silhueta a partir do início da coluna; ponto + etiqueta até o
			   respiro direito */
			calc((100% + var(--obs-rede-g) - 1.5rem - var(--obs-rede-etq)) / 0.81932)
		);
		/* Borda esquerda do quadrado em relação à coluna: a de antes (centro
		   da coluna + margem negativa), deslocada para a esquerda só o
		   necessário para a etiqueta caber, sem a silhueta entrar no texto. */
		--obs-rede-l: clamp(
			calc(var(--obs-rede-s) * -0.0893),
			calc((100% + var(--obs-rede-mr)) / 2 - var(--obs-rede-s) / 2),
			calc(100% + var(--obs-rede-g) - 1.5rem - var(--obs-rede-etq) - var(--obs-rede-s) * 0.90862)
		);
		width: var(--obs-rede-s);
		max-width: none;
		margin-left: var(--obs-rede-l);
		/* Mesmo espaço vertical de antes: com o scale, a caixa tinha 1/1.15
		   do tamanho desenhado. A silhueta começa a 7.1% do topo, então
		   continua dentro da caixa. */
		margin-block: calc(var(--obs-rede-s) * (1 / 1.15 - 1) / 2);
	}
}

@media (width >= 80rem) {
	.obs-rede {
		--obs-rede-mr: 4rem;
	}
}

/* -------------------------------------------------------------------------
 * Faixa de parceiros (template-parts/parceiros-logos.php).
 *
 * Os 7 logos (480×160, 3:1) têm a mesma altura e o espaçamento fica dentro
 * de cada item, também depois do último: as duas cópias têm exatamente a
 * mesma largura e o marquee-right (-50% → 0) fecha o ciclo sem pulo.
 * A duração acompanha a largura de uma cópia para manter a velocidade de
 * antes (~35 px/s): 7 × (18rem + 2.5rem) = 2296px → 66s;
 * no celular 7 × (13.5rem + 1.5rem) = 1680px → 48s.
 * ---------------------------------------------------------------------- */
.obs-parceiros {
	display: flex;
	align-items: center;
	height: 6.5rem;
}

.obs-parceiros__trilho {
	align-items: center;
	animation-duration: 66s;
}

.obs-parceiros__grupo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.obs-parceiros__item {
	display: block;
	flex-shrink: 0;
	padding-right: 2.5rem;
}

.obs-parceiros__logo {
	display: block;
	width: auto;
	max-width: none;
	height: 6rem;
}

@media (width < 40rem) {
	.obs-parceiros {
		height: 5rem;
	}

	.obs-parceiros__trilho {
		animation-duration: 48s;
	}

	.obs-parceiros__item {
		padding-right: 1.5rem;
	}

	.obs-parceiros__logo {
		height: 4.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Cabeçalho, menu suspenso de Soluções: o vidro da .glass (branco a 10%,
 * desfoque de 4px) fica claro demais sobre as imagens do topo. Uma camada
 * do azul do site e mais desfoque deixam o texto legível sem perder o vidro.
 * Só o fundo e o desfoque mudam; borda clara, sombra, cantos e espaçamento
 * continuam os da .glass e das classes do <ul>. (CSS fora de camada: vale
 * também sobre o .glass:hover, que clarearia o painel.)
 * ---------------------------------------------------------------------- */
.obs-menu-solucoes {
	--obs-menu-azul: 55%;
	background-color: color-mix(in oklab, var(--primary) var(--obs-menu-azul), transparent);
	-webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.06);
	backdrop-filter: blur(10px) saturate(180%) brightness(1.06);
}

/* -------------------------------------------------------------------------
 * Home, Observatório na Mídia: a seção tem a mesma altura em todos os slides.
 * O título ocupa sempre 2 linhas e o resumo sempre 3 (no máximo, com "…", e
 * no mínimo, com espaço reservado). Os line-heights são os do leading-snug
 * (1.375) e do leading-relaxed (1.625); em em, a reserva acompanha a troca de
 * tamanho de fonte do sm:text-3xl.
 * ---------------------------------------------------------------------- */
.obs-midia-titulo,
.obs-midia-texto {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.obs-midia-titulo {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(2 * 1.375em);
}

.obs-midia-texto {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	min-height: calc(3 * 1.625em);
}

/* -------------------------------------------------------------------------
 * Botão flutuante (o do WhatsApp, a[data-obs-whatsapp]; antes, o de contato,
 * button#contato): sem gap no botão, o fundo branco fechado fica com
 * 72 × 72 px (p-2 + círculo de 56 px), concêntrico ao círculo colorido. O
 * espaço entre o círculo e o texto (o antigo gap-3) vira margem do texto, que
 * só aparece quando ele se abre, com a mesma transição de 300 ms
 * (transition-all do span). No foco pelo teclado o texto se abre como no
 * hover. (O rodapé também tem id="contato": daí o button#contato.)
 * ---------------------------------------------------------------------- */
.obs-contato-texto {
	margin-left: 0;
}

a[data-obs-whatsapp]:hover .obs-contato-texto,
a[data-obs-whatsapp]:focus-visible .obs-contato-texto,
button#contato:hover .obs-contato-texto,
button#contato:focus-visible .obs-contato-texto {
	margin-left: 0.75rem;
}

a[data-obs-whatsapp]:focus-visible,
button#contato:focus-visible {
	padding-right: 1.5rem;
}

a[data-obs-whatsapp]:focus-visible .obs-contato-texto,
button#contato:focus-visible .obs-contato-texto {
	max-width: 14rem;
	opacity: 1;
}