/* =========================================================
   墨韵文化 · 全站自定义样式（Tailwind 之外的补充）
   修改配色请同时更新各页面 tailwind.config 中的 brand / accent
   ========================================================= */

/* 平滑滚动（锚点跳转更自然） */
html {
  scroll-behavior: smooth;
}

/* ---------- 区块小标签（如 ABOUT US · 关于我们） ---------- */
.section-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  color: #C9A227; /* 金色点缀，与 tailwind accent 保持一致 */
  font-weight: 600;
}

/* ---------- 首页 Hero 轮播占位背景 ----------
   TODO 替换：正式上线时把 .slide 内的渐变 div 换成 <img> 背景图（1920×1080），
   保留深色遮罩层以保证白色文字可读 */
.hero-bg-1 {
  background: linear-gradient(135deg, #1B3A6B 0%, #2C5591 45%, #6E8FBF 100%);
}
.hero-bg-2 {
  background: linear-gradient(135deg, #12294E 0%, #1B3A6B 50%, #4A6B9E 100%);
}

/* ---------- 内页 banner 背景 ---------- */
.inner-banner {
  background:
    linear-gradient(rgba(18, 41, 78, 0.82), rgba(18, 41, 78, 0.82)),
    linear-gradient(135deg, #1B3A6B 0%, #4A6B9E 100%);
}

/* ---------- 底部 CTA 条背景 ---------- */
.cta-band {
  background:
    linear-gradient(rgba(18, 41, 78, 0.88), rgba(18, 41, 78, 0.88)),
    linear-gradient(120deg, #1B3A6B 0%, #3D5A8F 100%);
}

/* ---------- 图片占位样式（替换为真实 <img> 后可整体删除对应 div） ---------- */
.img-placeholder {
  background: linear-gradient(160deg, #EDEDEA 0%, #DCDCD6 100%);
}

/* ---------- 当前页导航高亮（main.js 自动添加 .active） ---------- */
.nav-link.active {
  color: #1B3A6B;
  font-weight: 600;
  position: relative;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: #C9A227;
  transform: translateX(-50%);
}

/* ---------- 轮播指示点 ---------- */
#dots button {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  transition: all 0.3s ease;
  min-height: auto; /* 覆盖全局 44px 点击区约定：点太少太大会遮挡 */
  padding: 0;
}
#dots button.on {
  width: 26px;
  background: #C9A227;
}

/* ---------- 滚动渐显动画 ----------
   仅在 JS 可用时生效（html.js 由 main.js 添加），
   无 JS 环境内容照常可见，保证可访问性 */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 联系页表单下拉箭头兼容（Windows 下 select 外观统一） ---------- */
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}