/* ============================================================
   Fool Blog — 玻璃浮条导航
   整条导航内嵌成一块圆角磨砂面板，与页面顶边留出间隙。
   站名在左、页面链接居中、通知与工具在右。
   z-index 120：高于页面内容浮层，低于 #float-actions(999)
   与 .ms-toast(10000)。
   ============================================================ */

:root {
  --gnav-h: 56px;      /* 浮条高度 */
  --gnav-gap: 14px;    /* 浮条与页面顶边的间隙 */
  --gnav-inset: 22px;  /* 浮条左右内缩 */
}

/* ---------- 外壳：负责吸顶与留白，不承载背景 ---------- */
.gnav-wrap {
  position: sticky;
  top: 0;
  z-index: 120;
  padding: var(--gnav-gap) var(--gnav-inset) 0;
}

/* 浮条已经自带间隙，主区顶部不用再叠一大段 padding。
   .content 原本有 clamp(28px, 4vw, 52px) 的上内边距，
   两者相加会让导航和内容之间空出一大块。 */
.gnav-wrap + .content {
  padding-top: 18px;
}

/* 首页 Hero 自带内边距（.hero-inner 42px + .hero-left 30px），
   再叠 .content 的 18px 会让导航和标题之间空出 100px 以上。
   这里只针对首页收掉 .content 那层，Hero 自身的内边距保持原设计。 */
.gnav-wrap + .content:has(> .hp-wrap) {
  padding-top: 0;
}

/* ---------- 浮条本体 ---------- */
.gnav {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  height: var(--gnav-h);
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 10px 0 16px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 8px 26px rgba(25, 28, 55, .08);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}

/* 滚动后加深阴影，让浮条与内容分层更清楚 */
.gnav-wrap.scrolled .gnav {
  box-shadow: 0 14px 40px rgba(25, 28, 55, .14);
}

html.dark .gnav {
  background: rgba(21, 24, 33, .82);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .42);
}

html.dark .gnav-wrap.scrolled .gnav {
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
}

/* 壁纸模式下更透，让壁纸透出来 */
body.has-wallpaper .gnav {
  background: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 10px 30px rgba(25, 28, 55, .1);
}

html.dark body.has-wallpaper .gnav {
  background: rgba(12, 16, 26, .42);
  border-color: rgba(255, 255, 255, .13);
}

/* ---------- 站名 ---------- */
.gnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  justify-self: start;
}

.gnav-brand:hover { color: var(--text); text-decoration: none; }

.gnav-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: cover;
  flex: 0 0 auto;
}

/* ---------- 页面链接（居中） ---------- */
.gnav-links {
  display: flex;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.gnav-links > a {
  position: relative;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}

.gnav-links > a:hover {
  color: var(--text);
  background: rgba(var(--primary-rgb), .045);
  text-decoration: none;
}

/* 当前页：主色 + 短下划线 */
.gnav-links > a.active {
  color: var(--primary);
  font-weight: 600;
}

.gnav-links > a.active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}

/* ---------- 右侧：常驻区 + 工具区 ---------- */
.gnav .nav-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}

.gnav .nav-primary {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 通知 */
.gnav .nav-bell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}

.gnav .nav-bell:hover {
  color: var(--primary);
  background: rgba(var(--primary-rgb), .045);
  text-decoration: none;
}

.gnav .nav-bell i { font-size: 14px; }

/* 账户 */
.gnav .user-dropdown { position: relative; display: inline-flex; }

.gnav .user-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-secondary) !important;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}

.gnav .user-chip:hover {
  border-color: var(--primary);
  color: var(--text) !important;
  text-decoration: none;
}

.gnav .user-chip img,
.gnav .avatar-fallback {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 auto;
}

/* 未登录 */
.gnav .nav-auth-link {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}

.gnav .nav-auth-link:hover {
  color: var(--primary);
  background: rgba(var(--primary-rgb), .045);
  text-decoration: none;
}

