/**
 * ============================================================
 * PackGene 官网 · 新主题风格覆盖层（restyle.css）
 * ------------------------------------------------------------
 * 目标：将站点视觉主题替换为参考设计稿风格（Apple 官网式设计语言），
 *      不改动任何 DOM 结构 / 文案 / JS 交互，纯 CSS 覆盖实现换肤。
 * 加载：header.php 中位于 style.css 之后（同优先级规则后者生效）。
 * 分层：
 *   01. Design Tokens（:root 变量，后续其他页面换肤复用）
 *   02. 全局基础（字体 / 工具色类重映射 / 胶囊按钮 / 轮播箭头圆形式）
 *   03. 全局布局（header / footer）
 *   04. 页面作用域覆盖（about / services-detail / newsletter 等，多页共享）
 *   （原 05/06 首页专属章节已迁至 restyle-home.css，仅首页模板加载）
 * 注意：
 *   - !important 仅用于覆盖模板内联 style（普通规则无法覆盖内联样式）。
 *   - 所有取值来自参考项目 globals.css / DESIGN.md 提取的 Tokens。
 *   - 不修改尺寸类工具（text-hd* / mt-hd* 等），保持原间距比例（Density）。
 * ============================================================
 */

/* ============================================================
 * 01. Design Tokens（新主题设计变量）
 * ============================================================ */

/* [字体-0] Inter 自托管字体（SIL OFL 1.1,可自由商用）：
 *   与内容页 content-apple.css 中的声明一致（同 src,浏览器自动去重）。
 *   供全站 --pg-font / 首页与导航使用;未用到该字体的页面不会下载字体文件。 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7, U+02CC, U+02CE, U+02D7, U+02DD, U+02DF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* 色彩 */
  --pg-bg: #ffffff;               /* 页面主背景 */
  --pg-bg-secondary: #f5f5f7;     /* 次级区块背景 */
  --pg-title: #1d1d1f;            /* 标题 / 主文本（近黑） */
  --pg-text-secondary: #62626a;   /* 次级正文（暗淡提示） */
  --pg-primary: #0067d9;          /* 操作蓝（按钮 / 链接 / 强调） */
  --pg-primary-hover: #0056b8;    /* 操作蓝悬停 */
  --pg-navy: #002753;             /* 深蓝（深色区块背景，沿用品牌深蓝） */
  --pg-accent-bg: #edf5ff;        /* 淡蓝强调背景 */
  --pg-border: #e8e8ed;           /* 分隔线 / 描边 */

  /* 圆角 */
  --pg-radius-card: 24px;         /* 卡片圆角（参考稿 22-27px 区间） */
  --pg-radius-btn: 999px;         /* 胶囊按钮 */

  /* 阴影 */
  --pg-shadow-card: 0 14px 35px rgb(0 39 83 / 4%);      /* 卡片静态阴影 */
  --pg-shadow-hover: 0 18px 45px rgb(0 39 83 / 10%);    /* 卡片悬停阴影 */
  --pg-shadow-dropdown: 0 14px 35px rgb(0 39 83 / 8%);  /* 下拉菜单阴影 */

  /* 字体 */
  /* [字体-1] 首选 Inter(自托管,与内容页统一),系统栈兜底:
 *   2026-10 全站字体统一调整:此前首页/导航走纯系统栈,与内页(Inter)不一致。
 *   首页局部的 Montserrat 数字/规格元素(restyle-home.css 8 处)按需求保留。 */
  --pg-font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
 * 02. 全局基础
 * ============================================================ */

/* 2.1 字体：Montserrat → Inter + 系统栈。
 *   html 级继承会被编译产物里 body 级的 ui-sans-serif 覆盖,故 body 必须显式声明。 */
html:lang(en-US) {
  font-family: var(--pg-font);
}

body {
  font-family: var(--pg-font);
  color: var(--pg-title);
  -webkit-font-smoothing: antialiased;
}

/* 2.2 工具色类重映射（Tailwind 工具类为编译产物，rgb 硬编码，只能按类名覆盖）
 *     text-darkBlue #002753 → 标题近黑（参考稿标题色） */
