/* ============================================================================
   玻璃导航栏 · 样式
   ----------------------------------------------------------------------------
   来源：原 Code Snippets「悬浮导航栏」片段里的 <style>，内容逐字符未改。
   由 mu-plugins/hds-nav-assets.php 在 <head> 末尾引入（enqueue 优先级 99），
   这样它仍排在 hello-elementor/reset.css 与 global-styles 之后，层叠结果与
   内联在 <body> 时一致。

   ※ 本文件含几条 body 级规则（body::before 顶部占位、移动端 body 底部预留），
     这是导航组件本身需要的，请勿删除。
   ============================================================================ */

    /* 全局消除移动端点击蓝色高亮框与聚焦框 */
    .glass-top-btn, 
    .glass-top-btn:focus, 
    .glass-top-btn:active {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        outline: none !important;
    }

    /* 竖线分割线样式 */
    .nav-divider {
        width: 1px;
        height: 18px;
        background-color: rgba(0, 0, 0, 0.12);
        flex-shrink: 0;
        margin: 0 4px;
    }

    /* 通用按钮基础样式 */
    .glass-top-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 500;
        color: #1d1d1f;
        text-decoration: none;
        background-color: transparent;
        border: 0.5px solid transparent;
        cursor: pointer;
        white-space: nowrap;
        user-select: none;
        position: relative;
    }

    /* ========== 独立按钮基础样式 ========== */
    .glass-extra-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 0.5px solid rgba(255, 255, 255, 0.8);
        border-radius: 40px;
        padding: 8px 18px;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: #2563eb;
        text-decoration: none;
        letter-spacing: 0.1px;
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
        transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
        white-space: nowrap;
        pointer-events: auto;
    }

    .glass-extra-btn:hover {
        background: #ffffff;
        color: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 12px 32px -5px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    }

    .glass-extra-btn:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    }

    /* 1. PC 端样式（>680px）：顶部固定，独立按钮分离在导航栏左侧 */
    @media (min-width: 681px) {
        body::before {
            content: "";
            display: block;
            height: 55px;
            width: 100%;
        }

        body.home-overlay-mode::before {
            display: none;
        }

        .glass-top-nav {
            position: fixed;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99999;
            display: flex;
            align-items: center;
            width: 92%;
            max-width: 820px;
            padding: 6px;
            background-color: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 0.5px solid rgba(255, 255, 255, 0.8);
            border-radius: 40px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        /* PC端独立按钮：绝对定位在导航栏左侧外部，高度与质感统一，增加间距 */
        .glass-extra-btn {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            transform: translateX(calc(-100% - 12px)); /* 向左偏移自身宽度 + 12px 间距 */
            padding: 0 20px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: -0.2px;
            border-radius: 40px;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 0.5px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
            transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .glass-extra-btn:hover {
            transform: translateX(calc(-100% - 12px)) translateY(-1px);
            background: #ffffff;
            box-shadow: 0 12px 32px -5px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
        }

        .glass-extra-btn:active {
            transform: translateX(calc(-100% - 12px)) translateY(0);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
        }

        .glass-top-nav .home-btn {
            flex: 1;
        }

        .glass-scroll-wrapper {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 7;
            overflow: visible;
        }

        .glass-top-btn {
            flex: 1;
            padding: 7px 0;
            font-size: 13px;
            letter-spacing: -0.2px;
            border-radius: 20px;
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                        background-color 0.2s ease,
                        box-shadow 0.2s ease,
                        color 0.2s ease;
        }
    }

    /* 悬停与高亮状态 */
    .glass-top-btn:hover {
        color: #000000 !important;
        background-color: rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 0, 0, 0.04);
        transform: scale(1.02) translateY(-1px);
    }

    .glass-top-btn.active {
        color: #ffffff !important;
        font-weight: 600;
        background-color: #0071e3;
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 3px 10px rgba(0, 113, 227, 0.2), inset 0 1px 0.5px rgba(255, 255, 255, 0.3);
    }

    .glass-top-btn.active:hover {
        background-color: #0077ed;
        transform: scale(1.02) translateY(-1px);
    }

    .glass-top-btn:active,
    .glass-top-btn.active:active {
        transform: scale(0.94) translateY(0) !important;
        transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1) !important;
    }
    
    .glass-top-btn:active {
        background-color: rgba(0, 0, 0, 0.12);
    }

    .glass-top-btn.active:active {
        background-color: #0062c4 !important;
    }

    /* 2. 移动端样式（≤680px）：底部固定，独立按钮保持在导航栏上方 */
    @media (max-width: 680px) {
        body::before {
            display: none;
        }

        body {
            padding-bottom: 80px;
        }

        body.home-overlay-mode {
            padding-bottom: 0;
        }

        .glass-top-nav {
            position: fixed;
            bottom: 10px;
            top: auto;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99999;
            display: flex;
            align-items: center;
            width: 95%;
            padding: 5px;
            background-color: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 0.5px solid rgba(255, 255, 255, 0.8);
            border-radius: 40px;
            box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.06);
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        /* 移动端独立按钮：绝对定位在导航栏上方，使用系统字体 */
        .glass-extra-btn {
            position: absolute;
            left: 0;
            bottom: 100%;
            margin-bottom: 8px;
            min-height: 44px;
            padding: 8px 12px;
            font-size: 11.5px;
            border-radius: 16px;
            transform: none;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
            font-family: -apple-system, system-ui, BlinkMacSystemFont, sans-serif; /* 手机自带字体 */
        }

        .glass-extra-btn:hover {
            transform: translateY(-1px);
            background: #ffffff;
        }

        .glass-extra-btn:active {
            transform: translateY(0);
        }

        .glass-top-nav .home-btn {
            flex-shrink: 0;
        }

        .glass-scroll-wrapper {
            display: flex;
            align-items: center;
            gap: 5px;
            flex: 1;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            
            padding-left: 2px;
            padding-right: 28px; 
            scroll-behavior: smooth;
            
            -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 95%);
            mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 95%);
            transition: -webkit-mask-image 0.25s ease, mask-image 0.25s ease;
        }

        .glass-scroll-wrapper.at-end {
            -webkit-mask-image: none;
            mask-image: none;
        }

        .glass-scroll-wrapper::-webkit-scrollbar {
            display: none;
        }

        .glass-top-btn {
            flex: 0 0 auto;
            min-height: 44px;
            padding: 8px 12px;
            font-size: 12px;
            border-radius: 16px;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                        background-color 0.2s ease,
                        color 0.2s ease;
        }
    }

    /* ========== 站內搜尋 ========== */
    .glass-search-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        margin-left: 2px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #1d1d1f;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .2s ease, color .2s ease;
    }

    .glass-search-btn:hover {
        background: rgba(0, 0, 0, .06);
        color: #000000;
    }

    .glass-search-btn:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    .glass-search-btn svg {
        display: block;
    }

    .glass-search-panel {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: none;
        align-items: center;
        gap: 8px;
        padding: 0 6px 0 16px;
        margin: 0;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-radius: inherit;
        box-sizing: border-box;
    }

    .glass-top-nav.search-open .glass-search-panel {
        display: flex;
    }

    .glass-top-nav.search-open .glass-search-btn {
        visibility: hidden;
    }

    .glass-search-panel input[type="search"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        padding: 0;
        border: none;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        color: #111827;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
    }

    .glass-search-panel input[type="search"]::placeholder {
        color: #9ca3af;
    }

    .glass-search-go {
        flex: 0 0 auto;
        height: 32px;
        padding: 0 16px;
        border: none;
        border-radius: 18px;
        background: #2563eb;
        color: #ffffff;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color .2s ease;
    }

    .glass-search-go:hover {
        background: #1d4ed8;
    }

    .glass-search-close {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #6b7280;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
    }

    .glass-search-close:hover {
        background: rgba(0, 0, 0, .06);
        color: #111827;
    }

    /* 手機端：搜尋圖標浮在導航條右上方，與左側獨立按鈕左右對稱 */
    @media (max-width: 680px) {
        .glass-search-btn {
            position: absolute;
            right: 0;
            bottom: 100%;
            margin: 0 0 8px 0;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, .75);
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
        }

        .glass-search-btn:hover {
            background: #ffffff;
        }

        .glass-search-panel {
            padding-left: 12px;
        }

        .glass-search-panel input[type="search"] {
            font-size: 13px;
        }
    }

