@charset "UTF-8";
/*
 * A6 页头样式。
 *
 * 视觉来源：A4 预览页头实测（a6-header-baseline.json 与
 * a4-header-detail-baseline.json）。宽度来源：2026-10-13 用户裁定
 * 「按新标准组件最大宽度 1920」，容器 .hbot1-container 在
 * theme/style.css 定义断点。
 *
 * 字体：主题自带 Montserrat latin woff2（400/500/600/700），来源
 * @fontsource/montserrat；A4 未打包字体时浏览器回退 Arial——用户
 * 反馈"字体样式不对"的根因，因此这里必须先声明 @font-face。
 */
/* ---------- Montserrat 自托管 ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* 统一缓动：A4 全部过渡使用 tailwind ease-in-out 等价曲线 */
.hbot1-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.05);
}

/* ---------- 顶栏 ---------- */
.hbot1-header__topbar {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #f4f5f7;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16px;
  font-weight: 400;
  color: #4b5563;
}

/* A4: hidden lg:flex —— ≤767px 不显示顶栏 */
.hbot1-header__topbar--hidden-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hbot1-header__topbar--hidden-mobile {
    display: flex;
  }
}
.hbot1-header__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* 2026-10-14 v3：顶栏与主行一致加 80px 两侧内边距 */
  padding-left: 80px;
  padding-right: 80px;
}

.hbot1-header__topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ---------- 新闻轮播（A4 NewsTicker） ---------- */
/* A4: relative w-full max-w-lg h-full flex justify-center items-center overflow-hidden */
.hbot1-header__ticker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 512px;
  height: 100%;
  overflow: hidden;
}

/* A4 动画元素：absolute truncate px-4；淡入淡出 0.4s */
.hbot1-header__ticker-item {
  position: absolute;
  max-width: 100%;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: #4aa3c7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbot1-header__ticker-item.is-active {
  opacity: 1;
  transform: translateY(0);
}

.hbot1-header__ticker-item:hover {
  text-decoration: underline;
}

/* ---------- 顶栏 Blog 链接（A4: 16px #2b2b2b，hover 150ms） ---------- */
.hbot1-header__blog-link {
  font-size: 16px;
  font-weight: 400;
  color: #2b2b2b;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbot1-header__blog-link:hover {
  color: #025792;
}

/* ---------- 语言选择 ---------- */
.hbot1-header__language {
  position: relative;
}

.hbot1-header__language-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: #2b2b2b;
  cursor: pointer;
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hbot1-header__language-button:hover {
  color: #025792;
}

.hbot1-header__language-globe {
  width: 16px;
  height: 16px;
  color: #6b7280;
  flex-shrink: 0;
}

.hbot1-header__language-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.hbot1-header__language-chevron {
  width: 14px;
  height: 14px;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hbot1-header__language-button[aria-expanded=true] .hbot1-header__language-chevron {
  transform: rotate(180deg);
}

.hbot1-header__language-list {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  min-width: 168px;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.hbot1-header__language-list[hidden] {
  display: none;
}

.hbot1-header__language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #333333;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.hbot1-header__language-option:hover {
  background-color: #f9fafb;
  color: #025792;
}

.hbot1-header__language-option.is-current {
  background-color: #f9fafb;
  font-weight: 600;
  color: #025792;
}

/* ---------- 主行 ---------- */
/*
 * 2026-10-14 用户裁定：取消滚动收缩动效。主行恒定 120px、logo 恒定 36px，
 * 不再有滚动态修饰符类与 height 过渡。回归守卫：
 * theme/tests/no-scroll-shrink.test.js。
 */
.hbot1-header__main-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 120px;
  /* 2026-10-14 v2：导航区两侧 80px 内边距（用户裁定） */
  padding-left: 80px;
  padding-right: 80px;
}

.hbot1-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hbot1-header__brand-link {
  display: flex;
  align-items: center;
}

.hbot1-header__logo {
  width: auto;
  height: 36px;
}

.hbot1-header__nav-slot {
  /* 2026-10-14 v4：flex-grow 让文本区在 logo 与搜索框之间扩展，
   * 到 1000px 上限为止；此前无 grow 收缩到内容宽 890px，
   * space-between 无富余空间可分，间距只有默认 24px（用户反馈太窄）。 */
  max-width: 1000px;
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  align-items: center;
}

/* 文本区内部：核心导航块撑满文本区，链接水平均布 */
.hbot1-header__nav-slot .wp-block-navigation {
  width: 100%;
}

