/*
Theme Name:   Chance Bai
Theme URI:    https://chancebai.com
Description:  hostinger-ai-theme 的子主題。固定左側欄 + 零間距照片格線，攝影作品集用。配色與版面客製都放在這裡，父主題更新不會覆蓋。
Author:       Chance Bai
Template:     hostinger-ai-theme
Version:      0.1.0
Text Domain:  chancebai
*/

/* ==========================================================================
   1. 設計 token
   顏色同時定義在 theme.json（給區塊編輯器用）和這裡（給自訂 CSS 用）。
   改色時兩邊都要改，theme.json 是唯一真實來源。
   ========================================================================== */
:root {
	--cb-primary:        #333D34;  /* 主色 — 側邊欄底 */
	--cb-background:     #C0A88E;  /* 背景色 — 頁面底 */
	--cb-accent:         #1A221B;  /* 強調色 — 遮罩、hover 底 */
	--cb-text:           #1F2620;  /* 內文（背景上 6.8:1） */
	--cb-on-primary:     #E5DACA;  /* 側邊欄文字（主色上 8.2:1） */
	--cb-on-primary-dim: #A8A79B;  /* 側邊欄次要文字 */
	--cb-muted:          #4A5348;  /* 次要文字 */

	--cb-sidebar-w: 240px;
	--cb-ease: cubic-bezier(.19, .72, .26, 1);
}

/* ==========================================================================
   2. 固定左側欄
   父主題的頁首容器是 .hostinger-ai-menu（見 parts/header.html）。
   注意：頁首目前被資料庫的 wp_template_part 覆寫，但 class 名稱一致，
   所以純 CSS 就能改造成側邊欄，不需要動資料庫。
   ========================================================================== */
/* 父主題用這條把頁首釘成 sticky：
     .wp-site-blocks > .wp-block-template-part:has(> .hostinger-ai-menu)
     { position:sticky; top:0; z-index:500 }
   特異性 (0,3,0)，單靠 .site-header (0,1,0) 蓋不過去。
   這裡沿用同樣的選擇器形狀再多一個 class，湊到 (0,4,0) 才壓得住。 */
@media (min-width: 901px) {

	.wp-site-blocks > .site-header.wp-block-template-part:has(> .hostinger-ai-menu) {
		position: fixed;
		inset: 0 auto 0 0;
		width: var(--cb-sidebar-w);
		z-index: 500;
	}

	/* 登入時 WordPress 管理列會佔掉頂部 32px，父主題有對應規則，這裡也要跟上 */
	.admin-bar .wp-site-blocks > .site-header.wp-block-template-part:has(> .hostinger-ai-menu) {
		top: 32px;
	}

	.site-header .hostinger-ai-menu {
		height: 100%;
		display: flex;
	}

	/* 側邊欄內容：由上而下，社群圖示與版權推到底部 */
	.site-header .cb-sidebar__inner {
		height: 100%;
		align-items: flex-start;
		gap: 34px;
		width: 100%;
		max-width: none;
		padding: 38px 28px;
	}

	.site-header .cb-social {
		margin-top: auto;
	}

	.site-header .cb-colophon {
		margin-top: 0;
	}

	/* 主要內容與頁尾讓開側邊欄的寬度 */
	main,
	.site-footer {
		margin-left: var(--cb-sidebar-w);
	}
}

/* 側邊欄底色與文字色。
   這裡的 !important 不是偷懶 —— 資料庫裡的頁首區塊帶著
   has-page-background-background-color / has-page-text-color 這兩個 class，
   而 WordPress 核心產生的顏色 class 本身就寫了 !important，
   一般選擇器再怎麼加特異性都壓不過，只能用 !important 對衝。

   另外父主題的 .hostinger-ai-menu 是白底加陰影（橫向頁首的樣子），側邊欄不需要。 */
.site-header .hostinger-ai-menu {
	background-color: var(--cb-primary) !important;
	box-shadow: none;
}