.text-darkBlue {
  color: var(--pg-title);
}
/* 带透明度的 darkBlue 系列 → 保持层级语义，仅替换色相 */
.text-darkBlue30 {
  color: rgb(29 29 31 / 0.3);
}
.text-darkBlue40 {
  color: var(--pg-text-secondary);
}
.text-darkBlue50 {
  color: var(--pg-text-secondary);
}
/* text-black（纯黑标题/正文）→ 近黑 */
.text-black {
  color: var(--pg-title);
}
/* text-softBlue #1e8afb → 操作蓝（参考稿操作色） */
.text-softBlue {
  color: var(--pg-primary);
}
/* bg-lightGray #f9f9f9 → 次级区块背景 #f5f5f7 */
.bg-lightGray {
  background-color: var(--pg-bg-secondary);
}

/* 2.3 六边形按钮 → 胶囊按钮（参考稿主按钮形态）
 *     说明：SVG 六边形背景由 JS 计算绘制，隐藏后改为纯 CSS 胶囊底色，
 *     不触碰 JS；点击区域（<a>）与事件完全不变。 */
.link-more.js-bg-hexagon {
  background-color: var(--pg-primary);
  border-radius: var(--pg-radius-btn);
  overflow: hidden;
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}
.link-more.js-bg-hexagon .js-bg-hexagon-svg {
  display: none;
}
.link-more.js-bg-hexagon > .flex.items-center {
  justify-content: center; /* 参考稿胶囊按钮文字居中 */
}
.link-more.js-bg-hexagon:hover {
  background-color: var(--pg-primary-hover);
  box-shadow: 0 8px 20px rgb(0 103 217 / 25%);
}

/* 2.4 六边形装饰形状 → 圆形（轮播箭头 / 订阅提交 / 搜索提交）
 *     技巧：对 hexagon SVG 施加 clip-path: circle(50%)，
 *     尺寸与盒模型完全不变，仅把六边形外观变为圆形。 */
.splide-arrow svg.hexagon,
.newsletter-form-submit svg.hexagon {
  clip-path: circle(50%);
}
/* 轮播箭头：白底圆形 + 柔和投影，箭头深色、悬停变蓝 */
.splide-arrow {
  color: #ffffff;
  transition: color 0.3s;
}
.splide-arrow svg.hexagon {
  filter: drop-shadow(0 4px 12px rgb(0 39 83 / 14%));
}
.splide-arrow .arrow {
  color: var(--pg-title);
  transition: color 0.3s;
}
.splide-arrow:hover .arrow {
  color: var(--pg-primary);
}
.splide-arrow:hover svg.hexagon {
  color: var(--pg-accent-bg);
}
/* 订阅 / 搜索的六边形提交按钮 → 品牌蓝圆形 */
.newsletter-form-submit svg.hexagon {
  color: var(--pg-primary);
  transition: color 0.3s;
}
.newsletter-form-submit:hover svg.hexagon {
  color: var(--pg-primary-hover);
}

/* ============================================================
 * 03. 全局布局（header / footer，所有页面共享）
 * ============================================================ */

/* 3.1 吸顶导航：不透明白底 + 底部细分割线（参考稿导航质感）
 *     说明：index.php 内联 <style> 中有 .header{background:#fff}，
 *     且其位置晚于本文件，故用 body 前缀提高优先级，不加 !important。
 *     [修-2] 原参考稿的 backdrop-filter:blur(18px) 毛玻璃已移除：
 *     backdrop-filter 非 none 会使 header 成为内部 position:fixed 后代
 *     的 containing block，移动端菜单抽屉（nav.php 的
 *     body.menu-open .header-right，fixed 全屏）被锚定到约 80px 高的
 *     header 盒内，点击汉堡后菜单无法全屏展开。背景同步从 94% 半透明
 *     改为不透明白（无模糊配合的半透明底会在滚动时透出叠字）。 */
body .header {
  background-color: #ffffff;
  border-bottom: 1px solid #eeeef0;
}

