/* ============================================================
   小青田 — 共用 UI 效果
   1) 主選單 hover：文字下方的橘線由左至右劃過
   2) .cyt-reveal：由上往下揭開 + 模糊轉清晰（可掛在任何元素上）
   ============================================================ */

/* ---------- 1. 主選單 hover 底線 ---------- */
[data-id="menu"] > ul > li > .ct-menu-link {
	position: relative;
}

[data-id="menu"] > ul > li > .ct-menu-link::after {
	content: "";
	position: absolute;
	/* 選單 a 是 flex、padding: 0 12.5px，用 left/right:0 會連 padding 一起吃掉，
	   線條左右各多出 12.5px。縮進 padding 值後剛好等於文字寬度。 */
	left: 12.5px;
	right: 12.5px;
	/* 選單 a 有上下 padding(實測高 80px、字只有 14px)，
	   所以不能用 bottom:0 推算。改從垂直中心往下算：
	   50% 是中心，再往下半個行高(0.65em)到文字底，最後再 6px。 */
	bottom: calc(50% - 0.65em - 6px);
	height: 1.5px;
	background-color: var(--theme-palette-color-1, #edae5c);
	/* Blocksy 的 main.min.css 用同一個 ::after 當選單指示器，
	   預設 opacity:var(--menu-indicator-opacity, 0) 會把線壓成透明，
	   這裡要明確寫回來 */
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.42s cubic-bezier(0.22, 0.7, 0.25, 1);
	pointer-events: none;
}

[data-id="menu"] > ul > li > .ct-menu-link:hover::after,
[data-id="menu"] > ul > li:hover > .ct-menu-link::after,
[data-id="menu"] > ul > li:focus-within > .ct-menu-link::after {
	transform: scaleX(1);
}

/* 移開時讓線條從右側收回，來回都是同一個方向感 */
[data-id="menu"] > ul > li > .ct-menu-link::after {
	transform-origin: right center;
}
[data-id="menu"] > ul > li > .ct-menu-link:hover::after,
[data-id="menu"] > ul > li:hover > .ct-menu-link::after,
[data-id="menu"] > ul > li:focus-within > .ct-menu-link::after {
	transform-origin: left center;
}

/* ---------- 2. .cyt-reveal 由上往下揭開 ---------- */
/*
   用 mask 漸層當「由上往下拉開的簾子」。

   ⚠️ mask-position 的百分比不是單純位移，而是相對「容器高 − 遮罩高」的差值
   （跟 background-position 同一套規則）。遮罩比容器高時這個差值是負的，
   所以百分比的方向會跟直覺相反：
       100% → 遮罩底端對齊容器底端 → 元素落在遮罩的透明區 → 隱藏
         0% → 遮罩頂端對齊容器頂端 → 元素落在遮罩的不透明區 → 完全顯示
   因此動畫是 100% → 0%，不透明區由上往下掃過。
   （寫成負值會變成往下移，揭開方向會整個顛倒。）

   遮罩高 240% 時元素只佔 1/2.4 ≈ 41.7%，
   所以不透明區必須涵蓋 0~42%，結束時底部才不會殘留半透明。
*/
.cyt-reveal {
	opacity: 0;
	will-change: opacity, filter, mask-position;
}

.cyt-reveal.cyt-reveal--in {
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.12) 56%, transparent 62%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.12) 56%, transparent 62%);
	-webkit-mask-size: 100% 240%;
	mask-size: 100% 240%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation: cytRevealDown var(--cyt-reveal-duration, 1.4s)
		cubic-bezier(0.22, 0.61, 0.24, 1) var(--cyt-reveal-delay, 0s) both;
}

@keyframes cytRevealDown {
	0% {
		opacity: 0;
		-webkit-mask-position: 0 100%;
		mask-position: 0 100%;
	}
	18% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}