.site-header .hostinger-ai-menu,
.site-header .hostinger-ai-menu p,
.site-header .hostinger-ai-menu a {
	color: var(--cb-on-primary) !important;
}

/* 站名。父主題把 .hostinger-ai-site-title a 設成 font-weight:700，
   而 fontSize:"large" 只有 18px —— 兩者都要蓋掉才會跟 demo 一致。 */
.site-header .hostinger-ai-site-title,
.site-header .hostinger-ai-site-title a {
	font-family: Georgia, "Songti TC", "Noto Serif TC", serif;
	font-weight: 400;
	font-size: 31px;
	line-height: 1.15;
	letter-spacing: .01em;
	color: var(--cb-on-primary) !important;
	text-decoration: none;
}

/* 導覽項目 */
.hostinger-ai-site-navigation a {
	color: var(--cb-on-primary) !important;
	text-transform: uppercase;
	font-size: 12.5px;
	letter-spacing: .13em;
	text-decoration: none;
	transition: opacity .18s ease, padding-left .18s ease;
}

/* 側邊欄是深色底，強調色 #1A221B 在上面對比只有 1.44:1 會等於隱形，
   所以 hover 用透明度 + 位移表現，不用顏色。 */
.hostinger-ai-site-navigation a:hover,
.hostinger-ai-site-title a:hover {
	opacity: .6;
	padding-left: 5px;
	/* 父主題 hover 會加 border-bottom:1px solid #000，深色側邊欄上很突兀 */
	border-bottom: none;
}

.hostinger-ai-site-title a:hover {
	padding-left: 0;
}

/* 子選單（Street / Landscape / Mirror）縮排、降一階。
   側邊欄夠窄，子選單直接攤開比彈出式好用，不要浮動面板。

   關鍵：有子選單的 <li> 預設是 flex-direction:row，
   會把子選單排到連結「右邊」而不是下面，還會被壓成高度 0。
   要先把它改成直向堆疊。 */
.site-header .hostinger-ai-site-navigation .wp-block-navigation-item.has-child {
	flex-direction: column;
	align-items: flex-start;
	height: auto;
}

