/* ======================================================
 * 文件: footer.css
 * 职责: 页脚组件样式
 * 可修改性: 可修改页脚外观、颜色、布局
 * 可删除性: 可删除，Footer组件依赖此样式
 * 学习知识点: CSS布局、Flexbox、响应式
 * ====================================================== */

/* ==================== 页脚基础样式 ==================== */
.footer {
  background-color: var(--color-bg-secondary); /* 页脚背景色 */
  padding: var(--spacing-12) var(--spacing-4) var(--spacing-8); /* 上下内边距 */
  margin-top: var(--spacing-16);      /* 顶部间距 */
}

/* ==================== 页脚内容区域 ==================== */
.footer__content {
  display: grid;                      /* Grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: var(--spacing-8);              /* 列间距 */
  margin-bottom: var(--spacing-8);    /* 底部间距 */
}

/* ==================== 版权信息样式 ==================== */
.footer__copyright {
  display: flex;                      /* 弹性布局 */
  flex-direction: column;             /* 垂直排列 */
  gap: var(--spacing-2);              /* 元素间距 */
}

.copyright-text {
  font-size: var(--font-size-sm);     /* 小号字体 */
  color: var(--color-text-secondary); /* 次要文字颜色 */
}

.copyright-theme {
  font-size: var(--font-size-xs);     /* 更小的字体 */
  color: var(--color-text-muted);     /* 辅助文字颜色 */
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  gap: var(--spacing-1);              /* 图标和文字间距 */
}

/* ==================== 友情链接样式 ==================== */
.footer__links {
  display: flex;                      /* 弹性布局 */
  flex-direction: column;             /* 垂直排列 */
  gap: var(--spacing-3);              /* 元素间距 */
}

.links-title {
  font-size: var(--font-size-base);   /* 基准字体大小 */
  font-weight: var(--font-weight-semibold); /* 半粗体 */
  color: var(--color-text-primary);   /* 主要文字颜色 */
}

.links-list {
  list-style: none;                   /* 去掉列表样式 */
  padding: 0;                         /* 去掉内边距 */
  margin: 0;                          /* 去掉外边距 */
  display: flex;                      /* 弹性布局 */
  flex-direction: column;             /* 垂直排列 */
  gap: var(--spacing-2);              /* 列表项间距 */
}

.links-item a {
  font-size: var(--font-size-sm);     /* 小号字体 */
  color: var(--color-text-secondary); /* 次要文字颜色 */
  text-decoration: none;              /* 去掉下划线 */
  transition: color var(--transition-fast); /* 颜色过渡 */
}

.links-item a:hover {
  color: var(--color-primary);        /* 悬停时变为主色 */
}

/* ==================== 备案信息样式 ==================== */
.footer__record {
  display: flex;                      /* 弹性布局 */
  flex-direction: column;             /* 垂直排列 */
  gap: var(--spacing-3);              /* 元素间距 */
}

.record-title {
  font-size: var(--font-size-base);   /* 基准字体大小 */
  font-weight: var(--font-weight-semibold); /* 半粗体 */
  color: var(--color-text-primary);   /* 主要文字颜色 */
}

.record-item {
  font-size: var(--font-size-sm);     /* 小号字体 */
  color: var(--color-text-secondary); /* 次要文字颜色 */
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  gap: var(--spacing-1);              /* 图标和文字间距 */
}

.record-icon {
  font-size: var(--font-size-xs);     /* 图标字号 */
}

.record-item a {
  color: var(--color-primary);        /* 链接颜色 */
  text-decoration: none;              /* 去掉下划线 */
}

.record-item a:hover {
  text-decoration: underline;         /* 悬停时添加下划线 */
}

/* ==================== 页脚底部样式 ==================== */
.footer__bottom {
  display: flex;                      /* 弹性布局 */
  flex-direction: column;             /* 垂直排列 */
  align-items: center;                /* 水平居中 */
  gap: var(--spacing-4);              /* 元素间距 */
}

.footer-divider {
  width: 100%;                        /* 全宽 */
  height: 1px;                        /* 高度 */
  border: none;                       /* 去掉默认边框 */
  background-color: var(--color-border); /* 使用设计变量中的边框颜色 */
}

.footer-bottom-text {
  font-size: var(--font-size-xs);     /* 小号字体 */
  color: var(--color-text-muted);     /* 辅助文字颜色 */
}

.footer-bottom-text .heart {
  color: var(--color-error);          /* 爱心使用错误色（红色） */
  animation: heartbeat 1.5s ease-in-out infinite; /* 心跳动画 */
}

/* ==================== 心跳动画 ==================== */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);              /* 初始大小 */
  }
  50% {
    transform: scale(1.2);            /* 中间放大 */
  }
}

/* ==================== 响应式调整 ==================== */
@media (max-width: var(--breakpoint-md)) {
  /* 移动端页脚内容改为单列 */
  .footer__content {
    grid-template-columns: 1fr;       /* 单列 */
    gap: var(--spacing-6);            /* 减小间距 */
    text-align: center;               /* 文本居中 */
  }
  
  /* 移动端版权信息居中 */
  .footer__copyright {
    align-items: center;              /* 水平居中 */
  }
  
  /* 移动端友情链接列表改为水平排列 */
  .links-list {
    flex-direction: row;              /* 水平排列 */
    flex-wrap: wrap;                  /* 换行 */
    justify-content: center;          /* 水平居中 */
    gap: var(--spacing-4);            /* 增大间距 */
  }
  
  /* 移动端备案信息居中 */
  .footer__record {
    align-items: center;              /* 水平居中 */
  }
}