/* ===========================================
   锦程首页编辑器 - 前端基础样式
   命名空间: .jch-* 避免与主题冲突
   颜色/字体由主题 CSS 文件定义（见 assets/css/themes/）
   =========================================== */

.jch-wrap {
    --jch-max: 1100px;
    /* 区块主题的 .is-layout-constrained 会把内容宽度压成 650px 左右。
     * 这里同时把主题那套宽度变量顶开，让「整页」和「内容容器」都不再受限。 */
    --wp--style--global--content-size: none;

    background: var(--jch-bg);
    color: var(--jch-text);
    font-family: var(--jch-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;

    /* 铺满全屏 —— 必须显式撑宽，且用 !important。
     *
     * 背景：区块主题（如 Twenty Twenty-Two）会把「内容」外面套一层
     * `wp-block-post-content is-layout-constrained` 的 div，它带
     * `max-width: var(--wp--style--global--content-size)`（TT2 约 650px）。
     * 我们的 .jch-wrap 在里面，于是整页被压成中间一条 —— 用户说的「不是铺满全屏」。
     *
     * 注意几个反直觉的地方（都实测过）：
     * 1) 自己写 `margin-left:0; margin-right:0` 没用 —— 会输给区块主题的
     *    `.is-layout-constrained > * { margin-left:auto }`（它来自更外层布局，特异性更高）。
     * 2) 用 transform/position 把内容「视觉上」推出去也不行 ——
     *    父级带 `overflow-x: hidden/clip`，超出部分会被直接裁掉。
     * 3) `.alignfull` 那种 negative-margin 技巧在这里也用不了：
     *    本站实测 `--wp--custom--spacing--outer` 没生效，负边距会算成 -0px。
     * → 唯一稳的办法：width 撑满父级 + !important 把 auto 边距摁掉。
     */
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* 横向溢出自己兜住，但**不能用 hidden 裁掉自己**：
     * 父级（区块主题的受限布局）可能带 overflow-x: hidden，
     * 这里再叠一层是防 100vw 类元素撑出滚动条，不是用来遮内容的。
     */
    overflow-x: clip;
}

/* 兜底：万一主题把 .jch-wrap 塞进更里层的受限容器（不是 .entry-content 那一层），
 * 把祖先链上这几个「会压窄内容」的类一并放开。只在页面里有 .jch-wrap 时才生效。 */
body:has(.jch-wrap) .is-layout-constrained > .jch-wrap,
body:has(.jch-wrap) .wp-block-post-content > .jch-wrap,
body:has(.jch-wrap) .wp-block-group > .jch-wrap {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 真正把最后一道边距顶掉：区块主题的 .wp-site-blocks 自带
 *   padding-left/right: var(--wp--custom--spacing--outer)
 * 在 1250px 宽的窗口上 TT2 算出来是 62.5px（= max(1.25rem, 5vw)），
 * 于是整页内容左右各空 62.5px —— 这就是「没铺满全屏」的最后一层。
 * 只在页面里真的有 .jch-wrap 时才清掉，避免影响站内其他普通页面。
 */
body:has(.jch-wrap) .wp-site-blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body:has(.jch-wrap) .wp-site-blocks > .wp-block-template-part > .wp-block-group.alignfull,
body:has(.jch-wrap) .wp-site-blocks > .wp-block-group.alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* 区块主题的 `.alignfull` 会用就负边距把内容「拉」到父级内边距之外：
     *   margin-left/right: calc(-1 * var(--wp--custom--spacing--outer))
     * 我们上面已经把父级内边距清零了，这个负边距就**没有对应的内边距可抵**，
     * 于是把元素整个推出视口 —— 实测 1440px 窗口下 margin-left:-72px、右侧溢出 57px，
     * 横向滚动条就是这么来的（1250px 时恰好净差为 0，所以一开始没暴露）。
     * 清掉负边距，让 alignfull 老老实实按 100% 宽铺满。
     */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

.jch-wrap *,
.jch-wrap *::before,
.jch-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.jch-wrap a { color: var(--jch-accent-2); text-decoration: none; }
.jch-wrap a:hover { text-decoration: underline; }

/* ===== Nav =====
 * 导航的**底色要铺满全屏**（.jch-nav 本身），只把内容收进 --jch-max；
 * 这条配合 hero 的「整条色带铺满、文字居中」一起构成全宽的视觉底。
 */
.jch-nav {
    position: sticky; top: 0; z-index: 100;
    width: 100%;
    background: rgba(13,17,23,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--jch-border);
}
.jch-nav-inner {
    max-width: var(--jch-max); margin: 0 auto;
    padding: 16px 24px;
    display: flex; justify-content: space-between; align-items: center;
}
.jch-logo {
    font-weight: 700; font-size: 18px; letter-spacing: 0.5px;
    color: var(--jch-text) !important;
}
.jch-logo span { color: var(--jch-accent); }
.jch-nav-links { display: flex; gap: 28px; }
.jch-nav-links a {
    color: var(--jch-text-soft); font-size: 14px;
    transition: color 0.2s;
}
.jch-nav-links a:hover {
    color: var(--jch-text); text-decoration: none;
}

/* ===== Hero =====
 * 首屏这一条要「铺满全屏」：整条背景色带横向贯通（width:100%），
 * 只把里面的文字收进 --jch-max 并居中。
 * 这里**不能用 max-width + margin:auto** —— 那会把色带也收窄成一条。
 * `overflow: hidden` 保留：::before 那个光晕故意画在容器外，需要裁掉，
 * 否则会撑出横向滚动条。
 */
.jch-hero {
    padding: 120px 24px 80px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* 文字块本身还是要一个可读宽度 */
.jch-hero h1,
.jch-hero .jch-cta {
    max-width: var(--jch-max);
    margin-left: auto;
    margin-right: auto;
}
.jch-hero .jch-cta { justify-content: center; }
/* 导语窄一点更好读，别跟标题一样宽 */
.jch-hero .jch-lead {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.jch-hero::before {
    content: "";
    position: absolute; top: -200px; right: -200px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255,166,87,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.jch-hero h1 {
    font-size: clamp(36px, 6vw, 56px);
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--jch-text);
}
.jch-hero h1 .accent { color: var(--jch-accent); }
.jch-lead {
    font-size: 18px;
    color: var(--jch-text-soft);
    margin-bottom: 36px;
}
.jch-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.jch-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px; font-weight: 500;
    transition: all 0.2s;
    cursor: pointer; border: none;
    text-decoration: none !important;
}
.jch-btn-primary {
    background: var(--jch-accent);
    color: #0d1117;
}
.jch-btn-primary:hover { transform: translateY(-2px); }
.jch-btn-ghost {
    background: transparent;
    color: var(--jch-text);
    border: 1px solid var(--jch-border);
}
.jch-btn-ghost:hover { border-color: var(--jch-text); }

/* ===== Sections ===== */
.jch-section {
    padding: 80px 24px;
    max-width: var(--jch-max); margin: 0 auto;
}
.jch-section h2 {
    font-size: 28px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 12px;
    color: var(--jch-text);
}
.jch-section h2::before {
    content: ""; display: inline-block;
    width: 4px; height: 24px;
    background: var(--jch-accent);
    border-radius: 2px;
}
.jch-section-sub {
    color: var(--jch-text-soft);
    margin-bottom: 40px;
    font-size: 15px;
}

/* ===== Works ===== */
.jch-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.jch-work-card {
    background: var(--jch-bg-card);
    border: 1px solid var(--jch-border);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.25s;
    display: block !important;
    text-decoration: none !important;
    color: var(--jch-text) !important;
}
.jch-work-card:hover {
    border-color: var(--jch-accent);
    transform: translateY(-4px);
}
.jch-work-thumb {
    width: 100%; height: 140px;
    background: linear-gradient(135deg, #2d333b, #1c2128);
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
}
.jch-work-card h3 { font-size: 17px; margin-bottom: 8px; }
.jch-work-card p {
    color: var(--jch-text-soft); font-size: 14px; margin-bottom: 12px;
}
.jch-work-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.jch-work-tags span {
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(88,166,255,0.1);
    color: var(--jch-accent-2);
    border-radius: 4px;
}

/* ===== Tech ===== */
.jch-tech-grid {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.jch-tech-tag {
    padding: 8px 16px;
    background: var(--jch-bg-card);
    border: 1px solid var(--jch-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--jch-text-soft);
    transition: all 0.2s;
    display: inline-flex; align-items: center;
}
.jch-tech-tag:hover {
    color: var(--jch-text);
    border-color: var(--jch-accent);
}
.jch-tech-tag .jch-dot-sm {
    display: inline-block; width: 6px; height: 6px;
    background: var(--jch-accent);
    border-radius: 50%;
    margin-right: 8px;
}

/* ===== About ===== */
.jch-about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.jch-about-item {
    background: var(--jch-bg-card);
    border: 1px solid var(--jch-border);
    border-radius: 12px;
    padding: 24px;
}
.jch-about-icon {
    font-size: 24px; margin-bottom: 12px;
}
.jch-about-item h3 {
    font-size: 16px; margin-bottom: 8px;
    color: var(--jch-accent);
}
.jch-about-item p {
    color: var(--jch-text-soft); font-size: 14px;
}

/* ===== Contact ===== */
.jch-contact-block {
    background: var(--jch-bg-card);
    border: 1px solid var(--jch-border);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}
.jch-contact-block h2 {
    justify-content: center;
    color: var(--jch-text);
}
.jch-contact-block p {
    color: var(--jch-text-soft); margin-bottom: 24px;
}
.jch-contact-links {
    display: flex; justify-content: center;
    gap: 16px; flex-wrap: wrap;
}
.jch-contact-links a {
    padding: 10px 20px;
    background: var(--jch-bg);
    border: 1px solid var(--jch-border);
    border-radius: 8px;
    color: var(--jch-text) !important;
    transition: all 0.2s;
    text-decoration: none !important;
}
.jch-contact-links a:hover {
    border-color: var(--jch-accent);
}

/* ===== 在线留言表单 ===== */
/* 紧跟在联系方式卡片下面：上一个 section 已有 80px 下间距，这里不再加，免得太空 */
.jch-msg-section { padding-top: 0; }
.jch-msg-block {
    background: var(--jch-bg-card);
    border: 1px solid var(--jch-border);
    border-radius: 16px;
    padding: 40px;
}
.jch-msg-block h2 { color: var(--jch-text); }
.jch-msg-sub {
    color: var(--jch-text-soft);
    margin-bottom: 24px;
}
.jch-msg-form { margin: 0; }
.jch-msg-field {
    display: block;
    margin-bottom: 18px;
}
.jch-msg-field > span {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--jch-text-soft);
}
.jch-msg-field input[type="text"],
.jch-msg-field input[type="email"],
.jch-msg-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--jch-bg-soft);
    border: 1px solid var(--jch-border);
    border-radius: 10px;
    color: var(--jch-text);
    font-size: 15px;
    font-family: inherit;
    line-height: 1.6;
    transition: border-color 0.2s;
}
.jch-msg-field textarea {
    resize: vertical;
    min-height: 140px;
}
.jch-msg-field input:focus,
.jch-msg-field textarea:focus {
    outline: none;
    border-color: var(--jch-accent);
}
.jch-msg-field input::placeholder,
.jch-msg-field textarea::placeholder { color: var(--jch-text-soft); }

/* 称呼 / 邮箱并排，窄屏时叠成一列 */
.jch-msg-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

/* 蜜罐：挪到屏幕外而不是 display:none —— 部分机器人会跳过不可见元素，
   而「挪出去」在它看来仍然是个正常字段，填了就被抓到。 */
.jch-msg-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.jch-msg-note {
    margin-top: 12px;
    font-size: 13px;
    color: var(--jch-text-soft);
}
.jch-msg-notice {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid transparent;
}
.jch-msg-ok {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.35);
    color: var(--jch-green);
}
.jch-msg-err {
    background: rgba(248, 81, 73, 0.12);
    border-color: rgba(248, 81, 73, 0.35);
    color: #ff8a80;
}
.jch-msg-warn {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.35);
    color: var(--jch-accent);
}

@media (max-width: 640px) {
    .jch-msg-block { padding: 28px 20px; }
    .jch-msg-fields { grid-template-columns: 1fr; }
}

/* ===== Footer ===== */
/* 和 nav / hero 一样：色带铺满，内容收窄居中 */
.jch-footer {
    border-top: 1px solid var(--jch-border);
    padding: 32px 24px;
    color: var(--jch-text-soft);
    font-size: 13px;
    text-align: center;
    width: 100%;
}
.jch-footer-slogan {
    color: var(--jch-accent); margin-bottom: 8px;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .jch-nav-links { gap: 16px; }
    .jch-nav-links a { font-size: 13px; }
    .jch-section { padding: 60px 20px; }
    .jch-hero { padding: 80px 20px 60px; }
    .jch-contact-block { padding: 28px 20px; }
}

/* Block Editor 预览加个边框 */
.editor-styles-wrapper .jch-wrap,
.block-editor-block-list__block .jch-wrap {
    border: 1px dashed var(--jch-border);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}