/* 导航栏菜单项悬浮阴影样式 */
#ghost-sticky-header nav a {
    position: relative;
    display: inline-block;
    padding: 12px 24px;       /* 文本周围内边距 */
    margin: 1px 2px;            
    border-radius: 6px;       /* 可选圆角 */
    background-color: transparent;
    color: #333;
    text-decoration: none;
    transition: transform 0.2s ease;
}

/* 使用伪元素作为放大的悬浮矩形背景 */
#ghost-sticky-header nav a::before {
    content: '';
    position: absolute;
    top: -6px;        /* 向上扩展 */
    left: -12px;      /* 向左扩展 */
    right: -12px;     /* 向右扩展 */
    bottom: -6px;     /* 向下扩展 */
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    z-index: -1;       /* 背景在文字下方 */
    transition: opacity 0.2s ease;
    opacity: 0;        /* 默认隐藏 */
}

/* 鼠标悬浮显示矩形背景 */
#ghost-sticky-header nav a:hover::before {
    opacity: 1;
}

/* 当前页面高亮保持原样 */
#ghost-sticky-header nav a.active {
    border-bottom: 2px solid currentColor;
}

  
#ghost-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);  /* 初始透明 */
    transition: background-color 0.3s ease, box-shadow 0.18s linear, transform 0.12s ease;
    overflow: visible !important;
    padding: 8px 20px; /* 缩小页眉高度，减少 padding */
    height: 50px; /* 设置固定高度，确保页眉窄一些 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* 对 Webkit 内核浏览器的兼容性处理 */
}

/* 滚动时背景色渐变为不透明，且增加阴影 */
#ghost-sticky-header.scrolled { 
    background-color: rgba(255, 255, 255, 0.9);  /* 背景色渐变为白色，不完全不透明 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);  /* 加强阴影 */
    backdrop-filter: blur(5px); /* 滚动时减少模糊量，增强透明度 */
}

/* 在滚动时渐变透明而不完全消失 */
#ghost-sticky-header.scrolled .gh-navigation-logo {
    opacity: 1.0; /* 渐变为半透明 */
    transition: opacity 0.3s ease; /* 添加平滑过渡 */
}


/* 当前页面菜单高亮 */
#ghost-sticky-header nav a.active {
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
}

/* 设置站点页眉logo尺寸 */
.gh-navigation-logo img {
    max-height: 35px;
    height: 100%;
}
    
/* 导航栏样式 */
.gh-navigation {
    display: flex;
    justify-content: space-between; /* 让 logo 和导航栏分开 */
    align-items: center;  /* 居中对齐 */
    padding: 0;  /* 减少 padding 使布局更加紧凑 */
    margin: 0;  /* 取消不必要的外边距 */
    gap:20px;
}


/* 菜单项靠近 LOGO */
.gh-navigation .gh-navigation-menu ul.nav {
    display: flex;
    gap: 30px; /* 菜单项间距，可微调 */
    margin: 0;
}

/* 导航菜单样式 */
#ghost-sticky-header nav a {
    color: #333;
    font-weight: 500;
    position: relative;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    text-decoration: none;
    padding: 0 0px;  /* 缩小菜单项之间的间距 */
}

/* 小屏幕优化：保持原汉堡菜单 */
@media (max-width: 768px) {
    #ghost-sticky-header { 
        position: relative; 
        box-shadow: none; /* 去掉阴影 */
    }
    .gh-navigation {
        flex-direction: row;  /* 在手机端保持 logo 和导航栏横向排列 */
        align-items: center;  /* 确保 logo 和汉堡按钮垂直居中对齐 */
        justify-content: space-between;  /* 确保它们之间有适当间距 */
        padding: 0 15px;  /* 给左右增加内边距 */
    }
    .gh-navigation-logo {
        margin-bottom: 0;  /* 移除 margin，确保 LOGO 不会偏移 */
    }
    /* 确保汉堡菜单与 logo 对齐 */
    .gh-burger {
        height: 35px;  /* 设置与 logo 相同的高度 */
        width: 35px;   /* 设置汉堡菜单图标的宽度 */
    }
    /* 给 LOGO 和汉堡菜单按钮添加内边距，使它们不至于过于靠近屏幕边缘 */
    .gh-navigation-brand, .gh-navigation-actions {
        padding-left: 0px;  /* 去除内边距 */
        padding-right: 0px; /* 去除内边距 */
    }
}

@media (max-width: 768px) {
    .gh-navigation .gh-navigation-brand {
        margin-left: 0;
    }
}