@charset "UTF-8";
/* ==========================================================================
 * nav-shared.css — 全站公共导航
 * --------------------------------------------------------------------------
 * 导航样式的唯一来源，首页与 4 个详情页共用同一份。
 *
 * 为什么叫 .site-nav 而不是 .nav：
 *   Bootstrap 的 .nav 是通用容器类，详情页的 tab 就在用
 *   `<ul class="nav nav-tabs" role="tablist">`。若沿用 .nav，
 *   本文件的 position:fixed / background 会把 tab 列表变成固定导航条。
 *   .site-nav 不在 Bootstrap 命名空间内，不存在误伤。
 *
 * 只消费 theme.css 提供的变量，不写死任何具体颜色值。
 * ========================================================================== */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* 必须显式清零：styles.css（clean-blog 模板）里有一条全局元素规则
     `header { padding-top: 4rem; padding-bottom: 6rem; }`，本导航用的是
     <header> 标签，会被撑到 68 + 64 + 96 = 228px（+1px 边框）高。
     类选择器权重(0,1,0) > 元素选择器(0,0,1)，无需 !important。
     详情页的 <section class="item-detail"> 同样吃 styles.css 的
     `section{padding:2rem 0 9rem}` —— 那是模板原有行为，保持不变。 */
  padding: 0;
  /* 自带排版基线：本文件要同时落在「引 layout.css 的首页」和「只引 Bootstrap
     的详情页」上，必须自行声明字体与行高，否则两端会不一致
     （首页 body 是 15px/1.85，详情页是 Bootstrap 的 16px/1.5，
      导致 .nav-menu a 的行高 25.9px vs 21px，链接盒子高矮不同）。
     行高用数字 1.85 继承，子项按各自 font-size 折算，与首页计算结果完全相同。 */
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.85;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: all .3s var(--ease);
}
.site-nav.is-scrolled { box-shadow: var(--shadow); }
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* 本文件必须自带链接重置，不能依赖宿主页面。
   首页引 layout.css，其中有 `a { text-decoration: none }` 兜底；
   详情页不引 layout.css（整份引入会与 Bootstrap 的 .container/.row/.card
   撞车），于是 Bootstrap reboot 的 `a { text-decoration: underline }`
   生效，导航项会带上下划线，与首页不一致。显式声明后两端一致。 */
.brand {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  text-decoration: none;
}
.brand img { height: 30px; width: auto; display: block; max-width: 100%; }
/* 兜底：仅当 config.js 的 brand.logoDark 缺省时，脚本才会加 is-inverted。
   正常路径是深色主题直接换 logoDark 图片，不走滤镜 ——
   brightness(0) 会把每个像素 ×0 再翻白，彩色 logo 塌缩成纯白色块。 */
.brand img.is-inverted { filter: brightness(0) invert(1); }
.brand-fallback {
  font-size: 18px; font-weight: 700; color: var(--heading); letter-spacing: .04em;
}
.nav-menu { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-menu a {
  position: relative;
  padding: 8px 14px;
  color: var(--nav-text);
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all .22s var(--ease);
}
.nav-menu a:hover, .nav-menu a.is-active {
  color: var(--primary);
  background: var(--primary-soft);
}

/* 固定导航脱离文档流，页面需自行留出高度。
   这里是兜底值；detail.js 会用实测的导航高度覆盖它（窄屏导航会换行变高）。 */
body.has-nav { padding-top: 68px; }

@media (max-width: 768px) {
  .nav-inner { height: 60px; flex-wrap: wrap; padding: 0 16px; }
  .nav-menu {
    order: 3; width: 100%;
    margin: 0; padding-bottom: 10px;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .site-nav.is-scrolled .nav-menu { display: none; }
  .brand img { height: 24px; }
}