/* ============================================================
   松辰堂 - 自定义样式
   Tailwind 覆盖不到的部分写在这里
   设计依据：http://www.songchentang.com
   ============================================================ */

/* ------------------------------------------------------------
   数字专用西文字体
   中文黑体自带的西文数字偏平、字宽不均，数据栏配上专门的数字字体
   会明显更挺。下面三款都已装在本地，改 --font-num 即可切换：

     'Barlow'       DIN 风格，硬朗清晰（当前使用）
     'Montserrat'   几何无衬线，偏商务
     'Oswald'       窄体，冲击力强

   字重：Barlow / Montserrat 下载的是 700，Oswald 是 600。
   只含拉丁子集（含数字），单文件 12~16KB。
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  /* 数字字体：改这一行即可在其中一款之间切换 */
  --font-num: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  /* 中文与单位用的字体 */
  --font-cn: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body.no-scroll {
  overflow: hidden;
}

/* ============================================================
   头部
   内页：白色 + 2px 灰底线，吸顶
   首页 PC（≥1024px）：透明悬浮在 banner 上 + 渐变遮罩 + 滚动渐白
   首页 移动端（<1024px）：保持白色吸顶，不悬浮
   ============================================================ */

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #ffffff;
  border-bottom: 2px solid #e7e7e7;
}

/* 首页 PC 端：透明浮动 + 顶部渐变遮罩；向下滚动时白色逐渐加深直到纯白
   注意：logo 是深色的（黑字 + 金棕徽标），所以遮罩用「白 → 透明」。
   若改用深色遮罩，必须同时换一版白色 logo，否则 logo 会看不见。

   --header-solid 由 main.js 按滚动位置实时写入，不做 CSS 过渡：
     0 = 全透明（刚进页面），1 = 纯白（banner 滚出后）
   白色画在 background-color 上，渐变留在 background-image 上，
   因为背景图永远画在背景色之上，所以 alpha=1 时整条就是纯白。 */
@media (min-width: 1024px) {
  body[data-page='home'] #site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, var(--header-solid, 0));
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.70) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    box-shadow: 0 2px 12px rgba(0, 0, 0, calc(0.08 * var(--header-solid, 0)));
    border-bottom: 0;
  }
}

/* 导航项：高度必须和头部条一致（PC 端 72px），文字才会垂直居中 */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 72px;
  padding: 0 14px;
  font-size: 16px;
  line-height: 1.4;
  color: #333333;
  transition: color 0.3s ease;
}

/* 下划线用绝对定位。
   原先是给 span 加 padding-bottom: 8px 来放线，但那个不对称内边距
   在 flex 居中时会把文字顶高约 4px，导致导航文字比 logo 和中英切换偏高。
   改成绝对定位后，文字回到真正的垂直中心（44px）。 */
.nav-link > span {
  position: relative;
}

.nav-link > span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: #d11325;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-link:hover,
.nav-link.is-active {
  color: #d11325;
}

.nav-link:hover > span::after,
.nav-link.is-active > span::after {
  opacity: 1;
}

/* 中英切换（头部最右侧 / 移动端抽屉内）
   图标 + 文字 + 细分隔线，和导航共用同一套视觉语言：
   当前语言 = 品牌红，未选中 = 灰 */
.lang-switch .lang-icon {
  margin-right: 6px;
  font-size: 16px;
  line-height: 1;
  color: #999999;
  transition: color 0.25s ease;
}

.lang-switch:hover .lang-icon {
  color: #b0344e;
}

.lang-item {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  font-size: 13px;
  line-height: 1.2;
  color: #888888;
  transition: color 0.25s ease;
}

.lang-item:hover {
  color: #b0344e;
}

.lang-item.is-active {
  color: #b0344e;
  font-weight: 600;
}

.lang-sep {
  width: 1px;
  height: 11px;
  margin: 0 2px;
  background: rgba(0, 0, 0, 0.15);
}

/* 移动端抽屉 */
.m-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.m-link:hover,
.m-link.is-active {
  background: #fdf2f4;
  color: #b0344e;
}

/* 抽屉 / 遮罩开关（ID 选择器优先级高于 Tailwind 工具类） */
#mobile-mask.is-open {
  visibility: visible;
  opacity: 1;
}

#mobile-drawer.is-open {
  transform: translateX(0);
}

#mobile-drawer:focus {
  outline: none;
}

/* ============================================================
   首页 Banner 轮播
   参考站：1920x650 全宽图，指示器在右侧竖排
   ============================================================ */

