/* 1. 强行给导航栏一个实体背景，让它从背景图中脱离出来 */
#nav {
    background: rgba(255, 255, 255, 0.85) !important; /* 白色半透明背景 */
    backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    position: fixed !important;
    top: 0;
    width: 100%;
    height: 60px !important;
    z-index: 100;
    transition: all 0.3s;
    display: flex !important; /* 确保它是显示的 */
    align-items: center;
}

/* 2. 强行把导航菜单里的文字改成深色，防止它隐身 */
#nav a, 
#nav #site-name, 
#nav #search-button, 
#nav #toggle-menu {
    color: #333 !important; /* 深灰色 */
    text-shadow: none !important; /* 去掉发光，看得更清楚 */
    font-size: 16px; /* 顺便调大一点菜单字体 */
}

/* 3. 鼠标指上去变蓝色 */
#nav a:hover {
    color: #49b1f5 !important;
}

/* 4. 重点：因为你隐藏了顶部图，文章内容会往上顶，
   我们要手动把文章内容往下压一点，防止被导航栏挡住第一行字 */
#body-wrap > .layout {
    padding-top: 80px !important;
}

/* 5. 隐藏文章页原本那个已经空了的页眉容器，防止占位错误 */
#page-header:not(.fixed) {
    height: 60px !important;
    background: transparent !important;
}