/* 论坛左上角：车体 Logo（hover/focus 展开导航下拉菜单） */
.clx-hl {
  display: flex;
  align-items: center;
  position: relative; /* 下拉菜单的定位基准 */
  /* 抵消 .container 的 15px gap → Logo ↔「车流侠论坛」间距 = 8px（15 - 7） */
  margin-right: -7px;
}
.clx-logo {
  display: block;
  width: 30.4px; /* 原 38px 缩小 20% */
  /* 让元素盒与车体图形等比例（113:72），盒底即图形底 */
  aspect-ratio: 113 / 72;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 0;
  cursor: pointer;
  /* 下移 2px：实测 Logo 墨迹下沿(y=34)比「车流侠论坛」文字下沿(y=36)高 2px，下移后两者下沿对齐。
     若日后调整标题字号，此值需重新量测。 */
  transform: translateY(2px);
  background-color: var(--header-color, #5e50ce);
  -webkit-mask: url("/assets/clx-logo.svg") center / contain no-repeat;
  mask: url("/assets/clx-logo.svg") center / contain no-repeat;
}
/* 「车流侠论坛」标题字号：当前 20.7px 减小 20% → 16.56px，不加粗 */
@media (min-width: 768px) {
  .App-header .Header-title { font-size: 16.56px; font-weight: normal; }
}

/* ==========================================================================
   Logo 导航下拉菜单（复刻主站首页汉堡菜单 .cola-side-menu，hover / focus 展开）
   ========================================================================== */
.clx-sidemenu {
  position: absolute;
  /* 对齐主站 .cola-side-menu（top:60px = 头部条下沿齐平悬挂）：
     Flarum 头部 52px，.clx-hl（Logo 盒）布局底在 35.7px，
     缺口 = 52 - 35.7 = 16.3px → 菜单顶恰好落在头部条下沿（2026-09-23 实测）。
     若日后调整头部高度或 Logo 尺寸，此值需重新量测。 */
  top: calc(100% + 16.3px);
  left: 0;
  width: 220px;
  padding: 14px 0;
  background: #fffbf5;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 300;
  text-align: left;
}
/* 悬停桥接：填补 .clx-hl 与菜单之间 16.3px 空隙，避免鼠标下移时菜单闪退 */
.clx-sidemenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
/* 展开：鼠标悬停 Logo / 键盘聚焦 Logo / 焦点在菜单内 */
.clx-hl:hover .clx-sidemenu,
.clx-logo:focus + .clx-sidemenu,
.clx-sidemenu:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.clx-sidemenu-nav a {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-size: 15px;
  color: #222;
  text-decoration: none;
  transition: background 0.15s;
}
.clx-sidemenu-nav a:hover { background: rgba(0, 0, 0, 0.04); }
.clx-divider {
  height: 1px;
  margin: 8px 16px;
  background: rgba(0, 0, 0, 0.08);
}
.clx-sidemenu-nav .clx-external::after {
  content: "↗";
  margin-left: auto;
  font-size: 13px;
  color: #888;
}
.clx-sidemenu-socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
  margin: 0 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.clx-sidemenu-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  transition: background 0.15s;
}
.clx-sidemenu-socials a:hover { background: #e0e0e0; }
.clx-sidemenu-socials svg { width: 18px; height: 18px; fill: currentColor; }
/* 移动端（<768px）：Flarum 用原生 .App-navigation 顶栏遮住 .App-header，
   故在顶栏左上角（原生汉堡右侧）再放一个同样的车体 Logo，保证手机端也能看到。
   桌面端 .App-navigation 被 display:none 隐藏，本 Logo 自然不显示，不会重复。 */
.clx-logo--nav {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 27.2px; /* 原 34px 缩小 20% */
  height: auto;
  z-index: 1;
}

/* ==========================================================================
   顶部「AI 模式」搜索胶囊（替换原「搜索论坛」框）
   风格对齐主站首页弹窗的 Google 风格关键字条；左沿对齐首页讨论列表。
   ========================================================================== */
.App-header .container { position: relative; } /* 让胶囊可相对头部容器绝对定位 */

.clx-topsearch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  display: flex;
  align-items: center;
  background: #fff;
  /* 首页胶囊是「白底 + 悬停投影」；论坛头部背景本身是浅色，故常驻一道浅描边保证可见 */
  border: 1px solid #dadce0;
  border-radius: 24px;
  padding: 0 4px 0 2px;
  box-shadow: 0 1px 2px rgba(32, 33, 36, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  z-index: 2;
}
.clx-topsearch:hover,
.clx-topsearch:focus-within {
  border-color: transparent;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.2);
}
.clx-topsearch input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0 4px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: #202124;
  font-family: "bmwTypeNext", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}
.clx-topsearch input::placeholder { color: #80868b; }

/* 左侧「+」：上传图片或文件（同主站首页弹窗 #barPlusAI） */
.clx-topsearch .clx-plus-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  transition: background 0.12s;
}
.clx-topsearch .clx-plus-btn:hover { background: #f1f3f4; }
.clx-topsearch .clx-plus-btn svg { width: 19.6px; height: 19.6px; display: block; }

/* 「AI 模式」胶囊：浅蓝底蓝字（同首页） */
.clx-topsearch .clx-ai-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5.04px;
  height: 33.6px;
  padding: 0 11.76px 0 8.4px;
  border: 0;
  border-radius: 16.8px;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 11.76px;
  font-weight: 500;
  letter-spacing: 0.2px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.clx-topsearch .clx-ai-btn:hover { background: #d3e3fd; }
.clx-topsearch .clx-ai-btn svg { width: 15.12px; height: 15.12px; color: #1a73e8; display: block; }

/* 仅手机端隐藏（≤767.98px 时 .App-header 已被原生 .App-navigation 顶栏遮住，胶囊本就不可见） */
@media (max-width: 767px) {
  .clx-topsearch { display: none !important; }
}

/* ==========================================================================
   原「搜索论坛」搬入首页左侧栏：位于「在线用户」卡片下方，宽度与卡片对齐
   （Flarum 的 GlobalSearch 是 readonly 触发器，点击打开全屏搜索弹窗；
     这里用外观一致的触发器承载同一行为，避免搬走框架托管的组件节点。）
   ========================================================================== */
.Page-sidebar .hw-search-slot { margin: 14px 0 0; }
.hw-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px;
  background: var(--body-bg, #fff);
  border: 1px solid var(--control-bg, #e8e8e8);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: #9aa0a6;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: text;
}
.hw-search-box:hover { border-color: #c9cdd4; }
.hw-search-box .icon { color: #9aa0a6; font-size: 14px; }