/* ============================================================
   Braz Posts Cards — Cartão de Contato Brazópolis
   Escopo: .braz-contato (prefixo isolado, não vaza para o tema)
   ============================================================ */

.braz-contato {
	/* Paleta — sobrescrita pelos controles da aba Estilo via CSS vars */
	--verde-fundo:  #1f3d2e;
	--verde-claro:  #7fa68c;
	--icone:        #7fa68c;
	--texto:        #e8efe7;
	--texto-hover:  #ffffff;
	--coral:        #e8825f;
	--divisor:      rgba(255, 255, 255, 0.08);

	max-width: 380px;
	padding: 28px 30px;
	border-radius: 16px;
	background-color: var(--verde-fundo);
	color: var(--texto);
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
}

.braz-contato *,
.braz-contato *::before,
.braz-contato *::after {
	box-sizing: border-box;
}

/* ── Rótulo ──────────────────────────────────────── */
.braz-contato__rotulo {
	margin: 0 0 18px;
	color: var(--verde-claro);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	line-height: 1.2;
}

/* ── Itens de contato ────────────────────────────── */
.braz-contato__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--divisor);
	color: var(--texto);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.18s ease;
}

.braz-contato__item:first-of-type {
	border-top: 1px solid var(--divisor);
}

.braz-contato__item span {
	min-width: 0;
	word-break: break-word;
}

.braz-contato__item:hover,
.braz-contato__item:focus-visible {
	color: var(--texto-hover);
}

.braz-contato__icone {
	flex: 0 0 auto;
	color: var(--icone);
}

/* ── CTA "Envie sua notícia →" ───────────────────── */
.braz-contato__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	color: var(--coral);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: gap 0.18s ease;
}

.braz-contato__cta:hover,
.braz-contato__cta:focus-visible {
	text-decoration: underline;
	gap: 12px;
}

.braz-contato__seta {
	flex: 0 0 auto;
}

/* ── Foco visível por teclado ────────────────────── */
.braz-contato__item:focus-visible,
.braz-contato__cta:focus-visible {
	outline: 2px solid var(--coral);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Responsivo ──────────────────────────────────── */
@media (max-width: 480px) {
	.braz-contato {
		max-width: 100%;
	}
}