/* =============================================================
   nav-fix.css — 导航栏权威布局层（2026-08-16）
   ─────────────────────────────────────────────────────────────
   根因复盘：
   header.php 使用 BEM 类（.topnav__inner / .topnav__nav /
   .topnav__actions / .topnav__hamburger），而 layout.css 只为
   旧式单连字符类（.topnav-inner / .topnav-links / .topnav-right）
   定义了完整 flex 布局。二者类名不同，导致实际导航三栏
   （品牌｜导航｜操作区）「完全没有 flex 布局」而垂直堆叠；
   同时平板宽度（481–1023px）下 desktop 导航（.topnav__nav）与
   汉堡按钮（.topnav__hamburger）被不同文件同时置为可见 → 重叠。
   ─────────────────────────────────────────────────────────────
   本层补全 BEM 类完整布局，并规范全断点折叠行为。
   必须在 layout.php 中「最后」加载，作为导航布局的权威终局层。
   ============================================================= */

/* 1) 基础：三栏水平布局 */
.topnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--space-6, 24px);
    position: relative;
}

.topnav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
    z-index: 2;
}

.topnav__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.topnav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto; /* 右对齐，避免被 nav 的 flex:1 挤压 */
}

/* 已登录用户按钮：横向 */
.topnav__user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 汉堡菜单：桌面隐藏 */
.topnav__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    flex-shrink: 0;
}

.topnav__hamburger svg {
    width: 22px;
    height: 22px;
    color: var(--color-text-primary, #1a1a1a);
}

/* 2) 桌面端（≥1024px）：完整导航 + 登录/注册 + 用户按钮 */
@media (min-width: 1024px) {
    .topnav__nav { display: flex; }
    .topnav__actions .btn { display: inline-flex; }
    .topnav__user-btn { display: inline-flex; }
    .topnav__hamburger { display: none; }
}

/* 3) 平板/移动（<1024px）：折叠为汉堡菜单，
      隐藏桌面导航、登录/注册与用户按钮，消除重叠 */
@media (max-width: 1023.98px) {
    .topnav__nav { display: none !important; }
    .topnav__actions .btn { display: none !important; }
    .topnav__user-btn { display: none !important; }
    .topnav__hamburger { display: inline-flex !important; }
}

/* 4) 移动端菜单面板：与导航栏高度对齐，避免遮挡 */
.topnav__mobile-menu {
    position: fixed;
    top: var(--topbar-height, 64px);
    left: 0;
    right: 0;
}