.gnav .nav-auth-primary {
  color: var(--primary);
  font-weight: 600;
}

/* 工具区：图标按钮 + 明暗开关 */
.gnav .nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 浮层里的页面链接：只服务窄屏，宽屏由顶栏 .gnav-links 承担 */
.gnav .nav-links-pages { display: none; }

/* 隔离 ui-reset / app.css 里给 .nav-links > a 的旧胶囊样式：
   那些规则是为原顶栏页面链接写的，这里只剩登录/注册两个文字链接 */
.gnav .nav-links > a {
  min-height: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  line-height: normal;
  font-size: 13px;
  font-weight: 500;
}
.gnav .nav-links > a i { margin-right: 0; }

/* 汉堡按钮：窄屏才出现 */
.gnav .menu-toggle {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 16px;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 980px) {
  :root {
    --gnav-h: 52px;
    --gnav-gap: 10px;
    --gnav-inset: 12px;
  }

  .gnav {
    gap: 10px;
    padding: 0 8px 0 12px;
  }

  /* 页面链接在窄屏隐藏，改由「更多」菜单进入 */
  .gnav-links { display: none; }

  /* 工具区变成下拉浮层：定位基准是 .gnav，贴浮条下方 */
  .gnav .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 8px;
    left: 8px;
    z-index: 140;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    /* 用不透明底色：浮层下面是正文，半透明会透字影响阅读 */
    background: var(--surface);
    box-shadow: 0 18px 48px rgba(25, 28, 55, .22);
    max-height: calc(100svh - var(--gnav-gap) - var(--gnav-h) - 24px);
    overflow-y: auto;
  }

  .gnav .nav-links.open { display: flex; }

  html.dark .gnav .nav-links {
    background: var(--surface-soft);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
  }

  /* 图标按钮在浮层里铺满整行，并补上文字标签 */
  .gnav .nav-links .icon-btn {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    font-size: 13px;
  }
  .gnav .nav-links .icon-btn::after { font-size: 13px; font-weight: 500; }
  .gnav .nav-links #colorPickerToggle::after { content: "背景颜色"; }
  .gnav .nav-links #wpUpload::after { content: "上传本地背景"; }
  .gnav .nav-links #wpRefresh::after { content: "换一张壁纸"; }

  /* 明暗开关：与上方工具项用一条分隔线隔开，避免和正文卡片糊在一起 */
  .gnav .nav-links .mode-field {
    width: 100%;
    justify-content: flex-start;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--card-border);
  }
  .gnav .nav-links .mode-switch { width: 100%; height: 34px; }

  /* 浮层里的页面链接：竖排、整行可点 */
  .gnav .nav-links .nav-links-pages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--card-border);
  }
  .gnav .nav-links .nav-links-pages > a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
  }
  .gnav .nav-links .nav-links-pages > a:hover {
    color: var(--text);
    background: rgba(var(--primary-rgb), .06);
    text-decoration: none;
  }
  .gnav .nav-links .nav-links-pages > a.active {
    color: var(--primary);
    font-weight: 600;
    background: rgba(var(--primary-rgb), .1);
  }

  .gnav .menu-toggle { display: inline-flex; }
  /* 右下角浮动按钮与提示条位置回正 */
  html body #float-actions { bottom: 40px; }
  html body .np-back-old { bottom: 78px; }
}

@media (max-width: 560px) {
  .gnav-brand { font-size: 15px; gap: 7px; }
  .gnav-icon { width: 23px; height: 23px; border-radius: 6px; }
  /* 小屏隐藏通知文字，只留图标（红点仍在） */
  .gnav .nav-bell-text { display: none; }
  .gnav .nav-bell { padding: 6px 8px; }
  /* 小屏隐藏账户昵称，只留头像 */
  .gnav .user-chip-name { display: none; }
  .gnav .user-chip { padding: 3px; }
}

@media print {
  .gnav-wrap { display: none; }
}