.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Banner 图：宽度 100%，高度不固定，完全按 1920x650 原始比例缩放。
   窄屏就是窄条，不裁切、不拉伸，整张图始终完整可见。 */
.banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 指示器：右侧竖直排列，右对齐 */
.banner .banner-swiper .swiper-pagination {
  left: auto;
  right: 4%;
  top: 50%;
  bottom: auto;
  width: auto;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

/* 全站禁用圆角，所以指示器做成短横条，不用圆点。
   border-radius: 0 是为了覆盖 Swiper 默认的 50% 圆形。
   元素本身 14px 高只当点击热区，真正的横条画在 ::after 上，
   这样视觉上是 2px 细线，手指却点得到。 */
.banner .banner-swiper .swiper-pagination-bullet {
  position: relative;
  width: 8px;
  height: 14px;
  margin: 0 !important;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  transition: width 0.4s ease;
}

.banner .banner-swiper .swiper-pagination-bullet::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 激活态：24x2px 酒红横条 */
.banner .banner-swiper .swiper-pagination-bullet-active {
  width: 24px;
}

.banner .banner-swiper .swiper-pagination-bullet-active::after {
  background: #b0344e;
  box-shadow: none;
}

/* Banner 高度：不写死。slide 跟随图片自然高度，
   所以整条 banner 在任何屏宽下都是 100% 宽 + 等比高度。 */
.banner .swiper-slide {
  height: auto;
}

/* ============================================================
   首页板块：标题组（关于我们 / 相关分类共用）
   ============================================================ */

.section-head {
  max-width: 640px;
}

.section-head.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-en {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #b0344e;
}

.section-title {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #333333;
}

.section-line {
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 16px;
  background: #b0344e;
  transform-origin: left center;
}

.section-head.is-center .section-line {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center center;
}

.section-desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.8;
  color: #666666;
}

/* ============================================================
   首页板块：关于我们
   ============================================================ */

.about-section {
  padding: 56px 0;
}

/* 两栏容器：stretch —— 图片列被拉伸到和文字列严格等高，
   所以顶边对齐、底边也齐平（这就是「持平」） */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}

.about-media {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  background-color: #f3f1f1;
}

/* 移动端：整块配图去掉，只显示文字 */
@media (max-width: 767px) {
  .about-media {
    display: none;
  }
}

/* 平板单栏：图片压在文字上方，给个扁比例避免一张图占满一屏。
   align-self: start 是为了跳出 stretch，不让它按文字高度拉伸。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-media {
    aspect-ratio: 16 / 7;
    min-height: 0;
    align-self: start;
  }
}

/* 桌面双栏：把 min-height 让出去，高度完全交给 grid 拉伸决定 */
@media (min-width: 1024px) {
  .about-media {
    min-height: 0;
  }
}

.about-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左下角品牌色短条 */
.about-media::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 64px;
  height: 3px;
  background-color: #b0344e;
}

.about-body p {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.85;
  color: #666666;
}

/* 首段作导语：字号更大、颜色更深，和后一段拉开层次 */
.about-body .about-lead {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.85;
  color: #333333;
}

.about-stats {
  display: flex;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e7e7e7;
}

.about-stats > div {
  flex: 1;
  min-width: 0;                /* 允许收缩，防止长数字撑破格子 */
  padding-left: 14px;
  border-left: 1px solid #e7e7e7;
}

.about-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

/* 移动端数字收小：三个数据并排，390px 屏宽下用 30px 会溢出 */
.about-stats dt {
  font-family: var(--font-num);          /* 数字专用西文字体 */
  font-variant-numeric: tabular-nums;    /* 等宽数字，三个数据纵向更整齐 */
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #b0344e;
}

/* 单位字号收小，并切回中文字体（「万」「㎡」用中文黑体更自然） */
.about-stats dt span {
  margin-left: 2px;
  font-family: var(--font-cn);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.about-stats dd {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #999999;
}

/* 主按钮（全站无圆角） */
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 11px 26px;
  font-size: 14px;
  color: #ffffff;
  background-color: #b0344e;
  transition: background-color 0.3s ease;
}

.btn-more:hover {
  background-color: #932a41;
}

.btn-more i {
  transition: transform 0.3s ease;
}

.btn-more:hover i {
  transform: translateX(4px);
}

/* ============================================================
   首页板块：相关分类
   ============================================================ */

.cat-section {
  padding: 56px 0;
  background-color: #f9f9f9;
}

.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 44px;
}

