/* ============================================================
   全站 HUD 外观（hud-chrome）
   前提：inc/hud-dark.php 已在 wp_head 最早期把 data-theme 钉成 dark，
   并且移除了明暗切换入口。这里只做三件事：
   ① 二级菜单：暗色玻璃 + 切角 + 分层展开动画；右侧竖排导航向左弹出
   ② 两个搜索入口（顶栏内联 / 弹窗）统一暗色 HUD 面板
   ③ 用户头像统一成内联 SVG（主题没有默认头像，Gravatar 取不到就是破图）
   ============================================================ */

:root,
html[data-theme="dark"] {
  --hud-bg: #0B0F17;
  --hud-panel: #0F1520;
  --hud-panel-2: #131B27;
  --hud-line: #38D9FF;
  --hud-line-dim: rgba(56, 217, 255, 0.28);
  --hud-ink: #DCE9F2;
  --hud-ink-dim: #8AA3B4;
  --hud-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* ============================================================
   一、明暗切换：整站只留暗色，入口全部撤掉
   ============================================================ */
.theme-toggle,
.mobile-nav__row--switch {
  display: none !important;
}

/* ============================================================
   二、二级菜单
   ============================================================ */

/* ---- 2.1 面板本体：暗色玻璃 + 右上切角 + 扫描式纵向展开 ---- */
.nav-list > li > .sub-menu,
.nav-list .sub-menu .sub-menu {
  background:
    linear-gradient(180deg, rgba(19, 27, 39, 0.98), rgba(9, 13, 20, 0.98)) !important;
  border: 1px solid var(--hud-line-dim) !important;
  border-radius: 2px !important;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(56, 217, 255, 0.06) inset !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 8px 6px !important;
  min-width: 196px !important;
  /* 展开动画：从顶部一条缝往下扫开 */
  opacity: 0;
  visibility: visible !important;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.3s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.16s ease;
}

.nav-list > li > .sub-menu {
  margin-top: 6px !important;
  transform: translateY(0) !important;
  transform-origin: top center;
  clip-path: inset(0 0 100% 0);
}

/* 一级项 hover / 键盘聚焦：展开 */
.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.34s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.16s ease;
}

/* 三级同理（二级项 hover） */
.nav-list .sub-menu li:hover > .sub-menu,
.nav-list .sub-menu li:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
}

/* ---- 2.2 条目：左侧亮线 + 缩进推移，逐条错开进场 ---- */
.nav-list > li > .sub-menu li,
.nav-list .sub-menu .sub-menu li {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.nav-list > li:hover > .sub-menu li,
.nav-list > li:focus-within > .sub-menu li,
.nav-list .sub-menu li:hover > .sub-menu li {
  opacity: 1;
  transform: translateY(0);
}

.nav-list > li:hover > .sub-menu li:nth-child(1) { transition-delay: 0.04s; }
.nav-list > li:hover > .sub-menu li:nth-child(2) { transition-delay: 0.07s; }
.nav-list > li:hover > .sub-menu li:nth-child(3) { transition-delay: 0.1s; }
.nav-list > li:hover > .sub-menu li:nth-child(4) { transition-delay: 0.13s; }
.nav-list > li:hover > .sub-menu li:nth-child(5) { transition-delay: 0.16s; }
.nav-list > li:hover > .sub-menu li:nth-child(6) { transition-delay: 0.19s; }
.nav-list > li:hover > .sub-menu li:nth-child(n + 7) { transition-delay: 0.21s; }

.nav-list > li > .sub-menu li a,
.nav-list .sub-menu .sub-menu li a {
  font-family: var(--hud-mono) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em;
  color: var(--hud-ink-dim) !important;
  padding: 8px 12px 8px 14px !important;
  border-radius: 0 !important;
  border-left: 1px solid transparent;
  background: transparent !important;
  transition: color 0.15s, border-color 0.15s, padding-left 0.18s, background 0.18s;
}

.nav-list > li > .sub-menu li a:hover,
.nav-list .sub-menu .sub-menu li a:hover {
  color: var(--hud-line) !important;
  background: linear-gradient(90deg, rgba(56, 217, 255, 0.13), rgba(56, 217, 255, 0) 78%) !important;
  border-left-color: var(--hud-line);
  padding-left: 20px !important;
}

/* 有下级的二级项：右侧箭头换成细的 */
.nav-list .sub-menu li.menu-item-has-children > a::after {
  border-color: var(--hud-line-dim);
}

/* ---- 2.3 首页右侧竖排频道柱：一律向左弹出，否则会被视口右边裁掉 ---- */
:is(body.bridge-home, .bridge-home) .site-nav--inline {
  overflow: visible !important; /* 父主题/旧版设过 overflow:auto，会把下拉整个裁掉 */
}

/* 一级与二级原来隔 14px 纯空当，鼠标一快就跨过去 ⇒ :hover 断掉、菜单瞬间收起。
   现在缝收到 2px（肉眼看还是分得开，因为二级自带一层底 + 阴影），
   再用 li::after 铺一条透明桥接带把这段缝连同二级比一级高出的那 8px 一起盖住。 */
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: 0;
  right: 100%;
  width: 16px;
}

:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li > .sub-menu {
  left: auto !important;
  right: calc(100% + 2px) !important;
  top: -8px !important;
  margin-top: 0 !important;
  text-align: right;
  /* 从右往左横向扫开 */
  clip-path: inset(0 0 0 100%);
  transition:
    clip-path 0.3s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.16s ease;
}

:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li:hover > .sub-menu,
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li:focus-within > .sub-menu {
  clip-path: inset(0 0 0 0);
}

:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li > .sub-menu li a {
  text-align: right;
  border-left: 0;
  border-right: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, padding-right 0.18s, background 0.18s;
}

:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li > .sub-menu li a:hover {
  border-right-color: var(--hud-line);
  padding-left: 12px !important;
  padding-right: 20px !important;
  background: linear-gradient(270deg, rgba(56, 217, 255, 0.13), rgba(56, 217, 255, 0) 78%) !important;
}

/* 三级也向左，不能从右边顶出去；缝同样收到 2px，否则三级同样会"追不上" */
:is(body.bridge-home, .bridge-home) .site-nav--inline .sub-menu .sub-menu {
  left: auto !important;
  right: calc(100% + 2px) !important;
  top: -8px !important;
  margin-left: 0 !important;
}
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list .sub-menu > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: 0;
  right: 100%;
  width: 16px;
}

/* 竖排频道柱里，有下级的项补一个向左的小箭头 */
:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 9px;
  border-left: 1px solid var(--hud-line-dim);
  border-bottom: 1px solid var(--hud-line-dim);
  transform: rotate(45deg) translateY(-1px);
  transition: border-color 0.15s, transform 0.2s;
}

:is(body.bridge-home, .bridge-home) .site-nav--inline .nav-list > li.menu-item-has-children:hover > a::after {
  border-color: var(--hud-line);
  transform: rotate(45deg) translate(-2px, 1px);
}

/* ---- 2.4 移动端抽屉：父主题（main.min.css）在 .mobile-nav__menu 里把二级菜单
   改成"静态缩进列表"，靠 display:none / .open 折叠。这里必须整套复位 ——
   否则上面那套 hover 动画会把它变成"展开了但 opacity:0 且被 clip-path 全裁掉"，
   表现就是「二级显示不全」。 ---- */
.mobile-nav__menu .nav-list > li > .sub-menu,
.mobile-nav__menu .nav-list .sub-menu .sub-menu {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: none !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-width: 0 !important;
  padding: 0 0 4px 16px !important;
  margin: 0 !important;
  text-align: left !important;
}

