/* =====================================================================
   FLOAT 聯絡我們 —— starface.world/pages/contact-us 的資訊架構復刻
   ---------------------------------------------------------------------
   2026-09-03 直接量參考站的 computed style：
     頁面底色 #000
     方塊 圓角 26px・內距 30px・**間隙 3px**（不是 gap-4 那種，是真的只有 3px）
     三欄等寬（各 809px @ 2432 容器）
     標題 40px/52px・區塊標題 36px/46.8px・內文 mono 16px/28.8

   配色：**跟隱私權政策測試頁同一套**（2026-09-03 老闆定的統一規格）。
   直接沿用 float-policy-pages 的 token，量出來是：
     --fdl-page #000 ／ --fdl-panel #fff ／ --fdl-ink #000 ／ --fdl-muted #6b6b6b
     --fdl-gap 3px ／ --fdl-radius 26px ／ --fdl-pad 30px
   幾何本來就一樣（兩邊都是量同一個參考站來的），所以這次只換顏色。

   ⚠️ #6b6b6b 只能用在**白面板上**（5.33:1，過 AA）。
   黑底上它只有 3.94:1 —— 頁面底部那行法遵警語是壓在黑底上的，
   所以用 #8c8c8c（6.25:1）。政策頁沒有這個情境所以沒踩到。

   代價要先講：全白面板之後，四塊之間就只剩標題在區分。
   參考站是靠顏色分管道的，這一版改用統一規格，等於放棄那個訊號。
   ===================================================================== */

.float-contact-page .fc {
	--fc-r: 26px;      /* 圓角 */
	--fc-p: 30px;      /* 內距 */
	--fc-g: 3px;       /* 間隙 */
	--fc-page: #000;
	--fc-panel: #fff;
	--fc-ink: #000;
	--fc-muted: #6b6b6b;
	--fc-face: "PingFang TC", "Hiragino Maru Gothic ProN", "Microsoft JhengHei",
		"Noto Sans TC", system-ui, sans-serif;
	--fc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	background: var(--fc-page);
	color: var(--fc-ink);
	padding: var(--fc-g);
	font-family: var(--fc-face);
}

.float-contact-page .fc *,
.float-contact-page .fc *::before,
.float-contact-page .fc *::after { box-sizing: border-box; }

/* ── 標題列 ───────────────────────────────────────────────────────
   參考站是滿版黃色圓角條、標題置中、高 112px。 */
.fc__bar {
	background: var(--fc-panel);
	border-radius: var(--fc-r);
	padding: 26px var(--fc-p);
	margin-bottom: var(--fc-g);
	display: flex;
	justify-content: center;
}

.fc__title {
	margin: 0;
	color: var(--fc-ink);
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.3;
	font-weight: 900;
	letter-spacing: .02em;
}

/* ── bento ────────────────────────────────────────────────────────
   三欄。左右兩塊各跨兩列，中間那欄拆成 LINE ＋ 客服時間；
   下排是表單（跨兩欄）＋ 社群。 */
.fc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fc-g);
	align-items: stretch;
}

.fc__b {
	border-radius: var(--fc-r);
	padding: var(--fc-p);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.fc__b--tall { grid-row: span 2; }

/* 四塊同色。統一規格之後不再靠顏色分管道，只靠標題。 */
.fc__b--mail,
.fc__b--line,
.fc__b--where,
.fc__b--hours { background: var(--fc-panel); color: var(--fc-ink); }

.fc__h {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.25;
	font-weight: 900;
	letter-spacing: .01em;
	color: inherit;
}

.fc__p {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	max-width: 46ch;
	color: inherit;
}

.fc__big {
	margin: 0;
	font-family: var(--fc-mono);
	font-size: clamp(19px, 2vw, 26px);
	line-height: 1.3;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* 用途小標：參考站那一塊也是「mono 小字標籤 ＋ 粗體底線信箱」的兩行式 */
.fc__use {
	display: block;
	font-family: var(--fc-mono);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--fc-muted);
}

.fc__mails {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fc__mail {
	display: inline-block;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 800;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	/* 預設的 skip-ink 會在每個下伸部（p、g、y…）把底線挖斷，
	   support@ 有兩個 p，看起來就像底線壞掉。信箱是要一眼認出來的東西，
	   底線必須是連續的一條，所以關掉。 */
	text-decoration-skip-ink: none;
	word-break: break-all;
}

.fc__mail:hover { text-decoration-thickness: 4px; }

.fc__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--fc-muted);
	max-width: 40ch;
}

