@charset "UTF-8";
/* ==========================================================================
   hongxing — 全站共享 Chrome 视觉层（Apple-esque）
   --------------------------------------------------------------------------
   作用范围：所有前台页面（不含后台）。
   内容：顶部公告条 / 固定页头 / 页脚 / 搜索弹窗 / 右侧联系悬浮窗 /
         hx-sico 细线图标 / 全站设计令牌与系统字体。
   来源：原锁在 css/home-apple.css 的 .home 作用域内，导致其他页面
         回退到 Orange 旧观感；现上移为全站层，后续任何新页面自动一致。
   加载：inc/enqueue.php 无条件 enqueue，依赖 style，在页面专属层
        （home-apple.css / about-apple.css）之前加载。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 全站设计令牌（值与 home-apple.css 保持同源）
   -------------------------------------------------------------------------- */
:root {
    /* 中性色：统一偏冷（蓝相） */
    --hx-ink: #0b1220;
    --hx-ink-2: #414d5f;
    --hx-ink-3: #717d8f;
    --hx-ink-4: #9aa4b2;

    /* 表面 */
    --hx-surface: #ffffff;
    --hx-surface-2: #f5f5f7;
    --hx-surface-3: #e8e8ed;
    --hx-graphite: #0e1319;
    --hx-graphite-2: #1a212a;

    /* 描边（发丝线，不用纯灰） */
    --hx-line: rgba(12, 22, 44, .085);
    --hx-line-2: rgba(12, 22, 44, .14);
    --hx-line-light: rgba(255, 255, 255, .12);

    /* Apple 系统蓝：顶部公告条专用 */
    --hx-apple-blue: #0071e3;
    --hx-apple-ink: #1d1d1f;
    --hx-apple-gray-d: #e8e8ed;

    /*
     * 顶部公告条高度 —— 唯一来源。
     * 页头 fixed top 与各页首屏让位值都引用它，改高度只动这一行。
     */
    --hx-adbanner-h: 42px;

    /*
     * WP 后台管理栏高度 —— 未登录时为 0，登录后由 body.admin-bar 接管。
     * 核心给 <html> 加了 margin-top（桌面 32px / ≤782px 46px），流程内容会自动下移，
     * 但 position:fixed 的公告条与页头不吃这个 margin，会顶到视口最上沿被管理栏盖住，
     * 管理栏与页头之间又露出一条 hero 底色缝。这两个 fixed 元素统一加这一个令牌即可。
     */
    --hx-adminbar-h: 0px;

    /* 唯一强调色（品牌克莱因蓝） */
    --hx-accent: #0071e3;
    --hx-accent-ink: #005bb8;
    --hx-accent-soft: rgba(0, 113, 227, .065);

    /* 阴影：带蓝灰色相、统一光源自上而下 */
    --hx-sh-xs: 0 1px 2px rgba(12, 22, 44, .05);
    --hx-sh-sm: 0 1px 2px rgba(12, 22, 44, .04), 0 8px 20px -10px rgba(12, 22, 44, .14);
    --hx-sh-md: 0 1px 3px rgba(12, 22, 44, .05), 0 18px 36px -16px rgba(12, 22, 44, .2);
    --hx-sh-lg: 0 2px 8px rgba(12, 22, 44, .06), 0 34px 60px -24px rgba(12, 22, 44, .28);

    /* 缓动 */
    --hx-ease: cubic-bezier(.22, .61, .36, 1);
    --hx-ease-out: cubic-bezier(.16, 1, .3, 1);
    --hx-ease-spring: cubic-bezier(.34, 1.32, .5, 1);

    /* 节奏 */
    --hx-gutter: 12px;

    /* 站点栅格顶档容器宽（唯一来源，页头/页脚 .container 同步取它）。
       1.0.76：用户要的是**净宽 1388**，容器 = 1388 + 左右各 12px gutter = 1412。 */
    --hx-grid-max: 1412px;

    /* 字体：系统原生优先（macOS/iOS 即 SF Pro + 苹方；Windows 落微软雅黑），
       与 apple.com 官网同款策略，零额外下载 */
    --hx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
        Arial, sans-serif;
    --hx-font-num: "DINAlternate-Bold", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}

