/*
Theme Name: SPUNUM V3
Theme URI: https://spunum.com
Author: Mavis (SPUNUM Group)
Description: SPUNUM 独立站主题 —— 视觉复刻生产静态站（每页一套原 CSS，按语言加载），内容全部由 ACF 字段与 CPT 提供，后台可维护。
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: spunum-v3
Tags: business, b2b, custom-menu, translation-ready
*/

/* 全站公共微调（主题本身不覆盖页面 CSS，各页 CSS 在模板里按语言单独加载） */
:root {
  --green: #283C32;
  --green-lt: #3a5346;
  --green-dk: #1a2a22;
  --orange: #B46432;
  --orange-lt: #d68848;
  --cream: #F2E8D7;
  --cream-dk: #d8c8a8;
  --text: #1a1a22;
  --text-2: #5d6e5e;
  --white: #ffffff;
}

body.wp-admin-bar { margin-top: 32px; }

/* 后台可编辑提示（仅 wp-admin 可见，不影响前台） */
.spunum-admin-note {
  font-size: 12px; color: #8a5a3b; margin: 4px 0 0;
}


/* ============================================================
   2026-11-01 手机端修复
   Garry 报障: 手机上能打开, 但很不正常, 不跳转其他内部页面。
   实测 (iPhone 390px): /zh-CN/ scrollWidth=421 溢出30px, /zh-TW/=436 溢出46px,
   EN=390 无溢出; spw-fab right=397 超出视口 7px。
   ============================================================ */

/* (1) 英文语言按钮 <button data-href> 已改 <a href> (零 JS 依赖),
      原 .lang-btn 是 button 样式, <a> 需补 display / text-decoration。 */
a.lang-btn { display: inline-block; text-decoration: none; box-sizing: border-box; }

/* (2) 中文页横向溢出: 页脚长邮箱 (garrywang7758521@gmail.com) 撑破 1fr 1fr 两列。
      CSS Grid 的 min-width:auto 默认不允许列压缩到内容最小宽度以下,
      英文 footer 邮箱 (garry@spunum.com) 短所以没暴露。 */
@media (max-width: 768px) {
  .footer-grid > div { min-width: 0; }
  .footer-links, .footer-links li { min-width: 0; }
  .footer-links a { overflow-wrap: anywhere; word-break: break-word; }
}

/* (3) 悬浮按钮在手机上必须隐藏:
      各页 CSS 里 @media(max-width:768px){.spw-fab{display:none}} 写在前面,
      同文件后面的全局 .spw-fab{display:flex} 按源码顺序胜出 -> 手机上又冒出来。
      这里用 !important 兜底 (原意就是移动端隐藏, 且有底部栏替代入口)。 */
@media (max-width: 768px) { .spw-fab { display: none !important; } }


/* ============================================================
   2026-11-01 手机端修复 · 第二轮
   CSS Grid 的 min-width:auto 是本轮横向溢出的共同根因:
   网格项默认不能压缩到「内容最小宽度」以下。
   - 页脚: garrywang7758521@gmail.com 这种无空格长串
   - .factory-highlight: 内部 <img> 的固有宽度 (1200px)
   实测 iPhone 390px: 该元素宽 396px(溢出26px), 连带把 position:fixed
   的 .spw-mobilebar 也拉宽到 417px(溢出27px)。
   ============================================================ */