/* 导航链接：模板内联 style="color:#000"，需 !important 覆盖 */
body .hm-link {
  color: var(--pg-title) !important;
  transition: color 0.3s;
}
body .hm-li:hover > .hm-link,
body .hm-link:hover {
  color: var(--pg-primary) !important;
}

/* 下拉菜单面板：白底 + 大圆角 + 柔和层级阴影 */
body .hm-sub-main {
  border-radius: 16px;
  box-shadow: var(--pg-shadow-dropdown);
}
/* 下拉菜单链接悬停 → 操作蓝 */
.hm-sub a {
  transition: color 0.3s;
}
.hm-sub a:hover {
  color: var(--pg-primary);
}

/* 导航右侧图标按钮（用户/订单）六边形描边 → 操作蓝 */
body .header-btn svg .border {
  fill: var(--pg-primary);
}
body .header-btn:hover svg .bg,
body .header-btn.active svg .bg {
  fill: var(--pg-primary);
}

/* 3.2 页脚 */
/* 菜单与社交图标悬停 → 操作蓝（原 softBlue） */
.footer-menu a:hover,
.footer-social a:hover {
  color: var(--pg-primary);
}
/* 页脚分隔线：darkBlue 20% → 中性分割线色 */
footer .h-1.bg-darkBlue {
  background-color: var(--pg-border);
  opacity: 1;
}

/* 3.3 导航右上角功能区：登录文字 → 操作蓝 + 悬停加深
 *     （与参考稿导航一致：默认即操作蓝，悬停切换深一档，0.3s 过渡） */
/* 登录文字（未登录态 "login"，span 继承自 <a>）：黑色 → 操作蓝 */
body .header-user-box .header-user {
  color: var(--pg-primary);
  transition: color 0.3s;
}
body .header-user-box .header-user:hover {
  color: var(--pg-primary-hover);
}

/* 3.3a 购物车图标（header-order-box）：白底不透明 PNG → mask 方式 SVG。
 *     原 PNG 用 CSS 滤镜重着色会把白底一并染色（已验证不可行）；
 *     改为 <span class="pg-cart"> + mask 引用 lucide shopping-cart.svg
 *     （透明底，mask 取 alpha 形状），颜色 currentColor 随链接文字。
 *     交互：默认操作蓝，悬停浅一档（品牌亮蓝 #1e8afb）。
 *     尺寸 1em 跟随链接字号，与其他导航图标（w-[1em] h-[1em]）同构：
 *     1920px 下 = 24×24，768px 下 = 20×20，任意断点同步缩放不混排；
 *     手机端（≤750px）由 nav.php 内联媒体查询固定 18×18。 */
body .header-order-box .header-user {
  color: var(--pg-primary);
  transition: color 0.3s;
}
body .header-order-box .header-user:hover {
  color: #1e8afb; /* 品牌亮蓝：比操作蓝浅一档 */
}
body .header-order-box .pg-cart {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/ICON/shopping-cart.svg") no-repeat center / contain;
  mask: url("../assets/img/ICON/shopping-cart.svg") no-repeat center / contain;
}

/* 3.4 右侧悬浮联系按钮 [色-G1]：浅蓝渐变底 → 主题蓝纯色
 *     全站固定元素（footer.php .contact-us-icon）；两份 style.css 均为
 *     (0,1,0) 特异性，用 body 前缀 (0,1,1) 确保任意加载顺序下都生效。
 *     如需还原：删除本块即恢复 linear-gradient(#f6fbfe,#3d99fa,#1f8afc)。 */
body .contact-us-icon {
  background: var(--pg-primary);
}

/* ============================================================
 * 04. 页面作用域覆盖（多页共享规则：about / services-detail /
 *     newsletter 等；首页专属规则已迁至 restyle-home.css）
 * ============================================================ */

/* 4.0 通用排版：首页区块大标题（参考稿 H2：600 字重 + 收紧字距） */
main h2.text-hd36 {
  color: var(--pg-title);
  font-weight: 600;
  letter-spacing: -0.045em;
}

