/* ============================================================
   cs-menus.css — 通用模板菜单 / 页脚链接组 专属样式
   说明：基础排版在 cs-core-v5.css（.ft-grid / .ft-col / .ft-beian），
   本文件仅做「增强层」：链接微交互、分组标题装饰、平板/手机栅格细化。
   不影响 kayue（走自有主题）。
   ============================================================ */

/* —— 页脚链接组微交互 —— */
footer .ft-col h4 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: .3px;
}
footer .ft-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--cs-accent, #00D2FF);
  opacity: .8;
}
footer .ft-col a {
  position: relative;
  transition: color .2s ease, padding-left .2s ease;
}
footer .ft-col a:hover {
  color: var(--cs-accent, #00D2FF);
  padding-left: 6px;
}
/* 顶级项自身也是链接时（无子级），标题也跟随悬停色 */
footer .ft-col h4 a { transition: color .2s ease; }
footer .ft-col h4 a:hover { color: var(--cs-accent, #00D2FF); }

/* —— 链接组间距一致性 —— */
footer .ft-grid { gap: 28px 32px; }
footer .ft-col a + a { margin-top: 2px; }

/* —— 备案行细调 —— */
footer .ft-beian a:hover { color: var(--cs-accent, #00D2FF); text-decoration: underline; }

/* —— 响应式栅格细化（基础 4 列在 cs-core-v5；补齐平板 2 列） —— */
@media (max-width: 900px) {
  footer .ft-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  footer .ft-grid { grid-template-columns: 1fr; gap: 20px; }
  footer .ft-col h4 { margin-bottom: 10px; }
}