/* ============================================================
   e-karwash 导航下拉子菜单
   移植自 newwatt 官网 (wpo-site-header sub-menu) 实现：
   桌面(≥992px) 纯 CSS hover：白底阴影、top 110%→100% 滑入、0.3s 过渡
   移动端(<992px) 抽屉内子菜单缩进（折叠由 custom.js 的 li.has-sub>a 处理）
   ============================================================ */

/* ---------- 桌面端 ---------- */
@media screen and (min-width: 992px) {

    /* 导航头部层级须高于二级页波浪横幅内容(z2)与首页轮播，
       否则下拉子菜单会被横幅盖住；仍低于移动抽屉(1000)与视频弹窗(2000) */
    .web_header {
        position: relative;
        z-index: 10;
    }

    .menu_scroll ul li {
        position: relative;
    }

    /* 新增一级栏目为无 href 的 <a>，Bootstrap 的
       a:not([href]):not([tabindex]){color:inherit} 特异性(0,2,1)高于模板
       .web_menu_wrapper ul>li>a(0,1,2)，导致继承到灰色；这里以更高特异性显式对齐 */
    .menu_scroll ul > li.has-sub > a {
        color: #111;
    }
    .menu_scroll ul > li.has-sub:hover > a,
    .menu_scroll ul > li.has-sub.active > a,
    .menu_scroll ul > li.active.has-sub > a {
        color: #63c000;
    }

    /* 子菜单纵向排列：模板 .web_menu_wrapper ul>li{float:left} 会级联进子菜单 */
    .menu_scroll ul li .sub-menu li {
        float: none;
        display: block;
        width: 100%;
    }

    .menu_scroll ul li .sub-menu {
        background: #ffffff;
        box-shadow: 0 2px 20px 0 rgba(62, 65, 159, 0.09);
        width: 225px;
        position: absolute;
        padding: 15px 7px;
        left: 0;
        top: 110%;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        /* 不加过渡：某些环境(后台标签页/省电模式) rAF 冻结会让过渡停在第一帧，
           导致子菜单看起来"被页面内容挡住"；瞬时显隐在所有环境都稳定 */
        list-style: none;
        margin: 0;
        border-radius: 4px;
    }

    /* 核心：hover 一级项显示子菜单 */
    .menu_scroll ul li:hover > .sub-menu {
        top: 100%;
        visibility: visible;
        opacity: 1;
    }

    .menu_scroll ul li .sub-menu li a {
        display: block;
        padding: 10px 15px;
        color: #1a1a1a;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        border-radius: 4px;
    }

    .menu_scroll ul li .sub-menu li a:hover {
        color: #63c000;
        background: #f3f9ee;
    }

    /* 父项小箭头 */
    .menu_scroll ul li.has-sub > a:after {
        content: "\f107"; /* fa-angle-down */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 12px;
        margin-left: 5px;
        opacity: 0.7;
    }

    /* hover 父项时箭头变色 */
    .menu_scroll ul li.has-sub:hover > a:after {
        color: #63c000;
        opacity: 1;
    }
}

/* ---------- 移动端抽屉(<992px) ---------- */
@media screen and (max-width: 991px) {

    /* 父项(无href)颜色跟随抽屉，避免 Bootstrap inherit 走样 */
    #web_cssmenu ul li.has-sub > a {
        color: inherit;
    }

    /* 子菜单默认收起（custom.js 的 slideDown/slideUp 控制） */
    #web_cssmenu ul ul {
        list-style: none;
        margin: 0;
        padding: 0 0 0 20px;
        display: none;
    }

    #web_cssmenu ul ul li {
        float: none;
        display: block;
        width: 100%;
    }

    #web_cssmenu ul ul li a {
        font-size: 14px;
        opacity: 0.85;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* 父项箭头 */
    #web_cssmenu ul li.has-sub > a:after {
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 12px;
        margin-left: 6px;
        opacity: 0.7;
    }

    #web_cssmenu ul li.open > a:after {
        content: "\f106"; /* fa-angle-up 展开时朝上 */
    }
}