/* ========================================
   金陵比德 - 三级导航菜单修复样式
   文件名：nav-fix.css
   依赖：需在 style.css 之后加载
   ======================================== */

/* ----- 桌面端：三级子菜单悬停显示（向右滑出）----- */
@media (min-width: 1025px) {
  /* 三级菜单默认隐藏 */
  .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 8px 0;
    z-index: 1002;
  }
  /* 二级菜单项 hover 时显示三级菜单 */
  .dropdown-menu li.has-children:hover > .dropdown-submenu {
    display: block;
  }
  /* 给包含三级菜单的父项添加箭头指示 */
  .dropdown-menu li.has-children > a {
    position: relative;
    padding-right: 32px;
  }
  .dropdown-menu li.has-children > a::after {
    content: '›';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 16px;
  }
  /* 三级菜单小三角 */
  .dropdown-submenu::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 14px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 5px rgba(0,0,0,0.04);
  }
}

/* ----- 移动端：将三级菜单改为块级折叠容器 ----- */
@media (max-width: 1024px) {
  /* 二级菜单折叠容器（已由 main.js 控制 max-height，此处仅做基础样式） */
  .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #f9f9f9;
    padding: 0;
  }
  .dropdown-menu.open {
    max-height: 800px;
    padding: 8px 0;
  }
  /* 三级菜单折叠容器 */
  .dropdown-submenu {
    display: none;
    background: #f0f0f0;
    padding-left: 20px;
    margin: 0;
  }
  .dropdown-submenu.open {
    display: block;
  }
  /* 去掉桌面端的伪箭头 */
  .dropdown-menu li.has-children > a::after {
    display: none;
  }
  /* 移动端自定义按钮样式（由 nav-fix.js 动态生成） */
  .mobile-parent-toggle,
  .mobile-sub-toggle {
    position: absolute;
    right: 12px;
    top: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    font-size: 24px;
    font-weight: 300;
    color: #b38d54;
  }
  .mobile-parent-toggle {
    top: 2px;
  }
  .mobile-sub-toggle {
    top: 6px;
    width: 40px;
    height: 40px;
  }
  /* 确保相对定位容器 */
  .nav-item.has-dropdown,
  .dropdown-menu li.has-children {
    position: relative;
  }
}

/* ============================================
   三级菜单定位修复：与二级菜单平行、右侧紧贴
   ============================================ */

/* 仅桌面端生效 */
@media (min-width: 1025px) {
    /* 1. 确保二级菜单项保持相对定位（原样式已有，再次声明确保优先级） */
    .dropdown-menu li.has-children {
        position: relative;
    }

    /* 2. 三级菜单默认隐藏，悬停时显示 */
    .dropdown-submenu {
        position: absolute;
        left: 100%;           /* 左边缘紧贴父项右边缘 */
        top: 0;               /* 顶部与父项顶部平齐（垂直方向平行） */
        margin-left: 2px;     /* 微小间隙，避免边框重叠，视觉更舒适（可调） */
        min-width: 160px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        padding: 8px 0;
        z-index: 1002;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    /* 悬停父项时显示三级菜单 */
    .dropdown-menu li.has-children:hover > .dropdown-submenu {
        opacity: 1;
        visibility: visible;
    }

    /* 3. 修复二级菜单因为 left:50% + translate 导致三级菜单错位的问题
          - 确保 .dropdown-menu 的定位上下文不影响内部子菜单定位
          - 无需额外修改，因为 .dropdown-submenu 相对于 .has-children 定位
    */

    /* 4. 可选：当三级菜单超出右边界时，自动向左弹出（避免溢出屏幕） */
    .dropdown-submenu {
        right: auto;
        left: 100%;
    }
    /* 针对靠近右侧边缘的菜单：通过父级检测自动方向（此部分需要少量 JS，若不需要可删除）
       纯 CSS 方案可使用 :right 伪类? 无法完美，但可提供后备：如果三级菜单超出，手动添加 class。
       为了简单可靠，大部分情况 left:100% 足够，若需要智能反向，可保留下面 JS 辅助代码。
    */
}

/* 移动端保持原有折叠样式，无需改动 */