/*
 * 导航（毛玻璃 + 苹果风格的分段菜单）
 *
 * - 宽屏电脑（1200px 以上）：左侧固定的玻璃侧边栏，上面是站名，下面是竖排菜单
 * - 平板、手机和窄窗口：顶部只留站名；菜单放在屏幕底部，做成 iPhone 那样悬浮的玻璃标签栏
 *   （底部标签栏由 nav.js 根据主题菜单生成，菜单改了它会跟着变）
 * - 两种菜单都是「分段菜单」：浅灰色底槽 + 一块白色胶囊标出当前页面，
 *   鼠标移过、点击、换页时胶囊会滑过去，滑动时先拉长、再收拢，像液体一样（动画由 nav.js 控制）
 * - 半透明 + 背景模糊，能隐约看到下面的内容；不随滚动隐藏
 *
 * 想调颜色，改下面「日间」「夜间」两段变量即可。
 */

/* ---------- 日间 ---------- */
:root {
  /* 顶部导航栏（窄屏） */
  --glass-nav-bg: rgba(255, 252, 245, 0.6);
  --glass-nav-border: rgba(255, 255, 255, 0.6);
  --glass-nav-text: #2b2b2b;
  --glass-nav-hover: #c0392b;
  --glass-nav-shadow: 0 8px 30px rgba(80, 60, 30, 0.12);
  /* 液态玻璃（侧边栏、底部标签栏）：上亮下透 + 边缘高光 */
  --liquid-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.38) 100%);
  --liquid-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.5),
    inset -1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.35);
  --liquid-shadow: 0 18px 50px rgba(60, 70, 110, 0.14), 0 2px 6px rgba(60, 70, 110, 0.06);
  /* 分段菜单：底槽、文字、白色胶囊 */
  --seg-track: rgba(30, 40, 70, 0.06);
  --seg-text: rgba(29, 29, 31, 0.55);
  --seg-text-on: #1d1d1f;
  --seg-label: rgba(29, 29, 31, 0.4);
  --seg-pill: #ffffff;
  --seg-pill-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 4px 14px rgba(20, 30, 60, 0.1);
}

/* ---------- 夜间 ---------- */
[data-theme='dark'] {
  --glass-nav-bg: rgba(12, 18, 36, 0.5);
  --glass-nav-border: rgba(255, 255, 255, 0.1);
  --glass-nav-text: #eef2ff;
  --glass-nav-hover: #ffd27a;
  --glass-nav-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  --liquid-bg: linear-gradient(180deg, rgba(30, 40, 70, 0.6) 0%, rgba(12, 18, 36, 0.5) 100%);
  --liquid-rim: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --liquid-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  --seg-track: rgba(255, 255, 255, 0.06);
  --seg-text: rgba(238, 242, 255, 0.55);
  --seg-text-on: #ffffff;
  --seg-label: rgba(238, 242, 255, 0.36);
  --seg-pill: rgba(255, 255, 255, 0.16);
  --seg-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ================= 窄屏：顶部导航栏（只留站名） =================
   主题在「滚动后」「夜间」等状态下各有一条导航栏样式，
   这里把每种状态都列出来并加上 :root 前缀，保证每种状态都被这里的样式覆盖 */
:root #page-header #nav,
:root #page-header.nav-fixed #nav,
:root #page-header.nav-fixed.fixed #nav,
:root #page-header.nav-visible:not(.fixed) #nav,
:root #page-header.nav-fixed > #nav,
:root #page-header.not-top-img > #nav {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 91;
  margin: 0 auto;
  width: calc(100% - 24px);
  max-width: 1200px;
  height: 60px;
  padding: 0 28px;
  border: 1px solid var(--glass-nav-border);
  border-radius: 999px;
  background: var(--glass-nav-bg);
  box-shadow: var(--glass-nav-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transform: translateZ(0);   /* 单独一层，滚动时不用重画导航栏 */
  transition: background 0.3s, box-shadow 0.3s;
}

@media (max-width: 768px) {
  :root #page-header #nav,
  :root #page-header.nav-fixed #nav,
  :root #page-header.nav-fixed.fixed #nav,
  :root #page-header.nav-visible:not(.fixed) #nav,
  :root #page-header.nav-fixed > #nav,
  :root #page-header.not-top-img > #nav {
    top: 8px;
    width: calc(100% - 16px);
    height: 52px;
    padding: 0 18px;
  }
}