.hbot1-header__nav-slot .wp-block-navigation .wp-block-navigation__container {
  width: 100%;
  justify-content: space-between;
  /* 核心块默认 blockGap 24px 会限制最小间距；清零后
   * 间距完全由 space-between 均分富余空间决定（更宽松）。 */
  gap: 0;
}

/* ---------- 桌面搜索框（A4: 144×38 全圆角，≥1400px 显示） ---------- */
.hbot1-header__search {
  position: relative;
  display: none;
  align-items: center;
  margin-left: auto;
}

.hbot1-header__search-input {
  width: 144px;
  height: 38px;
  padding: 8px 12px 8px 36px;
  font-size: 14px;
  color: #111827;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  outline: none;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbot1-header__search-input::placeholder {
  color: #6b7280;
}

.hbot1-header__search-input:focus {
  border-color: #111827;
}

.hbot1-header__search:hover .hbot1-header__search-input {
  background-color: #ffffff;
}

.hbot1-header__search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: #9ca3af;
  pointer-events: none;
}

/* A4: min-[1400px]:flex —— 仅宽视口显示桌面搜索 */
@media (min-width: 1400px) {
  .hbot1-header__search {
    display: flex;
  }
}
/* ---------- 汉堡菜单 ---------- */
.hbot1-header__burger-wrap {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.hbot1-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  background: none;
  color: #4b5563;
  cursor: pointer;
}

.hbot1-header__burger:hover {
  color: #111827;
}

.hbot1-header__burger-icon {
  width: 24px;
  height: 24px;
}

/*
 * 断点：1280px。
 * A4 用 Tailwind 的 xl（1280px）在桌面导航与汉堡之间切换，
 * 实测 1200px 视口已是汉堡态。桌面导航显示、汉堡隐藏；
 * ≤1279px 反过来。
 */
@media (min-width: 1280px) {
  .hbot1-header__burger-wrap {
    display: none;
  }
}
@media (max-width: 1279px) {
  .hbot1-header__nav-slot {
    display: none;
  }
}
/* ---------- 导航链接 hover（A4: color .3s → #025792） ---------- */
.hbot1-header__nav-slot .wp-block-navigation a.wp-block-navigation-item__content {
  color: #2b2b2b;
  /* 2026-10-14 v3：用户裁定导航字体最大 20px（A4 为 17px，有意偏差） */
  font-size: 20px;
  /* A4: transition-[height,color] duration-300 ease-in-out。
   * 2026-10-14：滚动收缩取消后高度不再变化，只保留 color 过渡。 */
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbot1-header__nav-slot .wp-block-navigation a.wp-block-navigation-item__content:hover {
  color: #025792;
}

/* 当前页高亮（A4: isActive → #025792） */
.hbot1-header__nav-slot .wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content,
.hbot1-header__nav-slot .wp-block-navigation a.wp-block-navigation-item__content[aria-current=page] {
  color: #025792;
}

/* ---------- 下拉子菜单动画（A4: 200ms opacity + translateY(6px)） ---------- */
/*
 * wp:navigation 的子菜单容器是核心块的
 * .wp-block-navigation__submenu-container；桌面态默认隐藏，
 * 父项 hover 时展开，带 A4 的渐变动画。
 */
.hbot1-header__nav-slot .wp-block-navigation .wp-block-navigation__submenu-container {
  /* A4 下拉外观：白底、下圆角 12px、阴影、min-width 240px */
  min-width: 240px;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  padding: 10px 0;
  /* A4 动画：transition-all duration-200 + translate-y-1.5（6px） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
}

/* 父项 hover（或键盘聚焦）时展开 */
.hbot1-header__nav-slot .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.hbot1-header__nav-slot .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 下拉项：16px/22px，#333，hover #025792 + 浅灰底 */
.hbot1-header__nav-slot .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: #333333;
  padding: 10px 20px;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbot1-header__nav-slot .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: #025792;
  background-color: rgba(249, 250, 251, 0.8);
}

/* 父项箭头：hover 旋转 180deg（A4: group-hover:rotate-180） */
.hbot1-header__nav-slot .wp-block-navigation-submenu__toggle svg,
.hbot1-header__nav-slot .wp-block-navigation__submenu-icon svg {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbot1-header__nav-slot .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle svg,
.hbot1-header__nav-slot .wp-block-navigation-item:hover > a ~ .wp-block-navigation__submenu-icon svg {
  transform: rotate(180deg);
}
