/* 顶部公告跑马灯
 * 设计稿：Figma 51av / 357:22886（PC 1920×36）、357:23086（移动 750×58）
 * 底色 #212432，文案 #BCBEC5，域名 / 永久入口 / 邮箱 #FF4A7C 加粗可点击
 * 副本份数与位移量由模板注入（navbar.tpl 的 marqueeCopies → --site-marquee-shift），
 * 位移恒等于一份宽度，故首尾天然无缝；此处 12.5% 仅为无 JS/无模板时的 8 份 fallback
 */
.site-marquee {
  --site-marquee-bg: #212432;
  --site-marquee-text: #bcbec5;
  --site-marquee-accent: #ff4a7c;
  --site-marquee-shift: 12.5%; /* fallback：8 份 → 100% / 8；实际由模板行内变量覆盖 */
  --site-marquee-duration: 15s; /* 一份文案 ≈870px，约 58px/s 匀速 */

  position: fixed;
  top: 50px; /* = PC 导航条高度（common.css 导航段）*/
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 20px;
  overflow: hidden;
  color: var(--site-marquee-text);
  background: var(--site-marquee-bg);
  font-size: 14px;
  line-height: 1;
}

.site-marquee__inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.site-marquee__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.site-marquee__track {
  display: flex;
  width: max-content;
  min-width: max-content;
  will-change: transform;
  animation: site-marquee-scroll var(--site-marquee-duration) linear infinite;
}

/* 一份完整文案；padding-right 就是两份文案之间的间隔，位移一份宽度后仍无缝 */
.site-marquee__message {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding-right: 2em;
}

.site-marquee__lead,
.site-marquee__item {
  color: var(--site-marquee-text);
}

.site-marquee__lead + .site-marquee__item {
  margin-left: 2em;
}

.site-marquee__sep {
  margin: 0 1em;
  color: inherit;
}

.site-marquee__link {
  color: var(--site-marquee-accent);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease;
}

.site-marquee__link:hover,
.site-marquee__link:focus-visible {
  /* 跑马灯的 hover 只降透明度 + 加下划线，颜色保持强调色，
     所以要显式压掉 main.css 里 a:hover 的全局提亮 */
  color: var(--site-marquee-accent);
  opacity: .82;
  text-decoration: underline;
  text-underline-offset: .2em;
}

@keyframes site-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--site-marquee-shift)), 0, 0);
  }
}

@media (max-width: 767.98px) {
  .site-marquee {
    /* 与移动端导航栏等高对齐，避免遮挡 */
    top: var(--van-nav-bar-height, 56px);
    height: 7.7333vw; /* 58 / 750 */
    padding: 0 4vw; /* 30 / 750 */
    font-size: 3.2vw; /* 24 / 750 */
    --site-marquee-duration: 13s; /* 移动端一份 ≈755px，约 58px/s 匀速 */
  }

  .site-marquee__message {
    padding-right: 1.6em;
  }

  .site-marquee__lead + .site-marquee__item {
    margin-left: 1.6em;
  }

  .site-marquee__sep {
    margin: 0 .8em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-marquee__track {
    animation: none;
    transform: none;
  }
}

/* 固定公告条不遮挡首屏内容：留出与公告条等高的空间 */
.xqbj-main {
  padding-top: 36px;
}

@media (max-width: 767.98px) {
  .xqbj-main {
    /* 公告条高度 + 与正文的呼吸间距 */
    padding-top: calc(7.7333vw + 1rem);
  }
}

/* 页面外壳会重置 main 的内边距，这里显式保留补偿值 */
#xqbj-container .xqbj-main {
  padding-top: 36px !important;
}

@media (max-width: 767.98px) {
  #xqbj-container .xqbj-main {
    padding-top: calc(7.7333vw + 1rem) !important;
  }
}

.xqbj-header .van-nav-bar {
  z-index: 20;
}