/*
 * ==========================================
 * 模块定位：全局导航 (Global Navigation) - 桌面与移动端终极合并版 (适配内嵌箭头 DOM)
 * 代码类型：CSS
 * ==========================================
 * 1. 业务功能：重构 GeneratePress 导航菜单，彻底修复移动端内嵌下拉箭头无法靠右的问题。
 * 2. 修复与 SEO 优化：匹配真实 DOM 树（箭头位于 a 标签内部）；利用 flex + space-between 将文本与箭头拉开至两端；严格保证内部箭头触发器拥有独立 48px 安全触控区，防御 GSC 报错与误触。
 * 3. 针对页面：全局 Header
 * 4. 性能开销：<0.1ms (一次性全量解析，无冗余层叠)
 * 最后修改：2026-03-27 12:12 (UTC+8) - 底层架构级重构
 */

:root {
    /* 严格遵守命名空间规范，隔离第三方插件样式污染 */
    --mx-nav-bg-dark: #222222;
    --mx-nav-bg-blue: #1e88e5;
    --mx-nav-text: #ffffff;
}

/* 核心防线：全局无障碍焦点 (A11y) 强制覆盖，满足欧美 SEO 审计标准 */
.main-navigation a:focus-visible,
.main-navigation .dropdown-menu-toggle:focus-visible {
    outline: 2px solid var(--mx-nav-bg-blue) !important;
    outline-offset: -2px;
}

/* =========================================
   1. 电脑端 (Desktop) - 独立站悬浮菜单架构
   适用屏幕宽度: > 768px
   ========================================= */
@media (min-width: 769px) {
    /* 下拉容器：开启 GPU 硬件加速 */
    .main-navigation ul ul {
    background-color: var(--mx-nav-bg-dark);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0; /* <--- 已经全部改为直角 */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: none;
    transform: translateZ(0); 
    will-change: transform, opacity;
}

    .main-navigation ul ul li,
    .main-navigation ul ul li a {
        background-color: transparent;
        color: var(--mx-nav-text);
    }

    /* 悬停动画防抖 */
    .main-navigation ul ul li a {
        padding-left: 15px; 
        transition: background-color 0.2s ease, padding-left 0.2s ease;
    }
    
    /* 精确路由高亮：仅作用于当前 Item 或 Hover Item */
    .main-navigation ul ul li:hover > a,
    .main-navigation ul ul li.current-menu-item > a {
        background-color: var(--mx-nav-bg-blue);
        padding-left: 20px; 
    }
}

/* =========================================
   2. 手机端 (Mobile) - B2B 侧边栏与交互终极修复
   适用屏幕宽度: <= 768px
   ========================================= */
@media (max-width: 768px) {
    /* [核心修复] 直接针对 <a> 标签进行 Flexbox 两端对齐重构 */
    .main-navigation.toggled .main-nav ul li > a {
        display: flex;
        align-items: center;
        justify-content: space-between; /* 物理拦截：将内部的文本和箭头拉开到两端 */
        width: 100%;
        min-height: 48px; /* 强制 48px 安全热区防御 GSC */
        box-sizing: border-box;
        background-color: var(--mx-nav-bg-dark); 
        color: var(--mx-nav-text);
        border-left: 4px solid transparent; 
        padding-left: 16px;
        padding-right: 0; /* 移除 a 标签原生右边距，交由内部箭头热区接管 */
        word-break: break-word;
    }

    /* 独立下拉箭头容器：在 a 标签内部划定 48x48px 安全热区并居中图标 */
    .main-navigation.toggled .main-nav ul li > a .dropdown-menu-toggle {
        min-width: 48px;
        height: 48px; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 子级容器降级渲染，降低移动端 GPU 负担 */
    .main-navigation.toggled .main-nav ul ul {
        background-color: #1a1a1a; 
        box-shadow: none;
        border: none;
    }

    .main-navigation.toggled .main-nav ul ul li > a {
        padding-left: 36px; 
        border-left: 4px solid transparent;
    }

    /* [核心修复] 拦截触屏点击带来的伪类残留与 GP 动态类名污染 */
    .main-navigation.toggled .main-nav ul li:hover > a,
    .main-navigation.toggled .main-nav ul li:focus > a,
    .main-navigation.toggled .main-nav ul li:active > a,
    .main-navigation.toggled .main-nav ul li.sfHover > a {
        background-color: var(--mx-nav-bg-dark) !important;
        color: var(--mx-nav-text) !important;
    }

    /* 当前路由精准匹配：强化优先级，防止被上方状态拦截器误杀 */
    .main-navigation.toggled .main-nav ul li.current-menu-item > a,
    .main-navigation.toggled .main-nav ul li.current-menu-item:hover > a,
    .main-navigation.toggled .main-nav ul li.current-menu-item.sfHover > a {
        color: var(--mx-nav-bg-blue) !important;            
        border-left-color: var(--mx-nav-bg-blue) !important; 
        background-color: var(--mx-nav-bg-dark) !important; 
    }

    /* 下拉触发器箭头重置与状态锁定 */
    .main-navigation.toggled .main-nav ul li.menu-item-has-children .dropdown-menu-toggle,
    .main-navigation.toggled .main-nav ul li:hover > a .dropdown-menu-toggle,
    .main-navigation.toggled .main-nav ul li.sfHover > a .dropdown-menu-toggle {
        background-color: transparent !important;
        color: var(--mx-nav-text) !important;
    }

    /* 移动端业务逻辑：强制渲染当前层级 DOM 树，提升 INP */
    .main-navigation.toggled .main-nav ul li.current-menu-ancestor > ul {
        display: block; 
    }
}
/* ----------逻辑结束---------- */