/* ==========================================================================
   浮動聯絡按鈕 —— 取代 Buttonizer
   輸出在 inc/floating-buttons.php，該檔頂部有「它原本提供什麼」的完整記錄。

   每一個數值都是 2026-09-05 在正式站上量到的 Buttonizer 計算後樣式，
   不是估的：

     容器  position:fixed; right:5%; bottom:5%; z-index:99999;
           display:flex; flex-direction:column-reverse; align-items:flex-end
           （1600 寬實測 right 83.30px = 5% of clientWidth 1666；
             390 寬 SCAN-04 實測 x=315 → right 19.5px = 5% of 390，兩者吻合）
     按鈕  56×56、border-radius:50%、background rgba(109,177,195,1)
           box-shadow 0 2px 6px 1px rgba(0,0,0,.20)
           hover 時 0 5px 11px 1px rgba(0,0,0,.25)
           transition ease-in-out 250ms
     圖示  Font Awesome 5 `fas fa-phone`、font-size 33px、白色
     小標  position:absolute、bg #4e4c4c、白字 12px、padding 5px 15px、
           border-radius 3px、white-space:nowrap
           靜止 right:51px / opacity:0；hover right:65px / opacity:1
     斷點  770px（原版用 min-width:770px / max-width:769px 兩組 media query
           控制小標顯示，桌機 hover 顯示、手機完全不顯示）

   ✅ 2026-09-05：顏色已改。原本沿用 Buttonizer 的 #6DB1C3，白色圖示上去
      只有 **2.41:1**，連 WCAG 非文字元素（1.4.11）的 3:1 都不到。
      業主拍板改成 Buttonizer 自己的預設色 **#2F7789** —— 同色相
      （HSL 193°）的深版，白色圖示 **5.10:1**，非文字門檻 3:1 有 70% 餘裕，
      連文字門檻 4.5:1 都過。小標的白字壓 #4E4C4C 是 8.53:1，本來就沒問題。
   ========================================================================== */

.tz-fab {
	--tz-fab-size:   56px;
	--tz-fab-bg:     #2f7789;   /* 白圖示 5.10:1，見檔頭 */
	--tz-fab-ink:    #fff;
	--tz-fab-tip-bg: #4e4c4c;

	position: fixed;
	right: 5%;
	bottom: 5%;
	z-index: 99999;

	display: flex;
	/* column-reverse：日後多加一顆時，新的往上長，第一顆永遠貼底。 */
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 10px;

	/* 容器本身不吃點擊，只有按鈕吃 —— 5% 的留白帶不要擋住底下的內容。 */
	pointer-events: none;
}

.tz-fab__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	/* 觸控目標下限是 44×44，這裡是 56×56。 */
	width: var(--tz-fab-size);
	height: var(--tz-fab-size);

	border-radius: 50%;
	background-color: var(--tz-fab-bg);
	color: var(--tz-fab-ink);
	box-shadow: 0 2px 6px 1px rgba(0, 0, 0, .20);

	text-decoration: none;
	pointer-events: auto;
	transition: box-shadow 250ms ease-in-out;
}

/* Blocksy 會給 a:hover 換色，這裡要擋掉，圖示是靠 currentColor 上色的。 */
.tz-fab__btn:hover,
.tz-fab__btn:focus,
.tz-fab__btn:active {
	color: var(--tz-fab-ink);
	text-decoration: none;
}

.tz-fab__btn:hover,
.tz-fab__btn:focus-visible {
	box-shadow: 0 5px 11px 1px rgba(0, 0, 0, .25);
}

/* 鍵盤焦點要看得見。深色描邊 + 白色間隙，在淺底深底上都成立。 */
.tz-fab__btn:focus-visible {
	outline: 3px solid #17263a;
	outline-offset: 3px;
}

.tz-fab__icon {
	/* 原版是 33px 的字級，實測話筒本體約 30px 寬。
	   viewBox 已裁到字面框（2 2 20 20），所以 33px 直接等於話筒尺寸。 */
	width: 33px;
	height: 33px;
	display: block;
}

/* --------------------------------------------------------------------------
   小標（桌機滑入時出現）

   原版是絕對定位在按鈕內、往左滑出。這裡照抄，包含兩段距離
   （51px → 65px）與 250ms 的緩動。
   -------------------------------------------------------------------------- */

.tz-fab__label {
	position: absolute;
	right: 51px;
	top: 50%;
	transform: translateY(-50%);

	padding: 5px 15px;
	border-radius: 3px;
	background-color: var(--tz-fab-tip-bg);
	color: #fff;                 /* 8.53:1 on #4e4c4c */
	font-size: 12px;
	line-height: normal;
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: right 250ms ease-in-out,
	            opacity 250ms ease-in-out,
	            visibility 250ms ease-in-out;
}

.tz-fab__btn:hover .tz-fab__label,
.tz-fab__btn:focus-visible .tz-fab__label {
	right: 65px;
	opacity: 1;
	visibility: visible;
}

/* 手機不顯示小標 —— 原版在 max-width:769px 是 show_label_mobile:"hide"。
   沒有滑鼠就沒有 hover，留著只會在點擊時閃一下。 */
@media (max-width: 769px) {
	.tz-fab__label {
		display: none;
	}
}

/* 使用者要求減少動態時，該出現的照樣出現，只是不做轉場。 */
@media (prefers-reduced-motion: reduce) {
	.tz-fab__btn,
	.tz-fab__label {
		transition: none;
	}
}

@media print {
	.tz-fab {
		display: none;
	}
}