/* 聯絡頁專屬樣式(深色×髒金,接 Contact Form 7) */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 64px);
  border-bottom: 1px solid var(--divider);
}

/* 左:標題與資訊 */
.contact-left {
  padding: 80px 64px 80px var(--pad-x);
  border-right: 1px solid var(--divider);
  display: flex; flex-direction: column; justify-content: space-between;
}
.contact-left .page-eyebrow { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.contact-left .page-title { font-family: var(--font-zh); font-weight: 900; font-size: clamp(36px,5vw,56px); line-height: 1.1; color: var(--fg); letter-spacing: -0.02em; margin-bottom: 32px; }
.contact-lead { font-family: var(--font-zh); font-weight: 300; font-size: 17px; line-height: 2.0; color: #AAAAAA; max-width: 420px; }

.contact-info { margin-top: 64px; }
.contact-info-item { padding: 28px 0; border-bottom: 1px solid var(--divider); display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; }
.contact-info-item:first-child { border-top: 1px solid var(--divider); }
.contact-info-label { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.contact-info-value { font-family: var(--font-zh); font-weight: 400; font-size: 15px; color: var(--fg); line-height: 1.7; }
.contact-info-value a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--divider); }
.contact-info-value a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.contact-info-note { display: block; font-family: var(--font-zh); font-weight: 300; font-size: 13px; color: var(--muted); margin-top: 4px; }

.social-links { margin-top: 48px; display: flex; gap: 16px; }
.social-link { font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 12px 20px; border: 1px solid var(--divider); transition: border-color 0.2s, color 0.2s; }
.social-link:hover { border-color: var(--accent); color: var(--fg); }

/* 右:表單 */
.contact-right { padding: 80px var(--pad-x) 80px 64px; }
.form-label { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 40px; }

/* 用途選擇:CF7 radio 渲染成 2×2 按鈕 */
.form-purpose .wpcf7-form-control { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-purpose .wpcf7-list-item { margin: 0; }
.form-purpose .wpcf7-list-item label { display: block; padding: 16px 20px; border: 1px solid var(--divider); cursor: pointer; transition: border-color 0.2s, color 0.2s; font-family: var(--font-zh); font-weight: 700; font-size: 14px; color: var(--fg); }
.form-purpose .wpcf7-list-item input { position: absolute; opacity: 0; pointer-events: none; }
.form-purpose .wpcf7-list-item input:checked + .wpcf7-list-item-label { color: var(--accent); }
.form-purpose .wpcf7-list-item:has(input:checked) label { border-color: var(--accent); color: var(--accent); }

/* 表單欄位 */
.contact-right .form-group { margin-bottom: 28px; }
.contact-right .form-group > label { display: block; font-family: var(--font-en); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.contact-right input[type=text],
.contact-right input[type=email],
.contact-right textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--divider);
  padding: 12px 0; font-family: var(--font-zh); font-weight: 300; font-size: 15px; color: var(--fg);
  outline: none; transition: border-color 0.2s; -webkit-appearance: none;
}
.contact-right input:focus, .contact-right textarea:focus { border-bottom-color: var(--accent); }
.contact-right input::placeholder, .contact-right textarea::placeholder { color: #444; }
.contact-right textarea { resize: vertical; height: 120px; line-height: 1.8; }
/* Fluent Forms 下拉（問題類型）配合深色主題 */
.contact-right select {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--divider);
  padding: 12px 24px 12px 0; font-family: var(--font-zh); font-weight: 300; font-size: 15px; color: var(--fg);
  outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C8B84A' stroke-width='1.5' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.contact-right select:focus { border-bottom-color: var(--accent); }
.contact-right select option { background: #1a1a1a; color: var(--fg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.btn-submit, .contact-right input.wpcf7-submit {
  width: 100%; padding: 18px; background: var(--accent); color: var(--bg); border: none;
  font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; cursor: pointer; margin-top: 8px; transition: opacity 0.2s;
}
.btn-submit:hover, .contact-right input.wpcf7-submit:hover { opacity: 0.85; }
.form-note { font-family: var(--font-zh); font-weight: 300; font-size: 13px; color: #555; margin-top: 16px; line-height: 1.7; }

/* CF7 回應訊息 */
.wpcf7 .wpcf7-response-output { font-family: var(--font-zh); font-size: 14px; margin: 24px 0 0; padding: 12px 16px; border: 1px solid var(--divider) !important; }
.wpcf7-not-valid-tip { font-family: var(--font-zh); font-size: 12px; color: #d66; }
.wpcf7-spinner { margin: 0 12px; }

@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; min-height: 0; }
  .contact-left { border-right: 0; border-bottom: 1px solid var(--divider); padding: 56px var(--pad-x); }
  .contact-right { padding: 56px var(--pad-x); }
  .contact-info-item { grid-template-columns: 120px 1fr; gap: 12px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}