.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-container {
	position: static;
	top: auto;
	left: auto;
	opacity: 1;
	visibility: visible;
	width: 100%;
	min-width: 0;
	height: auto;
	border: 0;
	/* 子選單帶 has-color-2-background-color，核心的顏色 class 是 !important */
	background-color: transparent !important;
	box-shadow: none;
	padding: 0;
	margin-top: 13px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-container a {
	padding: 0 0 0 14px;
	font-size: 11.5px;
	letter-spacing: .11em;
	color: var(--cb-on-primary-dim) !important;
}

/* 子項 hover 位移比主項再多一點，層級感才出得來 */
.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-container a:hover {
	padding-left: 19px;
	opacity: .75;
}

/* 目前所在的頁面。
   父主題用 body.hostinger-ai-builder-gutenberg nav .current-menu-item
   加了一條 border-bottom:1px solid #000 —— 深色側邊欄上就是一條黑線。
   這裡整條拿掉，改用亮度 + 永久位移來標示，跟 hover 的表達方式一致。 */
.site-header .hostinger-ai-site-navigation .current-menu-item,
.site-header .hostinger-ai-site-navigation .current-menu-item > a,
.site-header .hostinger-ai-site-navigation .current_page_item,
.site-header .hostinger-ai-site-navigation .current_page_item > a,
.site-header .hostinger-ai-site-navigation .current-menu-ancestor,
.site-header .hostinger-ai-site-navigation .current-menu-ancestor > a {
	border-bottom: none;
}

.site-header .hostinger-ai-site-navigation .current-menu-item > a,
.site-header .hostinger-ai-site-navigation .current_page_item > a {
	color: var(--cb-on-primary) !important;
	opacity: 1;
	padding-left: 5px;
}

/* 子選單裡的目前項目，位移對齊子項的縮排基準 */
.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-container .current-menu-item > a,
.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-container .current_page_item > a {
	padding-left: 19px;
}

/* 有子選單的父項不需要展開箭頭 */
.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-icon {
	display: none;
}

/* 社群圖示 */
.site-header .cb-social .wp-block-social-link {
	margin: 0 13px 0 0;
}

.site-header .cb-social .wp-social-link a {
	padding: 0;
	transition: transform .22s ease, opacity .22s ease;
}

.site-header .cb-social .wp-social-link:hover {
	transform: translateY(-2px);
}

/* 版權：退到背景層 */
.site-header .cb-colophon {
	font-size: 10.5px;
	letter-spacing: .06em;
	color: var(--cb-on-primary-dim) !important;
	margin-bottom: 0;
}

/* ==========================================================================
   2b. 像素小狗（滑鼠靠近就跑掉的彩蛋）
   ========================================================================== */
.site-header .cb-sidebar {
	position: relative;
}

.cb-dog {
	position: absolute;
	top: 47px;
	right: 16px;
	width: 34px;
	height: 27px;
	color: var(--cb-on-primary);
	z-index: 3;
	/* 追不到牠，就不該讓牠擋住底下的連結 */
	pointer-events: none;
	will-change: transform;
	transition: transform .24s cubic-bezier(.22, .9, .3, 1);
}

.cb-dog__sprite {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
}

.cb-dog__shade { fill: var(--cb-on-primary-dim); }
.cb-dog__ink   { fill: var(--cb-accent); }

/* 預設（含 JS 尚未判斷出時段時）站著 */
.cb-dog__sprite--stand { display: block; }

.cb-dog__bowl,
.cb-dog__zzz {
	position: absolute;
	display: none;
}

/* 狗糧盆放在口鼻前方 */
.cb-dog__bowl {
	left: -19px;
	bottom: 0;
	width: 18px;
	height: 12px;
	color: var(--cb-on-primary-dim);
}

.cb-dog__bowl svg { width: 100%; height: 100%; display: block; }

/* 睡覺時飄出來的 z */
.cb-dog__zzz {
	right: -4px;
	top: -14px;
	font-family: Georgia, serif;
	font-size: 9px;
	line-height: 1;
	color: var(--cb-on-primary-dim);
}

.cb-dog__zzz i {
	font-style: normal;
	display: inline-block;
	animation: cb-zzz 2.8s ease-in-out infinite;
}

.cb-dog__zzz i:nth-child(2) { font-size: 11px; animation-delay: .35s; }
.cb-dog__zzz i:nth-child(3) { font-size: 13px; animation-delay: .7s; }

@keyframes cb-zzz {
	0%       { opacity: 0; transform: translateY(3px); }
	30%      { opacity: 1; }
	100%     { opacity: 0; transform: translateY(-9px); }
}

/* ---- 各時段的狀態 ---- */

/* 輕鬆無事：慢慢呼吸 */
@keyframes cb-dog-breathe {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-1.5px); }
}

.cb-dog.is-relaxed .cb-dog__sprite--stand {
	animation: cb-dog-breathe 2.6s ease-in-out infinite;
}

/* 忙碌：小步快走的顛簸感 */
@keyframes cb-dog-trot {
	0%, 100% { transform: translateY(0)      rotate(0deg); }
	25%      { transform: translateY(-2px)   rotate(-2deg); }
	75%      { transform: translateY(-0.5px) rotate(2deg); }
}

.cb-dog.is-busy .cb-dog__sprite--stand {
	animation: cb-dog-trot .42s steps(2, end) infinite;
}

/* 蹦蹦跳跳：週末模式 */
@keyframes cb-dog-hop {
	0%, 100% { transform: translateY(0)   scaleY(1); }
	20%      { transform: translateY(0)   scaleY(.86); }
	50%      { transform: translateY(-9px) scaleY(1.06); }
	80%      { transform: translateY(0)   scaleY(.92); }
}

