/**
 * Footer Styles
 * Global footer styling for all pages
 */

/* ============================================================================
   FOOTER LAYOUT
   ============================================================================ */

footer {
  margin-top: auto;
  background: #f5f5f5;
  padding: 2rem 1rem;
  text-align: center;
  border-top: 1px solid #eee;

  a {
    color: var(--primary-color);
    transition: color 0.3s ease;

    &:hover {
      color: var(--secondary-color);
    }
  }

  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
  }

  .footer-divider {
    color: #444;
  }
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 480px) {
  .footer-content {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .footer-divider {
    display: none !important;
  }
}