/* ==========================================================================
   SITE FOOTER STYLES
   ========================================================================== */

/* Controls the entire footer element. */
.site-footer {
  /* Center the whole thing. */
  text-align: center;
  /* Add a little space above. */
  padding-top: 1rem;
  /** Add a line to clearly separate the footer from the main body. */
  border-top: 1px solid #222;
}

/* Controls a container for all of the social links. */
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Controls the social link icons themselves. */
.social-links a {
  color: #ccc;
  font-size: 1.75rem;
  /* Icon size */
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

/* Controls the social link icons when hovering over them. */
.social-links a:hover {
  /* In case any of them do not have their own custom color, go completely white. */
  color: #fff;
  /* Move slightly up when hovering. */
  transform: translateY(-2px);
}

/* Platform-specific brand hover colors. */
.social-links a[aria-label="Spotify"]:hover {
  color: #1db954;
}

.social-links a[aria-label="YouTube"]:hover {
  color: #ff0000;
}

.social-links a[aria-label="Apple Music"]:hover {
  color: #fc3c44;
}

.social-links a[aria-label="Amazon Music"]:hover {
  color: #00a8e1;
}

.social-links a[aria-label="Bandcamp"]:hover {
  color: #629aa9;
}

.social-links a[aria-label="Instagram"]:hover {
  color: #e1306c;
}

.social-links a[aria-label="Facebook"]:hover {
  color: #1877f2;
}

/* Controls the copyright paragraph. */
.copyright {
  /* Stands out less than most of the text. */
  color: #666;
  font-size: 0.875rem;
  margin: 0;
}