/* Components use the page's existing header/footer styles without adding a layout box. */
site-header,
site-footer {
  display: contents;
}

/* 接口无数据时的占位提示（GTQ.emptyHtml() 输出） */
.gtq-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 28px 16px;
  box-sizing: border-box;
  color: #8a929e;
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  background: rgba(0, 0, 0, 0.015);
  border: 1px dashed rgba(0, 0, 0, 0.14);
  border-radius: 6px;
}

/* 正文仅一张图片时（GTQ.html() 输出的 .gtq-solo-image 包裹）：
   居中展示，并去掉后台编辑器写入的固定宽度，让图片按原始尺寸适度放大 */
.gtq-solo-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  text-align: center;
}

.gtq-solo-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
}

/* 行内占位（标题/单值字段用，无边框不占高） */
.gtq-empty--inline {
  display: inline;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  opacity: 0.6;
}

/* 占位元素无内容时整体隐藏：接口数据被清空/禁用后页面直接显示空白 */
.gtq-empty:empty,
.empty-state:empty {
  display: none !important;
}

/* ============================================================
   全站页头统一（以首页样式为基准，site-header 前缀提高优先级，
   覆盖各页面 CSS 中不一致的 logo 尺寸、字号与背景色定义）
   ============================================================ */
site-header .topbar {
  background: #b8332a !important;
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
}

site-header .topbar-inner {
  max-width: 1200px;
  height: 36px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

site-header .topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

site-header .topbar .slogan {
  letter-spacing: 2px;
}

site-header .topbar .lang a,
site-header .topbar a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

site-header .header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #f0f0f0;
}

site-header .header-inner {
  max-width: 1200px;
  height: 76px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}

site-header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  text-decoration: none;
}

site-header .brand .logo {
  height: 46px;
  flex-shrink: 0;
}

site-header .brand .logo img {
  display: block;
  width: auto;
  height: 100%;
}

site-header .brand .name {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: 2px;
  color: #b8332a !important;
}

site-header .brand .en {
  margin-top: 3px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 1px;
  color: #bbb !important;
}

site-header .header .nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

site-header .header .nav a {
  position: relative;
  padding: 6px 0;
  color: #444;
  font-size: 15px;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}

site-header .header .nav a:hover,
site-header .header .nav a.active,
site-header .header .nav a[aria-current="page"] {
  color: #b8332a;
  font-weight: 600;
}

site-header .header .donate {
  display: flex;
  width: 148px;
  height: 48px;
  flex: 0 0 148px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 26px;
}

site-header .header .donate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ============================================================
   全站下拉菜单统一（culture-channel 等页面自身无下拉样式，
   菜单会贴左裸露；此处提供基础定位与交互，各页面同风格）
   ============================================================ */
site-header .nav-dropdown,
site-header .heritage-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

site-header .nav-dropdown > a::after,
site-header .heritage-dropdown > a::after {
  content: "⌄";
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  transition: transform .2s;
}

site-header .nav-dropdown:hover > a::after,
site-header .nav-dropdown:focus-within > a::after,
site-header .heritage-dropdown:hover > a::after,
site-header .heritage-dropdown:focus-within > a::after {
  transform: translateY(1px) rotate(180deg);
}

site-header .header .nav-dropdown-menu,
site-header .header .heritage-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 120;
  min-width: 166px;
  padding: 10px 0 8px;
  border: 1px solid #eee7df;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 10px 26px rgba(65, 45, 29, .12);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -7px);
  transition: opacity .2s, transform .2s, visibility .2s;
}

site-header .header .nav-dropdown-menu::before,
site-header .header .heritage-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 12px;
}

site-header .header .nav-dropdown:hover .nav-dropdown-menu,
site-header .header .nav-dropdown:focus-within .nav-dropdown-menu,
site-header .header .heritage-dropdown:hover .heritage-dropdown-menu,
site-header .header .heritage-dropdown:focus-within .heritage-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 菜单项样式必须压过上方的全站一级导航规则「site-header .header .nav a」，
   否则各栏目页的导航链接样式（padding/color/font-weight/下划线）会渗透进下拉面板；
   取值与「关于我们」等 foundation 页面下拉完全一致。
   仅桌面端：<=768px 下拉由 mobile.css 的 .mobile-nav 规则接管。 */
@media (min-width: 769px) {
  site-header .header .nav .nav-dropdown-menu a,
  site-header .header .nav .heritage-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: #706a64;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .5px;
    white-space: normal;
  }

  /* 含封面图的下拉项：左图右字 flex 布局；无封面图时仅渲染 <span>，display 仍为 block */
  site-header .header .nav .nav-dropdown-menu a.nav-sub-link.nav-sub-link--has-cover,
  site-header .header .nav .heritage-dropdown-menu a.nav-sub-link.nav-sub-link--has-cover {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
  }
  site-header .header .nav .nav-dropdown-menu .nav-cover,
  site-header .header .nav .heritage-dropdown-menu .nav-cover {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    background: #f3eee7;
  }

  site-header .header .nav .nav-dropdown-menu a::after,
  site-header .header .nav .heritage-dropdown-menu a::after {
    display: none;
  }

  site-header .header .nav .nav-dropdown-menu a:hover,
  site-header .header .nav .nav-dropdown-menu a:focus,
  site-header .header .nav .heritage-dropdown-menu a:hover,
  site-header .header .nav .heritage-dropdown-menu a:focus {
    color: #b8332a;
    background: #faf6f1;
    font-weight: 400;
  }
}

