/* 页脚复刻 qiqi.ee（Nuxt 版 footer.vue）的三栏 + 版权区样式
 * 依赖 _config.butterfly.yml 中 footer.nav（三栏）与 footer.custom_text（版权区）
 * 需在 footer-transparent.css 之后加载（覆盖其 transparent 背景）
 */

/* ---- 整体：黑底半透明 + 白字（对应 Nuxt .footer） ---- */
#footer {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
#footer > * {
  color: #fff;
}
#footer a {
  color: #fff;
}

/* ---- 顶部三栏（对应 Nuxt .top） ---- */
/* 注意：主题原生选择器是 #footer .footer-flex .footer-flex-items（3 层），
 * 覆盖 white-space 等属性时必须用同等或更高优先级，否则不生效 */
#footer .footer-flex {
  display: flex;
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  gap: 0;
  align-items: flex-start;
}
#footer .footer-flex .footer-flex-items {
  flex-grow: 1;
  flex-shrink: 1;
  width: calc(100% / 3);
  min-width: 0;
  /* 覆盖主题的 nowrap，让文字自动换行 */
  white-space: normal;
}
#footer .footer-flex .footer-flex-item {
  margin: 0;
  white-space: normal;
}
#footer .footer-flex .footer-flex-title {
  margin: 0;
  padding: 10px 10px;
  font-size: 17.6px;
  font-weight: 400;
  white-space: normal;
}
#footer .footer-flex-content > div {
  padding: 0 20px;
  white-space: normal;
  word-break: break-all;
}

/* 栏1：格言（对应 Nuxt .motto）
 * 最多显示 4 行，超出部分省略号截断 */
.footer-motto-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  max-height: 124px;
  font-size: 15px;
  line-height: 31px;
  white-space: normal;
  word-break: break-all;
}
.footer-motto-btn {
  display: block;
  margin: 10px 20px;
  font-size: 15.5px;
  background-color: #39c5bb;
  color: #fff;
  height: 37.2px;
  line-height: 37.2px;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
}

/* 栏2：猜你想看（对应 Nuxt .recommend） */
.footer-recommend {
  margin: 0;
  padding: 0 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.footer-recommend li {
  display: flex;
  justify-content: space-between;
  width: 60%;
}
/* 主题对 .footer-flex a 设了 display:block，这里还原为行内 */
.footer-recommend a,
.footer-friend-links a {
  display: inline;
}

/* 栏3：友情链接（对应 Nuxt .friendship-link） */
.footer-friend-links {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  max-width: 400px;
}
.footer-friend-links img {
  width: 61.08px;
  height: 61.08px;
}

/* ---- 版权区（对应 Nuxt .copyright） ---- */
#footer .footer-other {
  padding: 0px 20px;
  /* 覆盖主题在启用 nav 时的浅色底 */
  background-color: transparent;
  line-height: 32px;
  text-align: center;
}
#footer .footer-other .copyright,
#footer .footer-other .framework-info,
#footer .footer-other .footer_custom_text {
  font-size: inherit;
}
.footer-custom-qf {
  line-height: 32px;
}
/* 大屏一行展示时，两个日期之间留出间隔 */
.footer-dates span + span {
  margin-left: 1em;
}
/* 消除浏览器给 p 的默认 1em margin（页脚 .9em 字号下为 12.6px），
 * 让各行紧凑贴合 line-height 排列 */
.footer-custom-qf p {
  margin: 0;
}
.footer-version {
  display: flex;
  justify-content: center;
}
.footer-version span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #333333;
  height: 30px;
  width: 60px;
}
.footer-version span:nth-child(1) {
  background-color: #ff9800;
  border-radius: 5px 0 0 5px;
}
.footer-version span:nth-child(2) {
  background-color: #26c6da;
  border-radius: 0 5px 5px 0;
}
.footer-beian-qf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-beian-qf a {
  display: flex;
  align-items: center;
}
.footer-beian-qf a:last-child {
  margin-left: 30px;
}
.footer-beian-qf img {
  width: 20px;
  height: 20px;
  margin-right: 3px;
}

/* ---- 响应式（对应 Nuxt 的两个断点） ---- */
@media (max-width: 992px) {
  /* 栏目上下堆叠后内容总高超过固定高度，恢复自适应，避免与 .footer-other 重叠 */
  #footer .footer-flex {
    height: auto;
  }
  /* 隐藏第三栏：友情链接 */
  #footer .footer-flex .footer-flex-items:nth-child(3) {
    display: none;
  }
  #footer .footer-flex .footer-flex-items {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .footer-motto-text,
  .footer-motto-btn {
    font-size: 12px;
  }
  .footer-recommend li {
    width: 100%;
    font-size: 12px;
  }
  #footer .footer-other {
    font-size: 14px;
  }
  /* 建站日期与最后更新各占一行 */
  .footer-dates {
    display: flex;
    flex-direction: column;
  }
  .footer-dates span {
    display: block;
  }
  /* 分行后去掉大屏加的间隔 */
  .footer-dates span + span {
    margin-left: 0;
  }
  .footer-beian-qf {
    flex-direction: column;
  }
  .footer-beian-qf a:last-child {
    margin-left: 0;
    margin-top: 8px;
  }
}