/* ========================================
   1. 最外层导航容器
   ======================================== */

.global-navigation-wrap {
    position: relative;
    z-index: 100;

    /* 图标颜色：菜单关闭时 */
    --nav-icon-color: #000000;

    /* 图标颜色：菜单打开时 */
    --nav-icon-open-color: #000000;
}

/* 导航栏 */
.global-navigation-bar {
    position: relative;
    z-index: 2;
}

/* ========================================
   2. 展开面板
   ======================================== */

.global-navigation-panel {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    width: 100%;
    height: 90lvh;
    overflow-y: auto;

    z-index: 1;
}

/* 展开时显示 */
.global-navigation-wrap.is-open .global-navigation-panel {
    display: block;
}

/* 展开时禁止背景页面滚动 */
body.nav-test-scroll-locked {
    overflow: hidden;
}

/* ========================================
   3. WordPress 导航按钮
   ======================================== */

/* 清除按钮原有外观，只保留点击区域 */
.global-navigation-toggle .wp-block-button__link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 取消触屏时的默认高亮闪烁 */
    -webkit-tap-highlight-color: transparent;

    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;

    font-size: 0;
    line-height: 1;

    /* 菜单关闭时的图标颜色 */
    color: var(--nav-icon-color);

    background-color: transparent;
    background-image: linear-gradient(currentColor,
            currentColor);
    background-repeat: no-repeat;
    background-size: 20px 2px;
    background-position: center;

    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-size 0.3s ease,
        color 0.2s ease;
}

/* 悬停、按下时不添加背景或边框 */
.global-navigation-toggle .wp-block-button__link:hover,
.global-navigation-toggle .wp-block-button__link:active,
.global-navigation-toggle .wp-block-button__link:focus {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* 键盘操作时保留可见焦点提示 */
.global-navigation-toggle .wp-block-button__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ========================================
   4. 第一条和第三条横线
   ======================================== */

.global-navigation-toggle .wp-block-button__link::before,
.global-navigation-toggle .wp-block-button__link::after {
    content: "";
    position: absolute;
    left: 50%;

    display: block;
    width: 20px;
    height: 2px;

    background: currentColor;
    transform-origin: center;

    transition: all 0.3s ease;
}

/* 第一条横线 */
.global-navigation-toggle .wp-block-button__link::before {
    top: calc(50% - 7px);
    transform: translateX(-50%);
}

/* 第三条横线 */
.global-navigation-toggle .wp-block-button__link::after {
    top: calc(50% + 5px);
    transform: translateX(-50%);
}

/* ========================================
   5. 菜单打开状态
   ======================================== */

/* 打开时切换图标颜色 */
.global-navigation-wrap.is-open .global-navigation-toggle .wp-block-button__link {
    color: var(--nav-icon-open-color);

    /* 中间横线消失 */
    background-size: 0 2px;
}

/* 第一条旋转 */
.global-navigation-wrap.is-open .global-navigation-toggle .wp-block-button__link::before {
    top: 50%;
    transform: translateX(-50%) rotate(135deg);
}

/* 第三条反向旋转 */
.global-navigation-wrap.is-open .global-navigation-toggle .wp-block-button__link::after {
    top: 50%;
    transform: translateX(-50%) rotate(-135deg);
}

/* ========================================
   6. 响应式导航：断点 768px
   ======================================== */

/* 桌面端：大于 768px */
.navigation-original-block {
    display: block;
}

.global-navigation-button {
    display: none;
}

/* 移动端和平板：小于等于 768px */
@media (max-width: 768px) {

    /* 隐藏原始导航 */
    .navigation-original-block {
        display: none;
    }

    /* 显示包裹 Buttons 的 Group */
    .global-navigation-button {
        display: block;
    }
}