.mobile-nav__menu .nav-list > li > .sub-menu li,
.mobile-nav__menu .nav-list .sub-menu .sub-menu li {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.mobile-nav__menu .nav-list .sub-menu li a {
  font-family: var(--hud-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  color: var(--hud-ink-dim) !important;
  padding: 9px 10px 9px 12px !important;
  border-left: 1px solid rgba(56, 217, 255, 0.16) !important;
  border-right: 0 !important;
  background: none !important;
  text-align: left !important;
}

.mobile-nav__menu .nav-list .sub-menu li a:hover,
.mobile-nav__menu .nav-list .sub-menu li a:active {
  color: var(--hud-line) !important;
  border-left-color: var(--hud-line) !important;
  background: linear-gradient(90deg, rgba(56, 217, 255, 0.12), transparent 80%) !important;
  padding-left: 16px !important;
}

/* 抽屉外壳与内部的卡片块：父主题用 --bg-body / --bg-card，偏灰，统一到 HUD 深蓝黑 */
.site-nav--mobile { background: var(--hud-bg) !important; }

.mobile-nav__group,
.mobile-nav__grid,
.mobile-nav__menu,
.mobile-nav__user-card {
  background: rgba(15, 21, 32, 0.92) !important;
  border-radius: 2px !important; /* 父主题是 14px 大圆角，科幻风改成切角方board */
}

/* 移动端菜单竖排（父主题已这么做，这里兜住被 base 规则带成横排的情况） */
.mobile-nav__menu .nav-list {
  flex-direction: column !important;
  gap: 0 !important;
}

.mobile-nav__menu .nav-list > li > a,
.mobile-nav__menu .nav-list .menu-item-row > a {
  color: var(--hud-ink) !important;
  font-family: var(--hud-mono) !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
}

.mobile-nav__row,
.mobile-nav__grid-item { color: var(--hud-ink) !important; }

.mobile-nav__grid-label,
.mobile-nav__user-role { color: var(--hud-ink-dim) !important; }

/* ============================================================
   三、搜索：顶栏内联输入 + 弹出面板，统一暗色 HUD
   ============================================================ */

/* ---- 3.0 顶栏内联搜索框：父主题原来是半透明白（rgba(255,255,255,.1)），
   在暗底上整块发白，这里换成 HUD 面板。首页/文章页有更细的定位规则在
   bridge-chrome.css，本条负责分类页、标签页、搜索页等其余场景。 ---- */
.site-header__search {
  background: rgba(14, 20, 32, 0.72) !important;
  border: 1px solid var(--hud-line-dim) !important;
  border-radius: 1px !important;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.site-header__search:focus-within {
  background: rgba(14, 20, 32, 0.9) !important;
  border-color: var(--hud-line) !important;
  box-shadow: 0 0 16px rgba(56, 217, 255, 0.16);
}

.site-header__search-input {
  font-family: var(--hud-mono) !important;
  color: var(--hud-ink) !important;
  letter-spacing: 0.02em;
}

.site-header__search-input::placeholder { color: rgba(138, 163, 180, 0.55) !important; }
.site-header__search-icon { color: var(--hud-line-dim) !important; }

.search-modal__overlay {
  background: rgba(4, 7, 12, 0.74) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 面板上方的一行读数标签，给弹窗一点"终端检索"的气质 */
.search-modal__content::before {
  content: "▸ SEARCH / 站内检索";
  display: block;
  margin-bottom: 8px;
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--hud-line);
  opacity: 0.72;
}

.search-modal__form {
  position: relative;
  background: linear-gradient(180deg, rgba(19, 27, 39, 0.98), rgba(9, 13, 20, 0.98)) !important;
  border: 1px solid var(--hud-line-dim) !important;
  border-radius: 2px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(56, 217, 255, 0.07) inset !important;
  height: 54px !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* 弹窗进场：从上方压下来 + 横向收拢 */
.search-modal.open .search-modal__form {
  animation: hud-search-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes hud-search-in {
  from { opacity: 0; transform: translateY(-16px) scaleX(0.94); }
  to { opacity: 1; transform: translateY(0) scaleX(1); }
}

/* 切角处补一条斜边描边（clip-path 会把 1px 边框一起裁掉） */
.search-modal__form::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background: linear-gradient(
    225deg,
    transparent 46%,
    var(--hud-line-dim) 48%,
    var(--hud-line-dim) 52%,
    transparent 54%
  );
  pointer-events: none;
}

/* 底部一条来回扫过的光 */
.search-modal__form::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud-line), transparent);
  animation: hud-search-scan 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hud-search-scan {
  0%, 100% { opacity: 0.25; transform: scaleX(0.35); }
  50% { opacity: 0.95; transform: scaleX(1); }
}

.search-modal__icon { color: var(--hud-line-dim) !important; }

.search-modal__input {
  font-family: var(--hud-mono) !important;
  color: var(--hud-ink) !important;
  background: transparent !important;
  letter-spacing: 0.02em;
}

.search-modal__input::placeholder { color: rgba(138, 163, 180, 0.6) !important; }

.search-modal__close {
  color: var(--hud-ink-dim) !important;
  border-radius: 1px !important;
}

.search-modal__close:hover {
  background: rgba(56, 217, 255, 0.12) !important;
  color: var(--hud-line) !important;
}

/* ---- 3.3 站名占位方块：父主题给的是主题色 #409EFF 实心方块，
   在 HUD 配色里像一块外来补丁。桌面端页头已散点化用不到，
   这里管住移动端回退后的 sticky 顶栏。 ---- */
.site-logo-placeholder {
  background: rgba(56, 217, 255, 0.12) !important;
  color: var(--hud-line) !important;
  border: 1px solid var(--hud-line-dim);
  border-radius: 2px !important;
}

.site-logo {
  font-family: var(--hud-mono) !important;
  color: var(--hud-ink) !important;
}

/* ============================================================
   四、用户菜单（头像由 js/hud-global.js 换成内联 SVG）
   ============================================================ */.user-dropdown {
  background: linear-gradient(180deg, rgba(19, 27, 39, 0.98), rgba(9, 13, 20, 0.98)) !important;
  border: 1px solid var(--hud-line-dim) !important;
  border-radius: 2px !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(14px);
}

.user-menu-link {
  color: var(--hud-ink) !important;
  border-radius: 0 !important;
}

.user-menu-link:hover {
  background: linear-gradient(90deg, rgba(56, 217, 255, 0.13), transparent 80%) !important;
  color: var(--hud-line) !important;
}

.user-dropdown .dropdown-divider { border-color: rgba(56, 217, 255, 0.14) !important; }
.user-dropdown-name { color: var(--hud-ink) !important; }
.user-dropdown-email { color: var(--hud-ink-dim) !important; }

/* 头像：js/hud-global.js 已把 src 换成内联 SVG 人形（data URI），
   这里只补边框与 hover，元素本身与主题的尺寸规则原样保留。 */
.user-avatar,
.user-dropdown-avatar {
  border-color: rgba(56, 217, 255, 0.32) !important;
  background: #0F1520;
}

.user-menu:hover .user-avatar {
  border-color: var(--hud-line) !important;
  box-shadow: 0 0 14px rgba(56, 217, 255, 0.35);
}

.user-dropdown-avatar {
  border-radius: 2px !important;
}

.mobile-nav__avatar {
  border: 1px solid rgba(56, 217, 255, 0.32);
  border-radius: 2px !important;
  background: #0F1520;
}