/* ==========================================================================
   Header (v2) — header.php
   v1 → v2：米白色横条 → 悬浮在 Hero 照片上的透明页头，下滑后变深色实底。
   米白横条把首屏大图切断了，沉浸感全无，而且"浅色条 + 深色内容"是模板结构。
   ★ 前提：客户必须给一版深底 logo（浅色字）。这条从"可选"变成"必须"。
   ========================================================================== */

.hpb-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--hpb-dur) var(--hpb-ease),
              border-color var(--hpb-dur) var(--hpb-ease),
              backdrop-filter var(--hpb-dur) var(--hpb-ease);
}

.hpb-header.is-scrolled {
  background: rgba(15, 13, 10, 0.92);
  border-bottom-color: var(--hpb-line);
  backdrop-filter: blur(14px);
}

.hpb-header__inner {
  height: var(--hpb-header-h);
  max-width: var(--hpb-container);
  margin-inline: auto;
  padding-inline: var(--hpb-gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* --------------------------------------------------------------------------
   Logo（文字占位，等客户的深底版 PNG/SVG）
   -------------------------------------------------------------------------- */
.hpb-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-right: auto;
  color: var(--hpb-text);
}

.hpb-logo__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  font-family: var(--hpb-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hpb-brass);
  border: 1px solid var(--hpb-line-strong);
}

.hpb-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.hpb-logo__text strong {
  font-family: var(--hpb-font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hpb-logo__text em {
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--hpb-brass);
}

/* --------------------------------------------------------------------------
   导航
   -------------------------------------------------------------------------- */
.hpb-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.25rem);
}

.hpb-nav a {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-size: var(--hpb-fs-2xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237, 231, 220, 0.72);
  transition: color var(--hpb-dur) var(--hpb-ease);
}

.hpb-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hpb-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hpb-dur) var(--hpb-ease);
}

.hpb-nav a:hover,
.hpb-nav a[aria-current="page"] { color: var(--hpb-champagne); }
.hpb-nav a:hover::after,
.hpb-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   汉堡
   -------------------------------------------------------------------------- */
.hpb-navtoggle {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--hpb-line-strong);
  border-radius: var(--hpb-radius);
  cursor: pointer;
}
.hpb-navtoggle span {
  display: block;
  width: 18px; height: 1px;
  margin: 4px auto;
  background: var(--hpb-text);
  transition: transform var(--hpb-dur) var(--hpb-ease), opacity var(--hpb-dur) var(--hpb-ease);
}
.hpb-navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hpb-navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hpb-navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   移动端
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .hpb-navtoggle { display: block; order: 3; }
  .hpb-header__cta { order: 2; }

  .hpb-nav {
    position: fixed;
    inset: var(--hpb-header-h) 0 auto 0;
    background: rgba(15, 13, 10, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hpb-line);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--hpb-dur) var(--hpb-ease);
  }
  .hpb-nav.is-open { clip-path: inset(0 0 0 0); }

  .hpb-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--hpb-gutter) 1.5rem;
  }
  .hpb-nav li + li { border-top: 1px solid var(--hpb-line-soft); }
  .hpb-nav a { padding-block: 1.1rem; font-size: var(--hpb-fs-xs); }
  .hpb-nav a::after { display: none; }
}

@media (max-width: 560px) {
  .hpb-header__cta { display: none; }
  .hpb-logo__mark { display: none; }
  .hpb-logo__text strong { font-size: 1.05rem; }
}