/* 文字颜色 */
#page-header #nav #blog-info,
#page-header #nav .site-name,
#page-header #nav a,
#page-header #nav span.site-page {
  color: var(--glass-nav-text);
  text-shadow: none;
}
#page-header #nav .nav-site-title:hover .site-name {
  color: var(--glass-nav-hover);
}

/* 菜单都在底部标签栏里了：顶栏里的菜单和「三条杠」菜单按钮隐藏 */
#page-header #nav .menus_items,
#page-header #nav #toggle-menu {
  display: none !important;
}

/* 去掉主题菜单项下面的滑动下划线 */
#page-header #nav .site-page:not(.child)::after {
  display: none;
}

/* 没有头图的页面：给导航栏留出位置，避免挡住正文 */
#page-header.not-top-img {
  height: 84px;
}

/* 侧边栏吸顶时，避开悬浮导航栏 */
#page-header.nav-fixed + .layout > .aside-content > .sticky_layout,
#page-header.fixed + .layout > .aside-content > .sticky_layout {
  top: 90px;
}

/* ================= 分段菜单（侧边栏和底部标签栏共用） ================= */
.seg {
  position: relative;
}
.seg .seg-item {
  position: relative;
  z-index: 1;
  color: var(--seg-text);
  text-shadow: none;
  transition: color 0.3s;
}
.seg .seg-item:hover,
.seg .seg-item.is-current {
  color: var(--seg-text-on);
}
.seg .seg-item.is-current {
  font-weight: 600;
}

/* 白色胶囊（由 nav.js 生成）：上下左右四条边的位置由脚本给出。
   滑动时「前面那条边」先到、「后面那条边」后到，胶囊先拉长再收拢；
   两条边各自的时长也由脚本按滑动方向设置 */
.seg .seg-pill {
  position: absolute;
  top: var(--pill-t, 0);
  right: var(--pill-r, 0);
  bottom: var(--pill-b, 0);
  left: var(--pill-l, 0);
  z-index: 0;
  border-radius: 999px;
  background: var(--seg-pill);
  box-shadow: var(--seg-pill-shadow);
  opacity: 0;
  pointer-events: none;
}
.seg .seg-pill.is-shown {
  opacity: 1;
}
.seg .seg-pill.is-ready {
  transition:
    top var(--pill-dt, 0.4s) cubic-bezier(0.3, 1.25, 0.5, 1),
    bottom var(--pill-db, 0.4s) cubic-bezier(0.3, 1.25, 0.5, 1),
    left var(--pill-dl, 0.4s) cubic-bezier(0.3, 1.25, 0.5, 1),
    right var(--pill-dr, 0.4s) cubic-bezier(0.3, 1.25, 0.5, 1),
    opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .seg .seg-pill.is-ready {
    transition: opacity 0.2s ease;
  }
}

/* ================= 窄屏：底部悬浮标签栏（模仿 iPhone） ================= */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: flex;
  padding: 5px;
  border-radius: 999px;
  background: var(--liquid-bg);
  box-shadow: var(--liquid-rim), var(--liquid-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transform: translateX(-50%);
}
.tabbar .seg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 76px;
  padding: 8px 18px 6px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.tabbar .seg-item i {
  font-size: 18px;
}

/* 给底部标签栏让出位置：页尾、右下角按钮（夜间模式、回到顶部）、文章目录按钮都往上挪 */
#body-wrap {
  padding-bottom: 84px;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
:root #rightside {
  bottom: 96px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
