/* --- 1. 导航栏整体布局重置 --- */
#nav {
  display: flex !important;
  justify-content: center !important; /* 让主内容居中 */
  align-items: center !important;
  position: relative;
}

/* --- 2. Logo 强制固定在左侧 --- */
#blog-info {
  position: absolute;
  left: 20px; /* 距离左边的距离 */
  top: 50%;
  transform: translateY(-50%);
  flex: none; /* 防止被压缩 */
  z-index: 102;
}

/* --- 3. 菜单栏 (Menus) 样式 --- */
#menus {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  transition: all 0.3s ease-in-out;
  /* 必须保证菜单在标题之上，或者通过透明度控制 */
  opacity: 1;
  transform: translateY(0);
}

/* --- 4. 文章标题中心控制台 (Center Title) --- */
#center-title {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 20px); /* 初始位置稍微偏下一点 */
  opacity: 0; /* 默认隐藏 */
  pointer-events: none; /* 隐藏时不可点击 */
  transition: all 0.3s ease-in-out;
  font-weight: bold;
  font-size: 1.1em;
  max-width: 50%; /* 防止标题太长遮挡两侧 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 101;
}

#center-title .post-title-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* --- 5. 交互状态：显示标题模式 --- */
/* 当 #nav 拥有 .show-title 类时 */

#nav.show-title #menus {
  opacity: 0;
  transform: translateY(-20px); /* 菜单向上淡出 */
  pointer-events: none;
}

#nav.show-title #center-title {
  opacity: 1;
  transform: translate(-50%, 0); /* 标题复位显示 */
  pointer-events: auto;
}

/* --- 修正：强制导航栏显示 --- */
/* Butterfly 默认下滑会隐藏导航栏，我们需要用 !important 覆盖它 */
#nav.show-title {
  transform: translateZ(0) !important; /* 强制硬件加速并覆盖可能的 transform */
  top: 0 !important; /* 强制固定在顶部 */
  transition: all 0.3s !important;
  background: var(--nav-bg); /* 确保有背景色，防止透明看不清 */
  box-shadow: var(--card-box-shadow); /* 加上阴影显得更自然 */
}

/* 之前写的交互样式保持不变，确保它们还在 */
#nav.show-title #menus {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

#nav.show-title #center-title {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* --- 6. 移动端适配 --- */
@media screen and (max-width: 768px) {
  /* 手机端通常不需要菜单居中，因为是汉堡按钮 */
  /* 但如果你想在手机端也显示标题，需要调整宽度 */
  #center-title {
    max-width: 60%;
  }
  
  /* 手机端 Logo 可能需要调整 */
  #blog-info {
    left: 10px;
  }
  
  /* 手机端的菜单按钮在右侧，需要绝对定位防止它跟着居中跑掉 */
  #toggle-menu {
    display: block;
  }
  
  #menus {
    /* 手机端 #menus 包含汉堡按钮和搜索，我们把它固定到右边 */
    position: absolute;
    right: 10px;
    width: auto;
    /* 覆盖上面的居中设置，手机端保持右对齐 */
    justify-content: flex-end; 
  }
  
  /* 手机端下滑时，也可以隐藏右侧按钮显示标题，或者保留按钮 */
  /* 这里选择保留右侧汉堡按钮，只隐藏中间区域（如果有的话） */
}