/* 分类卡：图片在上，文字在下方。
   和「产品展示」区分——这边只有编号 + 标题 + 箭头，卡片更矮、更轻。 */
.cat-card {
  display: block;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cat-card:hover {
  border-color: #b0344e;
  box-shadow: 0 14px 32px -16px rgba(176, 52, 78, 0.4);
}

.cat-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: #f3f1f1;
}

.cat-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.cat-card:hover .cat-img {
  transform: scale(1.06);
}

.cat-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
}

/* 编号：压在图片左上角，字号放大 + 用数字专用字体 */
.cat-num {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  /* 图片明暗不定，加阴影保证白字始终读得清 */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (min-width: 1024px) {
  .cat-num {
    font-size: 42px;
  }
}

.cat-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  transition: color 0.3s ease;
}

.cat-card:hover .cat-title {
  color: #b0344e;
}

.cat-arrow {
  flex-shrink: 0;
  font-size: 18px;
  color: #cccccc;
  transition: color 0.3s ease, transform 0.3s ease;
}

.cat-card:hover .cat-arrow {
  color: #b0344e;
  transform: translateX(4px);
}

/* ---- 平板及以上 ---- */
@media (min-width: 640px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .about-section,
  .cat-section,
  .prod-section {
    padding: 96px 0;
  }

  .section-title {
    font-size: 32px;
  }

  .section-desc {
    font-size: 15px;
  }

  .about-body .about-lead {
    margin-top: 26px;
    font-size: 17px;
  }

  .about-stats {
    margin-top: 34px;
    padding-top: 28px;
  }

  .about-stats > div {
    padding-left: 22px;
  }

  .about-stats dt {
    font-size: 34px;
  }

  .about-stats dt span {
    font-size: 14px;
  }

  .about-stats dd {
    margin-top: 10px;
  }
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

@media (min-width: 1024px) {
  .cat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ============================================================
   首页板块：产品展示
   与「相关分类」区分：这边用图片卡片、白底
   ============================================================ */

.prod-section {
  padding: 56px 0;
}

.prod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 44px;
}

.prod-card {
  display: block;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.prod-card:hover {
  border-color: #b0344e;
  box-shadow: 0 14px 32px -16px rgba(176, 52, 78, 0.4);
}

/* 图片容器：固定 4:3，悬停时图片轻微放大 */
.prod-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: #f3f1f1;
}

.prod-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.prod-card:hover .prod-media img {
  transform: scale(1.06);
}

.prod-body {
  padding: 20px 22px 24px;
}

.prod-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #b0344e;
  background-color: #fdf2f4;
}

.prod-title {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  color: #333333;
  transition: color 0.3s ease;
}

.prod-card:hover .prod-title {
  color: #b0344e;
}

.prod-desc {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.8;
  color: #666666;
}

/* 底部「查看全部产品」居中，并清掉 .btn-more 自带的上边距 */
.prod-more {
  margin-top: 40px;
  text-align: center;
}

.prod-more .btn-more {
  margin-top: 0;
}

