/**
 * Footer do tema Cais.
 * Réplica do mockup aprovado — usa os tokens de variables.css.
 *
 * A cor de fundo do footer (--footer-bg) e da faixa de confiança
 * (--footer-trust-bg) não estão fixas aqui: são geradas dinamicamente a
 * partir do Customizer via wp_add_inline_style (ver cais_get_footer_inline_css()
 * em functions.php).
 *
 * Nota: o mockup usava um gradiente teal→dourado no fio de destaque do topo,
 * introduzindo uma cor de acento (#D9A441) fora da paleta definida no
 * CLAUDE.md ("paleta principal teal"). Substituído por um gradiente
 * teal → teal-escuro usando apenas tokens já existentes; se quiseres o
 * efeito bicolor original, adicionamos --color-accent a variables.css.
 */

.site-footer {
	background: var(--footer-bg);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-xl);
	position: relative;
}

.site-footer::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.site-footer.no-accent::before {
	display: none;
}

.footer-main {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg) var(--space-lg);
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--space-xl);
}

/* Coluna da marca */
.footer-brand-logo {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	text-decoration: none;
	margin-bottom: var(--space-md);
}

/*
 * --footer-logo-width (Customizer, v1.77.0/v1.77.1) aplica-se aos 4 casos
 * possíveis do bloco do logótipo — imagem própria do rodapé
 * (.footer-custom-logo), o custom_logo nativo usado como 2º fallback
 * (renderizado por the_custom_logo() com a classe .custom-logo, dentro
 * de .footer-brand-logo), E a marca SVG padrão usada como 3º fallback
 * (.footer-logo-mark) — nunca só os 2 primeiros, para o slider continuar
 * a ter efeito visível mesmo no estado inicial, sem nenhuma imagem
 * configurada (causa raiz confirmada do "slider sem efeito" — v1.77.1).
 * `width` (não só `max-width`) para que uma imagem menor do que o valor
 * do slider também seja escalada até lá, nunca só limitada por cima;
 * `max-width: 100%` continua como guarda contra a coluna ficar mais
 * estreita do que o valor escolhido (ex: mobile).
 */
.footer-custom-logo,
.footer-brand-logo img,
.footer-brand-logo .custom-logo {
	width: var(--footer-logo-width, 160px);
	max-width: 100%;
	height: auto;
}

/*
 * A marca SVG padrão nunca foi desenhada para ocupar 160px inteiros (é um
 * ícone, não um logótipo horizontal) — escala proporcionalmente ao valor
 * do slider em vez de igualar a largura, preservando a mesma proporção
 * já usada no default (34px de caixa / 160px de largura = 21,25%; 18px de
 * svg / 34px de caixa = 52,94% — os mesmos valores de sempre quando o
 * slider está no default).
 */
.footer-logo-mark {
	width: calc(var(--footer-logo-width, 160px) * 0.2125);
	height: calc(var(--footer-logo-width, 160px) * 0.2125);
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.footer-logo-mark svg {
	width: 52.94%;
	height: 52.94%;
}

.footer-logo-text {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-xl);
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.footer-logo-text span {
	color: var(--color-primary);
}

.footer-tagline {
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--color-text-secondary);
	max-width: 30ch;
	margin-bottom: var(--space-lg);
}

/* Ícones sociais — quadrados */
.footer-social {
	display: flex;
	gap: var(--space-xs);
}

.footer-social a {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	background: #F3F6F5;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.15s ease;
}

.footer-social a:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.footer-social svg {
	width: 16px;
	height: 16px;
	stroke: var(--color-text-secondary);
	transition: stroke 0.15s ease;
}

.footer-social a:hover svg {
	stroke: #fff;
}

/* Colunas de links */
.footer-col-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--space-md);
}

.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.footer-col a {
	color: var(--color-text-secondary);
	text-decoration: none;
	font-size: var(--text-sm);
	transition: color 0.15s ease;
	position: relative;
}

.footer-col a:hover {
	color: var(--color-primary);
}

/* Faixa de confiança / newsletter */
.footer-trust {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: 0 var(--space-lg) var(--space-lg);
}

.footer-trust-inner {
	background: var(--footer-trust-bg);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.footer-trust-text {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--color-primary-dark);
	font-weight: 500;
}

.footer-trust-text svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.footer-newsletter-form {
	display: flex;
	gap: var(--space-xs);
}

.footer-newsletter-form input {
	min-width: 220px;
	padding: 0.6rem 0.9rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

.footer-newsletter-form input::placeholder {
	color: var(--color-text-muted);
}

.footer-newsletter-form button {
	padding: 0.6rem 1.2rem;
	border-radius: var(--radius-sm);
	border: none;
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-sm);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.footer-newsletter-form button:hover {
	background: var(--color-primary-dark);
}

/* Faixa inferior */
.footer-bottom {
	border-top: 1px solid var(--color-border);
}

.footer-bottom-inner {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: var(--space-md) var(--space-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.footer-copy {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.footer-legal-links {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	list-style: none;
}

.footer-legal-links a {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	text-decoration: none;
}

.footer-legal-links a:hover {
	color: var(--color-primary);
}

.footer-theme-credit {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
	.footer-main {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg);
	}

	.footer-brand-col {
		grid-column: 1 / -1;
	}

	.footer-trust-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-newsletter-form {
		width: 100%;
	}

	.footer-newsletter-form input {
		flex: 1;
		min-width: 0;
	}
}

@media (max-width: 560px) {
	.footer-main {
		grid-template-columns: 1fr;
	}

	.footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Botão "Rolar para Cima" (v1.93.0) — sempre presente no DOM (impresso
 * por cais_render_scroll_to_top_button(), footer.php), escondido por
 * omissão via opacity/pointer-events (nunca display:none — um elemento
 * não anima a partir de "não renderizado", mesmo princípio já usado no
 * drawer mobile do cabeçalho). assets/js/theme-toggles.js liga
 * .is-visible a partir de window.scrollY > 300.
 */
.scroll-top-btn {
	position: fixed;
	bottom: var(--space-lg);
	right: var(--space-lg);
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff);
	box-shadow: var(--shadow-card);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.scroll-top-btn.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.scroll-top-btn:hover {
	background: var(--color-primary-dark);
}

.scroll-top-btn svg {
	width: 20px;
	height: 20px;
	stroke: var(--color-primary-contrast, #ffffff);
}

/* Modo Escuro (v1.93.1) — mesma família de bug já corrigida na v1.93.0
   (.share-btn/.job-tag, single-job.css): #F3F6F5 sem token equivalente. */
html[data-theme="dark"] .footer-social a {
	background: var(--color-border);
}