/* ============================================================
   麦尚食品 · 基础样式
   只放「两套静态稿里完全一致」的重置规则 —— 任何一边独有的规则都留在
   pc.css / mob.css 里，避免把 PC 的特性（如 flex-shrink:0）泄漏到手机布局。
   ============================================================ */

:root {
  --ms-red: #e60012;
  --ms-text: #333;
  --ms-text-muted: #666;
  --ms-line: #e6e6e6;
}

/* 两套稿子一致的 reset。
   注意 PC 的 * 还带 flex-shrink:0，手机没有 —— 那是 PC 独有规则，
   留在 pc.css 里，不要提升到这里。 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: #fff;
  /* 两套稿子都用 100vw 做满宽容器，而 100vw 含滚动条宽度，
     某些浏览器会因此产生横向滚动条。全局兜底。 */
  overflow-x: hidden;
  font-family:
    PingFangSC-Regular, Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial,
    'PingFang SC-Light', 'Microsoft YaHei', sans-serif;
  /*
   * 这里不设 line-height（即 normal）—— 两份设计稿的 body 都没有写行高，
   * 各区块的行高都写在各自的规则里（如 .about-text、.hero-sub）。
   * 原来加的 1.6 会把没写行高的元素（如 .about-title-banner span）撑高，
   * 导致区块整体高度比设计稿高。
   */
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  /* 设计稿里每个链接都带自己的类名与颜色，所以原始 CSS 没给 a 设颜色。
     模板里会补一些裸链接（如产品卡片的名称），不继承的话会变成默认蓝色。 */
  color: inherit;
}

img {
  display: block;
  border: 0;
  /*
   * wp_get_attachment_image 会同时输出 width / height 属性（利于防抖动），
   * 而设计稿里的 <img> 往往只写 width、height 留空。若 CSS 只约束宽度，
   * 图片就会按属性里的高度撑开（实测 form-top 高了 156px）。
   * 这条特异性最低，设计稿里显式写了 height 的规则仍然优先。
   */
  height: auto;
}

ul,
ol,
li {
  list-style: none;
}

/* 后台编辑器正文里的图片，手机断点下 1rem = 100px，
   若图片带 px 宽度会错乱，这里统一兜底。 */
.entry-content img,
.entry-content video {
  max-width: 100%;
  height: auto;
}

/* ---------- 表单报错态 ---------- */
/*
 * 前端校验只负责加 / 去 has-error 类（见 common.js），红框与红色 placeholder
 * 都定义在这里，两套静态稿共用。
 *
 * 必须写两条：PC 的字段本身是 .form-input，手机是 .form-field 包着
 * input / textarea（见 parts/contact-form.php、mob.css），少一条那边不亮。
 */
.form-input.has-error,
.form-field.has-error input,
.form-field.has-error textarea {
  border-color: var(--ms-red);
}

.form-input.has-error::placeholder,
.form-field.has-error input::placeholder,
.form-field.has-error textarea::placeholder {
  color: var(--ms-red);
}

/* ============================================================
   表单提交结果提示（.ms-notice）

   由 inc/functions/forms.php 的 maishang_form_notice() 输出，
   parts/contact-form.php 在 PC 与手机两套表单里各调用一次。

   设计稿里没有这个元素 —— 静态稿没有后端，也就没有「提交完要告诉用户
   成没成」这一步。字号按各自断点的基准换算：PC 用 vw（设计稿 1440），
   手机用 rem（1rem = 100 设计像素，见 mob.css）。
   ============================================================ */
.ms-notice {
  border-radius: 4px;
  border-left: 3px solid currentColor;
}

.ms-notice-ok {
  color: #0a7c3f;
  background: #eaf7ef;
}

.ms-notice-err {
  color: var(--ms-red);
  background: #fdecee;
}

@media (min-width: 1200px) {
  .ms-notice {
    padding: 0.6944vw 1.1111vw;
    margin-bottom: 1.1111vw;
    font-size: 1.1111vw;
    line-height: 1.6;
  }
}

@media (max-width: 1199.98px) {
  .ms-notice {
    padding: 0.16rem 0.24rem;
    margin-bottom: 0.24rem;
    font-size: 0.26rem;
    line-height: 1.6;
  }
}

/* ---------- 分页器中间的省略号 ---------- */
/*
 * category.php 的分页器做了窗口截断（当前页左右各 2 个，首尾常驻），
 * 中间用这个 span 占位。它带 .pager-num 是为了继承宽度与行高、行不会跳，
 * 但要挡掉 .pager-num:hover 的红色 —— 省略号不是可点的页码。
 */