/* 移动端（<=768px）：子菜单在 .mobile-nav 内展开，同一级导航规则同样会渗透，
   此处对齐「关于我们」等 foundation 页面的移动子菜单取值（即 mobile.css 设计值），
   容器的展开/收起仍由 mobile.css 控制。 */
@media (max-width: 768px) {
  site-header .header .nav.mobile-nav .nav-dropdown-menu a,
  site-header .header .nav.mobile-nav .heritage-dropdown-menu a {
    display: block;
    height: auto;
    min-height: 40px;
    padding: 10px 12px;
    color: #665b53;
    font-size: 13px;
    white-space: normal;
  }

  /* 移动端含封面图的下拉项：同样 flex 左图右字，封面图稍小 */
  site-header .header .nav.mobile-nav .nav-dropdown-menu a.nav-sub-link.nav-sub-link--has-cover,
  site-header .header .nav.mobile-nav .heritage-dropdown-menu a.nav-sub-link.nav-sub-link--has-cover {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  site-header .header .nav.mobile-nav .nav-dropdown-menu .nav-cover,
  site-header .header .nav.mobile-nav .heritage-dropdown-menu .nav-cover {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    background: #f3eee7;
  }

  site-header .header .nav.mobile-nav .nav-dropdown-menu a::after,
  site-header .header .nav.mobile-nav .heritage-dropdown-menu a::after {
    display: none;
  }
}

/* ============================================================
   英文模式头部紧凑布局（英文名较长，缩小字号避免挤压导航）
   ============================================================ */
html[lang="en"] site-header .header-inner {
  gap: 20px;
}

html[lang="en"] site-header .brand .name {
  font-size: 16px;
  letter-spacing: .5px;
  line-height: 1.3;
}

html[lang="en"] site-header .brand .en {
  display: none;
}

html[lang="en"] site-header .header .nav {
  gap: 16px;
}

html[lang="en"] site-header .header .nav a {
  font-size: 13px;
  letter-spacing: 0;
}

html[lang="en"] site-header .topbar {
  font-size: 12px;
}

html[lang="en"] site-header .topbar .slogan {
  letter-spacing: .5px;
}

/* 手机端保留自适应字号（覆盖桌面 20px !important，避免挤压） */
@media (max-width: 768px) {
  site-header .brand .name {
    font-size: clamp(13px, 3.8vw, 17px) !important;
    letter-spacing: 0;
  }
}

/* 桌面端：导航容器与下拉触发项撑满头部高度，
   保证下拉面板 top:100% 时正好贴在头部底边（各页表现一致） */
@media (min-width: 769px) {
  site-header .header .nav {
    height: 100%;
  }

  site-header .header .nav-dropdown,
  site-header .header .heritage-dropdown {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

/* ============================================================
   全站搜索框（site-components.js 渲染，同一结构两处使用）：
   桌面端在顶栏右侧（深红底 .topbar），移动端在展开的汉堡菜单内
   （.nav.mobile-nav 末行）；原生 GET 提交到 search.html。
   ============================================================ */
site-header .site-search {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* 桌面端：顶栏搜索（白描边胶囊，透明底融入深红顶栏） */
site-header .topbar .site-search {
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 13px;
  background: rgba(255, 255, 255, .14);
}

site-header .topbar .site-search input {
  width: 170px;
  height: 24px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  outline: none;
}

site-header .topbar .site-search input::placeholder {
  color: rgba(255, 255, 255, .6);
}

site-header .topbar .site-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

site-header .site-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

site-header .site-search button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* 桌面端隐藏导航内的移动搜索行 */
site-header .nav .site-search {
  display: none;
}

/* 移动端（<=768px）：顶栏整体隐藏，搜索框改到展开菜单末行 */
@media (max-width: 768px) {
  site-header .nav.mobile-nav .site-search {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 14px 12px;
    border-top: 1px solid rgba(184, 51, 42, .12);
  }

  site-header .nav.mobile-nav .site-search input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e5ddd3;
    border-right: 0;
    border-radius: 17px 0 0 17px;
    background: #fff;
    color: #444;
    font-size: 13px;
    outline: none;
  }

  site-header .nav.mobile-nav .site-search input::placeholder {
    color: #b3a89d;
  }

  site-header .nav.mobile-nav .site-search button {
    width: 44px;
    height: 34px;
    border: 0;
    border-radius: 0 17px 17px 0;
    background: #b8332a;
    color: #fff;
    cursor: pointer;
  }

  site-header .nav.mobile-nav .site-search button svg {
    width: 15px;
    height: 15px;
  }
}