/*
Theme Name: CF Starter
Theme URI: https://charlieflow.com/
Author: CharlieFlow
Author URI: https://charlieflow.com/
Description: CharlieFlow 交付用的区块主题。客户可以在「外观 → 编辑器」里自己改文字、图片和颜色。
Version: 0.14.0
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: cf-starter
*/

:root{--cf-navy:var(--wp--preset--color--navy);--cf-accent:var(--wp--preset--color--accent);--cf-line:var(--wp--preset--color--line);--cf-muted:var(--wp--preset--color--muted)}
body{-webkit-text-size-adjust:100%}
.wp-site-blocks{overflow-x:clip}
.wp-site-blocks>*+*{margin-block-start:0}
img{max-width:100%;height:auto}
.cf-num,.cf-num *{font-family:var(--wp--preset--font-family--num);font-weight:700;letter-spacing:.01em}

/* ---- 小图标（CSS 遮罩，颜色跟文字走） ---- */
.cf-i{display:inline-flex;align-items:center;gap:8px}
p.cf-i{display:flex}
.cf-i::before{content:"";flex:none;width:1.05em;height:1.05em;background:currentColor;-webkit-mask:var(--cf-ico) center/contain no-repeat;mask:var(--cf-ico) center/contain no-repeat}
.cf-i-phone{--cf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.cf-i-mail{--cf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
.cf-i-pin{--cf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.cf-i-clock{--cf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
.cf-i-doc{--cf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E")}
.cf-i-chat{--cf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E")}
.cf-i-up{--cf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E")}
.cf-checklist{list-style:none;padding-left:0!important}
.cf-checklist li{position:relative;padding-left:30px;margin-bottom:10px}
.cf-checklist li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:50%;background:var(--cf-accent) center/11px no-repeat;-webkit-mask:none}
.cf-checklist li::after{content:"";position:absolute;left:4px;top:calc(.3em + 4px);width:10px;height:10px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- 顶部细条 + 页头 ---- */
.cf-topbar{font-size:13px}
.cf-topbar a{color:inherit}
.cf-topbar p{margin:0}
.cf-sticky{position:sticky;top:-37px;z-index:40}
.admin-bar .cf-sticky{top:-5px}
.cf-header{background:#fff;border-bottom:1px solid var(--cf-line)}
.cf-logo{gap:12px!important}
.cf-logo-mark{display:grid;place-items:center;width:44px;height:44px;margin:0;background:var(--cf-accent);color:#fff;font-weight:700;font-size:24px;line-height:1;flex:none}
.cf-logo-mark a{color:#fff}
.cf-logo .wp-block-site-title{margin:0}
.cf-logo-en{margin:2px 0 0!important;font-family:var(--wp--preset--font-family--num);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--cf-muted);line-height:1}
.cf-header .wp-block-navigation__container{gap:30px}
.cf-header .wp-block-navigation-item__content{padding:26px 0}
.cf-header .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,.cf-header .wp-block-navigation-item__content:hover{color:var(--cf-accent)}
.cf-header .wp-block-navigation__submenu-container{border:0!important;box-shadow:var(--wp--preset--shadow--card);padding:6px 0;min-width:220px!important}
.cf-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:9px 18px}
.cf-hdr-tel{line-height:1.2;margin:0}
.cf-hdr-tel small{display:block;font-size:12px;color:var(--cf-muted)}
.cf-hdr-tel strong{font-family:var(--wp--preset--font-family--num);font-size:20px;color:var(--cf-navy)}

/* ---- 小标签（橙色短线 + 字） ---- */
.cf-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px!important;color:var(--cf-accent);font-size:14px;font-weight:600;letter-spacing:.08em}
.cf-eyebrow::before{content:"";width:28px;height:2px;background:currentColor}

/* ---- 首屏：左文字右照片 ---- */
.cf-hero{margin-top:0!important;margin-bottom:0!important;gap:0!important}
.cf-flush>*{margin-block:0!important}
.cf-hero>.wp-block-column{margin:0!important}
.cf-hero-img{position:relative;min-height:560px}
.cf-hero-img figure{position:absolute;inset:0;margin:0}
.cf-hero-img img{width:100%;height:100%;object-fit:cover}
.cf-hero h1{color:#fff}
/* 首屏：整屏大图（外贸版） */
.cf-hero-full{min-height:640px!important;padding-block:80px!important}
.cf-hero-full .wp-block-cover__inner-container{width:min(1240px,100%)!important;margin-inline:auto}
.cf-hero-full .cf-hero-copy{max-width:720px;margin-left:0!important}
.cf-hero-full h1{color:#fff;font-size:clamp(32px,4.2vw,54px);line-height:1.12}
.cf-hero-full .is-style-outline .wp-block-button__link{color:#fff}
.cf-hero-full p{color:rgba(255,255,255,.86)}
.cf-badges{gap:10px!important}
.cf-badges p{margin:0;padding:6px 12px;border:1px solid rgba(255,255,255,.28);font-size:13px;color:rgba(255,255,255,.85)}

/* ---- 数字条 ---- */
.cf-stats{gap:0!important}
.cf-stats>*{padding:28px 24px!important;border-left:1px solid var(--cf-line);margin:0!important}
.cf-stats>*:first-child{border-left:0}
.cf-stats .cf-num{font-size:46px;line-height:1;color:var(--cf-navy);margin:0}
.cf-stats .cf-num sup{font-size:.5em;color:var(--cf-accent);vertical-align:top;margin-left:2px}
.cf-stats p:last-child{margin:8px 0 0;color:var(--cf-muted);font-size:14px}

/* ---- 照片叠放（关于我们） ---- */
.cf-photo-stack{position:relative;padding:0 0 64px 0}
.cf-photo-stack figure{margin:0}
.cf-photo-stack>figure:first-child{width:86%}
.cf-photo-stack>figure:first-child img{aspect-ratio:4/3;object-fit:cover;width:100%}
.cf-photo-stack>figure:nth-child(2){position:absolute;right:0;bottom:0;width:50%;border:8px solid #fff;box-shadow:var(--wp--preset--shadow--card)}
.cf-photo-stack>figure:nth-child(2) img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}
.cf-years{position:absolute;left:24px;bottom:88px;background:var(--cf-accent);color:#fff;padding:16px 20px!important;margin:0!important;line-height:1.2}
.cf-years .cf-num{font-size:44px;display:block}

/* ---- 卡片 ---- */
.cf-card{background:#fff;box-shadow:var(--wp--preset--shadow--card);transition:transform .2s ease,box-shadow .2s ease;height:100%}
.cf-card:hover{transform:translateY(-3px)}
.cf-card>figure{margin:0!important}
.cf-card>figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.cf-card-body{padding:20px 22px 22px!important}
.cf-card-body h3{margin:4px 0 8px!important;font-size:18px}
.cf-card-body p{margin:0 0 10px;color:var(--cf-muted);font-size:14px}
.cf-card-tag{color:var(--cf-accent)!important;font-size:13px!important;font-weight:600;margin:0!important}
.cf-more{font-weight:600;font-size:14px}
.cf-more a::after{content:" →"}
@media (min-width:782px){.cf-head-row>.wp-block-column:last-child{text-align:right}}

/* ---- 深色区块 ---- */
.cf-dark h2,.cf-dark h3,.cf-dark h4{color:#fff}
.cf-dark p{color:rgba(255,255,255,.76)}
.cf-dark .cf-cap{border-top:1px solid rgba(255,255,255,.18);padding-top:18px!important}
.cf-cap .cf-num{color:var(--cf-accent);font-size:28px;margin:0}
.cf-cap h3{margin:6px 0 4px!important;font-size:18px}
.cf-cap p{margin:0;font-size:14px}
.cf-dark .wp-block-button.is-style-outline .wp-block-button__link{color:#fff}
.cf-img-fill{margin:0!important;height:100%}
.cf-img-fill img{width:100%;height:100%;min-height:420px;object-fit:cover;display:block}

/* ---- 行业图块 ---- */
.cf-tile{min-height:340px!important;align-items:flex-end!important;padding:24px!important}
.cf-tile h3{color:#fff;margin:0 0 4px!important;font-size:20px}
.cf-tile p{color:rgba(255,255,255,.86);margin:0;font-size:14px}
.cf-tile .wp-block-cover__image-background{transition:transform .5s ease}
.cf-tile:hover .wp-block-cover__image-background{transform:scale(1.04)}

/* ---- 合作流程 ---- */
.cf-steps{counter-reset:none}
.cf-step{position:relative;padding-top:22px!important;border-top:2px solid var(--cf-line)}
.cf-step::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:2px;background:var(--cf-accent)}
.cf-step .cf-num{font-size:40px;color:color-mix(in srgb,var(--cf-navy) 30%,#fff);line-height:1;margin:0}
.cf-step h3{margin:8px 0 6px!important;font-size:18px}
.cf-step p{margin:0;color:var(--cf-muted);font-size:14px}

/* ---- 质量数字 ---- */
.cf-qnums{gap:16px!important}
.cf-qnums>*{background:var(--wp--preset--color--surface);padding:18px 20px!important;margin:0!important}
.cf-qnums .cf-num{font-size:34px;color:var(--cf-navy);margin:0;line-height:1.1}
.cf-qnums p:last-child{margin:4px 0 0;color:var(--cf-muted);font-size:14px}

/* ---- 内页横幅 ---- */
.cf-banner{min-height:280px!important}
.cf-banner h1{color:#fff;margin:0}
.cf-banner .cf-crumb{color:rgba(255,255,255,.76);font-size:14px;margin:8px 0 0}
.cf-banner .cf-crumb a{color:#fff}

/* ---- 规格表 ---- */
.wp-block-table.is-style-cf-spec{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0}
.is-style-cf-spec table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;background:#fff}
.is-style-cf-spec th{background:var(--cf-navy);color:#fff;text-align:left;font-weight:600;font-size:14px;border:0;padding:12px 16px}
.is-style-cf-spec td{border:0;border-bottom:1px solid var(--cf-line);padding:12px 16px;vertical-align:top}
.is-style-cf-spec tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--wp--preset--color--surface) 55%,#fff)}
.is-style-cf-spec td:first-child{color:var(--cf-navy);font-weight:600;white-space:nowrap}
.is-style-cf-spec figcaption{text-align:left;font-size:13px;color:var(--cf-muted)}

/* ---- 文章列表 ---- */
.cf-post .wp-block-post-featured-image{margin:0}
.cf-post .wp-block-post-featured-image img{aspect-ratio:16/10;object-fit:cover}
.cf-post .wp-block-post-date{color:var(--cf-accent);font-size:13px;font-weight:600}
.cf-post .wp-block-post-title{font-size:18px;margin:6px 0 8px}
.cf-post .wp-block-post-title a{color:var(--cf-navy)}
.cf-post .wp-block-post-excerpt{color:var(--cf-muted);font-size:14px;margin:0}
.cf-post .wp-block-post-excerpt__more-link{display:none}

/* ---- 询价表单（演示站不提交） ---- */
.cf-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.cf-form *{box-sizing:border-box}
.cf-form label{display:grid;gap:6px;font-size:14px;color:var(--wp--preset--color--contrast);font-weight:500}
.cf-form .full{grid-column:1/-1}
.cf-form input,.cf-form textarea,.cf-form select{font:inherit;font-size:15px;font-weight:400;color:var(--wp--preset--color--contrast);background:#fff;border:1px solid color-mix(in srgb,var(--cf-line),#000 10%);border-radius:2px;padding:10px 12px;width:100%}
.cf-form input:focus,.cf-form textarea:focus,.cf-form select:focus{outline:2px solid var(--cf-accent);outline-offset:0;border-color:var(--cf-accent)}
.cf-form button{justify-self:start;font:inherit;font-weight:600;background:var(--cf-accent);color:#fff;border:0;border-radius:2px;padding:12px 30px;cursor:not-allowed;opacity:.55}
.cf-form .note{grid-column:1/-1;margin:0;font-size:13px;color:var(--cf-muted)}

/* ---- 页脚 ---- */
.cf-footer a{color:rgba(255,255,255,.72)}
.cf-footer a:hover{color:#fff}
.cf-footer h4{color:#fff;font-size:16px;margin:0 0 14px!important}
.cf-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px}
.cf-footer p{color:rgba(255,255,255,.66);font-size:14px}
.cf-footer .cf-logo-mark{width:38px;height:38px;font-size:20px}
.cf-footer .wp-block-site-title,.cf-footer .wp-block-site-title a{color:#fff}
.cf-footbar{border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.cf-footbar p{color:rgba(255,255,255,.5);font-size:13px;margin:0}

/* ---- 浮动联系按钮：电脑右侧竖排，手机底部横排 ---- */
.cf-dock{position:fixed;right:16px;bottom:24px;z-index:60;display:grid;gap:6px}
.cf-dock .wp-block-buttons{display:grid;gap:6px}
.cf-dock .wp-block-button__link{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;padding:10px 0!important;font-size:12px;border-radius:2px;box-shadow:var(--wp--preset--shadow--card)}
.cf-dock [class*="cf-i-"] .wp-block-button__link::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--cf-ico) center/contain no-repeat;mask:var(--cf-ico) center/contain no-repeat}
.cf-dock .is-style-outline .wp-block-button__link{background:#fff;color:var(--cf-navy);border-color:#fff}
/* ---- 加微信弹层（#wx）：电脑居中，手机从底部弹出；编辑器里照常显示，方便换二维码 ---- */
.cf-wx{display:none;position:fixed;inset:0;z-index:1000;background:rgba(12,16,18,.55);align-items:center;justify-content:center;padding:16px}
.cf-wx.is-open,.cf-wx:target{display:flex}
.cf-wx-box{position:relative;width:min(360px,100%);max-height:100%;overflow:auto;background:var(--wp--preset--color--base);color:var(--wp--preset--color--contrast);padding:30px 26px 20px;border-radius:8px;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);animation:cf-wx-in .22s ease-out}
.cf-wx-box>*{margin-block:0!important}
@keyframes cf-wx-in{from{opacity:0;transform:translateY(16px)}}
.cf-wx-t{font-size:19px;font-weight:700;letter-spacing:.04em}
.cf-wx-qr{margin:18px auto 0!important;width:200px}
.cf-wx-qr img{display:block;width:200px!important;height:200px!important;padding:8px;background:#fff;border:1px solid var(--cf-line);image-rendering:pixelated}
.cf-wx-tip{margin-top:12px!important;font-size:14px;color:var(--cf-muted);line-height:1.6;text-wrap:balance}
.cf-wx-id{margin-top:18px!important;padding-top:16px;border-top:1px solid var(--cf-line);font-size:14px;color:var(--cf-muted)}
.cf-wx-id strong{display:block;margin-top:2px;font-size:22px;letter-spacing:.03em;color:var(--wp--preset--color--contrast);user-select:all;-webkit-user-select:all}
.cf-wx-btns{justify-content:center;gap:10px!important;margin-top:14px!important}
.cf-wx-btns .wp-block-button__link{min-width:128px}
.cf-wx-demo{margin-top:16px!important;font-size:12px;color:var(--cf-muted);line-height:1.6;text-wrap:balance}
.cf-wx-x{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;font-size:26px;line-height:1;color:var(--cf-muted);cursor:pointer}
.cf-wx-x:hover{color:var(--wp--preset--color--contrast)}
@media (min-width:782px){.cf-wx-open{display:none!important}}
.cf-in-wx .cf-wx-open{display:none!important}
.editor-styles-wrapper .cf-wx{display:block;position:static;background:none;padding:0}
.editor-styles-wrapper .cf-wx-box{margin:24px auto;animation:none;box-shadow:none;border:1px dashed var(--cf-line)}
@media (prefers-reduced-motion:reduce){.cf-wx-box{animation:none}}
@media (max-width:781px){
  .cf-wx{align-items:flex-end;padding:0}
  .cf-wx-box{width:100%;border-radius:16px 16px 0 0;padding:28px 20px calc(18px + env(safe-area-inset-bottom))}
  .cf-wx-btns .wp-block-button{flex:1}
  .cf-wx-btns .wp-block-button__link{width:100%;min-width:0}
  .cf-hide-mobile{display:none!important}
  .cf-sticky{top:0}
  .cf-hero-img{min-height:260px}
  .cf-hero-full{min-height:540px!important;padding-block:56px!important}
  .cf-hero>.cf-dark{padding:44px 20px!important}
  .cf-tiles{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .cf-tile{min-height:200px!important;padding:14px!important}
  .cf-tile h3{font-size:17px}
  .cf-tile p{font-size:12px}
  .cf-stats>*{border-left:0;border-top:1px solid var(--cf-line);padding:18px 4px!important}
  .cf-stats>*:nth-child(-n+2){border-top:0}
  .cf-stats .cf-num{font-size:36px}
  .cf-photo-stack{padding-bottom:40px}
  .cf-years{left:12px;bottom:56px;padding:10px 14px!important}
  .cf-years .cf-num{font-size:32px}
  .cf-header .wp-block-navigation-item__content{padding:0}
  .cf-dock{left:0;right:0;bottom:0;gap:0;padding-bottom:env(safe-area-inset-bottom);background:#fff}
  .cf-dock .wp-block-buttons{grid-template-columns:1fr 1fr;gap:0}
  .cf-dock .wp-block-button:last-child{display:none}
  .cf-dock .wp-block-button__link{width:100%;flex-direction:row;justify-content:center;font-size:15px;padding:14px 0!important;box-shadow:none;border-radius:0}
  .cf-dock .is-style-outline .wp-block-button__link{border:0;border-top:1px solid var(--cf-line)}
  body{padding-bottom:52px}
  .cf-form{grid-template-columns:minmax(0,1fr)}
  .is-style-cf-spec table{min-width:0}
  .is-style-cf-spec.cf-stack thead{display:none}
  .is-style-cf-spec.cf-stack tr{display:block;padding:12px 0;border-bottom:1px solid var(--cf-line)}
  .is-style-cf-spec.cf-stack td{display:inline-block;border:0;padding:0 12px 0 0;background:none!important}
  .is-style-cf-spec.cf-stack td:first-child{display:block;margin-bottom:2px}
}
@media (min-width:782px) and (max-width:1100px){.cf-header .wp-block-navigation__container{gap:18px}.cf-hdr-tel{display:none}}
/* 手机菜单 */
.wp-block-navigation__responsive-container.is-menu-open{padding:16px max(16px,4vw)!important}
.is-menu-open .wp-block-navigation__responsive-container-content{align-items:stretch!important;padding-top:48px!important}
.is-menu-open .wp-block-navigation__container,.is-menu-open .wp-block-page-list{align-items:stretch!important;gap:0!important;width:100%}
.is-menu-open .wp-block-navigation-item{border-bottom:1px solid var(--cf-line);width:100%;align-items:flex-start!important}
.is-menu-open .wp-block-navigation-item__content{display:block;text-align:left;font-size:18px;padding:14px 0!important}
.is-menu-open .wp-block-navigation__submenu-container{padding:0 0 8px 16px!important}
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{border:0}
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{font-size:15px;padding:6px 0!important;color:var(--cf-muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}