/* ============================================================================
   移动端定位修正 · 方案 A —— 导航条移到顶部，全部排成一行
   ----------------------------------------------------------------------------
   问题：移动端浏览器地址栏会随滚动收起 / 展开。导航条原本固定在底部
        （bottom: 10px），它相对「地址栏收起时的高度」定位；地址栏一展开，
        可视区变矮，导航条就落到可视区外面，被地址栏盖住。

   做法：① 移动端导航条改到顶部固定；
        ② 「人大建議成效」与「搜尋」两个按钮从「绝对定位浮在导航条外面」
           改回导航条内部的普通项，排成与电脑端一致的一行：
              [ 人大建議成效 ] [ 首頁 | AI視野 文章 新聞 視頻 … ] [ 搜尋 ]
            （这两个按钮在 HTML 里的位置本来就是「最前」和「最后」，
              只要取消绝对定位，就自然回到一行里的两端。）

   顶部占位 72px = 顶距 8 + 导航条 56 + 余量 8
   （按钮不再占用第二行，所以占位从两行版的 120px 降到 72px）

   本区块只作用于 ≤680px，电脑端不受任何影响。
   ============================================================================ */

@media (max-width: 680px) {
    /* 顶部占位 72px = 顶距 8 + 导航条 56 + 余量 8。
       首页也占位 —— 导航条不再压住轮播图，轮播图从它下方开始。 */
    body::before {
        display: block;
        content: "";
        height: 72px;
        width: 100%;
    }

    /* 覆盖原样式里「首页不占位」的规则。
       原规则是配合电脑端「导航浮在轮播图上」的浮层设计；移动端我们要求
       导航条不遮住轮播图，所以这里让它照常占位。
       （用 body.home 与 body.home-overlay-mode 双写：前者由服务器直出、
         后者由 JS 追加，两个都覆盖才彻底。） */
    body.home::before,
    body.home-overlay-mode::before {
        display: block;
    }

    body {
        padding-bottom: 0;
    }

    /* 导航条：底部 → 顶部 */
    .glass-top-nav {
        top: 8px;
        bottom: auto;
    }

    /* 「建議成效」：取消悬浮定位，回到一行最左边。
       文字竖排成两行（建議 / 成效），宽度只占两个字 —— 比原来的
       「人大建議成效」横向省下约 45px，留给中间的栏目横滑区。

       ★ 关键：这个按钮本身是 display:inline-flex，两个 <span> 是 flex 子项。
         光给 span 设 display:block 是没用的（flex 子项的 display 会被忽略），
         必须把容器改成 flex-direction:column 才会竖排。 */
    .glass-extra-btn {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        margin: 0;
        flex: 0 0 auto;
        flex-direction: column;
        width: 46px;
        min-height: 44px;
        padding: 5px 0;
        font-size: 11.5px;
        line-height: 1.3;
        text-align: center;
        border-radius: 16px;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 0.5px solid transparent;
        box-shadow: none;
        color: #2563eb;
        -webkit-tap-highlight-color: transparent;
    }

    .glass-extra-btn > span {
        display: block;
        width: 100%;
        text-align: center;
    }

    .glass-extra-btn:hover {
        background: rgba(0, 0, 0, 0.06);
        color: #1d4ed8;
        transform: none;
    }

    .glass-extra-btn:active {
        background: rgba(0, 0, 0, 0.12);
        color: #1d4ed8;
        transform: none;
    }

    /* 搜尋按钮：回到一行最右边，透明背景（与电脑端一致） */
    .glass-search-btn {
        position: static;
        top: auto;
        bottom: auto;
        right: auto;
        margin: 0 0 0 2px;
        width: 34px;
        height: 34px;
        background: transparent;
        border: none;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    .glass-search-btn:hover {
        background: rgba(0, 0, 0, .06);
    }

    .glass-search-btn:active {
        background: rgba(0, 0, 0, .12);
    }

    /* ★ 关键：这几个都是 <button> 元素，浏览器默认 appearance:button。
       在部分手机浏览器（尤其 iOS Safari）上，系统默认外观会盖掉我们写的
       背景色，导致按钮显示成系统配色 —— 不同浏览器可能偏红 / 偏橙。
       显式关掉 appearance，按钮就完全按我们的 CSS 渲染。 */
    .glass-search-btn,
    .glass-search-go,
    .glass-search-close {
        -webkit-appearance: none;
        appearance: none;
    }

    /* ★ 搜索输入框：字号必须 ≥16px。
       小于 16px 时，iOS Safari 会在聚焦输入框的一瞬间自动放大整个页面，
       看起来就像「搜索框突然变大、页面被撑开」。这是根因，不是样式写错。

       同时给它一个可见的浅灰底 + 圆角，让它看起来就是一个正常的输入框，
       而不是一片没有边界的空白。高度 36px 与旁边两个按钮一致。 */
    .glass-search-panel input[type="search"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 36px;
        padding: 0 14px;
        font-size: 16px;
        line-height: 36px;
        color: #111827;
        background: rgba(0, 0, 0, 0.05);
        border: 0;
        border-radius: 18px;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }

    .glass-search-panel input[type="search"]::placeholder {
        color: #9ca3af;
    }

    /* iOS 自带的搜索框「清除」小图标，去掉以免看起来突兀 */
    .glass-search-panel input[type="search"]::-webkit-search-cancel-button,
    .glass-search-panel input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    /* 「搜尋」提交按钮：写死颜色 + 关掉系统外观，避免任何浏览器的意外配色 */
    .glass-search-go {
        -webkit-tap-highlight-color: transparent;
        background: #2563eb;
        color: #ffffff;
    }

    .glass-search-go:active {
        background: #1d4ed8;
        color: #ffffff;
    }

    .glass-search-close {
        -webkit-tap-highlight-color: transparent;
    }

    .glass-search-close:active {
        background: rgba(0, 0, 0, .08);
        color: #111827;
    }

    /* ==========================================================================
       滚动性能优化：关掉移动端导航条的「毛玻璃模糊」
       --------------------------------------------------------------------------
       为什么要关：导航条是 position:fixed（永远在屏幕内），而 backdrop-filter
       要求浏览器「把导航条背后当前显示的内容抓过来做一次高斯模糊」。
       页面一滚动，背后的内容每一帧都在变 → 浏览器每一帧都要重算一次 20px 模糊。
       这在手机 GPU 上非常昂贵，是「上下滑动卡顿」的头号原因。

       为什么可以关：导航条底色本来就是 75% 白，把它提到 93% 白，
       视觉上几乎看不出区别（已截图对比），但省掉了每帧的模糊计算。
       电脑端不做改动 —— 桌面 GPU 算力足够，保留毛玻璃更好看。

       搜索面板同样处理（它展开时也盖在内容上）。
       ========================================================================== */
    .glass-top-nav,
    .glass-search-panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .glass-top-nav {
        background-color: rgba(255, 255, 255, 0.93);
    }

    .glass-search-panel {
        background: rgba(255, 255, 255, 0.98);
    }
}
