/* =========================================================================
   Footer: "Back to top". The social icons above it are the social bar
   (css/social.css), which rests here at the end of the page.
   ========================================================================= */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px; /* 36px from the icons, with the bar's own padding */
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s ease;
}

.to-top:hover,
.to-top:focus-visible {
  color: #fff;
}

.to-top svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  pointer-events: none;
}

@media (max-width: 560px) {
  .site-footer {
    padding-top: 16px;
  }
}