/*
   模糊不是整塊一起退，而是一條「模糊帶」跟著揭開的邊緣往下走：
   上面已經揭開的部分是清楚的，下緣還沒定下來的部分維持模糊，
   帶子往下退到底就整張清晰。

   ⚠️ 這一層疊的是「圖片自己」，不是 backdrop-filter。
   backdrop-filter 糊的是背後的東西，一旦這層的框比圖片大（wrapper 常常比較寬），
   或圓角沒對上，多出來的地方就會糊出一片灰蓋在圖上。
   改成用 --cyt-reveal-src 把同一張圖再畫一次然後 filter: blur()，
   糊的就只有圖片本身，怎麼樣都不會生出灰塊。

   框的位置、尺寸、圓角全部由 reveal.js 依 <img> 實際量到的值餵進來，
   預設值只是 wrapper 尺寸的退路。

   為了不讓 blur 在邊緣取樣到外面的透明像素而淡掉一圈，
   整個框往外擴 24px（背景用 cover 填滿這個放大的框），
   再用 clip-path 裁回圖片原本的圓角框。
*/
.cyt-reveal.cyt-reveal--in::after {
	content: "";
	position: absolute;
	left: calc(var(--cyt-reveal-x, 0px) - 24px);
	top: calc(var(--cyt-reveal-y, 0px) - 24px);
	width: calc(var(--cyt-reveal-w, 100%) + 48px);
	height: calc(var(--cyt-reveal-h, 100%) + 48px);
	pointer-events: none;
	z-index: 2;
	background-image: var(--cyt-reveal-src, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(18px);
	/* 裁回圖片真正的框與圓角（含不規則圓角），模糊不會溢出到圖片外 */
	-webkit-clip-path: inset(24px round var(--cyt-reveal-radius, 0));
	clip-path: inset(24px round var(--cyt-reveal-radius, 0));
	/*
	   ⚠️ 這組漸層是主體那一組的「互補」：
	   主體不透明的地方（0~42%）這裡透明，主體透明的地方（62% 之後）這裡不透明，
	   中間的過渡帶兩邊的 alpha 相加剛好是 1。

	   互補之後，兩層就能共用完全相同的 mask-size 與 mask-position 動畫，
	   模糊帶會自動咬住揭開的邊緣：上面揭開的部分清晰，下面還沒揭開的部分模糊。
	   動畫跑到 mask-position: 0 0 時，元素整個落在遮罩的 0~41.7%（全透明區），
	   模糊層就自己退乾淨了，不需要再用 opacity 去收尾。

	   之前是「mask 只退到 -12% 再用 opacity 從 1 硬切到 0」，
	   而 -12% 的位置底下還留著約四成的模糊沒退掉，
	   所以會看到半片模糊突然整片變清晰。
	*/
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.88) 56%, #000 62%);
	mask-image: linear-gradient(to bottom, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.88) 56%, #000 62%);
	-webkit-mask-size: 100% 240%;
	mask-size: 100% 240%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation: cytRevealBlur var(--cyt-reveal-duration, 1.4s)
		cubic-bezier(0.22, 0.61, 0.24, 1) var(--cyt-reveal-delay, 0s) both;
}

