/**
 * page-contactus.css — 聯絡我們 / 工程詢價頁（page-contactus.php）
 *
 * 依 DESIGN.md：亮帶↔深帶交替、hairline + 留白分層（不用陰影）、
 * 銅棕 --copper 僅出現在 eyebrow/CTA/focus/hover（面積 <5%）、圓角 0–6px、1440 max。
 * CSS 變數（--ink/--paper/--metal/--steel/--copper 等）由 style.css :root 提供。
 *
 * 左右分欄：桌機左資訊(含地圖) + 右 CF7 表單；手機 <768 上下堆疊單欄不橫捲。
 * CF7 表單美化針對：.wpcf7 .form-control（輸入框 hairline 邊 / focus 銅棕）、
 *   .wpcf7 .btn（送出鈕 copper CTA）、file 夾檔欄位、回應訊息與驗證訊息。
 */

/* ---------- 版型基底 ---------- */
.contact-page .container{
	max-width: var(--container, 1440px);
	margin-inline: auto;
	padding-inline: var(--gutter, 32px);
}
.contact-page .section-light{ background: var(--paper); color: var(--ink); padding-block: var(--sp-section, 96px); }
.contact-page .section-dark{ background: var(--steel); color: var(--ink-on-dark); }
.contact-page img{ max-width: 100%; height: auto; }