.cb-dog.is-bouncing .cb-dog__sprite--stand {
	animation: cb-dog-hop .72s ease-in-out infinite;
}

/* 吃飯：換成低頭的姿勢，碗出現 */
.cb-dog.is-eating .cb-dog__sprite--stand { display: none; }
.cb-dog.is-eating .cb-dog__sprite--eat   { display: block; }
.cb-dog.is-eating .cb-dog__bowl          { display: block; }

@keyframes cb-dog-munch {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(1.5px); }
}

.cb-dog.is-eating .cb-dog__sprite--eat {
	animation: cb-dog-munch .55s ease-in-out infinite;
}

/* 睡覺：趴下，冒 z */
.cb-dog.is-sleeping .cb-dog__sprite--stand { display: none; }
.cb-dog.is-sleeping .cb-dog__sprite--sleep { display: block; }
.cb-dog.is-sleeping .cb-dog__zzz           { display: block; }

@keyframes cb-dog-snooze {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(1.05); }
}

.cb-dog.is-sleeping .cb-dog__sprite--sleep {
	transform-origin: bottom center;
	animation: cb-dog-snooze 3.4s ease-in-out infinite;
}

/* 逃跑時動作加快 */
.cb-dog.is-fleeing .cb-dog__sprite--stand {
	animation-duration: .3s;
}

@media (prefers-reduced-motion: reduce) {
	.cb-dog { transition: none; }
	.cb-dog__sprite,
	.cb-dog__zzz i { animation: none; }
}

/* ==========================================================================
   3. 照片格線 —— 放大 + 標題浮出
   同時涵蓋 Jetpack 拼貼相簿（Mirror / Landscape 在用）和核心相簿區塊。
   ========================================================================== */
/* 零間距三欄格線。核心相簿區塊預設是 flex + gap，這裡改成 grid 讓照片切齊。 */
.cb-grid.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0;
}

/* 核心相簿用這條控制每格寬度：
     .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
   裡面的 :not(#individual-image) 會貢獻 ID 等級特異性，整條是 (1,3,1)。
   要蓋過去只能沿用同樣手法再多一個 class，湊到 (1,4,1)。 */
.cb-grid.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	position: relative;
	overflow: hidden;
	margin: 0;
	width: 100%;
	max-width: none;
	flex: none;
	/* 正方形裁切，讓直幅與橫幅照片在格線裡對齊 */
	aspect-ratio: 1 / 1;
	background: var(--cb-accent);
}

/* 首頁的格子是連結（點進分類頁），連結要撐滿整格才點得到 */
.cb-grid.wp-block-gallery .wp-block-image > a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.cb-grid.wp-block-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.15s var(--cb-ease);
}

.cb-grid.wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.07);
}

/* 圖說當作標題，從底部漸層浮出 */
.cb-grid.wp-block-gallery .wp-block-image figcaption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 26px;
	text-align: left;
	font-family: Georgia, "Songti TC", serif;
	font-size: 19px;
	color: var(--cb-on-primary);
	background: linear-gradient(
		to top,
		rgba(26, 34, 27, .9) 0%,
		rgba(26, 34, 27, .42) 38%,
		rgba(26, 34, 27, 0) 74%
	);
	opacity: 0;
	transform: translateY(9px);
	transition: opacity .42s ease, transform .48s var(--cb-ease);
	/* 核心相簿的圖說預設有自己的定位與底色，一併清掉 */
	max-height: none;
	overflow: visible;
}

