/* ============================================================================
   PackGene 内容页 Apple 风格样式表(content-apple.css)
   ----------------------------------------------------------------------------
   作用域:所有规则都挂在 body.apple-content 下,该类由 functions.php 中的
          suma_is_apple_content_page() 仅在内容页(templates/ 内容模板、
          single-*、归档、搜索页)添加。首页 / header / footer / nav 不受影响。
   加载:functions.php 条件 wp_enqueue,经 wp_head 输出(早于 header.php
          硬编码的 style.css link);但所有覆盖选择器均带 body.apple-content
          前缀、特异性高于被覆盖规则,加载顺序不影响生效。
   回滚:注释掉 functions.php 中 apple-content 相关的 body_class 过滤器
          与 enqueue 即可整体下线。
   字体:Inter(可变字重),SIL Open Font License 1.1 开源授权,
          自托管于 ../assets/fonts/inter/,可放心商用。
   ============================================================================ */

/* ---------- 字体 ---------- */
@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;
}

/* ---------- 设计 Token ---------- */
:root {
    --ap-ink:      #1d1d1f;   /* 主文字(近黑) */
    --ap-ink-2:    #6e6e73;   /* 次级文字 */
    --ap-ink-3:    #86868b;   /* 三级文字 / 占位符 */
    --ap-gray:     #f5f5f7;   /* 浅灰分区 */
    --ap-hairline: #d2d2d7;   /* 发丝线 */
    --ap-blue:     #0071e3;   /* 按钮蓝(Apple 标准蓝) */
    --ap-blue-hov: #0077ed;
    --ap-blue-prs: #006edb;
    --ap-link:     #0066cc;   /* 文字链接蓝 */
    --ap-radius:   0.7em;     /* 输入框圆角(约 12px) */
    --ap-ease:     cubic-bezier(.28, .11, .32, 1);
}

/* ---------- 基础版式 ---------- */
body.apple-content {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--ap-ink);
    -webkit-font-smoothing: antialiased;
}
body.apple-content h1,
body.apple-content h2,
body.apple-content h3,
body.apple-content h4 {
    font-weight: 600;
    letter-spacing: -0.015em;
}
body.apple-content p {
    font-weight: 400;
}
body.apple-content .comm-details {
    letter-spacing: normal;
}
body.apple-content ::selection {
    background: rgba(0, 113, 227, .16);
}

/* ---------- 颜色工具类覆盖(Tailwind 快照类) ----------
   深蓝 #002753 → 近黑 #1d1d1f;浅蓝分区 #f0f6fc → 浅灰 #f5f5f7;
   品牌蓝 #1e8afb → 链接蓝 #0066cc;橙 #f5812b → 链接蓝 */
