/* ===================================================================
   custom-fixes.css — 手工修复覆盖层（最后加载，优先级最高）
   由 Claude 直接维护，独立于 Gutenverse 生成的 CSS，
   避免页面/CSS 重新生成时把这些修复冲掉。
   =================================================================== */

/* 首页 hero 内容块居中（宽屏时不再左偏）
   .guten-q2v2iN 是 hero 的 1400px 内容包裹层，父容器虽 justify-content:center
   但子项不居中，用 margin auto 强制居中。 */
.guten-q2v2iN {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 全站价钱字号统一：所有定价卡的价钱标题（带 "/次·/pcs·/Services" 后缀
   的 h6.heading-title）统一成 56px，解决各页左右两张卡价钱大小不一的问题。
   选择器只命中带 .heading-focus 后缀的价钱标题，不影响其他标题。 */
h6.heading-title:has(> .heading-focus),
h6.heading-title:has(> .heading-focus) .heading-title {
  font-size: 56px !important;
  line-height: 1.1 !important;
}

/* 价钱保持单行：像 "Custom / Quote" 这种长一点的价钱之前会换成两行，
   把下面的按钮/列表顶低，导致左右卡上下不齐。强制单行即可对齐。 */
h6.heading-title:has(> .heading-focus) {
  white-space: nowrap !important;
}

/* 定价卡标题统一高度：左右两张卡的标题一行 vs 两行时，给标题预留两行高度
   （min-height），让下面的价钱/按钮/列表左右对齐、不再高低不一。
   只命中"含价钱的卡片"里的标题，不影响其他 h4。 */
.guten-wrap-helper:has(h6.heading-title > .heading-focus) h4.wp-block-gutenverse-heading {
  min-height: 52px !important;
}

/* 首页定价区块（4 张窄卡，guten-dE8r1C）专属缩放：
   - 价钱 56px 在窄卡里会把 "Quote" 后缀挤出卡外被切掉 → 缩到 42px 刚好放下。
   - 标题 24px 时 "Spring Cleaning / Hygiene Service" 会断成两行 → 缩到 20px 全部一行。
   只作用于首页定价区块，不影响服务详情页（那里 2 张宽卡保持 56px）。 */
.guten-dE8r1C h6.heading-title:has(> .heading-focus),
.guten-dE8r1C h6.heading-title:has(> .heading-focus) .heading-title {
  font-size: 42px !important;
}
.guten-dE8r1C .guten-wrap-helper:has(h6.heading-title > .heading-focus) h4.wp-block-gutenverse-heading {
  font-size: 20px !important;
  min-height: 28px !important;
}

/* 服务详情页（office / carpet / post-reno）的"面议/Custom"定价卡：
   把大号价钱数字换成一枚黄色 "Ask on WhatsApp" 胶囊标签（对齐参考设计）。
   ⚠️ .guten-vhmnu3 这个 class 名是 Gutenverse 自动生成的，会在别的页面
   （sofa-cleaning / mattress-cleaning / general-cleaning，页面 id 1921 /
   1923 / 1910）撞名，用来显示 "RM60/Seat" "RM380/Services" 这类真实价钱。
   custom-fixes.css 是全站加载的，所以必须再叠加 body.page-id-XXXX 把选择器
   锁死在这 3 个详情页（office=1915 / carpet=1925 / post-reno=1918，中英文
   版共用同一个 page-id），否则会把别的页面真实价钱也误变成胶囊。
   首页 Hygiene 卡是 .guten-vkazGI，本来就不命中，不受影响
   （它的按钮要跳去 hygiene 页，保留原样）。 */
body.page-id-1915 .guten-vhmnu3 h6.heading-title:has(> .heading-focus),
body.page-id-1925 .guten-vhmnu3 h6.heading-title:has(> .heading-focus),
body.page-id-1918 .guten-vhmnu3 h6.heading-title:has(> .heading-focus),
body.page-id-1915 .guten-vhmnu3 h6.heading-title:has(> .heading-focus) .heading-title,
body.page-id-1925 .guten-vhmnu3 h6.heading-title:has(> .heading-focus) .heading-title,
body.page-id-1918 .guten-vhmnu3 h6.heading-title:has(> .heading-focus) .heading-title {
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #1f3d2f !important;
  white-space: nowrap !important;
}
body.page-id-1915 .guten-vhmnu3 h6.heading-title:has(> .heading-focus),
body.page-id-1925 .guten-vhmnu3 h6.heading-title:has(> .heading-focus),
body.page-id-1918 .guten-vhmnu3 h6.heading-title:has(> .heading-focus) {
  display: inline-block !important;
  background: #fcefc7 !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
}
/* 胶囊里空的后缀 span 藏起来，避免多一截空白 */
body.page-id-1915 .guten-vhmnu3 h6.heading-title .heading-focus,
body.page-id-1925 .guten-vhmnu3 h6.heading-title .heading-focus,
body.page-id-1918 .guten-vhmnu3 h6.heading-title .heading-focus {
  display: none !important;
}

/* 胶囊卡的价钱行留出与左卡 RM 价钱等高的空间（~62px），并让胶囊在其中垂直居中，
   这样右卡的按钮/列表/底部按钮会跟左卡逐行上下对齐（否则胶囊比 RM 矮 ~19px，
   下面所有行都会整体偏高）。只作用于 3 个详情页。 */
body.page-id-1915 .guten-vhmnu3 .heading-section,
body.page-id-1925 .guten-vhmnu3 .heading-section,
body.page-id-1918 .guten-vhmnu3 .heading-section {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
}

/* 详情页胶囊卡底部的 "WhatsApp Us" 按钮：绿色描边胶囊 + WhatsApp 图标，
   对齐参考设计（上面黄胶囊 Ask on WhatsApp，下面描边按钮 WhatsApp Us）。
   .wa-outline-btn 只加在这几张卡的按钮上，所以这条可全站生效不会误伤。 */
a.guten-button.wa-outline-btn {
  background: transparent !important;
  color: #2d936c !important;
  border: 2px solid #2d936c !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
}
a.guten-button.wa-outline-btn:hover {
  background: #2d936c !important;
  color: #ffffff !important;
}
a.guten-button.wa-outline-btn i {
  font-size: 1.05em !important;
}

/* 统一所有页面 hero 大标题（每页唯一的 h1）为粗体，解决首页细体、内页粗体不一致 */
h1.wp-block-gutenverse-heading,
h1.wp-block-gutenverse-heading strong {
  font-weight: 700 !important;
}

/* ===== Privacy(1941)/Terms(1943)：仿 goodhelper.my/privacy 的 content section ===== */
body.page-id-1941 .legal-doc,
body.page-id-1943 .legal-doc {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 216px 1fr; gap: 56px; align-items: start;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.page-id-1941 .legal-doc > h2.wp-block-gutenverse-heading,
body.page-id-1943 .legal-doc > h2.wp-block-gutenverse-heading { display: none; }
.legal-toc { position: sticky; top: 90px; font-size: 14px; }
.legal-toc-title { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; color: #9aa3b5; margin: 0 0 14px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin: 0 0 11px; line-height: 1.45; }
.legal-toc a { color: #1e293b; font-weight: 600; text-decoration: none; }
.legal-toc a:hover { color: #2d936c; }
.legal-body { min-width: 0; }
.legal-body h3 { font-size: 24px; font-weight: 600; line-height: 1.32; color: #1e293b; margin: 2.2em 0 .5em; scroll-margin-top: 90px; }
.legal-body h4 { font-size: 17px; font-weight: 600; color: #1e293b; margin: 1.5em 0 .35em; }
.legal-body p { font-size: 18px; line-height: 1.62; color: #5c6b82; margin: 0 0 1.1em; }
.legal-body ul { margin: 0 0 1.1em; padding-left: 1.3em; list-style: disc; }
.legal-body li { font-size: 16px; line-height: 1.55; color: #3f4a5c; margin: 0 0 .5em; }
.legal-body a { color: #2d936c; text-decoration: underline; }
.legal-intro { background: #fff; border: 1px solid #e5e9f0; border-radius: 20px; padding: 20px 24px; margin: 0 0 2.4em; }
.legal-intro p { font-size: 15px !important; color: #5c6b82; line-height: 1.6; margin: 0 !important; }
.legal-help { background: #fff; border: 1px solid #e5e9f0; border-radius: 22px; padding: 28px; margin: 2.6em 0 1.2em; }
.legal-help h4 { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 .5em; }
.legal-help p { font-size: 15px !important; color: #5c6b82; margin: 0 0 1.1em !important; }
.legal-help .wa-btn { display: inline-flex; align-items: center; gap: 8px; background: #2d936c; color: #fff; font-weight: 700; font-size: 15px; padding: 11px 22px; border-radius: 999px; text-decoration: none; }
.legal-help .wa-btn:hover { background: #24795a; }
.legal-crosslink { display: inline-block; margin-top: 14px; color: #2d936c; font-weight: 600; text-decoration: none; }
@media (max-width: 860px) {
  body.page-id-1941 .legal-doc, body.page-id-1943 .legal-doc { grid-template-columns: 1fr; gap: 24px; }
  .legal-toc { position: static; }
}

/* .guten-column-wrapper 基类是 display:flex;flex-direction:row（Gutenverse 通用列容器），
   原本这栏只有 2 个巨大 <p>,横排也会自然撑满换行看不出问题；拆成 h3/h4/p/ul 几十个小元素后
   会被当成一排排 flex item 横向摆放、乱套。加这条让法律条款栏改回纵向堆叠，不影响其它用到
   .guten-column-wrapper 的地方（选择器锁定在 .legal-doc）。 */
.legal-doc { flex-direction: column !important; }

/* 小节独立编号徽章(仿 goodhelper 01/02):标题原文里的行内编号已去掉,这里用 counter 自动连续编号 */
.legal-body { counter-reset: legalsec; }
.legal-body h3 { counter-increment: legalsec; }
.legal-body h3::before {
  content: counter(legalsec, decimal-leading-zero);
  margin-right: 12px;
  color: #2d936c;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.legal-toc ol { counter-reset: legaltoc; }
.legal-toc li { counter-increment: legaltoc; }
.legal-toc a::before {
  content: counter(legaltoc, decimal-leading-zero);
  margin-right: 10px;
  color: #9aa3b5;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 优势卡标题对齐:关于页第一张卡的标题被原站 CSS 设了 min-height:83px(英文原文
   "Experienced Cleaner" 是两行),中文「经验丰富」只有一行时凭空高出一行,把描述顶下去、
   跟其它三张不齐。清掉 .icon-box 标题的 min-height,让它按自然高度走——英文四张仍是两行
   (齐)、中文四张都一行(齐)。只命中 icon-box 里的标题,不影响定价卡等其它标题。 */
.icon-box-body .title { min-height: 0 !important; }

/* 首页 hero 的 Get Started 按钮跳到定价区(#getstarted);留出顶部空间,
   跳过去时定价区标题不会被导航挡住。 */
#getstarted, #pricelist, #services { scroll-margin-top: 100px; }

/* 手机/平板专用的 hero 女生图(3522274)。原设计的女生图是桌面绝对定位叠层,
   手机会被推到屏外,所以另加一张干净的图,只在 ≤1024 显示、桌面隐藏,放 hero 底部居中。
   同时把 hero 的 1400px 固定画布 guten-q2v2iN 在手机收成视口宽,margin auto 才能正常居中。 */
.jb-m-girl { display: none; }
@media (max-width: 1024px) {
  .guten-q2v2iN { max-width: 100% !important; position: relative !important; }
  /* 原桌面女生图(绝对定位叠层)在手机藏掉,只留新加的干净图 */
  .guten-image.guten-JVfdpx { display: none !important; }
  /* hero 文字卡片抬到女生图上层,保证文字/按钮不被盖 */
  .guten-ns9YBE { position: relative !important; z-index: 2 !important; }
  /* 女生图放 hero 右下角、压在卡片前面(手/身子叠在卡片上),控制在视口内不被切 */
  .jb-m-girl {
    display: block !important;
    position: absolute !important;
    right: -8px !important;
    bottom: -101px !important;
    width: 65% !important;
    max-width: 312px !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
  .jb-m-girl img { width: 100% !important; height: auto !important; display: block !important; }
}

/* 隐藏模板遗留的野占位图(qleenie-pendar-*,从没上传过、一直 404 打叉)。
   都是桌面专属的纯装饰 hero/遮罩图,手机/平板本来就隐藏、布局无它照常。
   guten-fWozy4 = 6 个服务详情页 hero 里的 qleenie-pendar-hero.png;
   guten-zT63fG = our-services 页的 qleenie-pendar-overlay.png。 */
.guten-fWozy4, .guten-zT63fG { display: none !important; }

