/*
 * 苦荞学习 · 全站公共顶部导航 + 返回顶部按钮
 * 用法（任意目录、任意深度，两行接入）：
 *   <link rel="stylesheet" href="/site-nav.css?v=20260926-1">
 *   <script src="/site-nav.js?v=20260926-1" defer></script>
 * 导航结构由 site-nav.js 注入到 <body> 首位，无需在页面里写 header 标签。
 * 样式命名统一使用 .kq-nav / .kq-totop 前缀，避免与各页面自身样式冲突。
 * 品牌色与文章阅读页（article/article.css）保持一致：#cf4b45。
 */

.kq-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 250, 249, .86);
  border-bottom: 1px solid #ebe8e5;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.kq-nav__inner {
  display: flex;
  width: min(calc(100% - 56px), 1180px);
  min-height: 64px;
  margin: 0 auto;
  align-items: center;
  gap: 28px;
}

.kq-nav__brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: #1d2126;
  text-decoration: none;
}

.kq-nav__brand img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.kq-nav__brand b {
  color: #1d2126;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
}

.kq-nav__links {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 8px;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kq-nav__links::-webkit-scrollbar {
  display: none;
}

.kq-nav__links a {
  position: relative;
  flex: none;
  padding: 7px 12px;
  color: #464c55;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 8px;
  transition: color .16s, background .16s;
}

/* 当前栏目 / 悬停：只做文字变色，不加粗、不加底衬（用户明确要求「只是文字高亮就行」） */
.kq-nav__links a:hover {
  color: #cf4b45;
}

.kq-nav__links a.is-active {
  color: #cf4b45;
}

.kq-nav__cta {
  display: inline-flex;
  flex: none;
  height: 38px;
  padding: 0 16px;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: #cf4b45;
  border-radius: 9px;
  transition: background .16s;
}

.kq-nav__cta:hover {
  background: #b8322c;
}

/* ---------- 返回顶部：与客服浮标同列，位于其上方，互不遮挡 ---------- */

.kq-totop {
  position: fixed;
  z-index: 70;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(22px + env(safe-area-inset-bottom));
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #cf4b45;
  line-height: 1;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(207, 75, 69, .26);
  border-radius: 50%;
  box-shadow: 0 12px 32px rgba(75, 55, 48, .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease, border-color .16s;
}

.kq-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.kq-totop:hover {
  border-color: rgba(207, 75, 69, .48);
}

.kq-totop svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* 客服浮标为 44px 高、bottom 22px，故返回顶部上移 56px（22 + 44 + 12 间距） */
body.has-kq-feedback .kq-totop {
  bottom: calc(78px + env(safe-area-inset-bottom));
}

@media (max-width: 900px) {
  .kq-nav__inner {
    width: min(calc(100% - 32px), 1180px);
    gap: 14px;
  }

  .kq-nav__brand b {
    display: none;
  }

  .kq-nav__links {
    margin-left: 0;
    gap: 2px;
  }

  .kq-nav__links a {
    padding: 6px 9px;
    font-size: 13.5px;
  }

  .kq-nav__cta {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .kq-totop {
    right: max(14px, env(safe-area-inset-right));
  }
}