/*
 * dr-house 服務頁片段（webapp/fragments/templates/fragments/service_base.html 與各服務頁）。
 * WordPress 短代碼 [drh_fragment name="…" assets="service"] 會讓 mu-plugin 載入這支。
 * 全部掛在 .drh-svc 底下：這支 CSS 會載進 WordPress 頁面，不可以碰到佈景。
 * 色票與歸零做法沿用 contact.css（2026-10-03 在正式站踩過的佈景樣式）。
 */
.drh-svc {
  --svc-navy: #222E41;
  --svc-teal: #057485;
  --svc-paper: #FBF8F2;
  --svc-mist: #EEF3F4;
  --svc-muted: #4B5563;
  --svc-border: #d9dde3;
  --svc-danger: #B42318;
  --svc-line: #06C755;
  color: var(--svc-navy);
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 56px;
  padding: 0 16px;
  overflow-wrap: anywhere;
}
.drh-svc *, .drh-svc *::before, .drh-svc *::after { box-sizing: border-box; }
.drh-svc p, .drh-svc ul, .drh-svc ol, .drh-svc h2, .drh-svc h3 { margin: 0; }
/* 佈景對 h2／h3 設了字型、底線與間距，權重跟 .drh-svc h2 一樣又出現得較晚，用 ID 壓過去（同 contact.css） */
#drh-svc h2, #drh-svc h3 {
  font-family: inherit; border: 0; padding: 0; margin: 0; background: none;
  text-transform: none; letter-spacing: normal; color: var(--svc-navy);
}
#drh-svc h2::before, #drh-svc h2::after,
#drh-svc h3::before, #drh-svc h3::after { content: none; display: none; }
.drh-svc a { color: var(--svc-teal); text-decoration: underline; text-underline-offset: 3px; }
/* 佈景的站內 inline 樣式給每個 <strong> 加黃色螢光底（linear-gradient）。服務頁只要粗體（站主 2026-10-18） */
.drh-svc strong { background: none; }
.drh-svc :focus-visible { outline: 3px solid var(--svc-teal); outline-offset: 2px; }

/* ---------- 首屏 ---------- */
.drh-svc-hero {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--svc-paper); border-radius: 16px; padding: 24px 20px;
}
#drh-svc .drh-svc-title { font-size: 30px; line-height: 1.3; font-weight: 900; }
.drh-svc-lead { display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.drh-svc-note { font-size: 14px; color: var(--svc-muted); }
/* 數字不要被拆成兩行（手機首屏「5–」「16%」分開過，2026-10-18 本機截圖） */
.drh-svc .drh-svc-num { white-space: nowrap; overflow-wrap: normal; }

/* ---------- 按鈕 ---------- */
.drh-svc-cta { display: flex; flex-direction: column; gap: 12px; }
.drh-svc a.drh-svc-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 20px; border-radius: 26px;
  font-size: 17px; font-weight: 700; text-decoration: none; text-align: center;
}
.drh-svc a.drh-svc-btn-line { background: var(--svc-line); color: #fff; }
.drh-svc a.drh-svc-btn-tel { background: #fff; color: var(--svc-navy); border: 2px solid var(--svc-navy); }

/* ---------- 各段 ---------- */
.drh-svc-sec { display: flex; flex-direction: column; gap: 14px; }
#drh-svc .drh-svc-h {
  font-size: 24px; line-height: 1.4; font-weight: 800;
  padding-left: 12px; border-left: 5px solid var(--svc-teal);
}
.drh-svc-list { padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.drh-svc-small { font-size: 14px; color: var(--svc-muted); }

.drh-svc-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.drh-svc-card, .drh-svc-more {
  border: 1px solid var(--svc-border); border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px; background: #fff;
}
.drh-svc-card-no { border-color: var(--svc-danger); background: #FEF3F2; }
#drh-svc .drh-svc-card-title { font-size: 18px; font-weight: 800; }
.drh-svc-card-no .drh-svc-card-title { color: var(--svc-danger); }

.drh-svc-steps { padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; }
.drh-svc-steps li::marker { font-weight: 800; color: var(--svc-teal); }

.drh-svc-formula {
  background: var(--svc-mist); border-radius: 10px; padding: 14px 16px;
  font-weight: 700; font-size: 17px;
}
.drh-svc-warn {
  background: #FEF3F2; border-left: 4px solid var(--svc-danger);
  padding: 10px 12px; border-radius: 6px; list-style-position: inside; margin-left: -1.3em;
}

.drh-svc-faq { border-bottom: 1px solid var(--svc-border); }
.drh-svc-faq summary {
  min-height: 48px; display: flex; align-items: center; cursor: pointer;
  font-weight: 700; padding: 8px 0; list-style: none;
}
.drh-svc-faq summary::-webkit-details-marker { display: none; }
.drh-svc-faq summary::after { content: "＋"; margin-left: auto; padding-left: 12px; color: var(--svc-teal); }
.drh-svc-faq[open] summary::after { content: "－"; }
.drh-svc-faq > div { padding: 0 0 14px; }

.drh-svc-more-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; }

/* ---------- 結尾 ---------- */
.drh-svc-end {
  display: flex; flex-direction: column; gap: 16px; text-align: center;
  background: var(--svc-navy); color: #fff; border-radius: 16px; padding: 28px 20px;
}
#drh-svc .drh-svc-end-title { color: #fff; font-size: 24px; font-weight: 900; line-height: 1.4; }
.drh-svc-end .drh-svc-note { color: #d6dbe3; }
.drh-svc-end a.drh-svc-btn-tel { background: transparent; color: #fff; border-color: #fff; }

/* ---------- 平板以上 ---------- */
@media (min-width: 768px) {
  .drh-svc { gap: 48px; padding: 0 24px; }
  .drh-svc-hero { padding: 36px 40px; }
  #drh-svc .drh-svc-title { font-size: 38px; }
  .drh-svc-cta { flex-direction: row; flex-wrap: wrap; }
  .drh-svc-end .drh-svc-cta { justify-content: center; }
  .drh-svc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .drh-svc-cards { grid-template-columns: repeat(3, 1fr); }
}