body.apple-content .text-darkBlue   { color: var(--ap-ink); }
body.apple-content .text-darkBlue80 { color: #424245; }
body.apple-content .text-darkBlue50 { color: var(--ap-ink-2); }
body.apple-content .text-darkBlue40 { color: var(--ap-ink-3); }
body.apple-content .text-darkBlue30 { color: #a1a1a6; }
body.apple-content .text-softBlue   { color: var(--ap-link); }
body.apple-content .text-softOrange { color: var(--ap-link); }

/* 分区底色:浅蓝区 → 浅灰区 */
body.apple-content .bg-lightBlue { background-color: var(--ap-gray); }
body.apple-content .even\:bg-lightBlue:nth-child(even) { background-color: var(--ap-gray); }

/* 浅灰卡(#f9f9f9)→ 白卡 + 发丝边 */
body.apple-content .bg-lightGray {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--ap-hairline);
}

/* 1px 分隔线(h-1 bg-darkBlue opacity-*)→ 发丝线 */
body.apple-content .h-1.bg-darkBlue { background-color: var(--ap-hairline); }

/* ---------- 按钮:六边形 → 蓝色胶囊 ----------
   隐藏 SVG 六边形背景,把 .link-more 本体重塑为胶囊;hover/pressed 变深。 */
body.apple-content .link-more {
    background-color: var(--ap-blue);
    border-radius: 980px;
    transition: background-color .2s var(--ap-ease);
}
body.apple-content .link-more .js-bg-hexagon-svg { display: none; }
body.apple-content .link-more > div,
body.apple-content .link-more > div * { color: #fff; }
body.apple-content .link-more:hover  { background-color: var(--ap-blue-hov); }
body.apple-content .link-more:active { background-color: var(--ap-blue-prs); }

/* ---------- 吸顶 tab:毛玻璃 + 分段控制器 ---------- */
body.apple-content .sticky-menu {
    background-color: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ap-hairline);
}
body.apple-content .services-tab { gap: 2px; }
body.apple-content .services-tab a {
    color: var(--ap-ink-2);
    transition: color .2s var(--ap-ease), background-color .2s var(--ap-ease);
}
body.apple-content .services-tab a:hover { color: var(--ap-ink); }
body.apple-content .services-tab a.current,
body.apple-content .services-tab li.current a {
    background-color: #fff;
    color: var(--ap-ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

/* ---------- FAQ ---------- */
body.apple-content .faq-nav      { border-top-color: var(--ap-hairline); }
body.apple-content .faq-nav li   { border-bottom-color: var(--ap-hairline); }
body.apple-content .faq-nav li::before { background-color: var(--ap-ink); }
body.apple-content .faq-nav li a { opacity: .45; }
body.apple-content .faq-nav li a:hover { opacity: 1; }
body.apple-content .faq-nav li.current a { opacity: 1; }
body.apple-content .faq-item__header::before,
body.apple-content .faq-item__header::after { background-color: var(--ap-blue); }

/* ---------- Key Data 折叠 ---------- */
body.apple-content .list-keydata { border-top-color: var(--ap-hairline); }
body.apple-content .keydata-item { border-bottom-color: var(--ap-hairline); }
body.apple-content .keydata-item__header::before,
body.apple-content .keydata-item__header::after { background-color: var(--ap-blue); }

/* ---------- 联系表单 / 报价表单 ---------- */
/* 模板里有内联背景图,需要 !important 覆盖 */
body.apple-content .contactus-form-box {
    background-image: none !important;
    background-color: var(--ap-gray);
}
body.apple-content .cform-box,
body.apple-content .contact-form .cform-box {
    background-color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
/* 旧版下划线是 .cform-item::before 画的 1px 横线,隐藏之 */
body.apple-content .cform-item { border-bottom: 0; }
body.apple-content .cform-item::before { display: none; }

/* 输入框:下划线式 → 白底圆角描边式 */
body.apple-content .cform-input,
body.apple-content .cform-textarea {
    background-color: #fff;
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-radius);
    color: var(--ap-ink);
    transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}
body.apple-content .cform-input    { padding: 0 .9em; }
body.apple-content .cform-textarea { padding: .7em .9em; }
body.apple-content .cform-input:focus,
body.apple-content .cform-textarea:focus {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .14);
}
body.apple-content .cform-input::placeholder,
body.apple-content .cform-textarea::placeholder { color: var(--ap-ink-3); }

/* 表单内 select2(select 渲染为 span) */
body.apple-content .cform-item .select2-container--default .select2-selection--single {
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-radius);
    background-color: #fff;
    transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}
body.apple-content .cform-item .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ap-ink);
    padding-left: .9em;
}
body.apple-content .cform-item .select2-container--default .select2-selection__placeholder {
    color: var(--ap-ink-3);
}
body.apple-content .cform-item .select2-container--open .select2-selection--single {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .14);
}

/* 下拉面板(两种挂载上下文) */
body.apple-content .select2-dropdown .select2-dropdown,
body.apple-content .cform-select2-dropdown .select2-dropdown {
    border-radius: var(--ap-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
body.apple-content .select2-container--default .select2-results__option { color: var(--ap-ink-2); }
body.apple-content .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body.apple-content .select2-container--default .select2-results__option--selected { color: var(--ap-ink); }

/* 复选框 */
body.apple-content .cform-checkbox-label::before { border-color: var(--ap-hairline); }
body.apple-content .cform-checkbox-input:checked + .cform-checkbox-label svg { color: var(--ap-blue); }

/* ---------- React 报价表单(aav/lvv/mrna/gmp) ---------- */
body.apple-content .react-form-container { color: var(--ap-ink); }
body.apple-content .react-form-container input[type="text"],
body.apple-content .react-form-container input[type="email"],
body.apple-content .react-form-container input[type="tel"],
body.apple-content .react-form-container input[type="number"],
body.apple-content .react-form-container input[type="password"],
body.apple-content .react-form-container select,
body.apple-content .react-form-container textarea {
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-radius);
    padding: .6em .9em;
    background-color: #fff;
    color: var(--ap-ink);
    outline: 0;
    font-family: inherit;
    transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}
body.apple-content .react-form-container input:focus,
body.apple-content .react-form-container select:focus,
body.apple-content .react-form-container textarea:focus {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .14);
}
body.apple-content .react-form-container button[type="submit"] {
    background-color: var(--ap-blue);
    color: #fff;
    border: 0;
    border-radius: 980px;
    padding: .7em 1.6em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s var(--ap-ease);
}
body.apple-content .react-form-container button[type="submit"]:hover { background-color: var(--ap-blue-hov); }

