/* public/fixreq-form.css —— 報修表單本地樣式（ISSUE-36.6 自 inline 外部化）。
 *
 * 為何外部化（原本是 index.astro 的 <style set:html={INTAKE_FORM_STYLE}>）：
 *   CSP 鐵則「不開 'unsafe-inline'」。首頁是 prerender 靜態頁、無法用 per-request nonce；
 *   而 set:html 注入的 inline <style> 內容對 Astro security.csp 的自動 hash 機制是「不透明」
 *   的（實測：build 後 meta CSP 的 style-src 不含此區塊 hash → inline style 會被擋）。
 *   故移到 public/ 靜態檔，由 style-src 'self' 直接放行——零 inline、零 unsafe-inline。
 *
 * DS 鐵則（megapower.css）：不寫死色碼、不覆蓋 system font，一律走 token var(--…)。
 *   可用 token（節錄自 megapower.css :root）：
 *     色：--color-bg / --color-text / --color-text-muted / --color-primary /
 *         --color-primary-hover / --color-primary-tint / --color-primary-soft-bg /
 *         --color-border / --color-bg-soft
 *     字：--text-sm/-base/-lg/-xl/-display-md/-display-lg、--line-height-base
 *     距：--space-2/-4/-6/-8/-12、--spacing-section
 *     角：--radius-sm/-md/-lg/-full　影：--shadow-sm/-md/-lg　動：--transition-fast/-base
 *   input/textarea DS 無元件 class → 用上述 token 自製（.fixreq-*）。
 *
 * 手機優先：基準樣式即為手機版（單欄、CTA 滿版）；@media (min-width:640px) 才放大留白 / CTA 自適寬。
 */

/* ── 頁首：品牌 logo + 主標 + 副標 ──────────────────────────────── */
/* logo 置於標題+副標左側（水平排列、垂直置中）。 */
/* logo 靠左、兩行文字置中：grid 三欄（logo｜文字置中｜對稱留白）。 */
.fixreq-header {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.fixreq-logo { max-width: 64px; height: auto; }
.fixreq-header__text { text-align: center; min-width: 0; }
.fixreq-title { margin-bottom: var(--space-2); }
.fixreq-lead {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--line-height-base);
  margin: 0;
}

/* ── 卡片 ────────────────────────────────────────────────────── */
.fixreq-card { display: block; }
/* 「* 為必填」提示：置於卡片頂、表單前。 */
.fixreq-required-note {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── 欄位分組（fieldset/legend）：視覺分隔 + 降低認知負擔 ──────────── */
.fixreq-group {
  border: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.fixreq-group + .fixreq-group {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.fixreq-group__legend {
  display: block;
  padding: 0;
  margin-bottom: var(--space-4);
}
.fixreq-group__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}
/* 分組描述：與 legend 標題並排（inline）、灰字小字。 */
.fixreq-group__desc {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-inline-start: var(--space-2);
}

/* ── 欄位 ────────────────────────────────────────────────────── */
.fixreq-field { margin-bottom: var(--space-4); }
.fixreq-field:last-child { margin-bottom: 0; }
/* label + hint 並排成一行的標頭。 */
.fixreq-field__head {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-base);
}
.fixreq-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.fixreq-required { color: var(--color-primary); margin-inline-start: 0.15em; }
/* 欄位輔助說明：與 label 並排（inline）的灰字小字。 */
.fixreq-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-inline-start: var(--space-2);
}

.fixreq-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fixreq-input::placeholder { color: var(--color-text-muted); }
.fixreq-input:hover { border-color: var(--color-text-muted); }
.fixreq-input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}
/* 原生必填驗證失敗時（送出後）以主色細框提示，不寫死色碼。 */
.fixreq-input:user-invalid {
  border-color: var(--color-primary);
}
.fixreq-input--area { resize: vertical; min-height: 5.5rem; }

/* ── 送出鈕 ──────────────────────────────────────────────────── */
.fixreq-actions { margin-top: var(--space-6); display: flex; justify-content: center; }
.fixreq-actions .btn { width: 100%; }

/* ── 服務回應時間（SLA）說明 ──────────────────────────────────── */
.fixreq-sla {
  margin-top: var(--space-4);
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
}
.fixreq-sla__title {
  font-weight: 600;
  color: var(--color-text);
  margin-inline-end: var(--space-2);
}

