/* ============================================================================
 * WordPress 站点层覆盖（全站生效）
 * 1. 版头：新站设计（文字字标 + 导航 + 上传作品 + 合作垂询），替换 GP 默认页头
 * 2. 筛选条：取消吸附，避免浮在作品上遮挡
 * 3. 作品详情页的若干修正
 * 依赖 tokens.css 变量，全部写了兜底值。
 * ========================================================================== */

/* ---------------------------------------------------------------- 1. 版头 */
.lzd-site-header {
  position: relative;
  z-index: 50;
  background-color: var(--lzd-black-000, #08080A);
  border-bottom: 1px solid var(--lzd-overlay-track, rgba(242, 242, 244, 0.10));
}

.lzd-site-header .lzd-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lzd-space-06, 32px);
  height: var(--lzd-nav-h, 72px);
  width: 100%;
  max-width: calc(var(--lzd-container, 1440px) + var(--lzd-page-x, 32px) * 2);
  margin-inline: auto;
  padding-inline: var(--lzd-page-x, 32px);
}

/* 文字字标 */
.lzd-site-header .lzd-wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  border: 0;
}

.lzd-site-header .lzd-wordmark__svg {
  display: block;
  width: 168px;
  height: 24px;
  overflow: visible;
}

.lzd-site-header .lzd-wordmark__text {
  fill: var(--lzd-text-primary, #F2F2F4);
  font-family: var(--lzd-font-sans, sans-serif);
  font-size: 16px;
  font-weight: var(--lzd-fw-light, 300);
  letter-spacing: var(--lzd-ls-wordmark, 0.06em);
}

/* 导航 */
.lzd-site-header .lzd-nav__menu-list {
  display: flex;
  align-items: center;
  gap: var(--lzd-space-06, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lzd-site-header .lzd-nav__menu-list > li {
  margin: 0;
  padding: 0;
}

.lzd-site-header .lzd-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--lzd-touch-min, 44px);
  padding-inline: var(--lzd-space-01, 4px);
  font-family: var(--lzd-font-sans, sans-serif);
  font-size: var(--lzd-fs-label, 14px);
  font-weight: var(--lzd-fw-regular, 400);
  letter-spacing: var(--lzd-ls-label, 0.04em);
  color: var(--lzd-text-secondary, #A8A8B0);
  text-decoration: none;
  background: transparent;
  border: 0;
  transition: color .18s ease;
}

.lzd-site-header .lzd-nav__link::after {
  content: "";
  position: absolute;
  left: var(--lzd-space-01, 4px);
  right: var(--lzd-space-01, 4px);
  bottom: 8px;
  height: 1px;
  background-color: var(--lzd-underline, #D9A05B);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
}

.lzd-site-header .lzd-nav__link:hover,
.lzd-site-header .lzd-nav__link[aria-current="page"] {
  color: var(--lzd-text-primary, #F2F2F4);
}

.lzd-site-header .lzd-nav__link:hover::after,
.lzd-site-header .lzd-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* 上传作品：描边按钮 */
.lzd-site-header .lzd-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 var(--lzd-space-05, 24px);
  border: 1px solid var(--lzd-line-100, #2A2A30);
  border-radius: var(--lzd-radius-1, 2px);
  font-family: var(--lzd-font-sans, sans-serif);
  font-size: var(--lzd-fs-xs, 12px);
  font-weight: var(--lzd-fw-regular, 400);
  letter-spacing: var(--lzd-ls-label, 0.04em);
  color: var(--lzd-text-primary, #F2F2F4);
  text-decoration: none;
  background: transparent;
  transition: border-color .18s ease, background-color .18s ease;
}

.lzd-site-header .lzd-nav__btn:hover,
.lzd-site-header .lzd-nav__btn[aria-current="page"] {
  border-color: var(--lzd-text-secondary, #A8A8B0);
  background-color: rgba(242, 242, 244, 0.04);
  color: var(--lzd-text-primary, #F2F2F4);
}

/* 合作垂询：主色 + 左侧琥珀圆点 */
.lzd-site-header .lzd-nav__link--cta {
  padding-left: var(--lzd-space-05, 24px);
  color: var(--lzd-text-primary, #F2F2F4);
}

.lzd-site-header .lzd-nav__link--cta::before {
  content: "";
  position: absolute;
  left: var(--lzd-space-04, 16px);
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background-color: var(--lzd-accent, #D9A05B);
}

.lzd-site-header .lzd-nav__link--cta::after {
  left: var(--lzd-space-05, 24px);
}

/* 移动端开关与面板 */
.lzd-site-header .lzd-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: var(--lzd-touch-min, 44px);
  padding: 0;
  background: transparent;
  border: 1px solid var(--lzd-line-100, #2A2A30);
  border-radius: var(--lzd-radius-1, 2px);
  font-family: var(--lzd-font-sans, sans-serif);
  font-size: var(--lzd-fs-xs, 12px);
  letter-spacing: var(--lzd-ls-label, 0.04em);
  color: var(--lzd-text-primary, #F2F2F4);
  cursor: pointer;
}

.lzd-navpanel {
  background-color: var(--lzd-black-000, #08080A);
  border-bottom: 1px solid var(--lzd-overlay-track, rgba(242, 242, 244, 0.10));
  padding: var(--lzd-space-03, 12px) var(--lzd-page-x, 16px) var(--lzd-space-05, 24px);
}

.lzd-navpanel[hidden] {
  display: none;
}

.lzd-navpanel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lzd-navpanel__link {
  display: flex;
  align-items: center;
  min-height: var(--lzd-touch-min, 44px);
  padding: 0 var(--lzd-space-01, 4px);
  font-family: var(--lzd-font-sans, sans-serif);
  font-size: var(--lzd-fs-body, 16px);
  letter-spacing: var(--lzd-ls-label, 0.04em);
  color: var(--lzd-text-secondary, #A8A8B0);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 242, 244, 0.06);
}

.lzd-navpanel__link[aria-current="page"] {
  color: var(--lzd-text-primary, #F2F2F4);
}

/* ---------------------------------------------------------------- 2. 筛选条
 * 设计稿里筛选条是 sticky，但它会浮在作品卡片上遮挡画面。
 * WP 端改为常规文档流。 */
.lzd-filter,
.lzd-site .lzd-filter {
  position: static !important;
  top: auto !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------------------------------------------------------------- 3. 页脚 */
.site-footer,
.site-info {
  background-color: var(--lzd-black-000, #08080A);
  color: var(--lzd-text-tertiary, #7A7A84);
}

/* ---------------------------------------------------------------- 4. 详情页：播放按钮
 * 旧版 site.css 把 .lzd-play 做成「整框可点」的绝对定位层（inset:0 + 100% 宽高），
 * 与新设计的居中圆形按钮冲突，会把按钮顶到左上角。 */
.lzd-site .lzd-play {
  position: static;
  inset: auto;
  width: var(--lzd-play-size, 72px);
  height: var(--lzd-play-size, 72px);
}

/* ---------------------------------------------------------------- 5. 详情页：素材显影
 * 设计稿的图片靠 JS 加 .is-loaded 才显影（data-fade），模板未带那段脚本，
 * 这里让海报直接可见，避免出现空框。 */
.lzd-site .lzd-work__poster-img,
.lzd-site .lzd-player__poster {
  opacity: 1 !important;
}

/* 主按钮：旧样式表渲染成浅底深字，恢复设计稿的琥珀底 */
.lzd-site .lzd-btn--primary {
  background-color: var(--lzd-accent, #D9A05B);
  border-color: var(--lzd-accent, #D9A05B);
  color: var(--lzd-black-000, #08080A);
}

.lzd-site .lzd-btn--primary:hover,
.lzd-site .lzd-btn--primary:focus-visible {
  background-color: #E4B173;
  border-color: #E4B173;
  color: var(--lzd-black-000, #08080A);
}

/* ---------------------------------------------------------------- 6. 作品页：隐藏 GP 页头大图
 * GeneratePress 会把特色图像额外输出成 675px 高的横幅，
 * 在作品页等于把海报重复渲染一次，并把播放器挤出首屏。 */
body.lzd-work-page .featured-image.page-header-image {
  display: none !important;
}

/* ---------------------------------------------------------------- 7. 窄屏 */
@media (max-width: 900px) {
  .lzd-site-header .lzd-nav__menu {
    display: none;
  }

  .lzd-site-header .lzd-nav__toggle {
    display: inline-flex;
  }

  .lzd-site-header .lzd-nav__inner {
    height: var(--lzd-nav-h, 56px);
    padding-inline: 16px;
  }

  .lzd-site-header .lzd-wordmark__svg {
    width: 140px;
    height: 20px;
  }
}

@media (min-width: 901px) {
  .lzd-navpanel {
    display: none;
  }
}