@media (min-width: 640px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* padding 统一由前面那条 @media (min-width: 768px) 控制（96px），
   这里不再单独覆盖，避免三个板块间距不一致 */

@media (min-width: 1024px) {
  .prod-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ============================================================
   入场动画的初始隐藏规则已移除

   原来这里靠 .js-reveal 把 [data-gsap] 元素设成 opacity:0，
   等 GSAP 加载后淡入。动画关闭后这条规则一并删掉 ——
   否则内容会永远透明。模板上的 data-gsap 属性现在是惰性的。
   ============================================================ */
/* ==========================================================================
   WordPress 纯净富文本 - 深度响应式自适应样式库 (.wp-content)
   符合东方美学色彩与零圆角设计哲学
   ========================================================================== */

/* 1. 基础容器重置 */
.wp-content {
  width: 100%;
  max-width: 100% !important; /* 采用主体容器最大宽度 */
  word-break: break-word;     /* 避免长英文/网址/连续字符撑破容器 */
  overflow-wrap: break-word;
}

/* 2. 标题类 - 移动端与 PC 端阶梯式字号与间距 */
.wp-content h1,
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6 {
  color: #0D0D0D;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
}

/* H1 顶级标题 */
.wp-content h1 {
  font-size: 1.375rem; /* 22px */
}
@media (min-width: 768px) {
  .wp-content h1 { font-size: 1.75rem; /* 28px */ }
}

/* H2 二级标题 - 带东方经典左侧红木色竖线 */
.wp-content h2 {
  font-size: 1.2rem; /* 19px */
  border-left: 3.5px solid #7C402B;
  padding-left: 0.6rem;
  margin-top: 1.8em;
}
@media (min-width: 768px) {
  .wp-content h2 { 
    font-size: 1.375rem; /* 22px */
    padding-left: 0.8rem;
  }
}

/* H3 三级标题 */
.wp-content h3 {
  font-size: 1.05rem; /* 16.8px */
  color: #7C402B;
}
@media (min-width: 768px) {
  .wp-content h3 { font-size: 1.15rem; /* 18.4px */ }
}

/* 3. 正文段落与强文本 */
.wp-content p {
  margin-bottom: 1em;
  color: #333333;
  line-height: 1.75;
  font-size: 0.875rem; /* 14px 手机端 */
}
@media (min-width: 768px) {
  .wp-content p {
    margin-bottom: 1.25em;
    line-height: 1.85;
    font-size: 1rem; /* 16px PC端 */
  }
}

.wp-content strong,
.wp-content b {
  font-weight: 700;
  color: #0D0D0D;
}

/* 4. 图片与 Gutenberg 块级媒体自适应（已取消强制全宽，最大宽度 100% 居中） */
.wp-content img,
.wp-content video,
.wp-content iframe {
  max-width: 100% !important; /* 限制最大宽度为 100%，绝不撑破容器 */
  width: auto;               /* 取消 100% 强行拉伸，保持原图或 WP 设定的尺寸 */
  height: auto !important;
  display: block;
  margin: 1.25em auto;       /* 居中展示 */
  border: 1px solid #E8E3DD;
  border-radius: 0 !important;
}

.wp-content figure.wp-block-image,
.wp-content figure.wp-block-embed {
  margin: 1.5em 0;
  width: auto !important;     /* 取消容器的 100% 强行铺满 */
  max-width: 100% !important; /* 防止容器溢出 */
  text-align: center;         /* 确保内部图片居中 */
}

.wp-content figcaption {
  font-size: 0.75rem; /* 12px */
  color: #888888;
  margin-top: 0.4em;
  text-align: center;
}

/* 5. 无序与有序列表自适应 */
.wp-content ul,
.wp-content ol {
  margin-top: 0.5em;
  margin-bottom: 1.25em;
  padding-left: 1.125em; /* 移动端收紧内边距 */
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .wp-content ul,
  .wp-content ol {
    padding-left: 1.5em;
    font-size: 1rem;
  }
}

.wp-content ul { list-style-type: disc; }
.wp-content ol { list-style-type: decimal; }

.wp-content li {
  margin-bottom: 0.4em;
  color: #444444;
  line-height: 1.6;
}

/* 6. 引用块 (Blockquote) 自适应 */
.wp-content blockquote {
  margin: 1.25em 0;
  padding: 0.75rem 1rem;
  background-color: #F4EFEA;
  border-left: 3px solid #C02B2B;
  font-style: italic;
  color: #555555;
  border-radius: 0 !important;
}
@media (min-width: 768px) {
  .wp-content blockquote {
    padding: 1rem 1.25rem;
    border-left-width: 4px;
  }
}

.wp-content blockquote p {
  margin-bottom: 0;
}

/* 7. 表格响应式（手机端可横向滑动的优雅自适应） */
.wp-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25em 0;
  font-size: 0.8125rem; /* 13px 移动端 */
  background-color: #ffffff;
  border: 1px solid #E8E3DD;
  
  /* 移动端横向溢出滑动 */
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  
  /* 隐藏默认滚动条但保持滑动 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wp-content table::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .wp-content table {
    display: table; /* 桌面端恢复标准表格 */
    white-space: normal;
    font-size: 0.875rem; /* 14px */
  }
}

.wp-content th,
.wp-content td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #E8E3DD;
  text-align: left;
}
@media (min-width: 768px) {
  .wp-content th,
  .wp-content td {
    padding: 0.75rem 1rem;
  }
}

.wp-content th {
  background-color: #F4EFEA;
  color: #7C402B;
  font-weight: 600;
}

.wp-content tr:nth-child(even) {
  background-color: #FBF9F5;
}

/* 8. 超链接 */
.wp-content a {
  color: #7C402B;
  text-decoration: underline;
  transition: color 0.3s;
}

.wp-content a:hover {
  color: #C02B2B;
}




/* ============================================================
   WordPress 专用补充样式
   静态站没有这些组件，是转成主题后新增的
   ============================================================ */

