/* =========================================================
   Tutorial Studio
   网站底部 ICP 备案信息

   文件：css/icp_footer.css

   主要功能：
   1. 展示网站 ICP 备案号。
   2. 展示网站版权信息。
   3. 提供备案查询入口。
   4. 适配电脑端和手机端。
   5. 使用简洁的浅色设计，不干扰编辑器操作。
   ========================================================= */


/* =========================================================
   一、备案信息容器
   ========================================================= */

.icp-footer {

  /* 使用 Flex 布局排列备案信息 */
  display: flex;

  /* 水平居中 */
  justify-content: center;

  /* 垂直居中 */
  align-items: center;

  /* 内容过多时允许换行 */
  flex-wrap: wrap;

  /* 元素之间的间距 */
  gap: 6px;

  /* 页脚内部留白 */
  padding: 12px 16px;

  /* 浅色背景 */
  background-color: #f8fafc;

  /* 顶部分隔线 */
  border-top: 1px solid #e5e7eb;

  /* 文字颜色 */
  color: #64748b;

  /* 字体大小 */
  font-size: 12px;

  /* 行高 */
  line-height: 1.8;

  /* 字体 */
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    sans-serif;

  /* 宽度占满父容器 */
  width: 100%;

  /* 将内边距和边框计入宽度 */
  box-sizing: border-box;

  /* 确保页脚位于正常文档流中，不遮挡编辑器 */
  position: relative;

  /* 设置较低层级，避免覆盖其他界面 */
  z-index: 1;

}


/* =========================================================
   二、版权信息
   ========================================================= */

.icp-copyright {

  /* 继承页脚的文字颜色 */
  color: #64748b;

  /* 不允许版权文字被压缩 */
  flex-shrink: 0;

}


/* =========================================================
   三、分隔符
   ========================================================= */

.icp-divider {

  /* 加深分隔点颜色，让它更加明显 */
    color: #475569;

  /* 禁止分隔符被压缩 */
  flex-shrink: 0;

}


/* =========================================================
   四、ICP备案号链接
   ========================================================= */

.icp-link {

  /* 设置备案号文字颜色 */
  color: #64748b;

  /* 去除默认下划线 */
  text-decoration: none;

  /* 平滑过渡颜色 */
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;

  /* 鼠标悬停时显示手形光标 */
  cursor: pointer;

}


/* =========================================================
   五、备案号鼠标悬停效果
   ========================================================= */

.icp-link:hover {

  /* 悬停时使用蓝色 */
  color: #2563eb;

  /* 悬停时显示下划线 */
  text-decoration: underline;

}


/* =========================================================
   六、键盘焦点状态
   ========================================================= */

.icp-link:focus-visible {

  /* 键盘访问时显示清晰的焦点轮廓 */
  outline: 2px solid #2563eb;

  /* 轮廓与文字之间留出距离 */
  outline-offset: 3px;

  /* 圆角 */
  border-radius: 2px;

}


/* =========================================================
   七、手机端适配
   ========================================================= */

@media (max-width: 480px) {

  .icp-footer {

    /* 缩小页脚内边距 */
    padding: 10px 8px;

    /* 缩小文字，避免占用过多空间 */
    font-size: 11px;

    /* 缩小元素间距 */
    gap: 4px;

    /* 保留居中布局 */
    justify-content: center;

    /* 允许窄屏换行 */
    flex-wrap: wrap;

  }

}


/* =========================================================
   八、超窄屏幕适配
   ========================================================= */

@media (max-width: 320px) {

  .icp-footer {

    /* 进一步缩小左右留白 */
    padding: 8px 4px;

    /* 让文字保持清晰 */
    font-size: 10px;

    /* 减少元素间距 */
    gap: 3px;

  }

}