/* 與主體的 cytRevealDown 完全同步：同樣的起點、終點與緩動 */
@keyframes cytRevealBlur {
	0% {
		-webkit-mask-position: 0 100%;
		mask-position: 0 100%;
	}
	100% {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}

/* 動畫跑完就把 mask 與 will-change 收掉，避免影響後續圖層與互動 */
.cyt-reveal.cyt-reveal--done::after {
	display: none;
}

.cyt-reveal.cyt-reveal--done {
	opacity: 1;
	filter: none;
	-webkit-mask-image: none;
	mask-image: none;
	will-change: auto;
}

/* 依序進場的延遲，可直接在區塊編輯器的 class 欄位加上（例如 cyt-reveal cyt-reveal-d2） */
.cyt-reveal-d1 { --cyt-reveal-delay: 0.06s; }
.cyt-reveal-d2 { --cyt-reveal-delay: 0.12s; }
.cyt-reveal-d3 { --cyt-reveal-delay: 0.18s; }
.cyt-reveal-d4 { --cyt-reveal-delay: 0.24s; }
.cyt-reveal-d5 { --cyt-reveal-delay: 0.30s; }
.cyt-reveal-d6 { --cyt-reveal-delay: 0.36s; }

/* 同一組元素依序進場：在父層加 .cyt-reveal-stagger */
.cyt-reveal-stagger > .cyt-reveal:nth-child(1) { --cyt-reveal-delay: 0s; }
.cyt-reveal-stagger > .cyt-reveal:nth-child(2) { --cyt-reveal-delay: 0.12s; }
.cyt-reveal-stagger > .cyt-reveal:nth-child(3) { --cyt-reveal-delay: 0.24s; }
.cyt-reveal-stagger > .cyt-reveal:nth-child(4) { --cyt-reveal-delay: 0.36s; }
.cyt-reveal-stagger > .cyt-reveal:nth-child(5) { --cyt-reveal-delay: 0.48s; }

/* 使用者偏好減少動態時，直接顯示不播動畫 */
@media (prefers-reduced-motion: reduce) {
	.cyt-reveal,
	.cyt-reveal.cyt-reveal--in {
		opacity: 1;
		filter: none;
		transform: none;
		animation: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ---------- 2-1. 淡入淡出輪播：補回 Swiper fade 模組的樣式 ---------- */
/*
   Greenshift 原生不支援 fade，所以它載入的 Swiper 樣式裡
   完全沒有 .swiper-fade 這一組規則（實測：整個頁面找不到任何一條）。

   少了它，slide 的 transition-property 只剩 transform，
   fade 改的 opacity 就沒有過渡 → transitionend 永遠不會觸發
   → Swiper 的 animating 旗標卡在 true
   → 之後所有 slideNext()、箭頭、autoplay 全部被當成「還在轉場中」而失效，
     輪播在第一次切換後就整個停住，畫面也只是硬切、沒有淡入淡出。

   以下是 Swiper 官方 fade 模組的樣式，原封補上。
*/
.swiper-fade .swiper-slide {
	pointer-events: none;
	transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
	pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
	pointer-events: auto;
}

.swiper-fade.swiper-free-mode .swiper-slide {
	transition-timing-function: ease-out;
}

/* ---------- 2-2. 淡入淡出輪播：擋掉 Greenshift 的圖片視差 ---------- */
/*
   Greenshift 啟用了 Swiper 的 parallax 模組，會對 .slider-image-wrapper img
   寫 inline 的 transform: translate3d(N%, 0, 0) 做視差，那是給左右滑動用的。

   換成 fade 之後這個位移沒有意義，而且舊實例被 destroy 時不會回收，
   圖片會卡在 translate3d(-86%)：整張被推到容器左外側 1109px，
   只剩最右邊 181px 露出來，其餘就是一片灰底。

   swiper-fade.js 已經會主動清掉 inline 值，這條是保底：
   只要是標了 fade 的輪播，圖片與文字一律不吃任何 transform。

   ⚠️ 文字也要一起擋。parallax 不只作用在圖片，slide 裡的標題同樣會被寫上
   transform: translate3d(1000px, 0, 0)，整行字被推到容器右外側而看不見
   （所以會覺得「第二、三張的文字消失了」）。
   .slider-content-zone 裡沒有任何 data-aos 元素，不會誤傷進場動畫。
*/
.gs-swiper-init[data-effect="fade"] .slider-image-wrapper img,
.gs-swiper-init[data-effect="fade"] .slider-content-zone * {
	transform: none !important;
}

/* ---------- 2-3. 淡入淡出輪播：壓暗遮罩要跟著圖片的圓角 ---------- */
/*
   Greenshift 會在 slide 內容層放一個 .gspb_backgroundOverlay，
   是 rgba(0,0,0,0.22) 的半透明黑，用來壓暗照片讓白色標題看得清楚。

   但它的 border-radius 是 0，而圖片是 30px 圓角，
   於是四個角落會露出一塊方形的灰（白底疊 22% 黑 ＝ 255 × 0.78 ≈ 200，
   量到的就是 rgb(200,200,200)）。

   用 border-radius: inherit 讓圓角從 .wp-block-greenshift-blocks-swipe（30px）
   一路傳下來，不寫死數值，之後在編輯器改圓角也會自動跟著。
*/
.gs-swiper-init[data-effect="fade"] .slider-content-zone,
.gs-swiper-init[data-effect="fade"] .slider-content-zone > .gspb_container,
.gs-swiper-init[data-effect="fade"] .slider-content-zone .gspb_backgroundOverlay {
	border-radius: inherit;
}

/* ---------- 3. .cyt-linkbox 整塊可點擊 ---------- */
/*
   Greenshift 13.2 的 row-column / container / element 都沒有連結欄位
   （站上既有 tag:"a" 的 element 也只有 class、沒有 href），
   所以用 stretched link：框內放一個絕對定位、覆蓋整塊的 <a>。
   內容照舊可選取，連結本身不顯示文字（用 aria-label 供輔助技術辨識）。
*/
.cyt-linkbox {
	position: relative;
}

.cyt-linkbox .cyt-linkbox__a {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	background: transparent;
}

.cyt-linkbox .cyt-linkbox__a:focus-visible {
	outline: 2px solid var(--theme-palette-color-1, #edae5c);
	outline-offset: 3px;
}

/* 這兩個框在 Greenshift 裡本來就設了 hover 背景色與陰影，
   滑鼠落在覆蓋的 <a> 上時外框仍然是 :hover 狀態，
   所以這裡不再另外加 hover 效果，避免兩套互相打架。 */
.cyt-linkbox .cyt-linkbox__a {
	cursor: pointer;
}

/* ---------- 4. 透明頁首的選單進場降下 ---------- */
/*
   ⚠️ 這裡刻意不用 CSS animation，改用「靜態預設位置 ＋ transition」。

   animation 有一個「動畫結束就把動畫樣式整個卸掉」的交接點：
   元素在那一刻會從「動畫算出來的位置」跳回「CSS 原本的位置」。
   只要兩者有一點不一致，或動畫提早／延後結束，
   就會看到降下來的位置跟最後停住的位置對不上。
   而且 animation 的 from 要等動畫開始才生效，中間可能被別的東西打斷，
   選單就會停在露出一半的位置。

   改成 transition 之後：
     預設值   translate: 0 -120px   ← 靜態規則，套用時機不受動畫影響
     降下後   translate: 0 0        ← 終點就是 CSS 本身的值
   中間沒有任何交接，位置不可能對不上，也不會提早露出一半。

   降下的時機由 header-drop.js 加 class 控制（首次進站等進場動畫收掉才降）。

   ⚠️ 動畫一定要套在 #header 裡面那一列，不能套在 #header 自己身上。
   透明頁首的 #header 高度是 0（它不佔位，讓 banner 可以頂到最上面），
   translate: 0 -100% 對高度 0 的元素等於位移 0px，動畫照跑但畫面完全不動。
   真正看得見的是 #header > div（高 80px，絕對定位疊在 banner 上），
   套在它身上 -100% 才等於 80px，選單才會真的從上面滑下來。

   ⚠️ 而且一定要是 :first-child，不能用 > div 一次套兩個。
   #header 底下有兩個 div：
     div[0]  高 80px、絕對定位  → 這才是看得見的那一列
     div[1]  高 0             → 裝 Blocksy sticky 用的那一列（內容是 position:fixed，所以不佔位）
   兩個都套的話，div[1] 身上的 translate 會建立新的 containing block，
   讓它裡面本來相對視窗定位的 fixed 選單改成相對 div[1] 定位而跑出來，
   畫面上就變成「兩個選單、兩組動作」，動畫結束後又各自彈回原位。

   ⚠️ 條件用 body.cyt-has-banner（functions.php 依 post_content 有沒有 cyt-banner-end 加的），
   不能用 :has(.cyt-banner-end)。
   .cyt-banner-end 是頁面中段才出現的元素，瀏覽器 parse 到 <body> 開頭時它還不存在，
   :has() 當下不成立 → 選單先以原位畫出來，等 parse 到那個元素才跳上去，
   進站瞬間就會看到選單閃一下、甚至只露出下半截。
   改由 PHP 在伺服器端判斷，<body> 標籤一出現就帶著 class，沒有這個空窗。

   關於小青田與媽媽日記後來也讓 header 不佔位（見第 4-1 節），
   但那兩頁沒有 .cyt-banner-end，所以不會被套到動畫。
*/
/* 1. 預設：收在畫面上方。
      ⚠️ 用固定 px 不用 -100%。百分比是相對元素自身高度，
      logo 還沒載入完時那一列量到的高度可能不足 80px，-100% 就推不完，
      選單會卡在「只露出下半截」的位置。
      120px 比實際列高（桌機 80、手機 60）都多，一定推得出畫面外。 */
body.cyt-has-banner #header.ct-header > div:first-child {
	translate: 0 -120px;
	transition: translate 0.85s cubic-bezier(0.22, 0.72, 0.24, 1);
	/* JS 沒跑到的保底：8 秒後無論如何都降下來，不會讓選單永遠不出現 */
	animation: cytHeaderFailsafe 0.01s linear 8s forwards;
}

/* 2. 時機到了才降下（class 由 header-drop.js 加） */
body.cyt-has-banner.cyt-hdr-dropped #header.ct-header > div:first-child {
	translate: 0 0;
}

/* 3. 降完把 translate 卸掉。
      只要 translate 不是 none 就會建立新的 containing block，
      內層 position:fixed 會改成相對這一列定位而失效。
      卸掉前後的視覺位置一樣（都是 0），所以這一步不會有任何跳動。 */
body.cyt-has-banner.cyt-hdr-settled #header.ct-header > div:first-child {
	translate: none;
	transition: none;
	animation: none;
}

@keyframes cytHeaderFailsafe {
	to {
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.cyt-has-banner #header.ct-header > div:first-child {
		translate: none;
		transition: none;
		animation: none;
	}
}

/* ---------- 4-1. 關於小青田、媽媽日記：選單不佔位但文字維持黑色 ---------- */
/*
   這兩頁要的是「第一張圖貼到畫面最上面」，但選單仍然是非透明頁首的黑字。

   Blocksy 讓 header 不佔位的做法，是在那一列加上 data-transparent 屬性後命中：
     @media (min-width: 1000px) {
       [data-device="desktop"][data-transparent] { position: absolute; top:0; left:0; right:0; }
     }
   那個屬性來自「透明頁首」開關，一開下去連文字顏色也會跟著走透明頁首那一套。
   這裡只複製「不佔位」的部分，顏色不動，所以文字仍是 header-state.js 判定的 solid（黑字）。

   斷點跟 Blocksy 一致設在 1000px：手機版維持佔位，
   避免黑字直接疊在圖片上看不清楚。
*/
body.page-id-26 #header.ct-header,
body.page-id-1079 #header.ct-header {
	height: 0;
}

