/* 喬雍官網樣式（P0 骨架版）。
 * CIS 四色與 cy-* 元件語彙沿用舊站設計（SoT：brand-wiki 喬雍品牌規範），
 * 但舊站為了壓過套版全域樣式而全綁 !important 的補丁層一律不搬——
 * 自管站沒有要對抗的東西，樣式直接寫乾淨的。
 * P1 補完整元件庫（卡片三型／quote／alert／process-row／checklist／timeline／CTA 兩型）。
 */

:root {
  --cy-dark: #304854;
  --cy-yellow: #ffbe19;
  --cy-teal: #1d6a8c;
  --cy-green: #80c862;
  --cy-text: #2c3e46;
  --cy-bg: #ffffff;
  --cy-container: 1040px;
  --cy-measure: 750px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.8;
  color: var(--cy-text);
  background: var(--cy-bg);
}

.cy-container {
  max-width: var(--cy-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* 段落限寬：舊站排版規範的 700–750px 是閱讀判斷、非平台限制，要帶走 */
.cy-blk p { max-width: var(--cy-measure); }

h1, h2, h3 { color: var(--cy-dark); line-height: 1.4; }
h1 { font-size: 2rem; }

a { color: var(--cy-teal); }

.cy-en-title {
  color: var(--cy-yellow);
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: .25rem;
}

/* --- nav --- */
.cy-nav {
  border-bottom: 1px solid #e6ebee;
  background: #fff;
}
.cy-nav .cy-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 14px;
}
.cy-nav-brand { font-weight: 700; color: var(--cy-dark); text-decoration: none; }
.cy-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.cy-nav a { text-decoration: none; color: var(--cy-dark); }
.cy-nav a.is-active, .cy-nav a:hover { color: var(--cy-teal); }

/* --- main / footer --- */
.cy-main { padding: 2.5rem 0; }
.cy-blk + .cy-blk { margin-top: 2.5rem; }

.cy-footer {
  border-top: 1px solid #e6ebee;
  background: #f7f9fa;
  padding: 1.75rem 0;
  font-size: .92rem;
}
.cy-footer-brand { font-weight: 700; color: var(--cy-dark); margin: 0 0 .35rem; }
.cy-footer p { margin: .2rem 0; }

/* --- 品牌級元件（提升為全域） ---
 * 舊站把這幾個元件的完整樣式寫在 html.cy-services / html.cy-knowledge 前綴下，
 * 是因為套版只能靠 JS 給頁面分型。但按鈕與卡片是全站一致的品牌元件，不該只有
 * 某些頁型才長對——這裡取 cy-services 版本當基礎樣式提升為全域，
 * components.css 內的前綴規則照舊生效（頁型微調），視覺結果不變。
 */
.cy-btn {
  display: inline-block;
  padding: 18px 45px;
  border-radius: 50px;
  background: var(--cy-teal);
  color: #ffffff;
  border: 2px solid var(--cy-teal);
  font-weight: 800;
  text-decoration: none;
  width: max-content;
  transition: all .3s ease;
}
.cy-btn:hover { background: var(--cy-dark); border-color: var(--cy-dark); color: #fff; }

.cy-btn-project-premium {
  display: inline-block;
  padding: 18px 45px;
  border-radius: 50px;
  background: rgba(29, 106, 140, .05);
  color: var(--cy-teal);
  border: 2px solid var(--cy-teal);
  font-weight: 800;
  text-decoration: none;
  transition: all .3s ease;
}
.cy-btn-project-premium:hover {
  background: var(--cy-dark);
  border-color: var(--cy-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(48, 72, 84, .1);
}

.cy-process-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 15px;
}
.cy-process-row > * { flex: 1 1 260px; }

.cy-card-principle {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border-top: 6px solid var(--cy-dark);
  box-shadow: 0 4px 20px rgba(48, 72, 84, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cy-card-principle:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(48, 72, 84, .12);
}
.cy-card-principle h3 { margin-top: 0; font-size: 22px; }

@media (max-width: 640px) {
  .cy-btn, .cy-btn-project-premium {
    width: 100%;
    text-align: center;
    padding: 15px 20px;
    font-size: 18px;
    white-space: normal;
    line-height: 1.5;
  }
  .cy-process-row { flex-direction: column; }
}

/* --- CONTACT 表單（新站新增；舊站表單是套版模組，樣式綁 bootstrap 不搬） --- */
/* 表單自己限寬置中：輸入框過寬不好讀，也才跟上方置中的標題區對齊
   （舊站的 cy-max-w-* 是給段落用的，只設 max-width 沒有置中） */
.cy-form, .cy-contact-fallback { max-width: 640px; margin-inline: auto; }
.cy-form { margin-top: 2rem; }
.cy-field { margin-bottom: 1.25rem; }
.cy-field label { display: block; font-weight: 700; color: var(--cy-dark); margin-bottom: .4rem; }
.cy-field input[type="text"],
.cy-field input[type="tel"],
.cy-field input[type="email"],
.cy-field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid #cfdbe2;
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: #fff;
}
.cy-field input:focus, .cy-field textarea:focus {
  outline: 2px solid var(--cy-teal);
  outline-offset: 1px;
  border-color: var(--cy-teal);
}
.cy-required { color: #c0392b; margin-left: .25rem; }

.cy-agree-line { display: flex; align-items: flex-start; gap: .5rem; font-weight: 700; }
.cy-agree-line input { margin-top: .35rem; flex: none; }
.cy-privacy {
  margin: .6rem 0 0;
  padding: .9rem 1rem;
  background: #f4f8fa;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.75;
  color: #4a5b64;
}
.cy-turnstile-wrap { min-height: 70px; }
.cy-form-actions { margin: 1.5rem 0 0; }

.cy-form-status { margin: 1rem 0 0; font-weight: 700; min-height: 1.6em; }
.cy-form-status.is-ok { color: #3d8b40; }
.cy-form-status.is-error { color: #c0392b; }
.cy-form-status.is-pending { color: var(--cy-teal); }

.cy-contact-fallback { margin-top: 2.5rem; }
.cy-contact-fallback p { margin: .25rem 0; }

/* --- KNOWLEDGE 列表（新站新增；舊站是套版列表模組，無樣式可搬） --- */
.cy-kn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.cy-kn-card h3 { font-size: 1.15rem; line-height: 1.5; }
/* 搬來的全站規則是 text-align: justify（長篇內文的排版判斷，要帶走）；
   但在窄卡片裡 justify 會把字距撐得很開，卡片這層改回左對齊。 */
.cy-kn-card p { text-align: left; }
.cy-kn-card h3 a { color: var(--cy-dark); text-decoration: none; }
.cy-kn-card h3 a:hover { color: var(--cy-teal); }
.cy-cat-label {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .15rem .6rem;
  border-radius: 4px;
  background: rgba(29, 106, 140, .08);
  color: var(--cy-teal);
  font-size: .82rem;
  font-weight: 700;
}
.cy-kn-date { color: #7d8f99; font-size: .85rem; margin-bottom: 0; }

/* --- 首頁專用（新站新增） ---
 * 舊站首頁是套版拼裝、文字多半在圖片裡，沒有可搬的樣式；
 * 這批 class 是新站為了讓首頁文案變成伺服器端可見文字而新寫的。
 */
.cy-hero {
  background: linear-gradient(180deg, #f4f8fa 0%, #ffffff 100%);
  padding: 3.5rem 0 3rem;
  text-align: center;
}
.cy-hero h1 { font-size: 2.4rem; margin: .25rem 0 .75rem; }
.cy-hero .cy-hero-lead { font-size: 1.15rem; margin: 0 auto .35rem; }
.cy-hero .cy-hero-tag {
  color: var(--cy-teal);
  letter-spacing: .12em;
  font-weight: 700;
  margin: 0 auto 1.5rem;
}
.cy-hero p { margin-inline: auto; }
.cy-hero-cta { margin: 0; }

.cy-col-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
}
.cy-col > h2:first-child, .cy-col > .cy-en-title:first-child { margin-top: 0; }

.cy-step-no {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cy-yellow);
  margin: 0 0 .35rem;
}

.cy-field-questions { list-style: none; padding: 0; margin: 1rem 0; }
.cy-field-questions li {
  padding: .6rem 0 .6rem 1.6rem;
  border-bottom: 1px solid #e6ebee;
  position: relative;
}
.cy-field-questions li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--cy-teal);
}

@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  .cy-hero { padding: 2.25rem 0 2rem; }
  .cy-hero h1 { font-size: 1.75rem; }
  .cy-main { padding: 1.75rem 0; }
  .cy-col-split { gap: 1.75rem; }
}