/**
 * nav-menu.css — header 二级菜单：横向排列 + 深色毛玻璃面板
 *
 * 载入顺序在 argon.css 之后（见 header.php），因此同特异性即可覆盖，
 * 无需 !important；只有覆盖 argon 自带 !important 的声明时才用。
 *
 * 结构约定（header.php）：.rc-nav-panel > .dropdown-menu-inner > 子项
 *   「页面」子项 = a.media（图标圆 + 标题）
 *   「分类」子项 = a.dropdown-item（药丸 chip）
 *
 * ≥992px：面板自身是毛玻璃，悬停展开。
 * <992px：汉堡卡片是毛玻璃，面板本身透明——不在已毛玻璃的容器内嵌套
 *         backdrop-filter，否则内层只会采样到已经模糊过的父层。
 */

/* ============================================
   面板本体
   ============================================ */

.rc-nav-panel {
    /* 压掉 argon 的 min-width:12rem（:14880）与 .dropdown-menu-xl 的 450px（:14964） */
    min-width: auto;
    max-width: min(680px, calc(100vw - 2rem));
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px; /* 与 home.css 大面积容器的 16px 一致 */
    background: rgba(20, 20, 25, 0.55);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.92);
}

/* argon 的箭头（:16052）是一块 background:#fff 的旋转方块，
   伪元素无法共享父级的 backdrop-filter，留着会在毛玻璃面板顶上戳出一个纯白方块 */
.navbar-nav .rc-nav-panel:before {
    display: none;
}

/* ============================================
   横向排列
   ============================================ */

/* 特异性需 ≥ argon 的 .navbar-nav .dropdown-menu-inner（:16110，(0,3,0)） */
.navbar-nav .rc-nav-panel .dropdown-menu-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    padding: 0;
}

/* argon 的 .navbar-nav .nav-item .media:not(:last-child) 给每行留了 1.5rem 下边距
   （:15997，(0,4,0)，且不在任何 media query 内）——横向排列必须清掉，间距交给 gap */
.navbar-nav .nav-item .rc-nav-panel .media {
    margin-bottom: 0;
}

/* ---- 「页面」子项 ---- */

.rc-nav-panel .dropdown-menu-inner > .media {
    flex: 0 0 auto;
    align-items: center;
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px; /* 与 steam-card.css 的悬浮卡片一致 */
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.rc-nav-panel .dropdown-menu-inner > .media:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none;
}

/* 图标圆：argon 默认 3rem 太大，横排放不下几个 */
.rc-nav-panel .icon {
    width: 2.25rem;
    height: 2.25rem;
}

.rc-nav-panel .icon-shape {
    padding: 8px;
}

.rc-nav-panel .icon-shape i {
    font-size: 1rem;
}

/* .ml-3 是 margin-left:1rem !important，compact chip 里偏宽 */
.rc-nav-panel .media-body {
    margin-left: 10px !important;
}

/* .heading 默认 uppercase + letter-spacing，且 .text-primary 是
   color:#979797 !important（argon:12317），在深色玻璃上对比度不足 */
.rc-nav-panel .heading {
    margin-bottom: 0 !important; /* 压 .mb-md-1 */
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* argon:14944 的 .dropdown-menu a.media:hover .heading 是 #172b4d !important，
   深色面板上一悬停就变成看不见的深色字 */
.rc-nav-panel .media:hover .heading {
    color: #fff !important;
}

/* ---- 「分类」子项 ---- */

.rc-nav-panel .dropdown-menu-inner > .dropdown-item {
    /* 压 argon 的 display:block; width:100% (:4241) —— 那两条是竖排的根因 */
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rc-nav-panel .dropdown-menu-inner > .dropdown-item:hover,
.rc-nav-panel .dropdown-menu-inner > .dropdown-item:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.20);
    text-decoration: none;
}

/* header.php 一直为当前分类输出 .current，但全主题从没给它写过样式 */
.rc-nav-panel .dropdown-menu-inner > .dropdown-item.current {
    font-weight: 600;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.26);
}

