/* source/css/custom_nav_plus.css */

/* ==============================
   功能 1: 导航栏底部进度条
   ============================== */
#nav {
    /* 定义 CSS 变量默认值，防止 JS 未加载时报错 */
    --scroll-width: 0%;
}

#nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px; /* 进度条厚度 */
    width: var(--scroll-width); /* 由 JS 动态控制 */
    background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); /* 少女粉/极光色，可自行修改 */
    box-shadow: 0 0 5px rgba(255, 154, 158, 0.7); /* 发光效果 */
    transition: width 0.1s ease-out; /* 丝滑跟手 */
    z-index: 1001;
}

/* ==============================
   功能 2: 动效流 (图标放大 + 文字流光)
   ============================== */

/* 图标悬停：放大 + 摇摆 */
#nav .menus_item:hover > a > i {
    transform: scale(1.2) rotate(15deg);
    color: #49b1f5; /* 图标变色 */
    transition: all 0.3s ease-in-out;
}

/* 文字悬停：流光渐变 */
#nav .menus_item:hover > a > span {
    background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    background-size: 200% auto; /* 放大背景以支持流动 */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
    animation: shine 2s linear infinite; /* 增加流动动画 */
}

/* 定义流光动画关键帧 */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* ==============================
   功能 3: Logo 绝对居中 (杂志风格)
   ============================== */

/* 仅在电脑端生效 (min-width: 768px) */
@media screen and (min-width: 768px) {
    /* 强制 Logo 居中 */
    #nav #blog_name {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 1000; /* 保证在最上层 */
    }

    /* 微调菜单位置，避免太挤 */
    #nav #menus {
        /* 如果你的菜单在右边，为了视觉平衡，可以稍微加一点右边距 */
        padding-right: 20px; 
    }
}


/* --- 修复菜单文字偏下问题 --- */

/* 1. 强制菜单容器垂直居中 */
#nav #menus {
    display: flex !important;
    align-items: center !important;
    height: 100%; /* 继承导航栏高度 */
}

/* 2. 确保每个菜单项（图标+文字）垂直居中 */
#nav .menus_item {
    display: flex !important;
    align-items: center !important;
    height: 100%;
    /* 2026-09-03 这条从未生效：custom.css 里有 margin: 0 !important 压着它。
       菜单间距现在统一在 custom.css 的 #nav .menus_items 用 gap 控制。 */
    /* margin: 0 10px; */
}

/* 3. 终极修正：如果上面的还不灵，强制修正 a 标签 */
#nav .menus_item > a {
    display: flex;
    align-items: center;
    height: 100%; 
}

/* 4. 微调图标和文字的相对位置（可选） */
#nav .menus_item > a > i {
    margin-right: 4px; /* 图标和文字稍微拉开点距离 */
    transform: translateY(-1px); /* 图标如果看着歪，可以微调这个值 */
}