/* 归档分页（无圆角，沿用暖棕色高亮） */
/* ==========================================================================
   分页 .sct-pagination
   设计稿里产品列表与案例/新闻列表的分页样式不同，所以拆成两个变体：
     默认          → 产品列表：36px 方角，当前页品牌红
     --dark        → 案例 / 新闻：40px 方角 + 顶部分隔线，当前页纯黑
   零圆角，与全站一致。
   ========================================================================== */

.sct-pagination {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.sct-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sct-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e8e3dd;
  background-color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  color: #555555;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.sct-pagination .page-numbers:hover {
  border-color: #7c402b;
  color: #7c402b;
}

.sct-pagination .page-numbers.current {
  border-color: #7c402b;
  background-color: #7c402b;
  color: #ffffff;
  font-weight: 600;
}

/* 省略号不画框 */
.sct-pagination .page-numbers.dots {
  min-width: 24px;
  border-color: transparent;
  background-color: transparent;
  color: #888888;
}

.sct-pagination .page-numbers.dots:hover {
  border-color: transparent;
  background-color: transparent;
  color: #888888;
}

/* ---------- 案例 / 新闻列表：更大一号 + 顶部分隔线 + 黑色当前页 ---------- */
.sct-pagination--dark {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e8e3dd;
}

.sct-pagination--dark .page-numbers {
  min-width: 40px;
  height: 40px;
  font-size: 12px;
  font-weight: 500;
  color: #333333;
}

.sct-pagination--dark .page-numbers.current {
  border-color: #0d0d0d;
  background-color: #0d0d0d;
  color: #ffffff;
  font-weight: 600;
}

/* 上一页 / 下一页：悬停时整块变品牌红 */
.sct-pagination--dark .page-numbers.prev,
.sct-pagination--dark .page-numbers.next {
  color: #0d0d0d;
}

.sct-pagination--dark .page-numbers.prev:hover,
.sct-pagination--dark .page-numbers.next:hover {
  border-color: #7c402b;
  background-color: #7c402b;
  color: #ffffff;
}

.sct-pagination--dark .page-numbers.dots {
  min-width: 24px;
  color: #999999;
}

/* 搜索表单（后续搜索页会用到） */
.sct-search-form {
  display: flex;
  gap: 8px;
}

.sct-search-form input[type='search'] {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #e8e3dd;
  background-color: #ffffff;
  font-size: 13px;
  color: #1a1a1a;
}

.sct-search-form input[type='search']:focus {
  outline: none;
  border-color: #7c402b;
}

.sct-search-form button {
  height: 42px;
  padding: 0 22px;
  border: 1px solid #7c402b;
  background-color: #7c402b;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sct-search-form button:hover {
  background-color: #5f3220;
}

/* ==========================================================================
   正文排版 .sct-prose
   页面 / 详情页里 the_content() 输出的内容统一走这里。
   目的：后台在编辑器里怎么写，前台都是同一套排版；插入的图片自带边框与居中，
   不用手工包 div，也不用填图片地址。
   全站零圆角，所以这里同样不带 border-radius。
   ========================================================================== */

.sct-prose {
  font-size: 14px;
  line-height: 1.9;
  color: #333333;
}

.sct-prose > * + * {
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .sct-prose {
    font-size: 16px;
    line-height: 2;
  }

  .sct-prose > * + * {
    margin-top: 2rem;
  }
}

.sct-prose p {
  margin: 0;
}

/* 首段稍微加重，作为导语 */
.sct-prose > p:first-of-type {
  color: #1a1a1a;
}

.sct-prose strong,
.sct-prose b {
  font-weight: 700;
  color: #7c402b;
}

.sct-prose a {
  color: #c02b2b;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s ease;
}

.sct-prose a:hover {
  opacity: 0.75;
}

.sct-prose h2,
.sct-prose h3,
.sct-prose h4 {
  margin: 2.5rem 0 0;
  font-weight: 600;
  line-height: 1.4;
  color: #0d0d0d;
}

.sct-prose h2 {
  font-size: 1.25rem;
}

.sct-prose h3 {
  font-size: 1.125rem;
}

.sct-prose h4 {
  font-size: 1rem;
}

.sct-prose ul,
.sct-prose ol {
  margin: 0;
  padding-left: 1.25rem;
}

.sct-prose li + li {
  margin-top: 0.5rem;
}

.sct-prose ul {
  list-style: none;
  padding-left: 0;
}

.sct-prose ul > li {
  position: relative;
  padding-left: 1.25rem;
}