/* ------------------------------------------------------------
 * 4.1 Banner 区（已迁至 restyle-home.css 01 章节——仅首页加载）
 * ----------------------------------------------------------- */

/* ------------------------------------------------------------
 * 4.2 About 简介（about-us 页在用；首页 About 区已随改版-1 移除）
 * ----------------------------------------------------------- */
/* 副标题排版（600 字重） */
.abouti-left > p.text-hd36 {
  font-weight: 600;
  letter-spacing: -0.03em;
}
/* 六边形裁切头图 → 大圆角矩形（SVG image 的 clip-path 属性用 CSS 覆盖） */
.aboutir-img image {
  clip-path: inset(0 round var(--pg-radius-card));
}

/* ------------------------------------------------------------
 * 4.3 Index Services 服务大图 + 白卡
 *     [首页改版-2/3] iservices-content 组件仅存在于旧首页模板，
 *     其他页面无此类（已全局验证），规则随 DOM 删除，不恢复
 * ----------------------------------------------------------- */

/* ------------------------------------------------------------
 * 4.4 客户评价轮播 / 4.5 新闻选项卡区（已迁至 restyle-home.css
 *     02 章节作轮播回退预留——仅首页加载，其他页面维持原版）
 * ----------------------------------------------------------- */

/* ------------------------------------------------------------
 * 4.4 / 4.5（原评价轮播 / 新闻轮播覆盖）
 *     首页改版-6/7：两区轮播已改静态网格，规则移至 06 章节，此处一并删除
 * ----------------------------------------------------------- */

/* ------------------------------------------------------------
 * 4.6 Newsletter 订阅条（深色区块）
 * ----------------------------------------------------------- */
/* 黑底+背景图 → 品牌深蓝纯色块（内联 style 需 !important） */
.newsletter {
  background-color: var(--pg-navy) !important;
  background-image: none !important;
}
/* 输入条：白色六边形 → 白色胶囊输入框（SVG 隐藏 + CSS 圆角） */
.newsletter-form {
  background-color: #ffffff;
  border-radius: var(--pg-radius-btn);
}
.newsletter-form .js-bg-hexagon-svg {
  display: none;
}
/* 输入文字：白字 → 深色字（原 text-white 工具类，本类后加载覆盖） */
.newsletter-form-input {
  color: var(--pg-title);
}
.newsletter-form-input::placeholder {
  color: rgb(29 29 31 / 0.4);
}
/* 提交按钮已在 2.4 中统一为品牌蓝圆形 */

/* [修-1] Newsletter 标题恢复白字：4.0 的 main h2.text-hd36 近黑规则
 *     误伤了本区标题（父级 .text-white 是继承色，会被直接规则击穿），
 *     深蓝底上标题必须为白色；特异性 (0,2,2) 高于 4.0 的 (0,1,2)。 */
main .newsletter .text-white h2 {
  color: #ffffff;
}

/* 4.7（原首页文案内链接配色）：已迁至 restyle-home.css 1.6 */

/* ------------------------------------------------------------
 * 4.8 首页文字灰阶（参考稿排版语言：标题近黑 / 正文中灰、去掉正文字重）
 *     说明：以下每块独立编号、互不依赖，某块效果不理想时
 *     删除对应编号的规则块即可单独还原，不影响其他改动。
 * ----------------------------------------------------------- */

/* [文字-1] About 区块介绍段落（about-us 页在用；首页该区块已移除）：
 *     近黑 500 → 中灰 400，与参考稿正文层级一致。 */
.abouti-left > h3.text-hd20 {
  color: var(--pg-text-secondary);
  font-weight: 400;
}

/* [文字-3]（原 Banner piVector 列表灰阶）：已迁至 restyle-home.css 1.3 */

/* ------------------------------------------------------------
 * 4.9 主题蓝强调与色值微调（[色-N] 原子块，每块独立、互不依赖，
 *     删除对应编号块即可单独还原。[色-3] 随首页 Services 区块移除
 *     且无其他页面使用（已验证），保持删除；其余块恢复并标注服务页面）
 * ----------------------------------------------------------- */