/* ============================================
   右侧账户入口
   ============================================ */

/* nav-link 默认是块级布局；改成 flex 才能让图标和用户名稳定同行 */
.navbar-nav .nav-account-link {
    display: flex;
    align-items: center;
    max-width: min(13rem, calc(100vw - 3rem));
}

/* 长用户名只在链接内截断，避免撑破导航栏；完整名称由 a[title] 提供 */
.navbar-nav .nav-account-link .nav-account-name {
    display: block;
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 桌面端图标与文字间距使用固定值，避免依赖全局 i 选择器的表现 */
@media (min-width: 992px) {
    .navbar-nav .nav-account-link i {
        margin-right: 0.375rem;
    }
}

/* 移动端汉堡菜单内占满可用宽度，继续保留单行省略 */
@media (max-width: 991.98px) {
    .navbar-nav .nav-account-link {
        max-width: 100%;
    }

    .navbar-nav .nav-account-link .nav-account-name {
        max-width: calc(100% - 1.5rem);
    }
}

/* ============================================
   桌面端（≥992px）：显隐
   ============================================ */

@media (min-width: 992px) {
    /* argon 的 .navbar-nav-hover 让面板常驻 display:block，仅用 opacity:0 藏起来
       （:16089）。补上 visibility:hidden，避免浏览器为一个不可见元素持续计算背景模糊；
       argon 的悬停规则 (0,6,0) 已经写了 visibility:visible，展开不受影响 */
    .navbar-nav.navbar-nav-hover .rc-nav-panel {
        visibility: hidden;
    }

    /* 触摸屏（平板横屏 ≥992px）没有 :hover，Bootstrap 点击只加 .show，
       而 .dropdown-menu.show 只有 (0,2,0) 压不住 (0,3,0) 的隐藏态——
       原本在这类设备上二级菜单是打不开的，这里一并修掉 */
    .navbar-nav.navbar-nav-hover .nav-item.dropdown > .rc-nav-panel.show {
        visibility: visible;
        transform: translate(0, 0);
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================
   移动端（<992px）
   ============================================ */

@media (max-width: 991.98px) {
    /* 汉堡卡片本身改成毛玻璃（argon:16247 原为实心 background:#fff + radius .25rem） */
    .navbar-collapse.collapsing,
    .navbar-collapse.show {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 16px;
        background: rgba(20, 20, 25, 0.55);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
    }

    /* 面板自身退成透明：玻璃由外层卡片提供，不做嵌套 backdrop-filter */
    .rc-nav-panel {
        max-width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }

    /* argon:16183 把移动端 nav-link 钉成 color:#172b4d !important，深色卡片上不可读 */
    .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    /* 关闭按钮的两根横条原为 #283448（argon:16221），深底上几乎看不见 */
    .navbar-collapse .navbar-toggler span {
        background: rgba(255, 255, 255, 0.9);
    }

    .navbar-collapse .navbar-collapse-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* header.php 的 .collapse-brand 里是 span.display-3，没有任何配色类 */
    .navbar-collapse .collapse-brand span {
        color: #fff;
    }

    /* chip 网格：间距和尺寸收紧 */
    .navbar-nav .rc-nav-panel .dropdown-menu-inner {
        gap: 6px;
        padding: 4px 0 8px;
    }

    .rc-nav-panel .dropdown-menu-inner > .media {
        padding: 6px 12px 6px 6px;
    }

    .rc-nav-panel .icon {
        width: 2rem;
        height: 2rem;
    }
}

/* ============================================
   不支持 backdrop-filter 时的兜底：提高不透明度保证可读
   （放在最后，靠顺序覆盖前面同特异性的 background）
   ============================================ */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .rc-nav-panel {
        background: rgba(20, 20, 25, 0.88);
    }

    @media (max-width: 991.98px) {
        .navbar-collapse.collapsing,
        .navbar-collapse.show {
            background: rgba(20, 20, 25, 0.92);
        }

        .rc-nav-panel {
            background: transparent;
        }
    }
}