.sct-prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background-color: #c02b2b;
}

.sct-prose ol {
  list-style: decimal;
}

.sct-prose blockquote {
  border-left: 2px solid #7c402b;
  background-color: #f4efea;
  padding: 1rem 1.25rem;
  color: #444444;
}

.sct-prose hr {
  border: 0;
  border-top: 1px solid #e8e3dd;
}

/* ---------- 正文里的图片：居中、描边、悬浮轻微放大 ---------- */
.sct-prose img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 2rem auto 0;
  border: 1px solid #e8e3dd;
  transition: border-color 0.5s ease, transform 0.7s ease;
}

.sct-prose img:hover {
  border-color: #7c402b;
}

/* WordPress 默认给图片写死 width/height 属性，用 CSS 兜住小屏溢出 */
@media (max-width: 768px) {
  .sct-prose img {
    width: 100% !important;
  }
}

.sct-prose figure {
  margin: 2rem 0 0;
}

.sct-prose figcaption,
.sct-prose .wp-caption-text {
  margin-top: 0.625rem;
  text-align: center;
  font-size: 12px;
  color: #888888;
}

/* 编辑器插入多列图集时，图片不再各自居中 */
.sct-prose .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.sct-prose .gallery img {
  margin: 0;
  width: 100%;
}

.sct-prose .gallery-item {
  margin: 0;
}

/* 表格 */
.sct-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sct-prose th,
.sct-prose td {
  border: 1px solid #e8e3dd;
  padding: 0.625rem 0.875rem;
  text-align: left;
}

.sct-prose th {
  background-color: #f4efea;
  font-weight: 600;
  color: #0d0d0d;
}

/* ==========================================================================
   .scrollbar-none
   设计稿的面包屑用了这个类（横向滚动但隐藏滚动条）。
   Tailwind Play CDN 并没有内置这个工具类，所以补上，否则它会是个空类名，
   移动端面包屑溢出时会出现一条难看的横向滚动条。
   ========================================================================== */

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ------------------------------------------------------------------
 * Swiper 按钮的禁用态
 *
 * Swiper 给按钮加的是 .swiper-button-disabled 这个 class，不是 disabled 属性，
 * 所以模板里写的 Tailwind 「disabled:opacity-40」永远不会生效 ——
 * 按钮到了尽头看起来还是亮的、能点，点了却没反应。
 * 这里按 Swiper 自己的 class 补上视觉反馈。
 * ------------------------------------------------------------------ */
#case-prev.swiper-button-disabled,
#case-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------------
 * 正文图片的自适应兜底
 *
 * 编辑器插入的图会带 width="446" height="1024" 这种写死的尺寸。
 * 页面的正文容器如果是 .wp-content，里面本来就有 img 的兜底规则；
 * 但「关于我们」的正文容器不是 .wp-content（排版类名照设计稿写在标签上），
 * 于是那个 width 属性生效，图片被锁在 446px 宽、又小又居中。
 * 这里给所有正文图片一个统一的兜底，不依赖外层容器。
 * ------------------------------------------------------------------ */
img.sct-content-img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
 * 表单校验错误态
 *
 * 两张表单位于不同页面、底子样式也不一样：
 *   详情页是「下划线式」（border-b），联系页是「方框式」（border）。
 * 所以边框颜色统一用 !important 压过 Tailwind 的 focus:border-* 工具类，
 * 保证聚焦时仍然是红的 —— 否则用户点回出错字段，红框反而消失。
 * ------------------------------------------------------------------ */
.sct-invalid,
.sct-invalid:focus,
.sct-invalid:focus-visible {
  border-color: #C02B2B !important;
}

/* 方框式表单再加一层浅红底，红得更明显一点 */
.sct-invalid {
  background-color: rgba(192, 43, 43, 0.04);
}

/* 下划线式表单没有底色，加了反而脏，去掉 */
form.space-y-6 .sct-invalid {
  background-color: transparent;
}

.sct-error {
  display: none;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.6;
  color: #C02B2B;
}

.sct-error.is-visible {
  display: block;
}

/* 整体提示（提交按钮上方），比字段提示再重一点 */
.sct-error-summary {
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid rgba(192, 43, 43, 0.3);
  background-color: rgba(192, 43, 43, 0.05);
  font-size: 12px;
}

.sct-btn-busy {
  opacity: 0.7;
  cursor: progress;
}

/* 表单蜜罐：挪出可视区而不是 display:none —— 部分脚本会跳过 display:none 的字段 */
.sct-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}