#page-header.full_page #scroll-down {
  bottom: 84px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 900px) {
  :root #aside-content #card-toc {
    bottom: 96px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* ================= 宽屏电脑：左侧侧边栏 =================
   和顶栏一样，把主题的每种导航栏状态都列出来，保证都被覆盖 */
@media (min-width: 1200px) {
  :root {
    --side-nav-width: 232px;
    --side-nav-gap: 16px;
  }

  :root #page-header #nav,
  :root #page-header.nav-fixed #nav,
  :root #page-header.nav-fixed.fixed #nav,
  :root #page-header.nav-visible:not(.fixed) #nav,
  :root #page-header.nav-fixed > #nav,
  :root #page-header.not-top-img > #nav {
    top: var(--side-nav-gap);
    right: auto;
    bottom: var(--side-nav-gap);
    left: var(--side-nav-gap);
    flex-direction: column;
    align-items: stretch;
    width: var(--side-nav-width);
    max-width: none;
    height: auto;
    margin: 0;
    padding: 28px 14px;
    border-color: transparent;
    border-radius: 28px;
    background: var(--liquid-bg);
    box-shadow: var(--liquid-rim), var(--liquid-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    font-size: 16px;
  }

  /* 顶部：站名 */
  #page-header #nav #blog-info {
    flex: none;
    padding: 0 12px;
  }
  #page-header #nav .nav-site-title {
    display: flex;
    align-items: center;
  }
  #page-header #nav .site-name {
    font-size: 19px;
    font-weight: 700;
  }
  /* 文章页滚动后主题会把站名换成文章标题，侧边栏里不需要 */
  #page-header #nav .nav-page-title {
    display: none;
  }
  #page-header #nav .nav-site-title {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* 菜单：小标题 + 竖排的分段菜单（浅灰底槽） */
  #page-header #nav #menus {
    margin-top: 36px;
  }
  #page-header #nav #menus::before {
    content: '菜单';
    display: block;
    margin: 0 0 10px 12px;
    font-size: 13px;
    color: var(--seg-label);
  }
  #page-header #nav .menus_items,
  #page-header #nav.hide-menu .menus_items {
    display: block !important;
    padding: 5px;
    border-radius: 24px;
    background: var(--seg-track);
  }
  #page-header #nav .menus_item {
    display: block;
    padding: 0;
  }
  #page-header #nav .menus_item + .menus_item {
    margin-top: 2px;
  }
  #page-header #nav .menus_item > a.seg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    font-size: 15px;
    border-radius: 999px;
    color: var(--seg-text);
  }
  #page-header #nav .menus_item > a.seg-item:hover,
  #page-header #nav .menus_item > a.seg-item.is-current {
    color: var(--seg-text-on);
  }
  #page-header #nav .menus_item > a.seg-item i {
    width: 20px;
    font-size: 16px;
    text-align: center;
  }

  /* 宽屏不用底部标签栏，也不用给它让位置 */
  .tabbar {
    display: none;
  }
  #body-wrap {
    padding-bottom: 0;
    padding-left: calc(var(--side-nav-width) + var(--side-nav-gap));
  }
  #page-header.full_page #scroll-down {
    bottom: 10px;
  }
  :root #rightside {
    bottom: 40px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  /* 主题打开非首页页面时，头图区域有 1 秒「从上滑入」的动画（会移动位置）。
     动画期间侧边栏的高度会被限制在头图区域里，看起来短一截；
     宽屏下改成淡入，效果相近，侧边栏始终铺满整个高度 */
  #page-header:not(.full_page) {
    animation: side-nav-header-in 1s;
  }
  @keyframes side-nav-header-in {
    from { opacity: 0; }
  }

  #page-header.not-top-img {
    height: 24px;
  }
  #page-header.nav-fixed + .layout > .aside-content > .sticky_layout,
  #page-header.fixed + .layout > .aside-content > .sticky_layout {
    top: 24px;
  }
}