/* =========================================================
   qqad.com.cn 顶部导航子菜单修复 v2 (nav-fix.css)
   ------------------------------------------------------------
   相对于线上旧版的关键变更：
   1) 修复移动端箭头显示为蓝色小方块的 bug：
      原因：common.css 的 .menu>ul>li>a:after（蓝色 2px 底部高亮条，
            width:0% → hover 100%）与本文件为子菜单父级添加的箭头
            ::after 是同一个伪元素；旧版未重置 width/height/background/
            position，导致渲染成 width:0 + border + height:2px +
            background:#0081cc 的小蓝色方块。
      修复：对 .has-submenu > a::after 用 !important 重置 width/height/
            background/position 为透明三角形所需的 0/0/transparent/static，
            并改用显式 border-left/right/top 组合三角形。
   2) 桌面端点击父级也能展开子菜单：增加 .dropdown-open 状态，
      hover 或 dropdown-open 都会显示子菜单；点击页面其它位置自动关闭。
   3) 响应式断点与站点对齐：<=1200px 走移动端（汉堡 + 点击展开），
      >1200px 走桌面端（hover + 点击）。

   注意：本文件通过提高选择器优先级 + !important + scoped media query
   保证在不修改 common.css / index.css 的前提下生效。
   引入方式：保留原 <link href="css/nav-fix.css"> 即可；如能控制 HTML，
   建议将其放在 common.css / index.css 之后，以确保级联优先级。
   ========================================================= */

/* -------------------- 桌面端 (>1200px) -------------------- */
@media (min-width: 1201px) {
  /* 父级 li 作为定位上下文 */
  .menu.top-nav.fl > ul > li,
  .menu.top-nav > ul > li {
    position: relative;
  }

  /* 核心修复 #1：common.css 给 .header-right 设置了 overflow:hidden，
     会把 position:absolute 的下拉子菜单裁掉，导致 hover / 点击展开都看不见。
     在桌面端强制改为 visible，让子菜单可溢出显示。 */
  .header-right {
    overflow: visible !important;
  }

  /* 子菜单默认隐藏（保留淡入观感） */
  .menu.top-nav.fl > ul > li > ul.submenu,
  .menu.top-nav > ul > li > ul.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 220px;
    margin-left: -110px;
    background: #fff;
    border: 1px solid #d8d8d8;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    display: block;
    transform: translateY(8px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
  }

  /* hover / focus / dropdown-open(点击) 都显示 */
  .menu.top-nav.fl > ul > li:hover > ul.submenu,
  .menu.top-nav > ul > li:hover > ul.submenu,
  .menu.top-nav.fl > ul > li:focus-within > ul.submenu,
  .menu.top-nav > ul > li:focus-within > ul.submenu,
  .menu.top-nav.fl > ul > li.dropdown-open > ul.submenu,
  .menu.top-nav > ul > li.dropdown-open > ul.submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
  }

  /* 子项视觉 */
  .menu.top-nav > ul > li > ul.submenu > li {
    height: 58px;
    line-height: 58px;
    font-size: 16px;
    position: relative;
    padding: 0 30px;
    cursor: pointer;
    transition: background .3s ease;
  }
  .menu.top-nav > ul > li > ul.submenu > li > a {
    display: block;
    color: #768994;
    line-height: 58px;
    transition: color .3s ease;
  }
  .menu.top-nav > ul > li > ul.submenu > li:hover {
    background: #f0f0f0;
  }
  .menu.top-nav > ul > li > ul.submenu > li:hover > a {
    color: #0081cc;
  }
}

/* -------------------- 移动 / 平板端 (<=1200px) -------------------- */
@media (max-width: 1200px) {
  /* 抽屉：.header-right.open 强行显示 */
  .header-right.open {
    display: block !important;
  }
  /* 汉堡激活态视觉 */
  .hamburger-box.active .hamburger-inner {
    background-color: #0081cc;
  }

  /* 子菜单默认收起（覆盖桌面定位/动效） */
  .menu.top-nav > ul > li > ul.submenu {
    display: none !important;
    position: static;
    width: 100% !important;
    margin: 0;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    border: none;
    box-shadow: none;
    background: #f7f9fa;
  }
  /* 父级 .open 时显示 */
  .menu.top-nav > ul > li.open > ul.submenu {
    display: block !important;
  }

  /* 子项样式 */
  .menu.top-nav > ul > li > ul.submenu > li {
    height: auto;
    font-size: 14px;
    padding: 0 16px;
  }
  .menu.top-nav > ul > li > ul.submenu > li > a {
    height: 50px;
    line-height: 50px;
    color: #768994;
    border-bottom: 1px solid #e6e6e6;
    display: block;
  }

  /* 核心修复：父级箭头 ::after
     强制覆盖 common.css 的 a:after（蓝色底部高亮条），
     使其呈现为真正的 CSS 三角形。 */
  .menu.top-nav > ul > li.has-submenu > a::after {
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-block !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid #768994 !important;
    border-bottom: 0 !important;
    transition: transform .25s ease;
  }
  .menu.top-nav > ul > li.has-submenu.open > a::after {
    transform: rotate(180deg);
  }
}