.fc__cta {
	align-self: flex-start;
	margin-top: auto;
	background: var(--fc-ink);
	color: var(--fc-panel);
	border: 2px solid var(--fc-ink);
	border-radius: 999px;
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 900;
	text-decoration: none;
	transition: transform .15s ease-out;
}

.fc__cta:hover { transform: translateY(-2px); }

/* ── 窄螢幕 ───────────────────────────────────────────────────────
   參考站在窄螢幕是直接單欄堆疊。跨欄／跨列要一起取消，
   否則 grid 會留下空格子。 */
@media (max-width: 1080px) {
	.fc__grid { grid-template-columns: repeat(2, 1fr); }
	.fc__b--tall { grid-row: auto; }
}

@media (max-width: 720px) {
	.float-contact-page .fc { --fc-p: 22px; --fc-r: 20px; }
	.fc__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.fc__cta { transition: none; }
}

/* 說明文字裡的連結：白面板上用同色＋底線，跟信箱那組同一個處理。 */
.fc__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-skip-ink: none;
}

/* =====================================================================
   ⚠️ 頁面比視窗矮的時候，底下會露出 body 的底色。
   Blocksy 的 body 是 rgb(237,236,232) 米色，所以這頁在大螢幕上
   footer 下面會出現一條米色帶（實測：文件高 1370、視窗高 1412）。
   把 body 也漆黑就沒事 —— 只針對這一頁，不動主題設定。
   ===================================================================== */
body.float-contact-page { background: #000; }

/* =====================================================================
   高螢幕填滿 —— 測試頁與正式 contact-us 共用

	float-shell 已經讓 #main-container 吃掉 viewport 的剩餘高度；這裡只把那份高度
	一層層傳到本頁的 .fc，再讓 bento grid 吸收。文字與內距不放大。
	===================================================================== */

/* =====================================================================
   版面填滿：讓內容區永遠撐到視窗底，頁尾自然接在後面
   ---------------------------------------------------------------------
   ⚠️ 不加任何 @media 條件。

   2026-09-03 codex 版本把這組規則鎖在
   `@media (min-width:1081px) and (min-height:900px)`，
   等於**高度低於 900 的螢幕完全沒有保險**（筆電多半是 768–900），
   而「內容短、螢幕高」正是會露出空白的情況。條件式的保險等於沒有保險。

   做法：從主容器到內容根節點整條鏈設成 flex 直向、內容那格 flex:1，
   內容比視窗矮的時候由它撐開，不會在中間或底部留下死白。
   內容本來就比視窗高的時候，這組規則沒有任何作用。
   ===================================================================== */
body.float-contact-page--fill #main-container,
body.float-contact-page--fill .site-main,
body.float-contact-page--fill .site-main > [class*="ct-container"],
body.float-contact-page--fill .site-main article,
body.float-contact-page--fill .site-main .entry-content,
body.float-contact-page--fill .fc {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

body.float-contact-page--fill .site-main,
body.float-contact-page--fill .site-main > [class*="ct-container"],
body.float-contact-page--fill .site-main article,
body.float-contact-page--fill .site-main .entry-content,
body.float-contact-page--fill .fc,
body.float-contact-page--fill .fc__grid {
	flex: 1 1 auto;
}