.pager-gap {
  pointer-events: none;
  cursor: default;
}

/* ---------- 跳转到主内容（无障碍，全宽度可用）---------- */
.skip-link {
  position: absolute;
  left: 0.2rem;
  top: -1rem;
  z-index: 200;
  padding: 0.12rem 0.3rem;
  background: var(--ms-red);
  color: #fff;
  font-size: 0.26rem;
  border-radius: 0.06rem;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0.2rem;
}

/* ============================================================
   两套页头 / 页脚互斥
   DOM 里同时存在 PC 版（.site-header / .site-footer）和手机版
   （.m-header / .m-footer），靠断点决定谁可见。
   这是唯一需要行内 display 切换的地方 —— 对应 build-css.mjs 里的
   8 个 .m- 改名，其余同名类因为媒体查询天然隔离，不需要改名。
   ============================================================ */

@media (min-width: 1200px) {
  /* PC 布局：隐藏手机版页头、全屏菜单、手机版页脚 */
  .m-header,
  .menu-overlay,
  .m-footer,
  .m-copyright {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  /* 手机布局：隐藏 PC 版页头、首屏占位、页脚、版权条 */
  .site-header,
  .header-spacer,
  .site-footer,
  .copyright {
    display: none;
  }

  /*
   * .hero-parallax 是 PC 端的视差包裹层，手机版设计稿里没有这一层
   * （手机是 .home-hero > .swiper.hero-swiper 直接嵌套）。
   * 这层留着会把首屏高度算错（实测 103px vs 应有的 246px），
   * display:contents 让它自己不参与布局、子元素照常排。
   */
  .hero-parallax {
    display: contents;
  }

  /*
   * 手机版 .page-hero 的背景图在手机稿里是各页各自覆盖的
   * （about.html 里写了 background-image: url(img/about-banner.png)）。
   * 那两处规则写在页面级 CSS 里，这里补齐资源变量。
   */
  .page-hero--about {
    background-image: url(../img/about-banner.webp);
  }
}

/* ============================================================
   only-pc / only-mob：区块级的两套 DOM 互斥

   有些区块在 PC 和手机上是两套完全不同的结构，不能靠同一份标记加媒体查询
   解决 —— 比如产品系列选择，PC 是 .products-categories，手机是 .series-bar。
   这类区块两份标记都输出，各自打上 only-pc / only-mob，由断点决定谁可见。

   标记直接加在既有元素上，不额外套一层 div —— 套壳会破坏
   .parent > .child 这类直接子代选择器。
   ============================================================ */

@media (min-width: 1200px) {
  .only-mob {
    display: none !important;
  }
}

/* ============================================================
   设计稿把页脚放在 .sec-contact 内部

   原稿结构是
       <section class="sec-contact">        height: 86.1806vw
         <div class="contact-panel">…</div> 41.6667vw
         <footer class="site-footer">…</footer> 44.4444vw
       </section>
   也就是那个 86.1806vw 是「表单 + 页脚」的高度。

   本主题的页脚由 footer.php 输出、位于所有区块之外，所以各页 CSS 里的
   .sec-contact 都不再写死高度，交给内容自然撑开 —— 否则每个用到
   .sec-contact 的页面底部都会空出一整个页脚。死高度已经删掉，
   这里也就不再需要 !important 兜底。
   ============================================================ */

@media (max-width: 1199.98px) {
  .only-pc {
    display: none !important;
  }
}

/* ============================================================
   通用内容页：404 / 搜索结果 / 普通页面（.ms-plain）

   这三个模板原先都不存在 —— 404 与搜索走 index.php 兜底，后台新建的页面
   也落进兜底分支。所以设计稿里没有对应版式，下面这套是按主题既有的设计
   语言补的合理默认（红 #e60012、灰阶用 --ms-line / --ms-text-muted、
   卡片圆角与按钮沿用 mob.css 的 .btn-more）。**拿到设计稿后可以整段替换。**

   作用域一律挂在 .ms-plain 上：PC 端的首页 / 分类页靠各自的 .sec-* 控宽，
   给 .container 直接加宽度会把它们的版式带偏。
   ============================================================ */

/* ---------- PC 断点（设计稿 1440 宽，1px = 0.0694vw）---------- */
@media (min-width: 1200px) {
  .ms-plain .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4.1667vw 1.3889vw 6.9444vw;
  }

  .ms-plain .entry-title {
    font-size: 2.2222vw;
    line-height: 1.3;
    color: var(--ms-text);
    margin-bottom: 1.3889vw;
  }

  .ms-plain .entry-content {
    font-size: 1.1111vw;
    line-height: 1.9;
    color: var(--ms-text-muted);
  }

  .ms-plain .entry-content p {
    margin-bottom: 1.1111vw;
  }

  /* 404：内容居中，别让一句话孤零零贴在左上角 */
  .ms-plain .error-404 {
    padding: 4.1667vw 0;
    text-align: center;
  }

  .ms-plain .error-404 .entry-content p + p {
    margin-top: 0.6944vw;
  }

  /* .btn-more 的样式在 mob.css 里，PC 断点吃不到，这里补一份等价的 */
  .ms-plain .btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.1111vw;
    min-width: 13.8889vw;
    height: 3.3333vw;
    padding: 0 1.3889vw;
    margin-top: 2.0833vw;
    border: 0.1389vw solid var(--ms-red);
    border-radius: 0.5556vw;
    background: #fdf2f3;
    color: var(--ms-red);
    font-size: 1.1111vw;
    letter-spacing: 0.02em;
    transition: color 0.3s, background-color 0.3s;
  }

  .ms-plain .btn-more img {
    width: 2.6389vw;
    height: 0.6944vw;
  }

  .ms-plain .btn-more:hover {
    background: var(--ms-red);
    color: #fff;
  }

  /* ---------- 搜索 ---------- */
  .ms-plain .search-head {
    margin-bottom: 3.4722vw;
  }

  .ms-plain .search-count {
    font-size: 1.1111vw;
    color: var(--ms-text-muted);
    margin-bottom: 1.3889vw;
  }

  .ms-plain .search-form {
    display: flex;
    align-items: center;
    gap: 0.6944vw;
    max-width: 41.6667vw;
  }

  .ms-plain .search-form-label {
    flex: 0 0 auto;
    font-size: 1.1111vw;
    color: var(--ms-text-muted);
  }

  .ms-plain .search-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 3.3333vw;
    padding: 0 0.9722vw;
    font-family: inherit;
    font-size: 1.1111vw;
    color: var(--ms-text);
    background: #fff;
    border: 0.0694vw solid var(--ms-line);
    border-radius: 0.2778vw;
  }

  .ms-plain .search-field:focus {
    outline: none;
    border-color: var(--ms-red);
  }

  .ms-plain .search-submit {
    flex: 0 0 auto;
    height: 3.3333vw;
    padding: 0 1.6667vw;
    font-family: inherit;
    font-size: 1.1111vw;
    color: #fff;
    background: var(--ms-red);
    border: 0;
    border-radius: 0.2778vw;
    cursor: pointer;
  }

  /* 一行三张，与公司动态列表同宽 */
  .ms-plain .search-list {
    display: flex;
    flex-wrap: wrap;
  }

  .ms-plain .search-item {
    width: 31.5%;
    margin: 0 2.75% 2.75% 0;
  }

  .ms-plain .search-item:nth-child(3n) {
    margin-right: 0;
  }

  .ms-plain .search-item-link {
    display: block;
    height: 100%;
    background: #fff;
    border: 0.0694vw solid var(--ms-line);
    border-radius: 0.5556vw;
    overflow: hidden;
    transition: box-shadow 0.3s;
  }

  .ms-plain .search-item-link:hover {
    box-shadow: 0 0.6944vw 1.3889vw rgba(0, 0, 0, 0.08);
  }

  .ms-plain .search-item-figure,
  .ms-plain .search-item-figure img {
    display: block;
    width: 100%;
  }

  .ms-plain .search-item-body {
    padding: 1.1111vw;
  }

  .ms-plain .search-item-title {
    font-size: 1.25vw;
    line-height: 1.4;
    color: var(--ms-text);
    /* 标题最多两行，卡片高度才齐 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .ms-plain .search-item-excerpt {
    margin-top: 0.6944vw;
    font-size: 0.9722vw;
    line-height: 1.7;
    color: var(--ms-text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .ms-plain .search-empty {
    text-align: center;
    padding: 2.7778vw 0;
    color: var(--ms-text-muted);
    font-size: 1.1111vw;
  }

  .ms-plain .search-empty .search-form {
    margin: 2.0833vw auto 0;
    justify-content: center;
  }

  /* WP 原生分页（the_posts_pagination） */
  .ms-plain .pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6944vw;
    margin-top: 3.4722vw;
    font-size: 1.1111vw;
  }

  .ms-plain .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.7778vw;
    height: 2.7778vw;
    padding: 0 0.6944vw;
    color: var(--ms-text-muted);
    border: 0.0694vw solid var(--ms-line);
    border-radius: 0.2778vw;
  }

  .ms-plain .pagination .page-numbers.current,
  .ms-plain .pagination .page-numbers:hover {
    color: #fff;
    background: var(--ms-red);
    border-color: var(--ms-red);
  }
}

