/* ============================================================
 * 顶部导航栏样式（poetize 工具栏风格）
 * 移植自 poetize-ui/src/components/home.vue 的 toolbar
 * 特征：菜单 hover 变主题橙、图标缩放循环、底部下划线 0→100% 展开、
 *       顶部透明状态下悬停整栏压暗（半透明黑）
 * 图标使用 emoji（菜单配置里直接写），天然彩色无需着色
 * 注意：/nav/ 网址导航页面的样式在 nav-page.css，与此文件无关
 * ============================================================ */

:root {
  /* 导航栏 hover 主题色，想换色改这里 */
  --navbar-hover-color: #FFA500;
}

/* --- 字体字号：收窄字号、圆润字体、加字重与字距 --- */
#page-header #nav {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}

/* 站点名稍大稍粗，与菜单拉开层级 */
#page-header #nav .site-name {
  font-size: 19px;
  font-weight: 700;
}

/* --- 菜单项 hover：文字变橙色（覆盖主题白/蓝两种状态） --- */
/* 图标是 emoji，天然彩色，不强制变橙 */
#page-header #nav .menus_item:hover > .site-page,
#page-header #nav #search-button span.site-page:hover,
#page-header #nav #toggle-menu:hover span.site-page {
  color: var(--navbar-hover-color) !important;
}

/* --- 菜单图标 hover 缩放循环 --- */
/* 兼容 FontAwesome 图标（i）与 emoji 占位元素（i.fa-fw 或空白） */
#page-header #nav .menus_item:hover > .site-page > i:first-child {
  animation: navbarIconScale 1.5s ease-in-out infinite;
}

@keyframes navbarIconScale {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }
}

/* --- 菜单项底部下划线：从左 0 → 100% 展开 --- */
#page-header #nav .menus_item > .site-page {
  position: relative;
}

#page-header #nav .menus_item > .site-page::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  display: block;
  width: 100%;
  max-width: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--navbar-hover-color);
  transition: max-width 0.25s ease-in-out;
}

#page-header #nav .menus_item:hover > .site-page::after {
  max-width: 100%;
}

/* --- 下拉子菜单项 hover 变橙（文字统一，emoji 图标保持彩色） --- */
#page-header #nav .menus_item_child li a.site-page.child:hover {
  color: var(--navbar-hover-color) !important;
}

/* --- 顶部透明状态下，悬停导航栏整体压暗（半透明黑） --- */
/* 滚动后（nav-fixed）与无 banner 页（not-top-img）已有底色，不压暗 */
#page-header:not(.nav-fixed):not(.not-top-img) #nav:hover {
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
}