/* ==========================================================================
   Footer (barra fina, largura total, mantém o verde)
   ========================================================================== */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-cream);
  padding-block: var(--space-md);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(247, 243, 232, 0.65);
}

/* ==========================================================================
   Botão "voltar ao topo" — some no início da página, aparece ao rolar
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 600;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-brown-900);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.9);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Some enquanto o menu mobile em tela cheia está aberto */
.nav-mobile.is-open ~ .back-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--color-accent-dark);
  color: var(--color-brown-900);
  transform: translateY(-3px) scale(1);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
}