/* ---------- 手机断点（设计稿 750 宽，1rem = 100 设计像素）---------- */
@media (max-width: 1199.98px) {
  /* 只补纵向留白：横向 padding 由 mob.css 的 .container 提供，别覆盖掉 */
  .ms-plain .container {
    padding-top: 0.6rem;
    padding-bottom: 0.9rem;
  }

  .ms-plain .entry-title {
    font-size: 0.44rem;
    line-height: 1.3;
    color: var(--ms-text);
    margin-bottom: 0.24rem;
  }

  .ms-plain .entry-content {
    font-size: 0.28rem;
    line-height: 1.9;
    color: var(--ms-text-muted);
  }

  .ms-plain .entry-content p {
    margin-bottom: 0.28rem;
  }

  .ms-plain .error-404 {
    padding: 0.8rem 0;
    text-align: center;
  }

  /* .btn-more 本体样式在 mob.css 里，这里只补 404 / 搜索页用到的间距 */
  .ms-plain .error-404 .btn-more,
  .ms-plain .search-empty .btn-more {
    margin-top: 0.5rem;
  }

  /* ---------- 搜索 ---------- */
  .ms-plain .search-head {
    margin-bottom: 0.6rem;
  }

  .ms-plain .search-count {
    font-size: 0.26rem;
    color: var(--ms-text-muted);
    margin-bottom: 0.3rem;
  }

  .ms-plain .search-form {
    display: flex;
    align-items: center;
    gap: 0.16rem;
  }

  .ms-plain .search-form-label {
    flex: 0 0 auto;
    font-size: 0.28rem;
    color: var(--ms-text-muted);
  }

  .ms-plain .search-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 0.72rem;
    padding: 0 0.24rem;
    font-family: inherit;
    font-size: 0.28rem;
    color: var(--ms-text);
    background: #fff;
    border: 0.02rem solid var(--ms-line);
    border-radius: 0.08rem;
  }

  .ms-plain .search-field:focus {
    outline: none;
    border-color: var(--ms-red);
  }

  .ms-plain .search-submit {
    flex: 0 0 auto;
    height: 0.72rem;
    padding: 0 0.36rem;
    font-family: inherit;
    font-size: 0.28rem;
    color: #fff;
    background: var(--ms-red);
    border: 0;
    border-radius: 0.08rem;
    cursor: pointer;
  }

  /* 单列，与公司动态手机版卡片同一套观感 */
  .ms-plain .search-item {
    margin-bottom: 0.4rem;
    background: #fff;
    border: 0.02rem solid var(--ms-line);
    border-radius: 0.16rem;
    overflow: hidden;
  }

  .ms-plain .search-item-link {
    display: block;
  }

  .ms-plain .search-item-figure,
  .ms-plain .search-item-figure img {
    display: block;
    width: 100%;
  }

  .ms-plain .search-item-body {
    padding: 0.28rem;
  }

  .ms-plain .search-item-title {
    font-size: 0.32rem;
    line-height: 1.4;
    color: var(--ms-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .ms-plain .search-item-excerpt {
    margin-top: 0.16rem;
    font-size: 0.26rem;
    line-height: 1.7;
    color: var(--ms-text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .ms-plain .search-empty {
    text-align: center;
    padding: 0.6rem 0;
    color: var(--ms-text-muted);
    font-size: 0.28rem;
  }

  .ms-plain .search-empty .search-form {
    margin: 0.5rem 0 0;
  }

  .ms-plain .pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    margin-top: 0.5rem;
    font-size: 0.28rem;
  }

  .ms-plain .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0.6rem;
    height: 0.6rem;
    padding: 0 0.16rem;
    color: var(--ms-text-muted);
    border: 0.02rem solid var(--ms-line);
    border-radius: 0.08rem;
  }

  .ms-plain .pagination .page-numbers.current {
    color: #fff;
    background: var(--ms-red);
    border-color: var(--ms-red);
  }
}