/* 全站字体切换到系统原生无衬线（仅字体与渲染平滑，不动配色/布局，内页零风险） */
body {
    font-family: var(--hx-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body h1, body h2, body h3, body h4,
body .font-title {
    font-family: var(--hx-font);
}

/* 文字选区：Apple 系统蓝底白字（全站统一选中态） */
::selection {
    background: #0071e3;
    color: #fff;
}

/* --------------------------------------------------------------------------
   0.5 站点栅格：.hx-wrap 与页头/页脚 Bootstrap .container 逐断点严格同宽
      页头用的是 Bootstrap .container（≥1400:--hx-grid-max=1412（净宽 1388） / ≥1200:1140 /
      ≥992:960 / ≥768:720 / ≥576:540 / <576:100% 铺满）。1400 档由下方
      @media (min-width:1400px) 把 Bootstrap 默认的 1320 覆盖成 --hx-grid-max。
      内边距：本套 Bootstrap 的
      container 直接取 var(--bs-gutter-x, .75rem)，≥768 无覆盖 = 12px，
      <768 被 orange-base.css 提到 1rem = 16px —— 所以下方把 --hx-gutter
      同步分档，页面内容与菜单栏/页脚在任何视口都严格对齐。
      此前 .hx-wrap 在 1200–1399 视口仍是顶档满宽，比菜单栏内容宽出
      160px+，观感割裂；现把宽度唯一来源收到本层，各页面专属层不再自行
      定义容器宽度。
   -------------------------------------------------------------------------- */
/* <768 栅格内边距同步 orange-base.css 的 container 16px（否则移动端错位 4px） */
@media (max-width: 767.98px) {
    :root {
        --hx-gutter: 16px;
    }
}

.home .hx-wrap,
.hx-about .hx-wrap,
.hx-honor .hx-wrap,
.hx-arc .hx-wrap,
.hx-culture .hx-wrap,
.hx-contact .hx-wrap {
    width: 100%;
    max-width: var(--hx-grid-max);
    margin-inline: auto;
    padding-inline: var(--hx-gutter); /* 12px = Bootstrap --bs-gutter-x */
}

/* 页头/页脚是 Bootstrap .container（xxl 档默认 1320），同档一起加宽，
   否则 ≥1400 视口下菜单栏与内容的左缘会错位（差 92px）。低于 1400 各档
   仍由 Bootstrap 原值与上面的降档媒体查询接管。 */
@media (min-width: 1400px) {
    .container {
        max-width: var(--hx-grid-max);
    }
}

@media (max-width: 1399.98px) {

    .home .hx-wrap,
    .hx-about .hx-wrap,
    .hx-honor .hx-wrap,
    .hx-arc .hx-wrap,
    .hx-culture .hx-wrap,
    .hx-contact .hx-wrap {
        max-width: 1140px;
    }
}

@media (max-width: 1199.98px) {

    .home .hx-wrap,
    .hx-about .hx-wrap,
    .hx-honor .hx-wrap,
    .hx-arc .hx-wrap,
    .hx-culture .hx-wrap,
    .hx-contact .hx-wrap {
        max-width: 960px;
    }
}

@media (max-width: 991.98px) {

    .home .hx-wrap,
    .hx-about .hx-wrap,
    .hx-honor .hx-wrap,
    .hx-arc .hx-wrap,
    .hx-culture .hx-wrap,
    .hx-contact .hx-wrap {
        max-width: 720px;
    }
}

@media (max-width: 767.98px) {

    .home .hx-wrap,
    .hx-about .hx-wrap,
    .hx-honor .hx-wrap,
    .hx-arc .hx-wrap,
    .hx-culture .hx-wrap,
    .hx-contact .hx-wrap {
        max-width: 540px;
    }
}

/* <576：Bootstrap container 不再限宽（100% 铺满），栅格同步放开 */
@media (max-width: 575.98px) {

    .home .hx-wrap,
    .hx-about .hx-wrap,
    .hx-honor .hx-wrap,
    .hx-arc .hx-wrap,
    .hx-culture .hx-wrap,
    .hx-contact .hx-wrap {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   0.9 键盘跳转链接（WCAG 2.4.1 Bypass Blocks，Level A）
      改前实测：全站没有 skip link，键盘用户每页都要 Tab 过整条导航才碰到正文；
      ui-ux-pro-max `--domain ux` 的 Accessibility/Skip Links 就是这条。
      平时用 clip 藏（不用 display:none，那样会被 AT 整个丢掉），:focus 才现身。
      顶部位置必须叠 --hx-adminbar-h（约定 9：任何贴顶的控件都要自己叠这个令牌）。
      按既定规范：不加投影、不加下划线，用发丝线做分隔。
   -------------------------------------------------------------------------- */
.hx-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1200;
    padding: 10px 18px;
    margin: 12px;
    border: 1px solid var(--hx-line-2);
    border-radius: 10px;
    background: var(--hx-surface);
    color: var(--hx-apple-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hx-skip-link:focus {
    clip-path: none;
    width: auto;
    height: auto;
    top: var(--hx-adminbar-h);
}

.hx-skip-target:focus {
    outline: none;
}

@media (prefers-reduced-motion: no-preference) {
    .hx-skip-link {
        transition: top .18s ease;
    }
}

/* --------------------------------------------------------------------------
   1. 顶部公告条：Apple 系统蓝 + 16px 白字
      （16px 白字对 #0071e3 对比度 4.65:1，稳过 WCAG AA）
   -------------------------------------------------------------------------- */
.top-adbanner {
    /* style.css 写死 top:0，登录态要让位给 WP 管理栏 */
    top: var(--hx-adminbar-h);
    background: var(--hx-apple-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: var(--hx-adbanner-h);
}

/*
 * 公告里敲的空格要真的算数。HTML 默认把连续空白折叠成一个，行首空格还会整个丢掉，
 * 所以库里存着空格、前台却「填了没反应」（1.0.81 之前）。pre-wrap 原样保留空格，
 * 同时仍能在空格处换行，小屏长文案不会溢出。
 * 只对包内容的 span 生效 —— header.php 里那个 span 紧贴内容、模板不留空白。
 */
.top-adbanner__text {
    white-space: pre-wrap;
}

.top-adbanner a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    transition: border-color .3s var(--hx-ease), color .3s var(--hx-ease);
}

.top-adbanner a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/*
 * 登录态：接管 --hx-adminbar-h，断点与核心 admin-bar 内联样式完全一致
 * （桌面 32px；≤782px 46px）。核心在 ≤600px 把 #wpadminbar 降级成 absolute，
 * 那会让「管理栏滚走、页头仍留 46px 空带」——本站页头本来就是 fixed，
 * 这里把它钉回 fixed，保证三种宽度下公告条/页头/首屏的堆叠关系都成立。
 */
body.admin-bar {
    --hx-adminbar-h: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --hx-adminbar-h: 46px;
    }
}

@media (max-width: 600px) {
    body.admin-bar #wpadminbar {
        position: fixed;
    }
}

/* --------------------------------------------------------------------------
   2. 固定页头：纯白底 + 发丝线；top 显式跟随 --hx-adbanner-h
      （orange-base.css 写死 top: 54px，不覆盖会在公告条下留出空缝）
      登录态再叠加 --hx-adminbar-h，让公告条与页头整条下移到管理栏之下。
   -------------------------------------------------------------------------- */
.site-header {
    top: calc(var(--hx-adbanner-h) + var(--hx-adminbar-h));
    /* 桌面导航高 82→80px（design-taste-frontend §4.7 ≤80）：
       orange-base 写死 1rem 上下内边距，这里两侧各收 1px，50px 内容 + 30px = 80px */
    padding-top: .9375rem;
    padding-bottom: .9375rem;
    border-bottom: 1px solid var(--hx-line);
    box-shadow: none;
    background: #fff;
    transition: box-shadow .4s var(--hx-ease-out), background-color .4s var(--hx-ease-out);
}

.site-header.is-scrolled {
    box-shadow: 0 1px 0 var(--hx-line), 0 8px 24px -16px rgba(12, 22, 44, .3);
}

.site-header .navbar-site li a {
    font-size: 17px;
    letter-spacing: .005em;
    transition: color .25s var(--hx-ease);
}

/* --------------------------------------------------------------------------
   3. 页脚：Apple off-white（#f5f5f7 底 + #1d1d1f 主字 + #6e6e73 次字）
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--hx-surface-2);
    color: var(--hx-apple-ink);
}

.site-footer a:not(.btn) {
    color: var(--hx-apple-ink);
}

.site-footer a:not(.btn):hover {
    color: #0071e3;
}

.site-footer .text-light,
.site-footer .text-white {
    color: var(--hx-apple-ink) !important;
}

.site-footer .footer-contact li,
.site-footer .footer-desc-text,
.site-footer .footer-menu a {
    color: #6e6e73;
}

.site-footer .footer-copyright {
    /* style.css 写死了蓝底 #aacdee；版权条与主体同底、只隔一条发丝线 */
    background: transparent;
    color: #6e6e73;
    font-size: 14px;
    border-top: 1px solid var(--hx-line);
}

/* --------------------------------------------------------------------------
   4. 通用细线图标（Apple SF Symbols 风格的内联 SVG）
   -------------------------------------------------------------------------- */
.hx-sico-w {
    display: inline-flex;
}

.hx-sico {
    display: block;
    width: 18px;
    height: 18px;
}

/* 页头搜索钮：与文字导航同灰度、体量匹配 17px 菜单文字，hover 压深 */
.site-header .hx-sico {
    width: 20px;
    height: 20px;
}

.search-popup-trigger {
    color: var(--hx-ink);
}

.search-popup-trigger:hover {
    color: var(--hx-ink-2);
}

/* 页脚联系列表：接管原 sprite 图标的绝对定位槽位 */
.footer-contact li .hx-sico {
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    color: #6e6e73;
}

/* --------------------------------------------------------------------------
   5. 页头下拉搜索（1.0.37：全栏覆盖式改为轻量下拉卡）
      点放大镜 → 图标下左方弹出一张紧凑白卡（不挡 logo、不盖导航），
      输入回车走 WP 原生 ?s= 搜索结果页；✕ / Esc / 点击卡外收起。
      定位：.site-header .container（relative）内，right 0 对齐右侧按钮区，
      top 100% 紧贴页头下缘——即「搜索图标正下方、向左展开」。
      -------------------------------------------------------------------------- */
.site-header .container {
    position: relative;
}

.hx-navsearch {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: min(380px, calc(100vw - 32px));
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
    transition: opacity .28s var(--hx-ease), transform .28s var(--hx-ease), visibility 0s linear .28s;
}

.hx-navsearch.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .28s var(--hx-ease), transform .28s var(--hx-ease);
}

/* 指向搜索图标的小尖角 */
.hx-navsearch::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid var(--hx-line);
    border-top: 1px solid var(--hx-line);
    transform: rotate(45deg);
}