@media (min-width: 1000px) {
	body.page-id-26 #header.ct-header > div:first-child,
	body.page-id-1079 #header.ct-header > div:first-child {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}

/* ---------- 5. 選單背景一律透明（含一般頁面與置頂） ---------- */
/*
   Blocksy 的 headerBackground / stickyHeaderBackground 設成 alpha 0 之後，
   它仍然會把內層 [data-row="middle"] 輸出成 --theme-palette-color-8（白底），
   而且沒有「row 背景」的獨立選項可設，所以這層只能在這裡覆蓋。
   一般狀態與置頂狀態都要，兩種情境的選單背景才會一致透明。
*/
html body[data-header*="type-1"] .ct-header [data-row*="middle"] {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	--theme-box-shadow: none;
}

/* 目前所在頁面（active）的底線，跟其他項目一樣用橘色。
   Blocksy 預設給 current-menu-item 綠色（palette-color-2），
   選擇器多了 .current-menu-item 特異性比較高，所以要寫同等特異性蓋回來。 */
[data-id="menu"] > ul > li.current-menu-item > .ct-menu-link::after,
[data-id="menu"] > ul > li.current_page_item > .ct-menu-link::after,
[data-id="menu"] > ul > li.current-menu-ancestor > .ct-menu-link::after {
	background-color: var(--theme-palette-color-1, #edae5c);
}

/* ---------- 5-1. 置頂（sticky）狀態 ---------- */
/*
   Blocksy 的 stickyHeaderBackground 只管外層容器（已是透明），
   內層 [data-row="middle"] 會沿用一般狀態的白底，而且沒有獨立的
   「sticky row 背景」選項可設，所以只能在這裡覆蓋。
*/
.ct-header [data-sticky*="yes"] [data-row*="middle"],
[data-header*="type-1"] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
	background-color: transparent;
	background-image: none;
	--theme-box-shadow: none;
	box-shadow: none;
}

/* ---------- 6. 選單的 light / solid 兩種狀態 ---------- */
/*
   Blocksy 原本用 [data-sticky] 決定顏色與 logo（捲動一段距離就切換），
   但實際需求是「離開 Banner 才切換」，每頁 Banner 長度不同，
   所以改由 header-state.js 依 .cyt-banner-end 的位置在 body 掛上狀態 class，
   這裡再把 Blocksy 的切換蓋掉。

   light : Banner 範圍內 → 白字、白 logo
   solid : 離開 Banner 之後，或本來就沒有透明頁首的頁面 → 深色字、彩色 logo
*/

/* --- light：即使 Blocksy 已經進入 sticky，仍維持白色 --- */
body.cyt-hdr-light .ct-header [data-id="menu"] > ul > li > .ct-menu-link,
body.cyt-hdr-light .ct-header [data-sticky*="yes"] [data-id="menu"] > ul > li > .ct-menu-link {
	color: var(--theme-palette-color-8, #ffffff);
}
body.cyt-hdr-light .ct-header [data-sticky*="yes"] .sticky-logo {
	display: none;
}
body.cyt-hdr-light .ct-header [data-sticky*="yes"] .sticky-logo ~ .default-logo {
	display: initial;
}

/* --- solid：即使還沒進入 sticky，也要是深色字與彩色 logo --- */
body.cyt-hdr-solid .ct-header [data-id="menu"] > ul > li > .ct-menu-link,
body.cyt-hdr-solid .ct-header [data-sticky*="yes"] [data-id="menu"] > ul > li > .ct-menu-link {
	color: var(--theme-palette-color-3, #3e3a39);
}
body.cyt-hdr-solid .ct-header .sticky-logo {
	display: initial;
}
body.cyt-hdr-solid .ct-header .sticky-logo ~ .default-logo {
	display: none;
}

/* 行動版的漢堡 icon 跟著換色 */
body.cyt-hdr-light .ct-header .ct-toggle-close,
body.cyt-hdr-light .ct-header [data-id="trigger"] .ct-icon {
	color: var(--theme-palette-color-8, #ffffff);
	fill: var(--theme-palette-color-8, #ffffff);
}
body.cyt-hdr-solid .ct-header [data-id="trigger"] .ct-icon {
	color: var(--theme-palette-color-3, #3e3a39);
	fill: var(--theme-palette-color-3, #3e3a39);
}

/* 顏色切換給一點過渡，避免在分界點硬跳 */
.ct-header [data-id="menu"] > ul > li > .ct-menu-link {
	transition: color 0.28s ease;
}

/* ---------- 7. PopUp 選單開啟時，只留 logo 與漢堡 ---------- */
/*
   滿版、淡入、鎖定背景捲動這三項都已經用 Content Block 的原生設定完成
   （popup_max_width 100vw、popup_max_height 100vh、popup_scroll_lock、fade-in），
   唯獨「開啟時把選單項目藏起來」Blocksy 沒有對應開關，只能在這裡補一條。

   用 :has() 直接對應 popup 的 .active 狀態，不需要額外的 JS 去掛 class。
   header 本身維持在 popup 之上（z-index 50 > 49），所以 logo 與漢堡的位置完全不動。
*/
body:has(#ct-popup-860.active) .ct-header [data-id="menu"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Blocksy 幫 Content Block 包的 <article> 自帶 margin-top:75px，
   滿版 popup 會因此在頂端露出一條頁面背景。這個邊距沒有對應的原生設定可調。 */
#ct-popup-860 .ct-popup-inner > article {
	margin-top: 0;
}

/* popup 開啟時語言切換也一起收掉，畫面上只留 logo 與漢堡 */
body:has(#ct-popup-860.active) .ct-header [data-id="text"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.ct-header [data-id="text"] {
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 漢堡圖示本身是深色 SVG（#231815）。
   透明頁首（light）時背景多半是深色照片，要反白才看得見；
   solid 狀態與 popup 開啟後維持原本的深色。 */
body.cyt-hdr-light .ct-header .popup-icon {
	filter: brightness(0) invert(1);
	transition: filter 0.28s ease;
}
body.cyt-hdr-light:has(#ct-popup-860.active) .ct-header .popup-icon {
	filter: none;
}

/* 漢堡 → 沙漏：站上媒體庫本來就有 popup-after.svg（沙漏），
   原本只是沒有在開啟時換過去。這裡用 ::after 疊第二張圖做交叉淡入，
   HTML 結構完全不動。 */
.ct-header .popup-trigger {
	position: relative;
	display: inline-block;
}
/*
   ⚠️ 兩張圖的淡入淡出要「錯開」，不能同時進行。
   兩張都用同樣的 0.35s 交叉淡入時，中間會有一小段兩張都half透明的空窗，
   看起來就是「快速跳閃一下」。
   改成先讓舊的淡出、延遲 0.18s 再讓新的淡入，開與關兩個方向都一樣。
*/

/* ⚠️ 兩張圖要「同時、同時長」地交叉淡入淡出（cross-fade）。
   先前用延遲錯開（漢堡先淡出、0.18s 後沙漏才淡入），
   實測在 0.19s 時漢堡只剩 opacity 0.075、沙漏還是 0，
   中間出現一小段兩個都幾乎看不見的空窗，那就是「閃一下」的來源。
   改成同時進行後，任何時刻兩者的不透明度總和都是 1，亮度穩定不會暗掉。 */
/* ⚠️ specificity 陷阱：第 6 節的 body.cyt-hdr-light .ct-header .popup-icon
   宣告了 transition: filter 0.28s，優先級比這裡高，會把 opacity 的過渡整個蓋掉，
   opacity 就變成瞬間切換（漢堡一下子消失，沙漏還沒淡進來 → 閃一下）。
   這裡補一層 body 提高優先級，並把兩個屬性寫在同一條 transition 裡。 */
body .ct-header .popup-trigger .popup-icon {
	transition: opacity 0.28s ease, filter 0.28s ease;
}
.ct-header .popup-trigger::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("https://cyan.wp-mak.ing/wp-content/uploads/2026/06/popup-after.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
}

/* 開啟方向：漢堡先淡出，沙漏延遲淡入 */
body:has(#ct-popup-860.active) .ct-header .popup-trigger .popup-icon {
	opacity: 0;
}
body:has(#ct-popup-860.active) .ct-header .popup-trigger::after {
	opacity: 1;
}

.ct-header [data-id="menu"] {
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* popup 的底色偏淺，開啟時 logo 一律用彩色版，白色版在淺底上會看不清楚 */
body:has(#ct-popup-860.active) .ct-header .sticky-logo {
	display: initial;
}
body:has(#ct-popup-860.active) .ct-header .sticky-logo ~ .default-logo {
	display: none;
}

/* ---------- 8. 開關 PopUp 時整排選單不要左右跳動 ---------- */
/*
   PopUp 開啟時 Blocksy 會鎖住背景捲動（popup_scroll_lock = yes），
   body 變成 overflow: hidden，瀏覽器的捲軸就消失了。
   捲軸一消失，可用寬度立刻多出約 15px，整列 header（logo、選單、沙漏）
   就會往右位移一格；關閉時又跳回來，看起來很不順。

   scrollbar-gutter: stable 會永遠為捲軸保留那條空間，
   所以捲軸出現或消失都不會改變版面寬度。

   相容性：Chrome 94+／Firefox 97+／Safari 18.2+。
   不支援的舊瀏覽器只是維持原本的行為，不會更糟。
*/
html {
	scrollbar-gutter: stable;
}

/* ---------- 9. 只有一個頁籤時，不顯示頁籤標題列 ---------- */
/*
   首頁 Center Info 上方、環境與房型 OUR HOUSES 下方各有一個 Greenshift tabs 區塊，
   但兩者都只有「一個」頁籤（tabs: 1），標題列因此沒有切換功能，
   只是一條寫著「小青田產後護理之家」的深色橫條。

   Greenshift 的 tabs 沒有「隱藏標題列」的原生開關，所以在這裡收起來。
   只針對這兩個區塊的 id，其他頁籤區塊不受影響。
*/
#gspb_tabs-id-gsbp-8f68ee0 > .t-btn-container,
#gspb_tabs-id-gsbp-cyttabs > .t-btn-container,
.gspb_tabs-id-gsbp-8f68ee0 > .t-btn-container,
.gspb_tabs-id-gsbp-cyttabs > .t-btn-container {
	display: none;
}

/* ---------- 10. 關於小青田：取消動畫後要解除初始狀態 ---------- */
/*
   ⚠️ 這條非常重要，拿掉 data-aos 時一定要一起處理。

   Greenshift 幫有進場動畫的區塊寫了一段 inline CSS，把它的初始狀態設成
   opacity: 0 ＋ transform: scale(0.6)，等 AOS 加上 .aos-animate 才還原。
   客戶要求「這區塊固定在畫面上就好，不用有動畫」，我把 data-aos 移除之後，
   AOS 就不會再來解除那個初始狀態，整個區塊會永遠停在 opacity: 0（看不見）。

   所以移除動畫的同時，必須把初始狀態一起解除。
*/
#gspb_row-id-gsbp-0048cd3 {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ---------- 11. 關於小青田：兩個區塊的標題字級與箭頭 ---------- */
/*
   客戶要求「標題字體太大，請縮小至比內文字體大即可」。
   該區內文是 16px，原本 h2 為 32px、h3 為 28px，兩者都明顯過大。
   這裡只縮這兩個區塊，不動全站的 h2／h3 預設值。
*/
#gspb_row-id-gsbp-e7f454d h2 {
	font-size: 24px;
}
#gspb_row-id-gsbp-e7f454d h3,
#gspb_row-id-gsbp-0048cd3 h3 {
	font-size: 20px;
	line-height: 1.5;
}

@media (max-width: 689.98px) {
	#gspb_row-id-gsbp-e7f454d h2 {
		font-size: 20px;
	}
	#gspb_row-id-gsbp-e7f454d h3,
	#gspb_row-id-gsbp-0048cd3 h3 {
		font-size: 18px;
	}
}

/* 五個圖示那排的三角形箭頭（導圓角與縮小）另外處理在 about-carousel.css，
   那支檔案本來就是專門管這個輪播的。 */

/* ---------- 12. 箭頭按鈕：圓形線框、黑色、hover 只有箭頭變橘 ---------- */
/*
   站上的「純箭頭按鈕」＝ Greenshift buttonbox 且標題文字是空的
   （有文字的 CTA 例如「看空間與服務」「官方LINE內預約」不在此列）。

   分兩種處理：
   A. more 的箭頭（Guide、FAQ、NEWS）
      → 1:1 圓形線框；hover 時「只有箭頭本身」變橘，
        外框與旁邊的「more」文字維持原色，整顆也不位移。
   B. 文章列表右側的箭頭
      → 維持原樣；hover 時整顆變橘並右移 6px。

   ⚠️ A 的顏色不能走 currentColor：外框是 border: 1px solid currentColor，
   一改 color 外框就會跟著變橘。所以 A 的 hover 只動 SVG 的 fill。
*/
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty) {
	color: var(--theme-palette-color-3, #3e3a39);
	transition: color 0.28s ease, border-color 0.28s ease, translate 0.28s ease;
}

a.gspb-buttonbox:has(.gspb-buttonbox-title:empty) svg,
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty) svg path {
	fill: currentColor !important;
	transition: fill 0.28s ease;
}

/* A. more 的箭頭：1:1 圓形，箭頭置中，外圍約 6px 留白 */
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):not(.gspbgrid_item a) {
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	/* 不寫 line-height 的話會被行高撐成 28x30，就不是正圓了 */
	line-height: 1;
	flex-shrink: 0;
	vertical-align: middle;
	/* 父層是 flex 且 align-items 預設 stretch，會把高度拉成 30px 而不是正圓，
	   所以要明確 align-self: center 並鎖住高度 */
	align-self: center;
	min-height: 0;
	height: 28px !important;
}

/* ⚠️ 關鍵：箭頭與「more」文字同在一個 container 裡，而那個 container 上有一個
   覆蓋整塊的 <a class="gspb-containerlink"> stretched link，它疊在箭頭上面。
   滑鼠實際 hover 到的是那層連結，永遠碰不到 buttonbox 本身，
   所以只寫 a.gspb-buttonbox:hover 在真實操作時不會有任何反應。
   改成「整個 container hover 時，裡面的箭頭跟著變色」。

   只改 SVG 的 fill：外框（border: 1px solid currentColor）與「more」文字
   都不受影響，維持原本的顏色。 */
.wp-block-greenshift-blocks-container:has(a.gspb-buttonbox .gspb-buttonbox-title:empty):hover
	a.gspb-buttonbox:has(.gspb-buttonbox-title:empty) svg,
.wp-block-greenshift-blocks-container:has(a.gspb-buttonbox .gspb-buttonbox-title:empty):hover
	a.gspb-buttonbox:has(.gspb-buttonbox-title:empty) svg path {
	fill: var(--theme-palette-color-1, #edae5c) !important;
}

/* 保險：若滑鼠真的碰得到 buttonbox 本身（例如 stretched link 沒蓋滿的角落），
   行為要一致，同樣只有箭頭變橘 */
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):not(.gspbgrid_item a):hover svg,
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):not(.gspbgrid_item a):hover svg path {
	fill: var(--theme-palette-color-1, #edae5c) !important;
}

/* buttonbox 內層的排版容器會擋住置中，一併壓平 */
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):not(.gspbgrid_item a) .gspb-buttonbox-content,
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):not(.gspbgrid_item a) .gspb-buttonbox-text {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	gap: 0;
}

a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):not(.gspbgrid_item a) .gspb-buttonbox-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