.cb-grid.wp-block-gallery .wp-block-image:hover figcaption {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 900px) {
	.cb-grid.wp-block-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.cb-grid.wp-block-gallery {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   3b. 單張大圖檢視器（Street / Landscape / Mirror）
   JS 接管後容器會加上 cb-viewer--ready，此時要把 3b 的格線規則關掉。
   ========================================================================== */
.cb-viewer--ready.wp-block-gallery {
	display: block;
	grid-template-columns: none;
	gap: 0;
	padding: 0;
}

.cb-viewer__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 0 8px;
}

.cb-viewer__frame {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 扣掉縮圖列與圖說，讓大圖盡量佔滿可視高度又不會被裁掉 */
	height: min(72vh, 780px);
	min-width: 0;
}

.cb-viewer__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	opacity: 1;
	transition: opacity .32s ease;
}

.cb-viewer__image.is-swapping {
	opacity: 0;
}

/* 左右切換箭頭 */
.cb-viewer__nav {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cb-text);
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease, transform .2s ease;
}

.cb-viewer__nav:hover,
.cb-viewer__nav:focus-visible {
	opacity: 1;
}

.cb-viewer__nav--prev:hover { transform: translateX(-3px); }
.cb-viewer__nav--next:hover { transform: translateX(3px); }

.cb-viewer__nav svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cb-viewer__stage--single .cb-viewer__nav {
	visibility: hidden;
}

/* 圖說：置於大圖下方偏左，跟參考版型一致 */
.cb-viewer__caption {
	margin: 20px 0 0;
	padding: 0 72px;
	font-family: Georgia, "Songti TC", "Noto Serif TC", serif;
	font-size: 15px;
	letter-spacing: .01em;
	color: var(--cb-text);
	min-height: 1.4em;
}

.cb-viewer__caption.is-empty {
	opacity: 0;
}

/* 底部縮圖列 */
.cb-viewer__thumbs {
	display: flex;
	gap: 5px;
	margin-top: 26px;
	padding: 0 8px 4px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--cb-muted) transparent;
}

.cb-viewer__thumbs::-webkit-scrollbar {
	height: 4px;
}

.cb-viewer__thumbs::-webkit-scrollbar-thumb {
	background: var(--cb-muted);
	border-radius: 2px;
}

.cb-viewer__thumb {
	flex: 0 0 auto;
	width: 78px;
	height: 78px;
	padding: 0;
	border: 0;
	background: var(--cb-accent);
	cursor: pointer;
	overflow: hidden;
	opacity: .45;
	transition: opacity .25s ease;
}

.cb-viewer__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-viewer__thumb:hover,
.cb-viewer__thumb:focus-visible {
	opacity: .8;
}

.cb-viewer__thumb.is-active {
	opacity: 1;
	outline: 2px solid var(--cb-text);
	outline-offset: -2px;
}

@media (max-width: 900px) {
	.cb-viewer__frame { height: min(58vh, 520px); }
	.cb-viewer__nav { width: 34px; height: 34px; }
	.cb-viewer__caption { padding: 0 12px; font-size: 14px; }
	.cb-viewer__thumb { width: 60px; height: 60px; }
}

/* ==========================================================================
   4. 清掉沒安裝 WooCommerce 卻留在頁首的殘留區塊
   （購物車與帳號圖示，目前不會顯示任何內容，只佔位）
   ========================================================================== */
.site-header .wp-block-woocommerce-customer-account,
.site-header .wp-block-woocommerce-mini-cart {
	display: none;
}

/* ==========================================================================
   4b. 首頁頁尾的訪問計數
   由 functions.php 接在 .cb-footer 之後，只有首頁會出現。
   ========================================================================== */
/* 刻意不用淡入動畫：元素靠 JS 拿掉 hidden 才出現，
   若可見性再綁在動畫上，分頁在背景被節流時動畫時鐘會凍住，數字就一直是透明的。

   顏色用 --cb-text 而不是看起來更低調的 --cb-muted —— 後者在背景色上只有
   3.5:1，11px 的字達不到 AA。低調感交給字級與字距處理。 */
.cb-views {
	margin: 0;
	padding-bottom: 40px;
	text-align: center;
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--cb-text);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. 行動版 —— 側邊欄回到頂部橫向
   ========================================================================== */
