/**
 * ShopTop — Rodapé (Sprint D)
 * ------------------------------------------------------------------
 * Depende de: tokens.css, variables.css, typography.css, utilities.css
 */

.shoptop-footer {
	background-color: var(--shoptop-color-ink-900);
	color: #FFFFFF;
	padding-block: var(--shoptop-space-6);
}

/* auto-fit em vez de fixar sempre 4 colunas: quando Institucional,
 * Categorias ou Redes sociais estiverem ocultos (nenhuma página
 * publicada / nenhuma categoria / nenhuma rede configurada), as
 * colunas restantes se reorganizam sem deixar buracos nem esticar de
 * forma esquisita. */
.shoptop-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--shoptop-space-5);
}

.shoptop-footer__logo {
	font-size: var(--shoptop-font-size-lg);
	font-weight: var(--shoptop-font-weight-bold);
	margin-bottom: var(--shoptop-space-2);
}

/* Container de tamanho da logo no rodapé (revisão: fundo decorativo
 * removido — o "chip" claro de fundo, sem padding, criava uma 2ª forma
 * retangular visível atrás da logo, lida como "logo sobreposta"). Só
 * centraliza e limita o tamanho — nenhum background/padding/sombra/
 * pseudo-elemento; totalmente transparente sobre o rodapé escuro.
 * Nome da classe preservado (footer-shoptop.php) por compatibilidade.
 *
 * Mesmo container fixo do cabeçalho — 120x48px no celular, 160x64px a
 * partir do desktop (breakpoint lg:1024px, mesma fonte de header.css)
 * — mesma técnica (`object-fit:contain` + `max-width`/`max-height:100%`
 * na imagem dentro), mesma fonte de logo (the_custom_logo(),
 * footer-shoptop.php). */
.shoptop-footer__logo-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 48px;
	max-width: 100%;
	overflow: hidden;
	background: transparent;
	margin-bottom: var(--shoptop-space-3);
}

/* the_custom_logo() envolve a imagem num <a class="custom-logo-link">
 * (WordPress nativo) — sem esta regra, o link não preenchia o container,
 * então a imagem podia exceder 120x48/160x64 conforme a proporção real
 * do arquivo e vazar do "chip" antes do overflow:hidden acima entrar em
 * ação. Preenche o container e centraliza a imagem dentro dele. */
.shoptop-footer__logo-chip .custom-logo-link {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.shoptop-footer__logo-chip img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0;
}

@media (min-width: 1024px) {
	.shoptop-footer__logo-chip {
		width: 160px;
		height: 64px;
	}
}

.shoptop-footer__tagline {
	color: var(--shoptop-gray-400);
	font-size: var(--shoptop-font-size-sm);
}

.shoptop-footer__title {
	font-size: var(--shoptop-font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--shoptop-gray-400);
	margin-bottom: var(--shoptop-space-3);
}

.shoptop-footer__links,
.shoptop-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--shoptop-space-2);
}

.shoptop-footer__links a,
.shoptop-footer__social a {
	color: #FFFFFF;
	text-decoration: none;
	font-size: var(--shoptop-font-size-sm);
}

/* Ícone + nome da rede lado a lado (patterns/footer-shoptop.php) —
 * .shoptop-footer__links (Institucional/Categorias/Atendimento) nunca
 * tem ícone, então continua só o texto acima; só .shoptop-footer__social
 * precisa virar flex-row para alinhar o <svg class="shoptop-icon"> com
 * o nome da rede. */
.shoptop-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: var(--shoptop-space-2);
}

.shoptop-footer__links a:hover,
.shoptop-footer__social a:hover {
	color: var(--shoptop-color-primary-300);
	text-decoration: underline;
}

.shoptop-footer__bottom {
	border-top: 1px solid var(--shoptop-gray-700);
	margin-top: var(--shoptop-space-6);
	padding-top: var(--shoptop-space-4);
}

.shoptop-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	gap: var(--shoptop-space-1);
	font-size: var(--shoptop-font-size-xs);
	color: var(--shoptop-gray-400);
}

.shoptop-footer a:focus-visible {
	outline: 2px solid var(--shoptop-color-primary-300);
	outline-offset: 2px;
}