/* ===== FOOTER STYLES ===== */
/* Typography Design - Footer Component
   For all pages with standardized footer
*/

.td-footer {
  background-color: var(--bg-darker);
  border-top: 1px solid var(--border-light);
  padding: var(--td-spacing-lg) 0;
  margin-top: var(--td-spacing-xl);
}

.td-footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--td-spacing-lg);
}

/* Social Links */
.td-social-links {
  display: flex;
  gap: var(--td-spacing-md);
}

.td-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-card);
  color: var(--primary);
  border: 1px solid var(--border-light);
  transition: var(--td-transition);
}

.td-social-link:hover {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* 使用aria-label属性为每个社交图标设置特定悬停颜色 */
.td-social-link[aria-label="GitHub"]:hover {
  background-color: #333;
  border-color: #333;
  color: #ffffff;
}

.td-social-link[aria-label="twitter"]:hover {
  background-color: #1DA1F2;
  border-color: #1DA1F2;
  color: #ffffff;
}

.td-social-link[aria-label="Xiaohongshu"]:hover {
  background-color: #fe2c55;
  border-color: #fe2c55;
  color: #ffffff;
}

.td-social-link[aria-label="Anthropic"]:hover {
  background-color: #6f47eb;
  border-color: #6f47eb;
  color: #ffffff;
}

.td-social-link[aria-label="WeChat"]:hover {
  background-color: #07c160;
  border-color: #07c160;
  color: #ffffff;
}

/* Copyright */
.td-copyright {
  color: var(--text-light);
  font-size: 0.9rem;
  font-family: var(--td-font-primary);
  text-align: right;
  line-height: 1.5;
}

/* ===== Media Queries ===== */
@media (max-width: 768px) {
  .td-footer {
    padding: var(--td-spacing-md) 0;
    margin-top: 0;
  }

  .td-footer-container {
    padding: 0 var(--td-spacing-md);
    flex-direction: column;
    /* gap: var(--td-spacing-md); */
  }

  .td-social-links {
    gap: var(--td-spacing-sm);
    margin-bottom: var(--td-spacing-sm);
  }

  .td-social-link {
    width: 36px;
    height: 36px;
  }
}