@media (max-width: 900px) {

	/* 父主題把頁首釘成 sticky（特異性 (0,3,0)）。
	   在手機上那會變成一塊永遠佔著 1/3 螢幕的色塊，
	   所以改回 static 讓它跟著捲走，照片才有空間。 */
	.wp-site-blocks > .site-header.wp-block-template-part:has(> .hostinger-ai-menu) {
		position: static;
		width: 100%;
	}

	.site-header .hostinger-ai-menu {
		background-color: var(--cb-primary) !important;
	}

	.site-header .cb-sidebar__inner {
		padding: 18px 16px;
		gap: 12px;
	}

	.site-header .hostinger-ai-site-title,
	.site-header .hostinger-ai-site-title a {
		font-size: 24px;
	}

	/* 導覽改成橫向換行。直向堆疊在手機上會把整個首屏吃掉，
	   六個項目橫排大約兩行就結束，照片能更快出現。 */
	.site-header .hostinger-ai-site-navigation .wp-block-navigation__container,
	.site-header .hostinger-ai-site-navigation .wp-block-navigation-item.has-child,
	.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-container {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 11px 17px;
		width: auto;
		margin-top: 0;
	}

	/* 桌機版讓有子選單的項目佔滿一整列（子選單才會落在下方）。
	   手機是橫排，那個 width:100% 會逼出多餘的斷行 ——
	   Mirror 被擠到單獨一行就是這樣來的，所以還原成自動寬度。 */
	.site-header .hostinger-ai-site-navigation .wp-block-navigation-item.has-child {
		width: auto;
	}

	/* 橫排時縮排沒有意義，拿掉 */
	.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-container a,
	.site-header .hostinger-ai-site-navigation .wp-block-navigation__submenu-container a:hover {
		padding-left: 0;
	}

	.site-header .cb-social {
		margin-top: 2px;
	}

	.site-header .cb-colophon {
		font-size: 10px;
	}

	main,
	.site-footer {
		margin-left: 0;
	}

	/* 圖說常駐顯示。
	   下面還有一組 @media (hover: none) 做同樣的事，但那個條件在
	   「桌機瀏覽器縮成手機尺寸」時不會成立，光靠它無法驗證也不夠保險，
	   所以寬度斷點這邊也寫一份。 */
	.cb-grid.wp-block-gallery .wp-block-image figcaption {
		opacity: 1;
		transform: none;
		padding: 18px;
		font-size: 15px;
		background: linear-gradient(
			to top,
			rgba(26, 34, 27, .82) 0%,
			rgba(26, 34, 27, .3) 44%,
			rgba(26, 34, 27, 0) 78%
		);
	}
}

/* ==========================================================================
   6. 觸控裝置
   格線的標題原本靠 hover 浮出，但觸控沒有 hover ——
   手機使用者會完全看不到分類名稱，也就不知道點下去會到哪。
   所以在沒有 hover 能力的裝置上一律顯示。
   ========================================================================== */
@media (hover: none) {

	.cb-grid.wp-block-gallery .wp-block-image figcaption {
		opacity: 1;
		transform: none;
		/* 常駐顯示時漸層要淡一點，才不會蓋掉照片 */
		background: linear-gradient(
			to top,
			rgba(26, 34, 27, .82) 0%,
			rgba(26, 34, 27, .3) 44%,
			rgba(26, 34, 27, 0) 78%
		);
		padding: 18px;
		font-size: 15px;
	}

	/* 觸控下沒有 hover 態，放大只會在點擊後殘留，關掉 */
	.cb-grid.wp-block-gallery .wp-block-image:hover img {
		transform: none;
	}

	.site-header .hostinger-ai-site-navigation a:hover,
	.site-header .hostinger-ai-site-title a:hover {
		padding-left: 0;
		opacity: 1;
	}

	.cb-viewer__nav {
		opacity: .85;
	}
}