/**
 * CSS complementar do cmi-block-theme.
 *
 * Contem SOMENTE o que o block markup (theme.json + patterns/parts) nao
 * consegue expressar: posicionamento sticky, sombra, hover de link e
 * inversao de cor de imagem. Cores, tipografia e espacamento vivem em
 * theme.json (padrao FSE); nao duplicar aqui.
 *
 * Espelha spike/home.html e spike/quem-somos.html (Fase 2, Plano 02-08).
 */

/* Header: sticky + sombra do spike (header{position:sticky;...}) */
.cmi-site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	background: #fff;
}

/* Hover do menu para o azul primario (nav.menu a:hover{color:var(--blue)}) */
.cmi-site-header a:hover {
	color: #105491;
}

/* Footer: logo (Plano 02-09, correcao pos-checkpoint). O PNG do attachment
   115 tem fundo branco OPACO (alpha=255 em toda a tela, confirmado por
   inspecao do canal alpha), nao um recorte transparente - por isso o
   `filter:brightness(0) invert(1)` do spike (pensado para uma logo com fundo
   transparente) transformava a imagem inteira em um retangulo branco solido
   (bug real, achado na pre-revisao). Removido o filtro; a logo aparece
   colorida dentro de um card branco arredondado (.cmi-footer-logo-card,
   ver parts/footer.html), alternativa limpa que preserva legibilidade sobre
   o fundo azul-escuro sem inventar midia nova. */
.cmi-footer-logo-card {
	display: inline-block;
}

/* Botao de play sobre a thumb do YouTube, quando o embed nao trouxer
   overlay proprio (spike .yt .play). Ancorado em classNames previsiveis
   para os patterns de video institucional (Plano 02-09). */
.cmi-play-button {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 78px;
	height: 78px;
	background: rgba(16, 84, 145, 0.92);
	border-radius: 50%;
}

.cmi-play-button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 24px solid #fff;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}

/* Sombra padrao dos cards que os patterns nao setarem inline (segmentos,
   fotos de quem-somos). Raio ja vem via style.border no bloco de imagem. */
.cmi-card-shadow {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}