/* ============================================================
   JCW Header — 模板级 Custom CSS
   ------------------------------------------------------------
   分工：颜色 / 字号 / 字重 / 行高 / 字距 / 颜色 已在各元素的
   typography、background 设置里（面板可直接改）。
   这里只放元素面板表达不了的部分：栅格、间距、伪元素、
   状态切换、断点。改样式优先在元素设置里改，改不了再来这里。
   ============================================================ */

/* 组件私有令牌：变量挂 .jcw-header 而非 :root，
   且每个都带字面兜底（页眉是全站模板，首页令牌不一定在场）。 */
.jcw-header {
  --jcw-paper: var(--jmf-paper, #fbf9f5);
  --jcw-mist: var(--jmf-mist, #f7f2ea);
  --jcw-ink: var(--jmf-ink, #14100d);
  --jcw-ink-60: var(--jmf-ink-60, #3a322a);
  --jcw-ink-45: var(--jmf-ink-45, #524840);
  --jcw-gold: var(--jmf-gold, #b88222);
  --jcw-line: var(--jmf-line, rgba(184, 130, 34, 0.28));
  --jcw-line-soft: var(--jmf-line-soft, rgba(184, 130, 34, 0.13));
  --jcw-shell: var(--jmf-shell, 1312px);
  --jcw-body: var(--jmf-font-body, "Montserrat", "PingFang SC", "Microsoft YaHei", sans-serif);
  --jcw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* <a> / <button> 复位。用 :where() 把特异性归零，
   否则会盖过元素自身的颜色与背景（v5.2 蓝字坑第二形态）。 */
.jcw-header :where(a, button) {
  color: var(--jcw-ink);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* 1 ─ 内壳 */
.jcw-header__inner {
  max-width: var(--jcw-shell);
  margin-left: auto;
  margin-right: auto;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.jcw-header.is-scrolled {
  border-bottom: 1px solid var(--jcw-line-soft);
}

/* 2 ─ 品牌锁 */
.jcw-header__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.jcw-header__mark { display: block; line-height: 0; color: var(--jcw-gold); flex-shrink: 0;}
.jcw-header__mark svg { display: block; width: 100%; height: 100%; }
.jcw-header__word { display: block; }
.jcw-header__name {
  display: block;
  white-space: nowrap;
  font-family: var(--jcw-body);
}
.jcw-header__tag {
  display: block;
  margin-top: 3px;
  font-family: var(--jcw-body);
  text-transform: uppercase;
  white-space: nowrap;
}

/* 3 ─ 桌面导航 */
.jcw-header__nav { flex: 0 0 auto; }
.jcw-header__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 刻意不给 li 加 position，让 Mega 面板以页眉为定位父级才能通栏 */
.jcw-header__item { position: static; }
.jcw-header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: var(--jcw-body);
  white-space: nowrap;
  transition: color 0.22s var(--jcw-ease);
}
/* 下划线用伪元素，元素面板做不了 */
.jcw-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--jcw-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--jcw-ease);
}
.jcw-header__link:hover,
.jcw-header__link:focus-visible,
.jcw-header__item:hover > .jcw-header__link,
.jcw-header__item.is-open > .jcw-header__link,
.jcw-header__item:focus-within > .jcw-header__link {
  color: var(--jcw-ink);
}
.jcw-header__link:hover::after,
.jcw-header__link:focus-visible::after,
.jcw-header__item:hover > .jcw-header__link::after,
.jcw-header__item.is-open > .jcw-header__link::after,
.jcw-header__item:focus-within > .jcw-header__link::after {
  transform: scaleX(1);
}
.jcw-header__caret {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  color: var(--jcw-gold);
  transition: transform 0.24s var(--jcw-ease);
}
.jcw-header__caret svg { display: block; width: 100%; height: 100%; }
.jcw-header__item:hover > .jcw-header__link .jcw-header__caret,
.jcw-header__item.is-open > .jcw-header__link .jcw-header__caret {
  transform: rotate(180deg);
}

/* 4 ─ Mega 面板 */
.jcw-header__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--jcw-paper);
  border-bottom: 1px solid var(--jcw-line-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.24s var(--jcw-ease),
              transform 0.24s var(--jcw-ease),
              visibility 0s linear 0.24s;
}
.jcw-header__panel-inner {
  max-width: var(--jcw-shell);
  margin-left: auto;
  margin-right: auto;
  padding-top: 34px;
  padding-bottom: 38px;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}
.jcw-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(20px, 3vw, 44px);
}
.jcw-header__grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)) 300px; }
.jcw-header__grid--mega { grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; }
.jcw-header__col { min-width: 0; }
.jcw-header__coltitle {
  margin: 0 0 12px;
  font-family: var(--jcw-body);
  text-transform: uppercase;
}
.jcw-header__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.jcw-header__sublink {
  display: block;
  padding-top: 7px;
  padding-bottom: 7px;
  font-family: var(--jcw-body);
  transition: color 0.2s var(--jcw-ease), transform 0.2s var(--jcw-ease);
}
.jcw-header__sublink:hover,
.jcw-header__sublink:focus-visible {
  color: var(--jcw-ink);
  transform: translateX(3px);
}
.jcw-header__aside { padding: 22px 24px; }
.jcw-header__asidetitle { margin: 0 0 8px; font-family: var(--jcw-body); }
.jcw-header__asidetext { margin: 0 0 14px; font-family: var(--jcw-body); }
.jcw-header__asitelink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--jcw-body);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--jcw-line);
  transition: border-color 0.2s var(--jcw-ease);
}
.jcw-header__asitelink:hover { border-bottom-color: var(--jcw-gold); }