/* ── 錯誤訊息 ────────────────────────────────────────────────── */
.fixreq-error {
  margin-top: var(--space-4);
  padding: var(--space-4);
  color: var(--color-primary-hover);
  background: var(--color-primary-soft-bg);
  border: 1px solid var(--color-primary-tint);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
}

/* ── 成功訊息區塊 ────────────────────────────────────────────── */
.fixreq-success { text-align: center; padding: var(--space-4) 0; }
.fixreq-success:focus { outline: none; }
.fixreq-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  font-size: var(--text-xl);
  color: var(--color-primary);
  background: var(--color-primary-soft-bg);
  border-radius: var(--radius-full);
}
.fixreq-success__title { margin-bottom: var(--space-4); }
.fixreq-success p { line-height: var(--line-height-base); }
.fixreq-success__ticket { margin-top: var(--space-4); font-size: var(--text-lg); }
.fixreq-ticket {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: var(--color-primary);
}

/* 成功區塊內仍用到的灰字小字（.fixreq-success 的後續說明）。 */
.fixreq-muted { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--line-height-base); }

/* ── 平板 / 桌機（min-width:640px）：加大留白、CTA 自適寬 ─────────── */
@media (min-width: 640px) {
  .fixreq-actions .btn { width: auto; min-width: 14rem; }
}

/* ── 全站頁尾（移植自群兆官網 megaweb Footer.astro 的 <style>）────────
 *   來源：github.com/aiken884/megaweb src/components/site/Footer.astro。
 *   複用官網既有 footer 樣式（非自創）：DS token + #fff color-mix 深色主題。
 *   調整：① 去 Astro scoped（原為 scoped <style>，此處為全域 selector）；
 *        ② 原 `.footer__contact-item :global(svg)` → `.footer__contact-item svg`
 *           （此處無 Astro scope，毋需 :global 穿透）；
 *        ③ 未使用的 `.footer__slogan` 規則（官網 HTML 亦無對應元素）未複製；
 *        ④ 新增 `.footer__turnstile-notice`（Cloudflare Turnstile 隱私聲明小字）。
 *   #fff 為深色主題的 color-mix 基色，落在 CSS（非 HTML）→ 不觸發 intake-form 的 #hex 守門。 */
.footer {
  --footer-text: color-mix(in srgb, #fff 75%, var(--color-text));
  --footer-text-muted: color-mix(in srgb, #fff 50%, var(--color-text));
  --footer-border: color-mix(in srgb, #fff 18%, var(--color-text));

  background: var(--color-text);
  color: var(--footer-text);
  margin-top: var(--spacing-section);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-12) var(--spacing-container);
}

.footer__logo {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.25rem;
}
.footer__logo a { color: inherit; text-decoration: none; }
.footer__logo a:hover { color: var(--color-primary-soft-bg); }

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-primary-soft-bg);
  margin: 0 0 var(--space-6);
}

.footer__contact {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* 每筆聯絡資訊前加 icon、icon 與文字垂直對齊。 */
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.footer__contact-item svg {
  color: var(--color-primary-soft-bg);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.footer__contact a {
  color: var(--footer-text);
  text-decoration: none;
}

.footer__contact a:hover {
  color: var(--color-primary-soft-bg);
}

.footer__nav {
  display: flex;
  gap: var(--space-12);
}

.footer__nav-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__nav-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--footer-text-muted);
  margin: 0 0 0.75rem;
}

.footer__nav-group a {
  display: block;
  padding: 0.25rem 0;
  font-size: var(--text-sm);
  color: var(--footer-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__nav-group a:hover {
  color: var(--color-primary-soft-bg);
}

/* 防止長連結在中間斷行（官網 per Aiken 2026-05-22 UX 拍板）—— 範圍含所有 footer 連結、列表項。 */
.footer a,
.footer li {
  white-space: nowrap;
}

.footer__blurb {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--spacing-container) var(--space-8);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--footer-text-muted);
}

.footer__blurb p {
  margin: 0;
}

.footer__bottom {
  border-top: 1px solid var(--footer-border);
  text-align: center;
  padding: 1.25rem var(--spacing-container);
  font-size: var(--text-sm);
  color: var(--footer-text-muted);
}

/* Cloudflare Turnstile 隱私聲明：置於表單下方、頁尾上方（淺色區、置中灰字小字）。 */
.fixreq-turnstile-notice {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}
.fixreq-turnstile-notice a { color: inherit; text-decoration: underline; }

@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .footer__nav {
    flex-wrap: wrap;
    gap: var(--space-6);
  }
}