/**
 * footer.css
 * -----------------------------------------------------------------------
 * Estilo DIRETO (CSS puro) do pré-footer (cartão de widget, ex.: Google
 * Maps) e do rodapé simplificado. Mesma lógica dos outros arquivos
 * diretos do tema: posicionamento/breakout não dá pra resolver só com
 * utilitário Tailwind.
 * ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
 * Pré-footer: cartão arredondado, 90% da tela, sobrepondo o topo do
 * rodapé (margin-bottom negativo "puxa" o rodapé pra debaixo do cartão).
 * --------------------------------------------------------------------- */

.pre-footer {
	position: relative;
	z-index: 10;
	margin-bottom: -90px;
}

.pre-footer__card {
	width: 90vw;
	max-width: 90vw;
	margin-left: calc(50% - 45vw);
	margin-right: calc(50% - 45vw);
	min-height: 320px;
	border-radius: 28px;
	overflow: hidden;
	background-color: var(--dc-color-secondary);
	box-shadow: 0 20px 50px rgba(32, 26, 21, 0.18);
}

.pre-footer__widget {
	height: 100%;
}

.pre-footer__widget iframe,
.pre-footer__widget img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: none;
}

/* -----------------------------------------------------------------------
 * Rodapé simplificado: logo à esquerda, menu no meio, redes à direita.
 * --------------------------------------------------------------------- */

.site-footer {
	/* O padding-bottom aqui (em vez de no body) é de propósito: garante
	 * respiro pra barra de áudio/WhatsApp fixos não cobrirem o conteúdo,
	 * mas mantendo o fundo vinho do rodapé até o fim de verdade da página
	 * — em vez de deixar um vão da cor do body ali embaixo. */
	padding-top: calc(90px + 3rem);
	padding-bottom: 160px;
}

.footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.footer-row__menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

.footer-row__menu a {
	font-family: var(--dc-font-body);
	font-size: 0.9375rem;
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.footer-row__menu a:hover {
	opacity: 1;
}

.footer-copyright {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 254, 250, 0.15);
	font-family: var(--dc-font-body);
	font-size: 0.8125rem;
	text-align: center;
	color: #f1d495;
}

.footer-copyright a {
	color: #f1d495;
	font-weight: 600;
}

.footer-copyright a:hover {
	color: #ffffff;
}

/* No mobile, empilha (logo / menu / redes) centralizado em vez de
 * confiar só no flex-wrap: com 3 itens e justify-content:space-between,
 * se um deles quebrar linha sozinho ele fica desalinhado. */
@media (max-width: 640px) {
	.footer-row {
		flex-direction: column;
		text-align: center;
	}

	.footer-row__logo {
		display: flex;
		justify-content: center;
	}

	.social-links {
		justify-content: center;
	}
}