/* B. 文章列表右側的箭頭：維持原本外觀，hover 才變色並右移 6px
   ⚠️ 兩個雷點：
   1. 這顆箭頭 hover 時會被 Greenshift 的預設色蓋成綠色 rgb(163,167,82)，
      要明確指定橘色才壓得過去。
   2. 它本身帶著 transform: translateY(-15px) 做垂直置中，
      如果用 transform 寫位移會整個把它取代掉（箭頭會跳位）。
      改用 translate 獨立屬性，兩者可以併存。 */
.gspbgrid_item a.gspb-buttonbox:has(.gspb-buttonbox-title:empty) {
	translate: 0 0;
	transition: color 0.28s ease, border-color 0.28s ease, translate 0.28s ease;
}

.gspbgrid_item a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):hover {
	color: var(--theme-palette-color-1, #edae5c) !important;
	border-color: var(--theme-palette-color-1, #edae5c) !important;
	translate: 6px 0;
}

.gspbgrid_item a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):hover svg,
.gspbgrid_item a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):hover svg path {
	fill: var(--theme-palette-color-1, #edae5c) !important;
}

/* more 的箭頭不做位移（依客戶指定），這裡明確歸零，
   避免上面的通用規則或 Greenshift 自己的樣式讓它跑掉 */
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):not(.gspbgrid_item a),
a.gspb-buttonbox:has(.gspb-buttonbox-title:empty):not(.gspbgrid_item a):hover {
	translate: none;
}