.hx-navsearch__form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 16px;
    border: 1px solid var(--hx-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--hx-sh-lg);
}

.hx-navsearch__ico {
    flex: none;
    width: 18px;
    height: 18px;
    color: #86868b;
}

.hx-navsearch__input {
    flex: 1;
    min-width: 0;
    padding: 9px 2px;
    border: 0;
    background: none;
    color: var(--hx-apple-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -.01em;
    outline: none;
}

.hx-navsearch__input::placeholder {
    color: #86868b;
}

.hx-navsearch__go {
    flex: none;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--hx-accent);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .3s var(--hx-ease);
}

.hx-navsearch__go:hover {
    background: var(--hx-accent-ink);
}

/* 关闭钮：浅灰圆，Apple 标准次要钮 */
.hx-navsearch__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--hx-surface-2);
    color: #6e6e73;
    cursor: pointer;
    transition: background-color .3s var(--hx-ease), color .3s var(--hx-ease);
}

.hx-navsearch__close:hover {
    background: var(--hx-surface-3);
    color: var(--hx-apple-ink);
}

.hx-navsearch__close svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 767.98px) {
    .hx-navsearch {
        right: -8px;
        width: calc(100vw - 24px);
    }
}


/* --------------------------------------------------------------------------
   6. 右侧联系悬浮窗 —— 恢复原站 Orange 样式
      观感回到原版：46px 灰阶拟物卡（白描边 + 斜向渐变 + 蓝调柔影）、
      图标下常显文字标签、条目间 20px 发丝分隔线、右侧毛玻璃弹层、
      卡外独立回顶拟物按钮。orange-base.css 已保留原版全部规则，
      本层只做三件事：
        a) 变量桥接：基础层 var(--border-radius-sm/--color-muted/--color-primary)
           在 hongxing 未定义，按原站取值补齐（hover 蓝遵循全站 --hx-accent）；
        b) 回顶按钮：原版 .btn-neumorphism-light/.btn-icon 样式未随主题迁移，
           直接落在 .scroll-backtotop-button 上（不挂 .btn，避免吃 bootstrap）；
        c) 弹层文字：原版依赖的 text-lg/text-muted/text-xs/mb-2/mt-1 工具类
           不存在，用等价排版补齐；:focus-within 与 hover 同效（键盘可达）。
   -------------------------------------------------------------------------- */
