/* ============================================================
 * marquee-bar.css — 弘度生活全站滚动文案栏样式
 * 版本: V3.1  更新日期: 2026-07-29
 * 功能: 页眉下方文案栏，自动切换显示，弥补空间感，传递平台价值
 * 铁律: 零硬编码px、零硬编码z-index、全CSS变量驱动
 * 安全距离: 适配手机状态栏（电量/信号），使用env(safe-area-inset-top)
 * 性能: 无infinite scroll动画，JS定时器切换+CSS opacity过渡，GPU零压力
 * V3.1变更: 全站版本号统一升级v=103，强制刷新浏览器缓存
 * ============================================================ */

/* ---------- 设计 Token ---------- */
:root {
  /* 纯色背景，无渐变 */
  --mq-bar-bg: rgba(26, 86, 219, 0.04);
  --mq-bar-border: rgba(26, 86, 219, 0.12);
  --mq-icon-color: var(--v10-action, #1A56DB);
  --mq-text-color: var(--v10-text-700, #334155);
  --mq-text-highlight: var(--v10-action, #1A56DB);
  --mq-accent-bg: rgba(26, 86, 219, 0.08);

  /* 滚动栏尺寸 */
  --mq-height: clamp(2rem, 8vw, 2.5rem);
  --mq-icon-size: clamp(0.875rem, 3.5vw, 1rem);
  --mq-font-size: clamp(0.6875rem, 2.8vw, 0.75rem);
  --mq-gap: var(--space-2, 0.5rem);

  /* 切换过渡时间 */
  --mq-fade-duration: 400ms;
  --mq-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 层级 */
  --mq-z-index: var(--z-sticky-header, 150);
}

/* ---------- 滚动栏容器 ---------- */
.hd-marquee-bar {
  position: relative;
  width: 100%;
  height: var(--mq-height);
  background: var(--mq-bar-bg);
  border-bottom: 1px solid var(--mq-bar-border);
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: var(--mq-z-index);
  margin-top: 0;
  flex-shrink: 0;
}

/* ---------- 左侧图标区 ---------- */
.hd-marquee-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--mq-height);
  height: 100%;
  background: var(--mq-accent-bg);
  color: var(--mq-icon-color);
  font-size: var(--mq-icon-size);
  position: relative;
}

.hd-marquee-icon::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--mq-bar-border);
}

.hd-marquee-icon i {
  color: var(--mq-icon-color);
  opacity: 0.85;
}

/* ---------- 内容区（单条显示，JS定时切换） ---------- */
.hd-marquee-content {
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

/* track 不再滚动，改为相对定位容器 */
.hd-marquee-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 每条文案绝对定位叠放，通过opacity切换 */
.hd-marquee-item {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--mq-gap);
  font-size: var(--mq-font-size);
  line-height: 1.5;
  color: var(--mq-text-color);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--mq-fade-duration) ease;
  pointer-events: none;
}

/* 当前显示的文案 */
.hd-marquee-item.hd-marquee-active {
  opacity: 1;
  pointer-events: auto;
}

.hd-marquee-item-text {
  color: var(--mq-text-color);
}

/* ---------- 右侧操作区 ---------- */
.hd-marquee-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--mq-height);
  height: 100%;
  color: var(--mq-text-color);
  font-size: var(--mq-icon-size);
  cursor: pointer;
  transition: background var(--mq-transition);
  text-decoration: none;
}

.hd-marquee-action:active {
  background: var(--mq-accent-bg);
}

/* ---------- 暗色页眉适配 ---------- */
.hd-marquee-bar.hd-marquee-on-dark {
  background: rgba(0, 0, 0, 0.15);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.hd-marquee-bar.hd-marquee-on-dark .hd-marquee-icon {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.hd-marquee-bar.hd-marquee-on-dark .hd-marquee-icon::after {
  background: rgba(255, 255, 255, 0.15);
}

.hd-marquee-bar.hd-marquee-on-dark .hd-marquee-item {
  color: rgba(255, 255, 255, 0.85);
}

.hd-marquee-bar.hd-marquee-on-dark .hd-marquee-action {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- 公益暖色页眉适配 ---------- */
.hd-marquee-bar.hd-marquee-on-warm {
  background: rgba(230, 81, 0, 0.06);
  border-bottom-color: rgba(230, 81, 0, 0.12);
}

.hd-marquee-bar.hd-marquee-on-warm .hd-marquee-icon {
  background: rgba(230, 81, 0, 0.1);
  color: var(--warm-amber, #E65100);
}

.hd-marquee-bar.hd-marquee-on-warm .hd-marquee-icon::after {
  background: rgba(230, 81, 0, 0.15);
}

.hd-marquee-bar.hd-marquee-on-warm .hd-marquee-item {
  color: var(--warm-ink-dim, #5D4037);
}

/* ---------- 首页透明融入模式 ---------- */
.hd-marquee-bar.hd-marquee-transparent {
  background: transparent;
  border-bottom: none;
}

.hd-marquee-bar.hd-marquee-transparent .hd-marquee-icon {
  background: transparent;
}

.hd-marquee-bar.hd-marquee-transparent .hd-marquee-icon::after {
  display: none;
}

/* ---------- 无障碍：减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hd-marquee-item {
    transition: none;
  }
}

/* ---------- 紧凑模式 ---------- */
.hd-marquee-bar.hd-marquee-compact {
  --mq-height: clamp(1.75rem, 7vw, 2.125rem);
  --mq-font-size: clamp(0.625rem, 2.4vw, 0.6875rem);
}

/* ---------- 无JS降级：仅显示第一条 ---------- */
.hd-marquee-bar.no-js .hd-marquee-item:first-child {
  opacity: 1;
}

.hd-marquee-bar.no-js .hd-marquee-item:not(:first-child) {
  display: none;
}

/* ---------- 响应式微调 ---------- */
@media (min-width: 768px) {
  :root {
    --mq-height: 2.5rem;
    --mq-font-size: 0.8125rem;
  }
}