/* ========================================================================
 * 側邊快捷按鈕（[mld_quick_nav] → template-parts/quick-nav.php）。
 *
 * 位置沿用原本 Greenshift 版 Sticky Media 的設定：fixed 右 20 / 下 90、
 * z-index 2（原本就壓得過內容，維持一樣避免跟其他浮動元素打架）。
 * Blocksy 的「回到頂端」按鈕在更下面，不會疊到。
 *
 * 造型：圓和尾巴是設計稿匯出的**同一條 SVG 路徑**，內嵌在版型檔裡，
 * 這裡只管尺寸、定位和文字。尺寸照設計稿：直徑 63.3、間距 12.5。
 * 尾巴的路徑最遠伸到 64.1，超出 viewBox 0.8px——svg 要 overflow: visible，
 * 不然尾巴尖會被削掉。
 * ======================================================================== */
.mld-quick {
	position: fixed;
	right: 20px;
	bottom: 90px;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12.5px;
}

.mld-quick__item {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 63px;
	height: 63px;
	text-decoration: none;
}

.mld-quick__item:hover,
.mld-quick__item:focus-visible {
	filter: brightness(0.94);
}

.mld-quick__shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible; /* 尾巴超出 viewBox 0.8px */

	/*
	 * 設計稿的氣泡外緣有陰影（2026-08-31 使用者比對後補的）。
	 *
	 * ⚠️ 不能用 box-shadow——它走的是元素的「矩形」邊框，會在圓泡外面
	 * 畫出一個方框的影子。drop-shadow 是照 SVG 的 alpha 去描，圓、框線、
	 * 連尾巴尖都會有影子，白泡也不會在中間透出灰。
	 *
	 * 影子加在 shape 上、不是加在 .mld-quick__item 上：加在 item 會連
	 * 「報名講座」那兩行白字也一起有影子，設計稿的字是乾淨的。
	 *
	 * 設計稿的陰影掛在節點 92:266「側邊懸浮欄位」**群組**上，不在 icon 圖層，
	 * 所以在 icon 的 Effects 面板找不到（2026-08-31 使用者問過）。原始值是
	 * x 0.58 / y 0.58 / blur 2.3 / spread 0 / #000 61%。群組陰影吃的是群組的
	 * 合成 alpha，三顆泡沒重疊、文字又在泡裡面，逐顆套用結果等同群組套用。
	 * Tablet（92:368）、Mobile（74:1748）數值相同，不必分斷點。
	 *
	 * ⚠️ 但 blur 不能照抄 2.3——CSS 的 drop-shadow() 比 Figma 的 Blur 擴散得多，
	 * 直接填 2.3px/61% 會變成又淡又散（實測擴散到 6px 才收，設計稿只有 2px）。
	 * 這組 1.2px/100% 是拿設計稿的 PNG 渲染圖逐像素比對明度曲線掃出來的最佳解：
	 *   設計稿 [127,179,222,238,238]／這組 [127,182,224,236,238]
	 * 要改的話請重跑比對，不要憑感覺調。
	 */
	filter: drop-shadow(0.58px 0.58px 1.2px rgba(0, 0, 0, 1));
}

/*
 * 白泡的框線置中、往外長 0.8px，匯出的 viewBox 因此比 63.3 大一圈
 * （65.48×64.9）。放大 1.6px 再位移 -0.8px，圓心才會對回 63.3 的格子。
 */
.mld-quick__shape--outline {
	width: calc(100% + 1.6px);
	height: calc(100% + 1.6px);
	left: -0.8px;
	top: -0.8px;
}

.mld-quick__label {
	position: relative; /* 疊在 absolute 的 shape 上面 */

	font-size: 18px;
	font-weight: 700;
	/*
	 * ⚠️ 不要用 text-indent 去抵字距——它只作用在第一行，
	 * 「報名」會被推走、「講座」不動，兩行就歪掉（2026-08-31 踩過）。
	 * 字距造成的偏移兩行是等量的（各半個字距），置中下看不出來。
	 */
	letter-spacing: 0.1em;
	line-height: 1.25;
	text-align: center;
}

.mld-quick__label--light {
	color: #fff;
}

.mld-quick__label--gold {
	color: #a58e6b;
}

/* 手機縮小一號，避免遮住太多內容 */
@media (max-width: 767.98px) {
	.mld-quick {
		right: 12px;
		bottom: 80px;
		gap: 10px;
	}

	.mld-quick__item {
		width: 54px;
		height: 54px;
	}

	.mld-quick__label {
		font-size: 14px;
	}
}