@media (max-width: 768px) {
  .factory-highlight-inner,
  .factory-highlight-inner > *,
  .footer-grid > *,
  .six-mini > *,
  .cat-grid > *,
  .wh-grid > *,
  .msg-grid > *,
  .structure-grid > *,
  .journey-grid > *,
  .hero-cta > * { min-width: 0; }

  .factory-highlight-img { min-width: 0; max-width: 100%; }
  .factory-highlight-img img { max-width: 100%; }

  /* 兜底: 移动端任何图片都不得超出容器 */
  img { max-width: 100%; }

  /* 移动底栏本身: 5 项 flex:1, 长单词 (WhatsApp) 会把容器撑破 */
  .spw-mobilebar { max-width: 100vw; overflow-x: hidden; }
  .spw-mb-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* ============================================================
   2026-11-01 手机端修复 · 第三轮
   收尾 2px: .factory-highlight-stats 里的 "1,200,000+" 数字
   在 390px 视口下把第 3 格撑出 2px (right=392)。
   实测: /zh-CN/ scrollWidth 421 -> 417 -> 392, 修完归零。
   ============================================================ */
@media (max-width: 768px) {
  .factory-highlight-stats,
  .factory-highlight-stats > *,
  .factory-highlight-stat { min-width: 0; }
  .factory-highlight-stat .num { font-size: 22px; line-height: 1.15; }
  .factory-highlight-stat .lbl { font-size: 11px; }
}


/* ============================================================
   2026-11-01 手机端修复 · 第四轮
   清零残余 2-4px:
   /zh-TW/ 首页 394 (溢出4) · /zh-CN/products.html 392 (溢出2)
   溢出元素: .pdp-gallery / .pdp-gallery-main / .pdp-thumbs / .pdp-thumb
             .pdp-title / .pdp-info-trust —— 同为 CSS Grid min-width:auto
   ============================================================ */
@media (max-width: 768px) {
  .pdp-gallery,
  .pdp-gallery-main,
  .pdp-gallery-main > *,
  .pdp-thumbs,
  .pdp-thumb,
  .pdp-info,
  .pdp-info > *,
  .pdp-info-trust,
  .pdp-title,
  .pdp-gallery img { min-width: 0; max-width: 100%; }

  .pdp-title { overflow-wrap: anywhere; word-break: break-word; }

  /* 最终兜底: 移动端不允许整页横向滚动。
     上面已逐项修掉真实溢出源, 这里只兜住 <=4px 的亚像素/字体度量误差,
     裁切量不可见; 不影响 position: sticky 于页面内元素 (无 sticky 使用)。 */
  html, body { max-width: 100%; overflow-x: hidden; }
}


/* ============================================================
   2026-11-01 手机端修复 · 第五轮
   截图上暴露的 4 个视觉缺陷:
   (a) 中文页底部栏文字是浏览器默认蓝色链接
       -> home.zh-CN.css / home.zh-TW.css 里**根本没有 .spw-mb-item 规则**,
          只有 home.en.css:148 有。样式必须补成全局。
   (b) 桌面端也显示底部栏 (products/about 页)
       -> 这些页 CSS 没有 .spw-mobilebar{display:none}, div 默认 block。
          这是第一轮「三语都输出底栏」引入的回归。
   (c) 390px 下 logo + 语言按钮 + 提交询盘 争位:
       语言按钮被挤成竖排("简体中文"竖着写), "提交询盘"折成两行。
   ============================================================ */

/* (a) 底部栏项样式 —— 与 home.en.css:148 逐字对齐, 三语通用 */
.spw-mb-item {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  color: var(--cream);
  text-decoration: none;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* (b) 底栏默认在桌面隐藏, 只有 <=768px 才出现 */
.spw-mobilebar { display: none; }

@media (max-width: 768px) {
  .spw-mobilebar { display: flex; }
}

/* (c) 移动端顶部导航挤压修复 */
@media (max-width: 768px) {
  .nav { padding: 0 10px; gap: 6px; }
  .nav-logo { flex-shrink: 1; min-width: 0; gap: 8px; }
  .nav-logo-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 5px; flex-shrink: 0; }
  .nav-logo-text { font-size: 17px; letter-spacing: 1px; white-space: nowrap; }
  .nav-right { gap: 8px; flex-shrink: 0; }

  .lang-current {
    min-width: 0;
    padding: 6px 8px;
    font-size: 11px;
    gap: 3px;
    white-space: nowrap;
  }
  .lang-current .lang-arrow { display: none; }
  .lang-current .lang-label { white-space: nowrap; }

  /* 提交询盘按钮: 不换行, 收窄内边距 */
  .btn-nav-cta {
    padding: 6px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  .nav-right > a:not(.btn-nav-cta) {
    padding: 6px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
}


/* ============================================================
   2026-11-01 手机端修复 · 第六轮
   底栏基础定位补齐:
   实测 /zh-CN/products.html 的 .spw-mobilebar 落在 y=10436 (页面最底部),
   而不是 y=775 (视口内) —— 因为只有三语首页 CSS 定义了 position:fixed,
   products / about / contact 等页 CSS 里没有, 退化成静态块。
   这里补基础定位; 各页若自有定义则以后加载的页 CSS 为准。
   ============================================================ */
.spw-mobilebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background: var(--green);
  max-width: 100vw;
}

/* 底栏固定后, 正文底部要给足留白, 否则页脚最后一行被遮住 */
@media (max-width: 768px) {
  body { padding-bottom: 72px; }
}


/* ============================================================
   2026-11-01 手机端修复 · 第七轮
   移动端 logo 与右侧控件争位:
   实测 /zh-CN/ 390px 下 .nav-right 从 x=189 开始, 而 logo 实际宽约 199px
   (icon 40 + gap 12 + "SPUNUM" 22px/letter-spacing 3px), 导致 "NUM" 被
   语言按钮压住。用 .nav 前缀提高特异性以覆盖各页 CSS 的单类选择器。
   ============================================================ */
@media (max-width: 768px) {
  .nav .nav-logo { gap: 6px; flex-shrink: 1; min-width: 0; overflow: hidden; }
  .nav .nav-logo-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    flex-shrink: 0;
  }
  .nav .nav-logo-text {
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap;
  }
  .nav .nav-logo-text .spu { padding: 1px 4px !important; }

  /* 极窄屏 (<360) 再收一档 */
}
@media (max-width: 360px) {
  .nav .nav-logo-text { font-size: 12px !important; letter-spacing: 0 !important; }
  .lang-current { font-size: 10px !important; padding: 5px 6px !important; }
  .btn-nav-cta { font-size: 10px !important; padding: 5px 8px !important; }
}