/* [色-1]（原 Banner 三处小标题主题蓝）：已迁至 restyle-home.css 1.2 */

/* [色-2] About 区数据统计数字（about-us 页在用；首页该区块已随改版-1
 *     移除）：js-animnum 数字 + 单位符号 → 主题蓝；下方 h3 与描述原样。 */
main .about-intro li > div.text-hd36 {
  color: var(--pg-primary);
}

/* [色-4] 评价区副标题（services-detail 页评价区同构标题在用；首页
 *     副标题已随改版-6 挪至 section-heading 右侧，不再命中本选择器）：
 *     深蓝 → 中灰，让出主标题层级。 */
main h2.text-hd36 + div.tracking-30.text-darkBlue {
  color: var(--pg-text-secondary);
}

/* [文字-4] About 统计项小标题（about-us 页在用；首页该区块已移除）：
 *     近黑 → 中灰 400，与 [文字-1] 灰阶统一，
 *     形成"蓝数字 → 灰标题 → 浅灰说明"的参考稿式层级。 */
main .about-intro .list-abouti li > h3.text-hd20 {
  color: var(--pg-text-secondary);
  font-weight: 400;
}

/* [动-1]（原 Membership 宣传图静态化）：已迁至 restyle-home.css 1.4 */

/* ------------------------------------------------------------
 * 4.10 评价区 / 新闻区精修（[评-x]/[闻-x] 已迁至 restyle-home.css
 *     02 章节作轮播回退预留；[钮-1] Banner 文字按钮已迁至其 1.5；
 *     [钮-2] 服务其他页面的 newsletter，保留在公共层）
 * ----------------------------------------------------------- */

/* [钮-1]（原 Banner Learn more 文字链接）：已迁至 restyle-home.css 1.5 */

/* [闻-5]（原轮播箭头蓝圆）：已迁至 restyle-home.css 2.4 */

/* [钮-2] Newsletter 订阅条右侧提交箭头：六边形 → 蓝色圆形（圆边处理）。
 *     容器原尺寸完全由 hexagon（2.75em）撑起，隐藏后须显式补宽高；
 *     箭头白色由模板 .text-white 提供（未被 2.2 重映射），自动保留；
 *     悬停加深，模板自带的 nlArrow 箭头滑动动画不受影响。
 *     特异性 (0,2,0) 胜过 2.4 的 (0,1,0)。 */
.newsletter-box .newsletter-form-submit {
  width: 2.75em;
  height: 2.75em;
  border-radius: 999px;
  background-color: var(--pg-primary);
  transition: background-color 0.3s;
}
.newsletter-box .newsletter-form-submit svg.hexagon {
  display: none;
}
.newsletter-box .newsletter-form-submit:hover {
  background-color: var(--pg-primary-hover);
}


/* ============================================================
 * 05 / 06（原首页新增区块 + 评价/新闻静态网格）：
 *     已整体迁至 restyle-home.css 03/04 章节（仅首页模板加载）
 * ============================================================ */


/* ============================================================
 * 07. 手机端右侧悬浮图标（Capsid kit / Contact us）
 *     style.css 在 @max-750px 将 .contact-us-icon 整体 display:none，
 *     此处恢复显示并给固定尺寸：图标 img 的内联 width:4.6875vw
 *     在手机上仅 ~17px，必须 !important 才能覆盖内联样式。
 * ============================================================ */
@media screen and (max-width: 750px) {
  .contact-us-icon {
    display: block;
    top: auto !important; /* 根 style.css 的 top:50% 带 !important,必须对冲 */
    /* 贴底但抬高 88px,给可能出现的 CookieYes 右下角标(约 44px + 间距)让位,
     * 避免海外访客看到角标与我们图标重叠;若后台把角标配在左下可改回 20px */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    height: fit-content; /* top/bottom 同时存在时防止盒子被拉伸 */
    transform: none; /* 中和全局的 translateY(-50%),否则会抵消贴底定位 */
  }
  .contact-us-icon ul li img {
    width: 48px !important;
    height: auto;
  }
  .contact-us-icon ul li + li {
    margin-top: 4px;
  }
}