/* ---------- 列表页搜索 / 筛选(citations、news、faq、download) ---------- */
body.apple-content .dform-select,
body.apple-content .dform-keyword {
    background-color: #fff;
    border: 1px solid var(--ap-hairline);
    border-radius: var(--ap-radius);
    transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}
body.apple-content .dform-select:focus-within,
body.apple-content .dform-keyword:focus-within {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .14);
}
body.apple-content .dform-select .js-bg-hexagon-svg,
body.apple-content .dform-keyword .js-bg-hexagon-svg { display: none; }

body.apple-content .dform-select-main .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ap-ink);
}
body.apple-content .dform-select-main .select2-container--default .select2-selection__placeholder {
    color: var(--ap-ink-3);
}
/* 下拉箭头:蓝色 webp 图 → 灰色细箭头 */
body.apple-content .dform-select-main .select2-selection__arrow b {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: .8em;
    background-position: center;
    background-repeat: no-repeat;
}

/* 关键词输入 + 蓝色圆形搜索按钮 */
body.apple-content .dform-keyword .newsletter-form-input { color: var(--ap-ink); }
body.apple-content .dform-keyword .newsletter-form-input::placeholder { color: var(--ap-ink-3); }
body.apple-content .dform-keyword .newsletter-form-submit {
    width: 2.6em;
    height: 2.6em;
    margin-right: .35em;
    border-radius: 50%;
    background-color: var(--ap-blue);
    transition: background-color .2s var(--ap-ease);
}
body.apple-content .dform-keyword .newsletter-form-submit:hover { background-color: var(--ap-blue-hov); }
body.apple-content .dform-keyword .newsletter-form-submit .hexagon { display: none; }
body.apple-content .dform-keyword .newsletter-form-submit .arrow { color: #fff; }

/* ---------- Newsletter 订阅条 ----------
   2026-10:此区块样式整体让位给全站加载的 restyle.css(--pg-* 深蓝条带 +
   白色圆角表单设计)。此前 apple 层的深色胶囊与 restyle 层叠加,在分类页/
   内容页产生"深蓝条带 + 黑胶囊 + 原生白底输入框(白字隐身)"的杂交效果,
   故移除,保持与首页一致。页面顶部搜索框(.dform-keyword)样式不受影响。 */

/* 搜索提交按钮内的箭头图标强制居中 */
body.apple-content .dform-keyword .newsletter-form-submit .arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}

/* ---------- 分页 ---------- */
body.apple-content .comm-pager a { opacity: 1; }
body.apple-content .comm-pager a.btn {
    width: 2.9em;
    height: 2.9em;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--ap-hairline);
    color: var(--ap-ink);
    transition: background-color .2s var(--ap-ease), color .2s var(--ap-ease);
}
body.apple-content .comm-pager a.btn:hover {
    background-color: var(--ap-blue);
    color: #fff;
    box-shadow: none;
}
body.apple-content .comm-pager a.btn .hexagon { display: none; }
body.apple-content .comm-pager a.btn .arrow {
    color: currentColor;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}
/* 数字页码 → 圆形 */
body.apple-content .comm-pager a:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.9em;
    height: 2.9em;
    border-radius: 50%;
    color: var(--ap-ink-2);
    transition: background-color .2s var(--ap-ease), color .2s var(--ap-ease);
}
body.apple-content .comm-pager a:not(.btn):hover {
    background-color: var(--ap-gray);
    color: var(--ap-ink);
}
body.apple-content .comm-pager a.current:not(.btn) {
    background-color: var(--ap-blue);
    color: #fff;
}
/* 省略号不做成圆形 */
body.apple-content .comm-pager a[href=""]:not(.btn) {
    background-color: transparent;
    color: var(--ap-ink-3);
}

/* 文章详情页 上一篇/下一篇 */
body.apple-content .dpager-link .hexagon { display: none; }
body.apple-content .dpager-link {
    color: var(--ap-link);
}

/* ---------- 轮播箭头:六边形 → 白色圆形 ---------- */
body.apple-content .splide-arrow {
    position: relative;
    height: 2em;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--ap-hairline);
    color: var(--ap-ink);
    transition: background-color .2s var(--ap-ease), color .2s var(--ap-ease);
}
body.apple-content .splide-arrow:hover {
    background-color: var(--ap-blue);
    color: #fff;
    box-shadow: none;
}
body.apple-content .splide-arrow .hexagon { display: none; }
body.apple-content .splide-arrow .arrow {
    color: currentColor;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}