/* 5 ─ 动作区 */
.jcw-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.jcw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  font-family: var(--jcw-body);
  white-space: nowrap;
  transition: background-color 0.22s var(--jcw-ease), transform 0.22s var(--jcw-ease);
}
.jcw-cta:hover,
.jcw-cta:focus-visible { transform: translateY(-1px); }
.jcw-cta--sm { height: 36px; padding-left: 16px; padding-right: 16px; }

.jcw-header__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--jcw-line-soft);
  background: var(--jcw-paper);
  transition: border-color 0.2s var(--jcw-ease);
}
.jcw-header__burger:hover { border-color: var(--jcw-line); }
.jcw-header__burger span,
.jcw-header__burger::before,
.jcw-header__burger::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--jcw-ink);
  transform: translateX(-50%);
  transition: transform 0.26s var(--jcw-ease), opacity 0.18s linear;
}
.jcw-header__burger::before { top: 13px; }
.jcw-header__burger span { top: 50%; margin-top: -0.75px; }
.jcw-header__burger::after { bottom: 13px; }
.jcw-header__burger[aria-expanded="true"] span { opacity: 0; }
.jcw-header__burger[aria-expanded="true"]::before {
  top: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.jcw-header__burger[aria-expanded="true"]::after {
  bottom: calc(50% - 1.5px);
  transform: translateX(-50%) rotate(-45deg);
}

/* 6 ─ 移动端抽屉 */
.jcw-menu {
  position: fixed;
  left: 0;
  right: 0;
  /* 用 0 而不是固定高度：页眉实际 69px 而非 64px，写死会露缝 */
  top: 0;
  bottom: 0;
  z-index: 55;
  background: var(--jcw-paper);
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.26s var(--jcw-ease),
              transform 0.26s var(--jcw-ease),
              visibility 0s linear 0.26s;
}
.jcw-header.is-open .jcw-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.jcw-menu__body { padding-top: 72px; padding-bottom: 40px; }
.jcw-menu__group { border-bottom: 1px solid var(--jcw-line-soft); }
.jcw-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 19px;
  padding-bottom: 19px;
  font-family: var(--jcw-body);
  text-align: left;
}
.jcw-menu__caret {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  color: var(--jcw-gold);
  transition: transform 0.26s var(--jcw-ease);
}
.jcw-menu__group.is-open .jcw-menu__caret { transform: rotate(180deg); }
.jcw-menu__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--jcw-ease);
}
.jcw-menu__group.is-open .jcw-menu__panel { grid-template-rows: 1fr; }
.jcw-menu__panel > div { overflow: hidden; }
.jcw-menu__sub { margin: 0 0 12px; padding: 0 0 8px; list-style: none; display: grid; gap: 1px; }
.jcw-menu__sublink {
  display: block;
  padding: 11px 0 11px 14px;
  border-left: 1px solid var(--jcw-line-soft);
  font-family: var(--jcw-body);
}
.jcw-menu__cta { margin-top: 26px; }
.jcw-menu__cta .jcw-cta { width: 100%; height: 48px; }
.jcw-menu__note { margin: 14px 0 0; font-family: var(--jcw-body); }

/* 7 ─ 断点 */
@media (max-width: 1159px) {
  .jcw-header__nav { display: none; }
  .jcw-header__brand { margin-right: 0; }
  .jcw-header__inner { gap: 12px; }
  .jcw-header__burger { display: block; }
}
@media (max-width: 519px) {
  .jcw-header__actions .jcw-cta { display: none; }
  .jcw-header__name { font-size: 19px; }
  .jcw-header__tag { font-size: 8.5px; letter-spacing: 0.14em; }
}
@media (min-width: 1160px) {
  .jcw-menu { display: none; }
  .jcw-header__panel { pointer-events: none; }
  .jcw-header__item:hover > .jcw-header__panel,
  .jcw-header__item:focus-within > .jcw-header__panel,
  .jcw-header__item.is-open > .jcw-header__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
}
@media (min-width: 1160px) and (max-width: 1279px) {
  .jcw-header__grid--mega { grid-template-columns: repeat(2, minmax(0, 1fr)) 260px; }
  .jcw-header__grid--wide { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* 8 ─ 可访问性 */
.jcw-header :focus-visible { outline: 2px solid var(--jcw-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .jcw-header,
  .jcw-header__link,
  .jcw-header__link::after,
  .jcw-header__caret,
  .jcw-header__panel,
  .jcw-menu,
  .jcw-menu__panel,
  .jcw-menu__caret,
  .jcw-cta,
  .jcw-header__burger span,
  .jcw-header__burger::before,
  .jcw-header__burger::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
@media print {
  .jcw-header { position: static; box-shadow: none; }
  .jcw-header__nav, .jcw-header__actions, .jcw-menu { display: none; }
}

/* 9 ─ 锚点补偿：点导航标题时不被 sticky 页眉压住 */
html { scroll-padding-top: 84px; }

/* hover fix: nav hover area stretches to header bottom edge */
@media (min-width: 1160px) { .jcw-header__nav { align-self: stretch; display: flex; } }
.jcw-header__list { align-items: stretch; }
.jcw-header__item { display: flex; align-items: center; }