/* app/static/css/components/footer.css */
/* Footer Component using base CSS variables */

.footer {
  /* Use footer component variables from base_variables_v1 */
  background-color: var(--footer-background);
  color: var(--footer-color);
  border-top: var(--border-width-default) solid var(--footer-border-color);
  padding: var(--footer-padding-y) 0; /* Vertical padding */
  font-family: var(--font-family-base); /* Use base font */

  margin-top: var(--spacing-lg); /* Add space above footer */
  text-align: center; /* Center all content by default */
}

/* Container within footer remains standard */
.footer .container {
  /* Inherits container styles from global.css */
}

/* Footer Navigation */
.footer__nav {
  margin-bottom: var(--spacing-sm); /* Space between nav and copyright */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md); /* Space between links */
  list-style: none; /* Remove list bullets if it's a ul/ol */
  padding-left: 0; /* Remove default list padding */
}

.footer__link {
  color: inherit; /* Inherit color from .footer */
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-duration-default)
    var(--transition-timing-function-default);
}

.footer__link:hover {
  color: var(--color-link); /* Use base link color on hover */
  text-decoration: underline;
}

/* Copyright Notice */
.footer__copyright {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted); /* Use muted color */
}

/* Optional: Adjust for smaller screens if needed */
@media (max-width: 767px) {
  .footer__nav {
    gap: var(--spacing-sm); /* Smaller gap on mobile */
  }
}