/* ---------- 文章详情(single-news 等) ---------- */
body.apple-content .newsd-body blockquote { border-left-color: var(--ap-blue); }
body.apple-content .newsd-body h3 { color: var(--ap-ink); }
body.apple-content .newsd-tags a { background-color: var(--ap-gray); }
body.apple-content .newsd-tags a:hover { color: var(--ap-link); }
body.apple-content .detail-share a:hover { color: var(--ap-link); }

/* ---------- 其它小部件 ---------- */
/* about 页 missions 轮播的当前项箭头 */
body.apple-content .aboutmv-ul > li::before { color: var(--ap-blue); }
/* services-list 服务类别列表 hover */
body.apple-content .service-item__scate:hover { color: var(--ap-ink-3); }
body.apple-content .service-item__scate > li:hover { color: var(--ap-link); }

/* ---------- 法律/文本页(Terms & Conditions、Privacy Policy,默认 page 模板) ----------
   page.php → content.php 输出裸 article(无版心、无排版),这里补齐:
   版心宽度、避开固定导航的顶部留白、正文排版,以及后台富文本里
   从订单系统粘贴的 agreement-* 类名(它们原属 Vue 作用域样式,站内无定义) */
body.apple-content .site-main {
    max-width: 840px;
    margin: 0 auto;
    padding: 150px 24px 110px;
}
body.apple-content .site-main .entry-title {
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ap-ink);
    margin: 0 0 44px;
}
body.apple-content .site-main .entry-content {
    font-size: 16px;
    line-height: 1.75;
    color: #3a3a3c;
    word-break: break-word;
}
body.apple-content .site-main .entry-content h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ap-ink);
    margin: 36px 0 12px;
}
body.apple-content .site-main .entry-content h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--ap-ink);
    margin: 26px 0 10px;
}
body.apple-content .site-main .entry-content a { color: var(--ap-link); }
body.apple-content .site-main .entry-content ul,
body.apple-content .site-main .entry-content ol { padding-left: 1.5em; margin: 12px 0; }
/* 富文本中粘贴的订单系统结构类 */
body.apple-content .entry-content .agreement-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ap-ink);
    margin: 36px 0 14px;
}
body.apple-content .entry-content .agreement-body-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--ap-ink);
    margin: 26px 0 10px;
}
body.apple-content .entry-content .agreement-body-text {
    font-size: 16px;
    line-height: 1.75;
    color: #3a3a3c;
}
body.apple-content .entry-content .agreement-body-col + .agreement-body-col { margin-top: 4px; }
@media (max-width: 750px) {
    body.apple-content .site-main { padding: 120px 20px 80px; }
}

/* ---------- 键盘可达性:focus 可见 ---------- */
body.apple-content a:focus-visible,
body.apple-content button:focus-visible,
body.apple-content input:focus-visible,
body.apple-content select:focus-visible,
body.apple-content textarea:focus-visible {
    outline: 3px solid rgba(0, 113, 227, .5);
    outline-offset: 2px;
}

/* ---------- 移动端适配(≤750px,与主题 md: 断点一致) ----------
   版面栅格与字号缩放沿用主题原有响应式体系(hd→vw 单位、md: 断点),
   这里只对重塑过的组件补触控尺寸与铺满规则:
   · 胶囊按钮/圆形按钮触控高度 ≥ 40px
   · 搜索筛选控件、订阅输入框在窄屏整行铺满
   · 表单输入触控高度下限,分页允许换行防溢出 */
@media (max-width: 750px) {
    /* 胶囊按钮触控高度 */
    body.apple-content .link-more { min-height: 40px; }

    /* 搜索/筛选控件:整行铺满(Newsletter 输入框由 restyle.css 负责) */
    body.apple-content .dform-select,
    body.apple-content .dform-keyword { width: 100%; }

    /* 圆形提交/搜索/翻页按钮触控尺寸下限 */
    body.apple-content .dform-keyword .newsletter-form-submit,
    body.apple-content .comm-pager a.btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* 表单输入触控高度下限(联系表单 + React 报价表单) */
    body.apple-content .cform-input,
    body.apple-content .cform-item .select2-selection--single,
    body.apple-content .react-form-container input:not([type="checkbox"]):not([type="radio"]),
    body.apple-content .react-form-container select,
    body.apple-content .react-form-container textarea {
        min-height: 40px;
    }

    /* 分页允许换行,窄屏不溢出 */
    body.apple-content .comm-pager {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 移动端降低 focus 描边宽度,避免遮挡小控件 */
    body.apple-content a:focus-visible,
    body.apple-content button:focus-visible,
    body.apple-content input:focus-visible,
    body.apple-content select:focus-visible,
    body.apple-content textarea:focus-visible {
        outline-width: 2px;
        outline-offset: 1px;
    }
}