.scroll-toolbar {
    --border-radius-sm: 8px;
    --color-muted: #6e6e73;
    --color-primary: var(--hx-accent, #0071e3);
}

/*
 * 1.0.78：视口 <1580 时联系栏**停靠到右下角**，把模块右端让给首页三轨的圆钮。
 *
 * 基础层（orange-base.css）写的是 `bottom: 33%`（垂直偏中），而 1400–1579 这一窄带里
 * 栅格 1412 几乎铺满视口 ⇒ 联系栏（占视口右 62px）正好压在模块右缘之上，
 * 轨道圆钮想贴在模块两端就必然与它重叠。原先的做法是把按钮内缩 60px 避让，
 * 结果按钮看起来"跑到中间"。现在反过来让固定栏让位 —— 依据 ui-ux-pro-max
 * `--domain ux` 的 Navigation/Sticky Navigation：「Fixed nav should not obscure content」，
 * 常驻固定控件不该盖住内容，该动的是它，不是轨道按钮。
 *
 * 停靠右下角后它退出「轨道在视口居中」这条用户真正在点箭头的横向带；
 * 滚动过渡中两者仍会短暂交叠（联系栏 z-index 99 在上），已记进已知取舍。
 * ≥1580 完全无冲突，保持 1.0.62 定版的垂直居中观感不动。
 */
@media (min-width: 768px) and (max-width: 1579.98px) {
    .scroll-toolbar {
        bottom: 24px;
    }
}

/*
 * 停靠档的残余交叠实测在 1440 这一档咬到页脚电话号码：36×54px，命中测试盖在它上面的
 * 正是 `.connect-text`（右栏按钮自己的标签）。1280/1366 栅格窄、1520 以上刚好错开 4px，
 * 只有 1400–1510 这段会真压住——而 1440 是最主流的桌面宽度，电话号码又是页脚最该被看见的一行。
 * 右栏的 x 位置是 1.0.78 定死的（不能再回去加内缩阈值），所以让出这条带的是页脚自己：
 * 预留 78px = 右栏实占 62px（宽 46 + 距视口右 16）+ 16px 呼吸。
 */
@media (min-width: 768px) and (max-width: 1579.98px) {
    .site-footer .footer-contact {
        margin-inline-end: 78px;
    }
}

.scroll-toolbar .scroll-connect .connect-item {
    outline: none;
}

.scroll-toolbar .scroll-connect .connect-item:focus-within .connect-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 弹层内文字（原版 text-lg/text-muted/text-xs/mb-2/mt-1 的等价排版） */
.scroll-toolbar .scroll-connect .connect-content p {
    margin: 0;
}

.scroll-toolbar .scroll-connect .connect-cap {
    margin-bottom: .5rem;
}

.scroll-toolbar .scroll-connect .connect-qrcode img {
    display: block;
    width: 100%;
    height: 100%;
}

.scroll-toolbar .scroll-connect .connect-phone {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.scroll-toolbar .scroll-connect .connect-phone a {
    color: inherit;
    text-decoration: none;
}

.scroll-toolbar .scroll-connect .connect-phone a:hover {
    color: var(--color-primary);
}

.scroll-toolbar .scroll-connect .connect-sub {
    margin-top: .25rem;
    color: #6e6e73;
    font-size: .75rem;
    line-height: 1.4;
}

/* 回到顶部：卡外独立拟物按钮（原 btn-neumorphism-light 观感） */
.scroll-toolbar .scroll-backtotop-button {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    border: 2px solid #fff;
    border-radius: 8px;
    background-image: linear-gradient(345deg, #ffffff 0%, #e4e4e4 100%);
    box-shadow: 6px 6px 12px 0 rgb(169 169 169 / 10%);
    color: #6e6e73;
    text-decoration: none;
    cursor: pointer;
    transition: color .3s ease, box-shadow .3s ease;
}

.scroll-toolbar .scroll-backtotop-button span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-toolbar .scroll-backtotop-button .iconfont {
    font-size: 1.375rem;
    line-height: 1;
}

.scroll-toolbar .scroll-backtotop-button:hover,
.scroll-toolbar .scroll-backtotop-button:focus {
    color: var(--color-primary);
    box-shadow: 6px 6px 12px 0 rgb(169 169 169 / 20%);
}