/* 页头骨架样式。
顶部工具条（.jiesheng-topbar，邮箱左/社媒右）是需求原文第 7 条要求新增的区块，
jcrapid.com 本身没有，这部分是自己的类名自己的样式，不冒充参考站。
主导航条用的是 jcrapid.com 真实 Astra 主题 class（site-header/ast-site-identity/
main-header-menu 等），对应样式由 tools/extract-matching-css.py 从
ref/raw/jcrapid.com/wp-content/themes/astra/... 里抽取追加在本文件末尾，
不在这里手写。*/
/* ── 顶部工具条：邮箱/电话在左，社媒图标在右 ── */
.jiesheng-topbar {
background: #1d2939;
color: #cbd2e0;
font-size: 13px;
font-family: var(--font-sans);
}
/* 🚩 2026-09-09 客户反馈"页头宽度不统一"：这里原来是凭感觉写的 max-width:1200px
居中，跟下面主导航行 `.ast-container{max-width:100%}`（真实抽取规则，撑满视口
只留 20px 内边距）不是同一套策略。1920 宽视口下实测 topbar 内容左边界 x=360，
logo 左边界 x=20，相差 340px，就是客户截图里两个红框宽度对不上、logo 显得
贴边"被截"的原因。第一步先改成跟 .ast-container 一致的 20px 内边距对齐两行。
紧接着客户第二次反馈（同一批截图）：两边这圈留白本身也不要，要贴边占满
（0px）。实测过参考站 jcrapid.com 自己在 1920 宽视口下也不是贴边到底的，
左右各留约 35px（它站点专属的 Customizer 设置），如果按 1:1 仿参考站，
有留白才是"对的"——但客户明确要的是贴边效果，这条属于背离参考站的主动
设计取舍，不是"仿错了"，改成 0。下面 `#ast-desktop-header .ast-container`
的覆盖同理，两处要保持一致（不能只改其中一个，不然又变回"两行不对齐"）。 */
.jiesheng-topbar__inner {
max-width: 100%;
padding: 8px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.jiesheng-topbar__contact {
color: #cbd2e0;
text-decoration: none;
}
.jiesheng-topbar__contact:hover {
color: #fff;
}
.jiesheng-topbar__social {
display: flex;
align-items: center;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
.jiesheng-topbar__social a {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #cbd2e0;
}
.jiesheng-topbar__social a:hover {
background: #fff;
color: #1d2939;
}
.jiesheng-icon {
width: 14px;
height: 14px;
display: inline-block;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.jiesheng-icon--linkedin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zm-46.44-340a53.79 53.79 0 1 1 53.79-53.79 53.8 53.8 0 0 1-53.79 53.79zM447.9 448h-92.68V302.4c0-34.7-.7-79.3-48.3-79.3-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zm-46.44-340a53.79 53.79 0 1 1 53.79-53.79 53.8 53.8 0 0 1-53.79 53.79zM447.9 448h-92.68V302.4c0-34.7-.7-79.3-48.3-79.3-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3z'/%3E%3C/svg%3E"); }
.jiesheng-icon--youtube { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64s-170.8 0-213.4 11.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64s-170.8 0-213.4 11.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2z'/%3E%3C/svg%3E"); }
.jiesheng-icon--facebook { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.1 288l14.2-92.7h-88.9v-60.1c0-25.4 12.4-50.1 52.2-50.1h40.4V6.3S260.4 0 225.4 0c-73.2 0-121.1 44.4-121.1 124.7v70.6H22.9V288h81.4v224h100.2V288z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.1 288l14.2-92.7h-88.9v-60.1c0-25.4 12.4-50.1 52.2-50.1h40.4V6.3S260.4 0 225.4 0c-73.2 0-121.1 44.4-121.1 124.7v70.6H22.9V288h81.4v224h100.2V288z'/%3E%3C/svg%3E"); }
.jiesheng-icon--twitter { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42z'/%3E%3C/svg%3E"); }
/* ── logo 文字兜底（没配图时） ── */
.jiesheng-header__logo-text {
display: block;
color: #1d2939;
font-weight: 700;
font-size: 20px;
text-decoration: none;
}
/* ── 汉堡菜单：自己的简单三条杠，不用参考站的图标设计 ── */
.jiesheng-hamburger {
display: inline-flex;
flex-direction: column;
gap: 4px;
}
.jiesheng-hamburger span {
width: 22px;
height: 2px;
background: currentColor;
display: block;
}
/* ── 下拉子菜单指示箭头 + 移动端展开按钮 ──
桌面态：hover 展开靠上面抽取的真实 Astra 规则（.sub-menu / :hover>.sub-menu
等），这里只加一个纯装饰的小箭头，不是抄参考站图标，也不接管点击。
移动端：hover 不可用，.jiesheng-submenu-toggle 是自己加的按钮（真实 Astra
有对应的 .ast-menu-toggle，但驱动它的是一整套没有照搬的 JS 文件，这里用
自己的按钮 + functions.php 里的最小化 JS 代替），点击展开/收起子菜单，
链接本身保持可点击跳转，两者不冲突。 */
.menu-item-has-children > .menu-link {
padding-right: 26px;
position: relative;
}
.menu-item-has-children > .menu-link::after {
content: '';
position: absolute;
right: 10px;
top: 50%;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
.jiesheng-submenu-toggle {
display: none;
}
/* ── 布局兜底：Astra 主题很多横排/清除列表符号靠 JS 在加载时动态加
ast-flex 这类状态类才生效，静态抠 CSS 抓不到这部分。这几条是自己写的，
用的是上面抽取出来的真实类名，只是布局属性自己补，不是抄参考站的规则。
2026-09-04：这个块本来就放在这里，但实际规则挪到了文件最后
（搜「布局兜底：真正生效的位置」）——原因见那边的注释。 */
/* ================================================================
以下由 tools/extract-matching-css.py 追加（jcrapid.com 真实 Astra 规则）
================================================================ */
/* === 自动抽取：参考站全局共享样式表（tools/extract-matching-css.py），按类名精确匹配抽取，minified 原文，未重新排版 === */
/*!
* Bootstrap v4.0.0-alpha.2 (https://getbootstrap.com)
*/.ast-container{max-width:100%}
.ast-container,.ast-container-fluid{margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:2px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:#21759b;display:block;font-size:12.25px;font-size:.875rem;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.secondary a *,.site-footer a *,.site-header a *,a{transition:all .2s linear}
.ast-button,.ast-custom-button,body,button,input[type=button],input[type=submit],textarea{line-height:1.85714285714286}
.site-header .site-description{line-height:1.5}
.main-header-menu .menu-link,.main-header-menu>a{text-decoration:none;padding:0 1em;display:inline-block;transition:all .2s linear}
.main-header-menu .menu-item{position:relative}
/* 2026-09-04 补：这条本来就是真实规则，之前 HTML 里没有 main-navigation 这层
div（见 header.html 里的说明），抽取工具因为类名对不上没收进来——现在补上
div 之后一并把规则补齐，不是新写的样式。 */
.main-navigation ul{list-style:none;margin:0;padding-left:0;position:relative}
.main-header-menu .menu-item.focus>.sub-menu,.main-header-menu .menu-item:hover>.sub-menu,.main-header-menu .menu-item>.sub-menu.toggled-on{right:auto;left:0;visibility:visible}
.main-header-menu .menu-item.focus>.sub-menu .sub-menu.toggled-on,.main-header-menu .menu-item:hover>.sub-menu .sub-menu.toggled-on,.main-header-menu .menu-item>.sub-menu.toggled-on .sub-menu.toggled-on{left:100%;right:auto;visibility:visible}
.main-header-menu .ast-left-align-sub-menu.focus>.sub-menu,.main-header-menu .ast-left-align-sub-menu:hover>.sub-menu{right:0;left:auto}
@media (min-width:769px) {
.main-header-menu .ast-sub-menu-goes-outside.focus>.sub-menu,.main-header-menu .ast-sub-menu-goes-outside:hover>.sub-menu{left:-100%}
.main-header-menu .ast-left-align-sub-menu .sub-menu .menu-item.focus>.sub-menu,.main-header-menu .ast-left-align-sub-menu .sub-menu .menu-item:hover>.sub-menu{left:-100%}
}
.main-header-menu .sub-menu{width:240px;background:#fff;left:-999em;position:absolute;top:100%;z-index:99999;visibility:hidden}
@media (min-width:769px) {
.main-header-menu .sub-menu .menu-item.focus>.sub-menu,.main-header-menu .sub-menu .menu-item:hover>.sub-menu{left:100%;right:auto}
.main-header-menu .sub-menu .ast-left-align-sub-menu.focus>.sub-menu,.main-header-menu .sub-menu .ast-left-align-sub-menu:focus * .sub-menu,.main-header-menu .sub-menu .ast-left-align-sub-menu:hover * .sub-menu,.main-header-menu .sub-menu .ast-left-align-sub-menu:hover>.sub-menu{left:-100%}
.main-header-menu .sub-menu .main-header-menu .ast-sub-menu-goes-outside.focus>.sub-menu,.main-header-menu .sub-menu .main-header-menu .ast-sub-menu-goes-outside:hover>.sub-menu{left:-100%}
}
.main-header-menu .sub-menu .menu-link{padding:.9em 1em;display:block;word-wrap:break-word}
.main-header-menu .sub-menu .menu-item:not(.menu-item-has-children) .menu-link .icon-arrow:first-of-type{display:none}
#ast-desktop-header .main-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .icon-arrow{display:none}
#ast-desktop-header .main-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .ast-header-navigation-arrow{position:absolute;right:.6em;top:50%;transform:translate(0,-50%) rotate(270deg)}
#ast-desktop-header .main-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .ast-header-navigation-arrow .icon-arrow{display:block}
#ast-desktop-header .main-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .ast-header-navigation-arrow .icon-arrow svg{margin:0}
#ast-desktop-header .account-main-navigation .sub-menu .menu-item.menu-item-has-children>.menu-link .ast-header-navigation-arrow{transform:translate(0,-50%) rotate(360deg)}
.main-header-menu .sub-menu .sub-menu{top:0}
.submenu-with-border .sub-menu{border-width:1px;border-style:solid}
.submenu-with-border .sub-menu .menu-link{border-width:0 0 1px;border-style:solid}
.submenu-with-border .sub-menu .sub-menu{top:-2px}
.ast-desktop .submenu-with-border .sub-menu>.menu-item:last-child>.menu-link{border-bottom-style:none}
.ast-header-break-point .main-navigation ul .menu-item .menu-link{padding:0 20px;display:inline-block;width:100%;border:0;border-bottom-width:1px;border-style:solid;border-color:var(--ast-border-color)}
.ast-header-break-point .main-navigation ul .menu-item .menu-link .icon-arrow:first-of-type{margin-right:5px}
.ast-header-break-point .main-navigation ul .sub-menu .menu-item:not(.menu-item-has-children) .menu-link .icon-arrow:first-of-type{display:inline}
.ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link{padding-left:30px}
.ast-header-break-point .main-navigation .sub-menu .menu-item .menu-item .menu-link{padding-left:40px}
.ast-header-break-point .main-navigation .sub-menu .menu-item .menu-item .menu-item .menu-link{padding-left:50px}
.ast-header-break-point .main-navigation .sub-menu .menu-item .menu-item .menu-item .menu-item .menu-link{padding-left:60px}
.ast-header-break-point .main-header-menu{background-color:#f9f9f9;border-top-width:0}
.ast-header-break-point .main-header-menu .sub-menu{background-color:#f9f9f9;position:static;opacity:1;visibility:visible;border:0;width:auto}
.ast-header-break-point .main-header-menu .sub-menu .ast-left-align-sub-menu.focus>.sub-menu,.ast-header-break-point .main-header-menu .sub-menu .ast-left-align-sub-menu:hover>.sub-menu{left:0}
.ast-header-break-point .main-header-menu .ast-sub-menu-goes-outside.focus>.sub-menu,.ast-header-break-point .main-header-menu .ast-sub-menu-goes-outside:hover>.sub-menu{left:0}
.ast-header-break-point .submenu-with-border .sub-menu{border:0}
.ast-button-wrap .menu-toggle{padding:0;width:2.2em;height:2.1em;font-size:1.5em;font-weight:400;border-radius:2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:2px;vertical-align:middle;line-height:1.85714285714286}
.ast-button-wrap .menu-toggle.main-header-menu-toggle{padding:0 .5em;width:auto;text-align:center}
.ast-button-wrap .menu-toggle.main-header-menu-toggle .mobile-menu{font-size:15px;font-size:1rem;font-weight:600}
.ast-button-wrap .menu-toggle .menu-toggle-icon{font-style:normal;display:inline-block;vertical-align:middle;line-height:2.05}
.ast-button-wrap .menu-toggle .menu-toggle-icon:before{content:"\e5d2";font-family:Astra;text-decoration:inherit}
.ast-button-wrap .menu-toggle .icon-menu-bars svg:nth-child(2){display:none}
.ast-button-wrap .menu-toggle.toggled .menu-toggle-icon:before{content:"\e5cd"}
.ast-button-wrap .menu-toggle.toggled .icon-menu-bars svg:first-child{display:none}
.ast-button-wrap .menu-toggle.toggled .icon-menu-bars svg:nth-child(2){display:block}
.ast-button-wrap .menu-toggle .mobile-menu-wrap{display:inline-block}
.ast-button-wrap .menu-toggle:focus{outline:thin dotted}
.header-main-layout-1 .ast-main-header-bar-alignment{margin-left:auto}
.site-navigation{height:100%}
.site-header .menu-link *{transition:none}
.ast-header-break-point .main-header-bar-navigation{flex:auto}
.ast-builder-layout-element{align-items:center}
.ast-builder-layout-element.ast-header-search{height:auto}
.ast-grid-right-section .ast-site-identity>:first-child{text-align:right}
.ast-grid-right-section .ast-grid-right-center-section .ast-site-identity>:first-child{text-align:left}
.elementor-nav-menu .ast-icon,.et_pb_menu__wrap .ast-icon,.fl-widget .menu-item .ast-icon{display:none}
.ast-logo-title-inline .ast-site-identity{padding:1em 0;-js-display:inline-flex;display:inline-flex;vertical-align:middle;align-items:center;transition:all .2s linear}
.ast-grid-section-center .ast-site-identity>:first-child{text-align:center}
.ast-builder-grid-row-container{display:grid;align-content:center}
.main-header-bar .main-header-bar-navigation{height:100%}
.ast-nav-menu .sub-menu{line-height:1.45}
.ast-header-break-point .main-header-bar-navigation{line-height:3}
.ast-header-break-point .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle{display:inline-block;position:absolute;font-size:inherit;top:0;right:20px;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 .907em;font-weight:400;line-height:inherit}
.ast-header-break-point .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle>.ast-icon.icon-arrow{pointer-events:none}
.ast-header-break-point .main-header-bar-navigation .menu-item-has-children .sub-menu{display:none}
.ast-header-break-point .ast-mobile-header-wrap .ast-above-header-wrap .main-header-bar-navigation .ast-submenu-expanded>.ast-menu-toggle::before,.ast-header-break-point .ast-mobile-header-wrap .ast-main-header-wrap .main-header-bar-navigation .ast-submenu-expanded>.ast-menu-toggle::before{transform:rotateX(180deg)}
.ast-header-break-point .ast-nav-menu .sub-menu{line-height:3}
.ast-hfb-header.ast-header-break-point .main-header-bar-navigation{width:100%;margin:0}
.ast-hfb-header .menu-toggle.toggled .ast-mobile-svg{display:none}
.ast-hfb-header .menu-toggle.toggled .ast-close-svg{display:block}
.menu-toggle .ast-close-svg{display:none}
.ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon{-js-display:inline-flex;display:inline-flex;align-self:center}
.ast-mobile-header-wrap .menu-toggle .mobile-menu-wrap{-js-display:inline-flex;display:inline-flex;align-self:center;margin-left:.4em}
.ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle{-js-display:flex;display:flex;align-items:center;width:auto;height:auto}
.menu-toggle .mobile-menu-toggle-icon{-js-display:inline-flex;display:inline-flex;align-self:center}
.menu-toggle .mobile-menu-wrap{-js-display:inline-flex;display:inline-flex;align-self:center;margin-left:.4em}
.ast-hfb-header .ast-button-wrap .menu-toggle .mobile-menu-wrap{align-items:center;-js-display:flex;display:flex}
.ast-button-wrap .menu-toggle.main-header-menu-toggle{padding:.5em;align-items:center;-js-display:flex;display:flex}
.site-header{z-index:99;position:relative}
.main-header-bar-wrap{position:relative}
.main-header-bar{background-color:#fff;border-bottom-color:var(--ast-border-color);border-bottom-style:none}
.ast-header-break-point .main-header-bar{border:0}
.ast-header-break-point .main-header-bar{border-bottom-color:var(--ast-border-color);border-bottom-style:none}
.main-header-bar{margin-left:auto;margin-right:auto}
.ast-desktop .main-header-menu.ast-menu-shadow .sub-menu{box-shadow:0 4px 10px -2px rgba(0,0,0,.1)}
.ast-header-custom-item-inside.ast-header-break-point .button-custom-menu-item .ast-custom-button-link{display:none}
.site-branding{line-height:1;align-self:center}
.ast-main-header-nav-open .main-header-bar{padding-bottom:0}
.main-header-bar{z-index:4;position:relative}
.main-header-bar .main-header-bar-navigation:empty{padding:0}
.main-header-bar .main-header-bar-navigation .sub-menu{line-height:1.45}
.main-header-bar .main-header-bar-navigation .menu-item-has-children>.menu-link:after{line-height:normal}
.ast-site-identity{padding:1em 0}
.ast-header-break-point .site-header .main-header-bar-wrap .site-branding{flex:1;align-self:center}
.ast-header-break-point .ast-site-identity{width:100%}
.ast-header-break-point .main-header-bar{display:block;line-height:3}
.ast-header-break-point .main-header-bar .main-header-bar-navigation{line-height:3}
.ast-header-break-point .main-header-bar .main-header-bar-navigation .sub-menu{line-height:3}
.ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children .sub-menu{display:none}
.ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle{display:inline-block;position:absolute;font-size:inherit;top:-1px;right:20px;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 .907em;font-weight:400;line-height:inherit;transition:all .2s}
.ast-header-break-point .main-header-bar .main-header-bar-navigation .ast-submenu-expanded>.ast-menu-toggle::before{transform:rotateX(180deg)}
.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu{border-top-width:0}
.ast-header-break-point .main-navigation .stack-on-mobile li{width:100%}
.ast-header-break-point .main-header-bar-navigation{width:calc(100% + 40px);margin:0 -20px}
.ast-header-break-point .main-header-menu ul ul{top:0}
.ast-header-break-point .ast-mobile-header-wrap .ast-flex.stack-on-mobile{flex-wrap:wrap}
.ast-desktop .main-header-menu>.menu-item .sub-menu:before{position:absolute;content:'';top:0;left:0;width:100%;transform:translateY(-100%)}
.ast-flex{-js-display:flex;display:flex;flex-wrap:wrap}
.ast-flex-grow-1{flex-grow:1}
.main-header-bar .main-header-bar-navigation .ast-account-nav-menu{line-height:1.45}
.ast-account-nav-menu .menu-item.focus>.sub-menu,.ast-account-nav-menu .menu-item:hover>.sub-menu{left:100%}
.ast-account-nav-menu .ast-left-align-sub-menu.menu-item.focus>.sub-menu,.ast-account-nav-menu .ast-left-align-sub-menu.menu-item:hover>.sub-menu{left:-100%}
.ast-account-nav-menu .menu-item .menu-link{padding:.9em 1em}
.ast-account-nav-menu .menu-item{border-style:none}
.ast-account-nav-menu .menu-item.menu-item-has-children>.menu-link:after{position:absolute;right:1em;top:50%;transform:translate(0,-50%) rotate(270deg)}
.ast-above-header-bar .main-header-menu.ast-account-nav-menu>.menu-item,.ast-below-header-bar .main-header-menu.ast-account-nav-menu>.menu-item,.ast-primary-header-bar .main-header-menu.ast-account-nav-menu>.menu-item{height:auto;line-height:unset;bottom:-5px}
.ast-header-account-wrap .menu-item:last-child>.menu-link{border-style:none}
.ast-mobile-header-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element),.ast-mobile-popup-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element){padding:15px 20px}
[data-section*=section-fb-button-] .ast-builder-button-size-xs .ast-custom-button,[data-section*=section-hb-button-] .ast-builder-button-size-xs .ast-custom-button{font-size:13px;padding:8px 20px}
[data-section*=section-fb-button-] .ast-builder-button-size-sm .ast-custom-button,[data-section*=section-hb-button-] .ast-builder-button-size-sm .ast-custom-button{font-size:15px;padding:10px 40px}
[data-section*=section-fb-button-] .ast-builder-button-size-md .ast-custom-button,[data-section*=section-hb-button-] .ast-builder-button-size-md .ast-custom-button{font-size:17px;padding:15px 45px}
[data-section*=section-fb-button-] .ast-builder-button-size-lg .ast-custom-button,[data-section*=section-hb-button-] .ast-builder-button-size-lg .ast-custom-button{font-size:19px;padding:20px 50px}
[data-section*=section-fb-button-] .ast-builder-button-size-xl .ast-custom-button,[data-section*=section-hb-button-] .ast-builder-button-size-xl .ast-custom-button{font-size:21px;padding:25px 55px}
.single-astra-advanced-hook .ast-container{flex-wrap:wrap}
.single-astra-advanced-hook .ast-container>*{width:100%}
.ast-separate-container.ast-box-layout #content .ast-container{padding-left:0;padding-right:0}
@media (max-width:768px) {
.ast-separate-container.ast-box-layout #content .ast-container{padding-left:20px;padding-right:20px}
}
@media (max-width:544px) {
.ast-separate-container.ast-box-layout #content .ast-container{padding-left:.54em;padding-right:.54em}
}
.site-header .sticky-custom-logo{display:none}
#ast-fixed-header .main-header-bar{box-shadow:0 1px 2px rgba(0,0,0,.2)}
.main-header-bar.ast-sticky-active{box-shadow:0 2px 10px 0 rgba(36,50,66,.075)}
.ast-sticky-custom-logo .ast-header-sticked .custom-logo-link,.ast-sticky-custom-logo .ast-header-sticked .custom-mobile-logo-link{display:none}
.ast-sticky-custom-logo.ast-primary-sticky-header-active.ast-header-break-point.ast-replace-site-logo-transparent.ast-theme-transparent-header .transparent-custom-logo{display:none}
.ast-header-stick-fade-active .ast-sticky-custom-logo.ast-primary-sticky-header-active.ast-header-break-point.ast-replace-site-logo-transparent.ast-theme-transparent-header .transparent-custom-logo,.ast-header-stick-scroll-active .ast-sticky-custom-logo.ast-primary-sticky-header-active.ast-header-break-point.ast-replace-site-logo-transparent.ast-theme-transparent-header .transparent-custom-logo,.ast-header-stick-slide-active .ast-sticky-custom-logo.ast-primary-sticky-header-active.ast-header-break-point.ast-replace-site-logo-transparent.ast-theme-transparent-header .transparent-custom-logo{display:inline-block}
.ast-sticky-main-shrink .ast-sticky-shrunk .main-header-bar,.ast-sticky-main-shrink .ast-sticky-shrunk.main-header-bar{line-height:55px}
.ast-sticky-main-shrink .ast-sticky-shrunk .main-header-bar .ast-site-identity,.ast-sticky-main-shrink .ast-sticky-shrunk.main-header-bar .ast-site-identity{padding-top:.5em;padding-bottom:.5em}
.ast-sticky-main-shrink .ast-sticky-shrunk .site-navigation{line-height:3}
.ast-sticky-main-shrink .ast-sticky-shrunk .site-logo-img img{max-height:55px!important;width:auto}
.ast-sticky-main-shrink.ast-header-break-point .ast-sticky-shrunk .main-header-bar,.ast-sticky-main-shrink.ast-header-break-point .ast-sticky-shrunk.main-header-bar{padding-bottom:0}
.ast-sticky-main-shrink.ast-header-break-point .ast-sticky-shrunk .site-branding{padding-bottom:.5em}
.ast-sticky-above-shrink .ast-sticky-shrunk .ast-above-header-bar .ast-site-identity,.ast-sticky-above-shrink .ast-sticky-shrunk.ast-above-header-bar .ast-site-identity{padding-top:.5em;padding-bottom:.5em}
.ast-sticky-above-shrink .ast-sticky-shrunk .site-navigation{line-height:3}
.ast-sticky-above-shrink .ast-sticky-shrunk .site-logo-img img{max-height:55px;width:auto}
.ast-sticky-above-shrink.ast-header-break-point .ast-sticky-shrunk .site-branding{padding-bottom:.5em}
.ast-sticky-below-shrink .ast-sticky-shrunk .ast-below-header-bar .ast-site-identity,.ast-sticky-below-shrink .ast-sticky-shrunk.ast-below-header-bar .ast-site-identity{padding-top:.5em;padding-bottom:.5em}
.ast-sticky-below-shrink .ast-sticky-shrunk .site-navigation{line-height:3}
.ast-sticky-below-shrink .ast-sticky-shrunk .site-logo-img img{max-height:55px;width:auto}
.ast-sticky-below-shrink.ast-header-break-point .ast-sticky-shrunk .site-branding{padding-bottom:.5em}
.ast-header-break-point.ast-inherit-site-logo-sticky .ast-has-mobile-header-logo .ast-header-sticked .custom-logo-link img{display:none}
.above-header-toggle-on .main-header-bar{z-index:1}
.site-above-header-wrap,.site-below-header-wrap,.site-primary-header-wrap{transition:all .2s linear}
.ast-header-stick-slide-active .ast-flyout-menu-enable.ast-header-break-point #masthead>.main-header-bar-navigation{display:none!important}
.ast-header-stick-fade-active .ast-flyout-menu-enable.ast-header-break-point #masthead>.main-header-bar-navigation{display:none!important}
.ast-flyout-menu-enable.ast-primary-sticky-enabled .ast-stick-primary-below-wrapper,.ast-flyout-menu-enable.ast-primary-sticky-enabled .main-header-bar{overflow-y:unset!important}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.sub-menu>.menu-item{display:none}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .menu-item:hover>.menu-link{background-color:transparent}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu-focus .menu-item>.menu-link{background-color:transparent}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu>.menu-item{padding-left:15px;padding-right:15px;display:block;flex:1;opacity:1}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu>.menu-item:first-child{padding-left:0}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu>.menu-item:last-child{padding-right:0}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu.col-2 .menu-item{width:50%}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu.col-3 .menu-item{width:33.33%}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu.col-4 .menu-item{width:25%}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu .menu-item:last-child{border-right:none}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus .astra-nested-sub-menu .menu-item .menu-link{padding-left:24px}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus .astra-nested-sub-menu .astra-nested-sub-menu .menu-item .menu-link{padding-left:48px}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu>.menu-item .sub-menu{position:static;width:100%;margin:auto}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu>.menu-item .sub-menu .menu-item{width:100%}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus>.menu-item{padding-left:15px;padding-right:15px}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus>.menu-item:first-child{padding-left:0}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus>.menu-item:last-child{padding-right:0}
.ast-desktop .ast-mega-menu-enabled .menu-item-has-children.astra-megamenu-li.menu-item .astra-megamenu.sub-menu .menu-item>.menu-link::after{content:''}
.ast-desktop .ast-mega-menu-enabled .menu-item-has-children.astra-megamenu-li.menu-item .astra-megamenu.sub-menu .menu-item>.menu-link .ast-icon.icon-arrow{display:none}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .sub-menu .menu-link,.ast-desktop .ast-mega-menu-enabled.submenu-with-border .astra-megamenu-li .sub-menu .menu-link{border:none}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu>.menu-item{padding-left:15px;padding-right:15px}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu>.menu-item:first-child{padding-left:0}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu>.menu-item:last-child{padding-right:0}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu.col-2 .menu-item{width:50%}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu.col-3 .menu-item{width:33.33%}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu.col-4 .menu-item{width:25%}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu>.menu-item{display:block;flex:1;opacity:1}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu .astra-nested-sub-menu .menu-item .menu-link{padding-left:24px}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu .astra-nested-sub-menu .astra-nested-sub-menu .menu-item .menu-link{padding-left:48px}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu.sub-menu>.menu-item .sub-menu{position:static;width:100%;margin:auto}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu.sub-menu>.menu-item .sub-menu .menu-item{width:100%}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu.sub-menu .menu-item:last-child{border-right:none}
.ast-desktop .ast-mega-menu-enabled :not(.menu-container-width-mega).astra-megamenu-li:hover .astra-megamenu .sub-menu .menu-item{width:100%}
.ast-desktop .ast-mega-menu-enabled :not(.menu-container-width-mega).astra-megamenu-li:hover .astra-megamenu.sub-menu .menu-item .sub-menu{min-width:100%}
.ast-desktop .ast-mega-menu-enabled :not(.menu-container-width-mega).astra-megamenu-li .astra-megamenu.astra-megamenu-focus .sub-menu .menu-item{width:100%}
.ast-desktop .ast-mega-menu-enabled :not(.menu-container-width-mega).astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu .menu-item .sub-menu{min-width:100%}
.ast-desktop .ast-above-header-menu .astra-megamenu-li .sub-menu .menu-item.current-menu-ancestor>.menu-link,.ast-desktop .ast-below-header-menu .astra-megamenu-li .sub-menu .menu-item.current-menu-ancestor>.menu-link,.ast-desktop .main-header-menu .astra-megamenu-li .sub-menu .menu-item.current-menu-ancestor>.menu-link{background-color:transparent;color:inherit}
.ast-desktop .ast-above-header-menu .astra-megamenu-li .sub-menu .menu-item-heading .menu-text,.ast-desktop .ast-below-header-menu .astra-megamenu-li .sub-menu .menu-item-heading .menu-text,.ast-desktop .main-header-menu .astra-megamenu-li .sub-menu .menu-item-heading .menu-text{vertical-align:text-top}
.ast-desktop .submenu-with-border .astra-full-megamenu-wrapper{border-width:1px;border-style:solid}
.ast-desktop .submenu-with-border .astra-megamenu{border-width:1px}
.site-header a .ast-menu-description,.site-header a .sub-arrow{transition:none}
.site-header .menu-text{transition:none}
.ast-desktop .ast-mega-menu-enabled.ast-above-header-menu>.menu-item-has-children>.menu-link::after,.ast-desktop .ast-mega-menu-enabled.ast-below-header-menu>.menu-item-has-children>.menu-link::after,.ast-desktop .ast-mega-menu-enabled.main-header-menu>.menu-item-has-children>.menu-link::after{content:'';margin:0}
.ast-desktop .ast-mega-menu-enabled.ast-above-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .sub-arrow:after,.ast-desktop .ast-mega-menu-enabled.ast-below-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .sub-arrow:after,.ast-desktop .ast-mega-menu-enabled.main-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .sub-arrow:after{transform:rotate(-90deg)}
.ast-desktop .ast-mega-menu-enabled.ast-above-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .sub-arrow,.ast-desktop .ast-mega-menu-enabled.ast-below-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .sub-arrow,.ast-desktop .ast-mega-menu-enabled.main-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .sub-arrow{position:absolute;right:5%;top:50%;transform:translateY(-50%)}
.ast-desktop .ast-mega-menu-enabled.ast-above-header-menu .ast-masthead-custom-menu-items a:focus,.ast-desktop .ast-mega-menu-enabled.ast-above-header-menu .ast-masthead-custom-menu-items a:hover,.ast-desktop .ast-mega-menu-enabled.ast-below-header-menu .ast-masthead-custom-menu-items a:focus,.ast-desktop .ast-mega-menu-enabled.ast-below-header-menu .ast-masthead-custom-menu-items a:hover,.ast-desktop .ast-mega-menu-enabled.main-header-menu .ast-masthead-custom-menu-items a:focus,.ast-desktop .ast-mega-menu-enabled.main-header-menu .ast-masthead-custom-menu-items a:hover{background:0 0}
.ast-builder-menu-mobile .ast-mega-menu-enabled.main-header-menu .menu-item-has-children.astra-megamenu-li>.menu-link .sub-arrow:after,.ast-builder-menu-mobile .ast-mega-menu-enabled.main-header-menu .menu-item-has-children>.menu-link .sub-arrow:after,.ast-header-break-point .ast-mega-menu-enabled.main-header-menu .menu-item-has-children.astra-megamenu-li>.menu-link .sub-arrow:after,.ast-header-break-point .ast-mega-menu-enabled.main-header-menu .menu-item-has-children>.menu-link .sub-arrow:after{display:none}
.ast-desktop .ast-mega-menu-enabled.ast-above-header-menu .sub-menu .menu-item.menu-item-heading:focus>.menu-link,.ast-desktop .ast-mega-menu-enabled.ast-above-header-menu .sub-menu .menu-item.menu-item-heading:hover>.menu-link,.ast-desktop .ast-mega-menu-enabled.ast-above-header-menu .sub-menu .menu-item.menu-item-heading>.menu-link:hover{background:0 0}
.ast-desktop .ast-mega-menu-enabled.ast-below-header-menu .sub-menu .menu-item.menu-item-heading:focus>.menu-link,.ast-desktop .ast-mega-menu-enabled.ast-below-header-menu .sub-menu .menu-item.menu-item-heading:hover>.menu-link,.ast-desktop .ast-mega-menu-enabled.ast-below-header-menu .sub-menu .menu-item.menu-item-heading>.menu-link:hover{background:0 0}
.ast-desktop .ast-mega-menu-enabled.main-header-menu .sub-menu .menu-item.menu-item-heading>.menu-link{background:0 0}
.ast-desktop .main-header-menu>.menu-item .astra-full-megamenu-wrapper:before{position:absolute;content:'';top:0;left:0;width:100%;transform:translateY(-100%)}
.ast-desktop .main-header-menu.ast-menu-shadow .astra-full-megamenu-wrapper .sub-menu{box-shadow:none}
.ast-desktop .main-header-menu.ast-menu-shadow .astra-megamenu .sub-menu{box-shadow:none}
.ast-desktop .main-header-menu.ast-menu-shadow .astra-full-megamenu-wrapper{box-shadow:0 4px 10px -2px rgba(0,0,0,.1)}
.ast-header-break-point .ast-above-header .sub-menu .menu-item .ast-hide-menu-item,.ast-header-break-point .ast-below-header .sub-menu .menu-item .ast-hide-menu-item,.ast-header-break-point .main-navigation .sub-menu .menu-item .ast-hide-menu-item{display:none}
.ast-header-break-point .ast-above-header .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle,.ast-header-break-point .ast-below-header .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle,.ast-header-break-point .main-navigation .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle{display:none}
.ast-header-break-point .ast-above-header .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle+.sub-menu,.ast-header-break-point .ast-below-header .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle+.sub-menu,.ast-header-break-point .main-navigation .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle+.sub-menu{display:block!important}
.ast-header-break-point .ast-above-header .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle+.ast-mm-custom-content+.sub-menu,.ast-header-break-point .ast-below-header .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle+.ast-mm-custom-content+.sub-menu,.ast-header-break-point .main-navigation .sub-menu .menu-item .ast-hide-menu-item+.ast-menu-toggle+.ast-mm-custom-content+.sub-menu{display:block!important}
.main-header-bar-wrap .ast-search-box.header-cover{z-index:7}
.ast-search-box.header-cover .ast-container{position:relative}
.site-header .ast-inline-search.ast-search-menu-icon .search-form{padding-left:0;padding-right:0}
.site-header .ast-inline-search.ast-search-menu-icon .search-field{padding-left:1em;padding-right:2em}
.ast-header-break-point .site-header .ast-inline-search.ast-search-menu-icon .search-field{padding-right:2em}
.ast-header-custom-item-inside.ast-desktop .main-header-menu .ast-search-menu-icon.full-screen,.ast-header-custom-item-inside.ast-desktop .main-header-menu .ast-search-menu-icon.header-cover{display:none}
.ast-header-break-point .ast-swap-below-header-sections.site-header .ast-below-header .ast-inline-search.ast-search-menu-icon .search-field{padding-left:1em;padding-right:0}
/* ── 布局兜底：真正生效的位置 ──
2026-09-04 从文件前面挪到这里：这些手写规则用的类名（.site-primary-header-wrap/
.main-header-menu/.ast-custom-button 等）在上面「自动抽取」区块里也真实出现过
（比如 .ast-builder-grid-row-container{display:grid} 也套在
.site-primary-header-wrap 这个元素上），同优先级（都是单类选择器）、
源码顺序更靠后的赢——放在文件前面时被抽取规则的 display:grid 悄悄盖掉了
display:flex，三个头部子元素（logo/导航/按钮）没有 grid-template-columns
兜底，全部纵向堆叠，就是这次实测截图里页头跟参考站差距最大的直接原因。
跟 home-shared.css 里 --display / --text-align 那几处是同一个坑：手写规则
必须放在真实抽取块之后才能保证赢。
2026-09-04 二次返工（用户反馈"滚动后左右还是有留白、菜单没贴右"）：
用 tools/probe/probe.py 对 ref/raw/jcrapid.com/index.html 实测出两个真问题：
1. 上面这行 `.ast-container{max-width:1200px}` 是我自己凭感觉加的，跟真实
抽取规则「自动抽取」区块里已经有的 `.ast-container{max-width:100%}`
互相矛盾——因为这条手写规则在文件更后面，赢了，页头被错误地限制到
1200px 宽，两边就出现了参考站没有的留白。实测参考站这个元素在 1440
视口下宽度是 1367px（接近整个视口，不是 1200），根本没有这个上限。
直接删掉这条手写规则，让真实的 max-width:100% 生效。
2. 参考站真实结构是「logo 一列 + nav/按钮/汉堡一列」的两栏 grid，右列自带
真实抽取规则 `.ast-grid-right-section{justify-content:flex-end}`，整体
贴着容器右边——之前拍平成 3 个并排 flex 子项（logo/nav/按钮），nav 用
`flex:1` 把按钮推到最右，菜单本身还是贴着 nav 容器左边，不是贴著整个
页头右边。已经在 header.html 里把 nav+按钮+汉堡包进
`.site-header-primary-section-right.ast-grid-right-section`
（真实 Astra class，不是发明的），这里配一套 grid 布局撑起来。 */
/* 🚩 2026-09-09 客户要求页头贴边占满（0px），不能直接改上面「自动抽取」区块里
的 `.ast-container{padding-left:20px;padding-right:20px}`——那条是无限定的裸
类选择器，blog-shared.css / blog-archive-grid.php 的归档列表也用了同一个
`.ast-container` 类，改裸选择器会连带把博客归档列表的左右内边距也清零，
属于范围外的回归。这里用 `#ast-desktop-header` 限定，只覆盖页头这一处，
两个 padding-right/padding-left 都补上 !0 级别的显式声明（源码顺序在抽取
块之后，单纯类选择器 vs ID+类选择器，优先级更高，不用靠顺序赌）。 */
#ast-desktop-header .ast-container {
padding-left: 0;
padding-right: 0;
}
.site-primary-header-wrap {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
/* 🚩 2026-09-04：这个 32px 之前也是凭感觉写的，没有测过。真实参考站
`.ast-builder-grid-row{grid-column-gap:20px}`（跟上面 justify-content
那次一样，这条规则本身也不在我们这份抽取文件里，是另一份没被
extract-matching-css.py 收进来的 Astra 模块 CSS），而且用 probe.py 量
logo 区块和右侧区块的实际间距（左栏右边缘 x=304，右栏左边缘 x=325）
算出来也是 21px，跟 20px 这个声明值对得上。改成 20px。 */
column-gap: 20px;
--jiesheng-nav-height: 76px;
height: var(--jiesheng-nav-height);
padding: 0;
transition: height 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header-primary-section-left {
display: flex;
align-items: center;
}
.site-branding.ast-site-identity {
flex-shrink: 0;
display: flex;
align-items: center;
/* 🚩 2026-09-09：只挪 logo 本身，不碰 #ast-desktop-header .ast-container
的整体贴边归零（那是客户要的页头满宽效果，不能再加回去）。左栏是
grid-template-columns 的 auto 列，这里加 padding-left 只会把 logo
往右推，右栏导航/按钮仍贴着页头右边缘。 */
padding: 0 0 0 20px;
}
.site-branding img {
display: block;
/* 🚩 2026-09-09：客户反馈换上新 logo（803x800 原图裁边后 603x463，见
scripts/import-client-logo-v2.php）后"看起来好小"——根因是旧图本身只有
106x98px 分辨率，新图分辨率足够，这里把显示高度从 48px 提到 60px，
在不用整体拉高导航栏（--jiesheng-nav-height 仍是 76px）的前提下让
logo 明显更大更清楚，两种宽高比的 Logo 都保持等比缩放。 */
height: 60px;
width: auto;
transition: height 0.2s ease;
}
/* 🚩 2026-09-04 三次返工才真正修对：这里原来写的注释说
`.ast-grid-right-section{justify-content:flex-end}` 已经是「自动抽取」区块里
的真实规则，不用自己补——这句话是错的，我是拿参考站真实页面（加载了 Astra
完整样式表）用 probe.py 测出 computed style 是 flex-end，就想当然认为这条
声明也在我们自己抽出来的 header.css 里，没有回来翻这个文件确认过。实际上
`tools/extract-matching-css.py` 只精确匹配了 `.ast-grid-right-section
.ast-site-identity>:first-child{...}` 这种带后代选择器的规则（本文件前面
112 行开始那段能搜到），`.ast-grid-right-section{justify-content:flex-end}`
这条本身根本不在这份文件里——是拿参考站的观测结果冒充了"我们文件里已经有"，
典型的"凭记忆/假设，没有回去看代码"翻车。结果是这个 div 只有 display:flex
（靠 .ast-flex 抽取规则），没有 justify-content，默认 flex-start，nav+按钮
紧贴在 logo 右边就不动了，右边一大截空白——这才是用户说"菜单栏还是靠左的"
的真正原因，跟上一轮修的 nav 自己 flex-grow 是两个不同的坑。这次自己显式写
justify-content:flex-end，不再依赖"应该已经有了"这种没验证过的假设。 */
.site-header-primary-section-right {
justify-content: flex-end;
flex-wrap: nowrap;
/* 🚩 2026-09-04：这个 32px 也是凭感觉写的。probe.py 实测参考站 nav 区块
右边缘（x=416+741=1157）到 CTA 按钮左边缘（x=1167）只差 10px，不是 32px
——之前写大了三倍。改成 10px。 */
gap: 10px;
flex: 1;
min-width: 0;
}
/* 2026-09-04：菜单项之间的间距实测（probe.py 量 ref/raw/jcrapid.com/index.html，
.main-header-menu .menu-item > a 相邻两个 的 box：第一个 x=416,w=91，
第二个紧接着 x=507——两个盒子之间是 0，说明真实间距全部来自每个链接自己的
`padding:0 1em`（本文件前面"自动抽取"区块里 `.main-header-menu .menu-link{
padding:0 1em}` 已经是真实规则，之前这几个 没有 `menu-link` class 选不中，
header.html 这次已经补上），这里不能再叠一个 flex gap，会比真实值宽。
同一次测量顺带量出真实字号/字重是 18px/700（加粗），之前凭感觉写的 15px/500
明显偏细偏小。 */
.main-header-menu {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.main-header-menu .menu-item > a {
color: #1d2939;
font-size: 18px;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease;
}
.main-header-menu .menu-item > a:hover { color: var(--brand); }
.ast-header-button-1 { flex-shrink: 0; }
.ast-custom-button-link { text-decoration: none; }
/* 🚩 2026-09-04：这几个数字之前也是凭感觉写的（14px/10px 22px/4px 圆角），
没有测过。probe.py 实测参考站 "Instant Quote" 按钮真实 computed style：
font-size 15px、font-weight 600（这条本来就对）、padding 10px 40px、
border-radius 50px（药丸型，不是这次之前的直角小圆角）、还有一圈跟背景色
同色的 2px 实线边框（这条之前没注意到，是这轮建 probe-map 才顺带测出来的）。
改成实测值。 */
.ast-custom-button {
background: var(--brand);
color: #fff;
font-weight: 600;
font-size: 15px;
padding: 10px 40px;
border: 2px solid var(--brand);
border-radius: 50px;
white-space: nowrap;
}
.ast-custom-button:hover { background: var(--brand-hover); }
.menu-toggle {
display: none;
background: none;
border: none;
padding: 6px;
cursor: pointer;
color: #1d2939;
transition: color 0.2s ease;
}
/* 导航在平板宽度提前折叠，避免菜单换成两行后溢出收缩栏。 */
@media (max-width: 1100px) {
.main-header-bar-navigation,
.ast-header-button-1 {
display: none;
}
.menu-toggle { display: block; }
/* 移动端汉堡菜单展开面板。🚩 2026-09-04 补的：点击展开要显示的 CSS 之前
完全没写，配合 functions.php 里查错选择器的死 JS，汉堡菜单等于完全不能用
——这次一起修。展开时用不透明白底深色字，不跟随 .jiesheng-header--scrolled
状态，保证任何滚动位置点开都看得清。CTA 按钮在这个断点本来就是隐藏的
（这条是之前就有的行为，这次没有改），汉堡菜单只负责展开导航链接。 */
.jiesheng-mobile-nav-open .main-header-bar-navigation {
display: block;
/* 真实抽取规则 .main-header-bar .main-header-bar-navigation{height:100%}
（本文件前面）会让这里 100% 抄桌面端那一行原本 80px 的高度，装不下
竖排 7 个菜单项，多出来的部分溢出到白色背景框外面，直接叠在 Hero
图上若隐若现——2026-09-04 点开菜单实测截图才发现，必须显式盖掉。 */
height: auto;
max-height: calc(100dvh - var(--jiesheng-header-visible-h, 118px));
overflow-y: auto;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 8px 16px rgba(16, 24, 40, 0.12);
padding: 8px 20px;
}
.jiesheng-mobile-nav-open .main-header-menu {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.jiesheng-mobile-nav-open .main-header-menu .menu-item {
width: 100%;
border-bottom: 1px solid #eee;
}
/* 🚩 2026-09-04 修的既有 bug（加下拉这次截图实测发现的，不是这次改动引入）：
这条如果写成类选择器 `.jiesheng-mobile-nav-open .main-header-menu .menu-item > a`，
跟 `.jiesheng-dark-header .main-header-menu > .menu-item > a{color:#fff}`
（文件后面「透明叠加」那段）优先级刚好打平（都是 3 个类+1 个标签），
打平时看源码顺序，后面那条赢——结果是深色页面（首页/Capabilities/
Industries/Material 归档/About Us/Contact）在没滚动过的情况下点开手机端
汉堡菜单，菜单文字仍然是白色，叠在展开面板的白色背景上完全看不见。
用 #masthead 的 ID 选择器把优先级明确拉高，不靠源码顺序去赌。 */
#masthead.jiesheng-mobile-nav-open .main-header-menu .menu-item > a {
display: block;
padding: 12px 0;
color: #1d2939;
}
/* 下拉子菜单在移动端改成手风琴：默认收起，点 .jiesheng-submenu-toggle
（functions.php 里的 JS）加 .jiesheng-submenu-open 才展开。桌面态的
绝对定位/浮层在这里全部覆盖掉，变成跟随文档流的普通列表。 */
.jiesheng-mobile-nav-open .main-header-menu .menu-item-has-children {
position: relative;
}
.jiesheng-mobile-nav-open .main-header-menu .sub-menu {
display: none;
position: static;
visibility: visible;
left: 0;
width: 100%;
box-shadow: none;
background: #f9f9f9;
}
.jiesheng-mobile-nav-open .main-header-menu .menu-item-has-children.jiesheng-submenu-open > .sub-menu {
display: block;
}
.jiesheng-mobile-nav-open .main-header-menu .sub-menu .menu-item {
border-bottom-color: #eee;
}
.jiesheng-mobile-nav-open .main-header-menu .sub-menu .menu-link {
padding-left: 16px;
}
.jiesheng-mobile-nav-open .jiesheng-submenu-toggle {
display: block;
position: absolute;
right: 0;
top: 0;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
}
.jiesheng-mobile-nav-open .jiesheng-submenu-toggle::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid #1d2939;
border-bottom: 2px solid #1d2939;
transform: translateY(-70%) rotate(45deg);
transition: transform 0.2s ease;
}
.jiesheng-mobile-nav-open .menu-item-has-children.jiesheng-submenu-open > .jiesheng-submenu-toggle::after {
transform: translateY(-30%) rotate(-135deg);
}
}
/* ── 透明叠加 + 滚动吸顶 ──
2026-09-04 返工：查 ref/raw/jcrapid.com 的 index.html / about-us/index.html
两个页面的 class，都带 ast-theme-transparent-header /
ast-sticky-header-shrink（全站级别的 Astra 设置，不是首页专属）——参考站
页头默认透明、直接叠在页面顶部内容上，logo/导航文字是白色，往下滚动后才
变成不透明的吸顶头部（同时 logo 从白色版换成彩色版，见
ref/raw/jcrapid.com/header-clean.html 里 #masthead 用 logo-1-150x37.png
白色版，#ast-fixed-header 吸顶副本用 logo1-120x30.webp 彩色版）。
之前的头部实现完全没做这个——从一开始就是不透明的固定横条，这是首页
"整体质感跟参考站不一样"最大的一块，颜色/字体/图片这些细节调得再准也补不上。
我们没有客户提供的真实 logo 图（合规问题见 jiesheng/AGENTS.md，两个 logo
theme_mod 已清空退回文字版），所以两个状态都用文字 logo，只切换颜色，
不是真的换图——跟参考站"换一张图"的具体实现不同，但"透明态浅色/吸顶态
深色"这个行为本质是对齐的。
`.jiesheng-header--scrolled` 由 functions.php 里的滚动监听脚本切换
（见 jiesheng_enqueue_theme_assets()），不是 CSS 能独立完成的部分。 */
#masthead {
position: fixed;
top: calc(var(--jiesheng-admin-offset, 0px) - var(--jiesheng-topbar-scroll, 0px));
left: 0;
right: 0;
z-index: 999;
}
/* 真正带白底的是 .main-header-bar（真实抽取规则 .main-header-bar{background-color:#fff}
见本文件前面），不是 #ast-desktop-header——#ast-desktop-header 只是最外层
包装 div，改它的背景没用，白底是三层嵌套里最内层那个 div 自己画的，
2026-09-04 用截图实测发现改错了元素才查出来。
🚩 2026-09-05：默认（无深色顶部 banner 的页面）改成一直是实色白底 + 深色字，
不再依赖"滚动后才切换成可读状态"——下面「透明叠加」那组规则只在 body 带
`.jiesheng-dark-header` 时生效（首页 + Capabilities/Industries/Material 归档 +
About Us，见 jiesheng_dark_header_body_class()）。这几类页面顶部紧接着一块
深色 banner/hero，白字衬深色图才读得出来；其余页面（Blog/Contact 等）顶部就是
普通页面背景，头部必须默认可读，等不到滚动这一下。 */
.main-header-bar {
background: #fff;
box-shadow: 0 2px 12px rgba(16, 24, 40, 0.08);
}
.jiesheng-header__logo-text {
color: #1d2939;
transition: color 0.2s ease;
}
/* 2026-09-04：logo 配了真实图片后（透明态白色版 + 吸顶态彩色版，两张 ![]()
都会
输出，见 theme-header-footer.php），跟参考站一样靠显隐切换，不是文字变色那套。
没配吸顶态图时 PHP 会让两张 img 用同一张图，这里的切换逻辑不受影响
（两张都存在，只是内容一样）。
🚩 第一版这里写的是 `.jiesheng-header__logo-img--sticky{display:none}`
（单类选择器，优先级 0,1,0），实测两张图同时显示叠在一起——本文件前面
`.site-branding img{display:block}` 优先级是 0,1,1（一个类 + 一个标签），
比单类选择器高，跟源码顺序无关，直接赢，`display:none` 根本没生效。
这次改成同等/更高优先级的选择器才是真正生效的写法。 */
.site-branding img.jiesheng-header__logo-img--sticky { display: none; }
/* 深色顶部页面（首页 + Capabilities/Industries/Material 归档 + About Us，见下面
body.jiesheng-dark-header 的说明）：头部默认维持透明叠加 + 白字，直到滚动
触发 .jiesheng-header--scrolled 才切成实色白底 + 深色字（紧接着下面那组规则）。
🚩 这段必须写在 .jiesheng-header--scrolled 规则之前——两组选择器都是两个
class 叠加，优先级相同，源码顺序在后的赢；这段如果写到 .jiesheng-header--scrolled
之后，滚动后会一直保持透明，「滚动吸顶」的白底就再也出不来了。 */
.jiesheng-dark-header .main-header-bar {
background: transparent;
box-shadow: none;
}
.jiesheng-dark-header .jiesheng-header__logo-text,
.jiesheng-dark-header .main-header-menu > .menu-item > a,
.jiesheng-dark-header .menu-toggle {
color: #fff;
}
.jiesheng-header--scrolled .main-header-bar {
height: 56px;
background: #fff;
box-shadow: 0 2px 12px rgba(16, 24, 40, 0.08);
}
.jiesheng-header--scrolled .site-branding img {
/* 原来是 36px（展开态 48px 的 0.75 倍），展开态改成 60px 后按同一个
0.75 比例换算成 44px（约等于 60*0.75=45，取整）。 */
height: 44px;
}
@media (prefers-reduced-motion: reduce) {
.site-primary-header-wrap,
.site-branding img {
transition: none;
}
}
.jiesheng-header--scrolled .main-header-menu > .menu-item > a,
.jiesheng-header--scrolled .jiesheng-header__logo-text,
.jiesheng-header--scrolled .menu-toggle {
color: #1d2939;
}
/* 🚩 2026-09-04 修的既有 bug：上面两组颜色规则原来写的是后代选择器
`.main-header-menu .menu-item > a`（没有 `>`），会连 .sub-menu 里嵌套的
.menu-item > a 也一起选中。透明叠加态（.jiesheng-dark-header）文字设成白色时，
下拉框背景是白色，子菜单文字白字白底完全看不见，只剩浏览器默认的圆点列表
标记若隐若现——加下拉菜单时截图实测发现的。这里加 `>` 限定只选顶层菜单项，
再显式给子菜单文字定死深色，两道保险，不依赖头部当前是透明态还是吸顶态。
🚩 2026-09-05 用 probe 实测跟参考站对比时改的：颜色原来写的是 #1d2939
（header.css 里到处沿用的自定义深蓝，不是抽取值），实测参考站子菜单文字
真实颜色是 `--ast-global-color-3`，等于本主题 style.css 里已经定义好的
`--text: #333333`（这个变量本来就在，之前建头部时没用上）——改成引用它，
跟参考站测出来的真实值对上，也跟项目其余地方用的色板token保持一致。 */
.main-header-menu .sub-menu .menu-link {
color: var(--text);
}
/* 2026-09-05 用 tools/probe 实测 jcrapid.com 真实 Resources 下拉（跟我们下拉
结构最接近的真实样本）补的几处真实差距——这些值不在 tools/extract-matching-css.py
抽取的静态主题 CSS 里，而是在参考站 内联的 astra-theme-css-inline-css
（Customizer 生成的站点专属样式，96KB，静态抽取脚本只扫描主题资源文件，
没扫描这份每页内联的动态样式，所以之前完全漏掉）：
1. 下拉面板顶部有一条 2px 品牌橙色描边（--ast-global-color-0: #e7823a，
正好等于我们自己 --brand 变量的值，见 about-shared.css 里的记录）
2. 下拉面板有阴影，真实规则是 `.sub-menu{box-shadow:...}` 不带条件前缀，
我们抽取到的版本前面挂着 `.ast-desktop` 前缀——那个 class 由 Astra
真实 JS 在运行时按视口宽度动态加到祖先节点上，我们没有加载那份 JS，
这个前缀在我们站上永远不满足，阴影规则形同虚设
3. 下拉项之间原来 extract 出来的 `submenu-with-border` 分隔线，在这个站的
内联样式里被显式设成 `border-style:none` 覆盖掉了——真实效果是没有分隔线
4. 下拉项字号/字重/行高/内边距实测是 15px/600/30px/13.5px 20px，
不是继承顶层导航的 18px/700——我们之前没有单独给子菜单项定字号，
直接继承了顶层的大字号
顶层导航悬停变橙色（`.menu-item:hover>.menu-link{color:var(--ast-global-color-0)}`
真实规则）我们本来就有对应的 `.main-header-menu .menu-item > a:hover{color:var(--brand)}`
（本文件前面，line ~491），但跟 `.jiesheng-dark-header`/`.jiesheng-header--scrolled`
的静态颜色规则优先级刚好打平，源码顺序在后的静态规则赢，hover 变色在深色
叠加页面上完全没有效果——一并用更高优先级的选择器修掉，不靠调整源码顺序赌。 */
.main-header-menu .sub-menu {
border-top: 2px solid var(--brand);
border-right: 0;
border-bottom: 0;
border-left: 0;
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
}
/* 🚩 2026-09-05 用 probe 完整属性对比时才挖出来的：`.submenu-with-border .sub-menu`
（本文件前面抽取到的真实规则）是给四边都加 1px 实线，上面那条 `border-top`
写法只覆盖了顶边，右/下/左三边的 1px 还在——`box-sizing:border-box` 下，
左右各 1px 会把内容区吃掉 2px，子项宽度因此变成 238px 而不是参考站真实的
240px，肉眼看下拉框会比参考站略窄一点。这里补齐右/下/左三边清零。 */
.main-header-menu .sub-menu .menu-item {
display: flex;
flex-direction: column;
justify-content: center;
}
.main-header-menu .sub-menu .menu-item .menu-link {
border-style: none;
font-size: 15px;
font-weight: 600;
/* 2026-09-08 用户反馈下拉项之间留白过大：在保持字号和横向留白不变的
前提下，收紧行高与上下内边距。 */
line-height: 24px;
padding: 8px 20px;
transition: none;
}
.jiesheng-dark-header .main-header-menu > .menu-item:hover > a,
.jiesheng-header--scrolled .main-header-menu > .menu-item:hover > a {
color: var(--brand);
}
/* 🚩 「显示吸顶态」这条必须至少跟上面 `.site-branding img.jiesheng-header__
logo-img--sticky{display:none}` 同等优先级才赢得了它——同样是类+标签+类
三段（0,3,1 vs 它的 0,2,1，比它高一段），不然滚动后两张 logo 图会一起变
display:none（2026-09-04 截图实测踩过一次：滚动后 logo 位置完全空白）。 */
.jiesheng-header--scrolled .jiesheng-header__logo-img--default { display: none; }
.jiesheng-header--scrolled .site-branding img.jiesheng-header__logo-img--sticky { display: block; }
/* 首页 hero 是深色遮罩全宽图，头部叠在上面撑得住；其余页面默认没有这种全宽
深色顶部区域，页头盖住内容会挡字——跟 ketian1 首页负 padding兜底同一个套路：
给 body 让出头部实际高度，让内容从头部下方开始。头部实际高度用 JS 量出来
写成 --jiesheng-header-h（见 functions.php），这里给一个兜底值防止 JS 还没
跑完时的 FOUC。*/
body {
padding-top: var(--jiesheng-header-h, 118px);
}
/* 🚩 2026-09-05：原来这里只有 body.home 一条例外。Capabilities/Industries/
Material 归档页头（*-archive-header.css 的 background-color: var(--text-strong)
深色 banner）、About Us 页头（about-shared.css 的 .jiesheng-about-banner 同款
深色遮罩）建出来之后，也需要头部叠加在深色区域上才读得清白字——不让
body 把这块深色 banner 顶到头部下方。`.jiesheng-dark-header` 这个 body class
由 jiesheng_dark_header_body_class()（inc/theme-header-footer.php）按页面
类型统一判断，不要逐个页面模板里散着写判断逻辑。 */
.jiesheng-dark-header {
padding-top: 0;
}