/* ============================================================
   分类导航：多级下拉菜单样式
   Bootstrap 5 官方已移除对二级及以上下拉菜单的支持，
   二级 .dropdown-menu 默认 display:none 且无展开逻辑，
   故需在此补全「定位 + 显隐 + 层级」。

   交互约定：
     - 桌面端（≥992px）：鼠标悬停展开（顶级向下、子级向右），父项仍可点击进入分类页
     - 移动端（<992px）：点击展开/收起（由 nav-multilevel.js 给 li 加 .show）

   引入位置：须在 bootstrap 的 css 之后，例如放进
   templates/<主题>/css/style.css 末尾。
   ============================================================ */

/* ---------- 桌面端（≥992px）：悬停展开 ---------- */
@media (min-width: 992px) {

    /* 作为子菜单的定位参照，不加会导致子菜单相对 body 定位而飞出视口 */
    .navbar-nav .nav-item.dropdown,
    .navbar-nav .dropdown-submenu {
        position: relative;
    }

    /* 顶级下拉：出现在导航项正下方 */
    .navbar-nav .nav-item.dropdown > .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0;
        display: none;
        z-index: 1000;
    }
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* 二级及以下：向右弹出 */
    .navbar-nav .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        /* 负外边距补齐视觉间隙，避免鼠标从父项移到子菜单途中 hover 断连 */
        margin-top: -0.5rem;
        margin-left: -0.25rem;
        display: none;
        /* 必须高于上级菜单，否则会被兄弟菜单盖住 */
        z-index: 1001;
    }
    .navbar-nav .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    /* 子菜单触发项的箭头由「向下」转到「向右」 */
    .navbar-nav .dropdown-submenu > .dropdown-toggle::after {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
    }
}

/* ---------- 移动端（<992px）：降级为纵向点击展开 ---------- */
@media (max-width: 991.98px) {

    .navbar-nav .nav-item.dropdown > .dropdown-menu,
    .navbar-nav .dropdown-submenu > .dropdown-menu {
        position: static;
        display: none;
        border: 0;
        box-shadow: none;
    }

    /* 由 JS 添加 .show 来展开，兼顾触屏与键盘 */
    .navbar-nav .nav-item.dropdown.show > .dropdown-menu,
    .navbar-nav .dropdown-submenu.show > .dropdown-menu {
        display: block;
    }

    /* 移动端箭头保持指向下 */
    .navbar-nav .dropdown-submenu > .dropdown-toggle::after {
        position: static;
        transform: none;
    }
}