/* ---------- 1. 頂部標題帶（深底） ---------- */
.contact-head{
	padding-block: var(--sp-xxl, 48px);
}
.contact-head__crumb{
	font: 400 .8125rem/1.5 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--metal-on-dark, #A9AEB2);
	margin-bottom: var(--sp-lg, 24px);
	letter-spacing: .2px;
}
.contact-head__crumb a{ color: var(--metal-on-dark, #A9AEB2); text-decoration: none; transition: color var(--dur-fast, 180ms) var(--ease-out, ease); }
.contact-head__crumb a:hover{ color: var(--ink-on-dark, #F4F2ED); }
.contact-head__crumb-sep{ margin-inline: 8px; opacity: .6; }
.contact-head__crumb-cur{ color: var(--ink-on-dark, #F4F2ED); }

.contact-head__eyebrow{
	font: 600 .8125rem/1.3 var(--font-en, "Inter", sans-serif);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--copper, #9A744D);
	margin: 0 0 var(--sp-sm, 12px);
}
.contact-head__title{
	font: 700 clamp(1.75rem, 4vw, 2.5rem)/1.2 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink-on-dark, #F4F2ED);
	margin: 0 0 var(--sp-md, 16px);
}
.contact-head__lead{
	font: 400 1.0625rem/1.7 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--metal-on-dark, #A9AEB2);
	max-width: 52ch;
	margin: 0;
}

/* ---------- 2. 左右分欄 ---------- */
.contact-grid{
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); /* 左資訊窄、右表單寬 */
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

/* 共用小標 */
.contact-info__eyebrow,
.contact-form__eyebrow{
	font: 600 .8125rem/1.3 var(--font-en, "Inter", sans-serif);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--copper, #9A744D);
	margin: 0 0 var(--sp-sm, 12px);
}
.contact-info__title,
.contact-form__title{
	font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.25 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink, #1C1E20);
	margin: 0 0 var(--sp-lg, 24px);
}

/* ---------- 左欄：聯絡資訊 ---------- */
.contact-info__list{ margin: 0 0 var(--sp-xl, 32px); }
.contact-info__row{
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: var(--sp-md, 16px);
	padding: var(--sp-md, 16px) 0;
	border-bottom: 1px solid var(--hairline, rgba(109,115,120,.28));
	margin: 0;
}
.contact-info__row:first-child{ border-top: 1px solid var(--hairline, rgba(109,115,120,.28)); }
.contact-info__term{
	font: 600 .9375rem/1.6 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--metal, #6D7378);
	margin: 0;
}
.contact-info__desc{
	font: 400 1.0625rem/1.6 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink, #1C1E20);
	margin: 0;
	word-break: break-word;
}
.contact-info__desc a{
	color: var(--ink, #1C1E20);
	text-decoration: none;
	border-bottom: 1px solid var(--hairline-strong, rgba(109,115,120,.5));
	transition: color var(--dur-fast, 180ms) var(--ease-out, ease), border-color var(--dur-fast, 180ms) var(--ease-out, ease);
}
.contact-info__desc a:hover{ color: var(--copper, #9A744D); border-color: var(--copper, #9A744D); }
.contact-info__note{
	display: block;
	font: 400 .8125rem/1.5 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--metal, #6D7378);
	margin-top: 4px;
}

/* 左欄動作鈕：加入 LINE（次要描邊）+ 直接來電 */
.contact-info__actions{
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm, 12px);
	margin-bottom: var(--sp-xl, 32px);
}
.btn-line,
.btn-tel{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 1rem/1 var(--font-zh, "Noto Sans TC", sans-serif);
	letter-spacing: .4px;
	border-radius: var(--radius, 4px);
	padding: 13px 22px;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--dur-fast, 180ms) var(--ease-out, ease), color var(--dur-fast, 180ms) var(--ease-out, ease), background var(--dur-fast, 180ms) var(--ease-out, ease);
}
/* LINE：次要描邊鈕（無填色，符合單一 copper CTA 紀律） */
.btn-line{
	background: transparent;
	color: var(--ink, #1C1E20);
	border: 1px solid var(--hairline-strong, rgba(109,115,120,.5));
}
.btn-line:hover{ border-color: var(--ink, #1C1E20); }
.btn-line__icon{ display: inline-flex; color: var(--metal, #6D7378); }
.btn-line:hover .btn-line__icon{ color: var(--ink, #1C1E20); }
/* 直接來電：次要描邊鈕 */
.btn-tel{
	background: transparent;
	color: var(--ink, #1C1E20);
	border: 1px solid var(--hairline-strong, rgba(109,115,120,.5));
}
.btn-tel:hover{ border-color: var(--ink, #1C1E20); }

/* Google 地圖 */
.contact-map{
	margin: 0;
	border: 1px solid var(--hairline, rgba(109,115,120,.28));
	border-radius: var(--radius, 4px);
	overflow: hidden;
	line-height: 0; /* 消除 iframe 底部空隙 */
}
.contact-map iframe{
	display: block;
	width: 100%;
	height: 340px;
	border: 0;
}

/* ---------- 右欄：CF7 表單容器 ---------- */
.contact-form__hint{
	font: 400 .9375rem/1.6 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--metal, #6D7378);
	margin: -8px 0 var(--sp-lg, 24px);
}
.contact-form__cf7{
	background: var(--white, #FFFFFF);
	border: 1px solid var(--hairline, rgba(109,115,120,.28));
	border-radius: var(--radius-lg, 6px);
	padding: clamp(20px, 4vw, 36px);
}

/* ======================================================================
   Contact Form 7 表單美化（不改表單、只美化外觀）
   欄位 class = form-control；送出鈕 class = btn
   ====================================================================== */

/* 表單整體排版：欄位間距 */
.contact-form__cf7 .wpcf7-form p{ margin: 0 0 var(--sp-lg, 24px); }
.contact-form__cf7 .wpcf7-form p:last-of-type{ margin-bottom: 0; }

/* label 文字（若表單以文字包住欄位，維持清晰層級） */
.contact-form__cf7 .wpcf7-form{
	font: 400 1rem/1.6 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink, #1C1E20);
}
.contact-form__cf7 .wpcf7-form label{
	display: block;
	font: 600 .9375rem/1.5 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink, #1C1E20);
	margin-bottom: 6px;
}

/* 輸入框 / textarea / select：hairline 邊、48px 高、focus 銅棕 */
.wpcf7 .form-control,
.contact-form__cf7 .wpcf7-form-control-wrap input[type="text"],
.contact-form__cf7 .wpcf7-form-control-wrap input[type="email"],
.contact-form__cf7 .wpcf7-form-control-wrap input[type="tel"],
.contact-form__cf7 .wpcf7-form-control-wrap textarea,
.contact-form__cf7 .wpcf7-form-control-wrap select{
	width: 100%;
	background: var(--white, #FFFFFF);
	color: var(--ink, #1C1E20);
	border: 1px solid var(--hairline-strong, rgba(109,115,120,.5));
	border-radius: var(--radius, 4px);
	padding: 13px 16px;
	min-height: 48px;
	font: 400 1rem/1.5 var(--font-zh, "Noto Sans TC", sans-serif);
	transition: border-color var(--dur-fast, 180ms) var(--ease-out, ease), box-shadow var(--dur-fast, 180ms) var(--ease-out, ease);
	box-sizing: border-box;
}
.wpcf7 .form-control:focus,
.contact-form__cf7 .wpcf7-form-control-wrap input:focus,
.contact-form__cf7 .wpcf7-form-control-wrap textarea:focus,
.contact-form__cf7 .wpcf7-form-control-wrap select:focus{
	outline: 0;
	border-color: var(--copper, #9A744D);
	box-shadow: 0 0 0 3px rgba(154,116,77,.15);
}
.contact-form__cf7 .wpcf7-form-control-wrap input::placeholder,
.contact-form__cf7 .wpcf7-form-control-wrap textarea::placeholder{ color: var(--metal, #6D7378); }
.contact-form__cf7 .wpcf7-form-control-wrap textarea{ min-height: 140px; resize: vertical; }

/* 檔案夾檔欄位：虛線 hairline 區塊，hover/focus 轉銅棕 */
.wpcf7 .form-control[type="file"],
.contact-form__cf7 .wpcf7-form-control-wrap input[type="file"]{
	width: 100%;
	background: var(--paper, #F4F2ED);
	border: 1px dashed var(--hairline-strong, rgba(109,115,120,.5));
	border-radius: var(--radius, 4px);
	padding: 14px 16px;
	min-height: 48px;
	font: 400 .9375rem/1.5 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink, #1C1E20);
	cursor: pointer;
	transition: border-color var(--dur-fast, 180ms) var(--ease-out, ease);
	box-sizing: border-box;
}
.contact-form__cf7 .wpcf7-form-control-wrap input[type="file"]:hover,
.contact-form__cf7 .wpcf7-form-control-wrap input[type="file"]:focus{
	outline: 0;
	border-color: var(--copper, #9A744D);
}

/* 送出鈕：唯一 copper 填色 CTA */
.wpcf7 .btn,
.contact-form__cf7 .wpcf7-form input[type="submit"],
.contact-form__cf7 .wpcf7-form button[type="submit"]{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--copper, #9A744D);
	color: var(--white, #FFFFFF);
	font: 600 1rem/1 var(--font-zh, "Noto Sans TC", sans-serif);
	letter-spacing: .4px;
	border: 0;
	border-radius: var(--radius, 4px);
	padding: 15px 32px;
	min-height: 48px;
	cursor: pointer;
	transition: background var(--dur-fast, 180ms) var(--ease-out, ease), transform var(--dur-fast, 180ms) var(--ease-out, ease);
}
.wpcf7 .btn:hover,
.contact-form__cf7 .wpcf7-form input[type="submit"]:hover,
.contact-form__cf7 .wpcf7-form button[type="submit"]:hover{ background: var(--copper-hover, rgba(154,116,77,.85)); }
.wpcf7 .btn:active,
.contact-form__cf7 .wpcf7-form input[type="submit"]:active,
.contact-form__cf7 .wpcf7-form button[type="submit"]:active{ transform: scale(.98); }
.wpcf7 .btn:focus-visible,
.contact-form__cf7 .wpcf7-form input[type="submit"]:focus-visible{ outline: 2px solid var(--copper, #9A744D); outline-offset: 2px; }

/* CF7 送出中的 spinner 對齊 */
.contact-form__cf7 .wpcf7-spinner{ margin: 0 0 0 12px; }

/* CF7 回應訊息 / 驗證訊息：用 DESIGN.md 語意狀態色 */
.contact-form__cf7 .wpcf7-response-output{
	margin: var(--sp-lg, 24px) 0 0;
	padding: 12px 16px;
	border: 1px solid var(--hairline-strong, rgba(109,115,120,.5));
	border-radius: var(--radius, 4px);
	font: 400 .9375rem/1.6 var(--font-zh, "Noto Sans TC", sans-serif);
}
.contact-form__cf7 .wpcf7 form.sent .wpcf7-response-output,
.contact-form__cf7 form.sent .wpcf7-response-output{
	border-color: var(--success, #3F6E52);
	color: var(--success, #3F6E52);
}
.contact-form__cf7 form.invalid .wpcf7-response-output,
.contact-form__cf7 form.failed .wpcf7-response-output,
.contact-form__cf7 form.spam .wpcf7-response-output{
	border-color: var(--error, #A5453B);
	color: var(--error, #A5453B);
}
/* 單欄位驗證錯誤提示 */
.contact-form__cf7 .wpcf7-not-valid-tip{
	color: var(--error, #A5453B);
	font: 400 .8125rem/1.5 var(--font-zh, "Noto Sans TC", sans-serif);
	margin-top: 6px;
}
.contact-form__cf7 .wpcf7-form-control.wpcf7-not-valid,
.contact-form__cf7 .wpcf7-not-valid .wpcf7-form-control{
	border-color: var(--error, #A5453B);
}

/* ---------- 響應式：平板 / 手機 ---------- */
@media (max-width: 1023px){
	.contact-grid{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
	}
}
@media (max-width: 767px){
	.contact-page .section-light{ padding-block: var(--sp-section-sm, 56px); }
	.contact-head{ padding-block: var(--sp-xl, 32px); }
	/* 手機：上下堆疊單欄（左資訊在上、右表單在下），不橫向捲動 */
	.contact-grid{
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.contact-info__row{ grid-template-columns: 76px 1fr; }
	.contact-map iframe{ height: 300px; }
	.contact-form__cf7{ padding: 20px 16px; }
	/* 手機保底字級 16 */
	.contact-head__lead,
	.contact-info__desc,
	.contact-form__cf7 .wpcf7-form{ font-size: 1rem; }
	.contact-info__actions .btn-line,
	.contact-info__actions .btn-tel{ flex: 1 1 auto; justify-content: center; }
}

/* ---------- 動效紀律：respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
	.contact-page *,
	.contact-page *::before,
	.contact-page *::after{
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* 夾檔大小警示（20MB） */
.contact-form__note{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px 14px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink);
  background: rgba(154,116,77,.08);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
}
.contact-form__note strong{ color: var(--copper); }