/* ==========================================================================
Sweetday 2.0 — Front-end styles
只放 theme.json 無法表達的：自訂 Block Style、component 細節、互動。
色彩 / 間距 / 字級一律使用 theme.json 產生的 CSS 變數。
========================================================================== */
/* --- Design tokens 對照（方便閱讀，實際由 theme.json 產生） ---
--wp--preset--color--accent #78D7D4
--wp--preset--color--accent-700 #4FB8B4
--wp--preset--color--secondary #F9E6EC
--wp--preset--color--text #333333
--wp--preset--color--gray #666666
--wp--preset--color--background #FCFCFC
------------------------------------------------------------------ */
/* ---------- Global polish ---------- */
:root { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
/* ---------- Header ---------- */
.sd-header {
background-color: var(--wp--preset--color--accent);
border-bottom: 1px solid var(--wp--preset--color--accent-700);
transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sd-header.is-scrolled { box-shadow: var(--wp--preset--shadow--soft); }
/* 透明 header：固定 header 不佔流，移除 main 預設上方間距，讓 Hero 滿版貼齊頂端 */
.sd-header-transparent main { margin-block-start: 0 !important; }
/* 全幅區段緊貼：消除區段之間與頁尾的白縫（各區段自帶 padding） */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
main.wp-block-group > .alignfull { margin-block-start: 0; margin-block-end: 0; }
/* Header 透明覆蓋在 Hero 上 */
.sd-header-transparent .sd-header {
position: fixed !important;
top: 0; left: 0; right: 0; width: 100%; z-index: 100;
background-color: transparent;
background-image: none;
border-bottom-color: transparent;
}
/* 「藍綠 → 透明」遮罩，刻意比 header 高，向下延伸到 Hero 後才淡出，避免生硬邊界 */
.sd-header-transparent .sd-header::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 200px;
background: linear-gradient(180deg,
rgba(16,58,63,0.55) 0%,
rgba(16,58,63,0.34) 32%,
rgba(16,58,63,0.14) 64%,
rgba(16,58,63,0) 100%);
pointer-events: none;
z-index: -1;
transition: opacity .35s ease;
}
/* 捲動後：轉為實心藍綠底，遮罩淡出 */
.sd-header-transparent .sd-header.is-scrolled {
background-color: var(--wp--preset--color--accent);
border-bottom-color: var(--wp--preset--color--accent-700);
}
.sd-header-transparent .sd-header.is-scrolled::before { opacity: 0; }
/* Logo：用白色品牌圖取代 site-title 文字 */
.sd-header .sd-logo a {
display: block;
width: 200px; height: 56px;
background: var(--sd-img-logo) left center / contain no-repeat;
text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
/* Nav：白字 */
.sd-nav a { color: #fff !important; font-weight: 500; position: relative; text-decoration: none !important; }
.sd-nav a:hover { color: #fff !important; text-decoration: none !important; }
.sd-nav .wp-block-navigation-item__content::after {
content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
background: #fff; transition: width .25s ease;
}
.sd-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after { width: 100%; }
/* Header 內的 LINE 按鈕：白底綠字，在藍綠底上凸顯 */
.sd-header .sd-line-btn .wp-block-button__link {
background: #fff; color: var(--wp--preset--color--accent-700);
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
line-height: 1;
}
.sd-header .sd-line-btn .wp-block-button__link:hover {
background: var(--wp--preset--color--text); color: #fff;
}
/* 手機漢堡選單圖示改白色 */
.sd-header .wp-block-navigation__responsive-container-open svg,
.sd-header .wp-block-navigation__responsive-container-open { color: #fff; fill: #fff; }
/* ===== 手機展開的全螢幕選單 ===== */
.sd-nav .wp-block-navigation__responsive-container.is-menu-open {
/* 半透明藍綠 + 毛玻璃，能透出後方內容 */
background-color: transparent !important;
background-image: linear-gradient(160deg,
rgba(120,215,212,0.55) 0%,
rgba(79,184,180,0.62) 100%);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
padding: 0 1.5rem;
}
/* 對話框與內容區撐滿高度，讓選單在畫面正中央（垂直＋水平置中） */
.sd-nav .is-menu-open .wp-block-navigation__responsive-dialog {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sd-nav .is-menu-open .wp-block-navigation__responsive-container-close,
.sd-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { color: #fff; fill: #fff; }
.sd-nav .is-menu-open .wp-block-navigation__responsive-container-close { top: 1.4rem; right: 1.4rem; }
.sd-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
/* 選單內容：垂直置中、置中對齊 */
.sd-nav .is-menu-open .wp-block-navigation__responsive-container-content {
width: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.sd-nav .is-menu-open .wp-block-navigation__container {
flex-direction: column !important;
align-items: center !important; /* 覆蓋 items-justified-right 的靠右 */
justify-content: center !important;
gap: 1.6rem;
width: 100%;
}
/* 選單項目：放大、襯線、間距，逐項浮現 */
.sd-nav .is-menu-open .wp-block-navigation-item {
width: 100%;
text-align: center;
}
.sd-nav .is-menu-open .wp-block-navigation-item__content {
color: #fff !important;
font-family: var(--wp--preset--font-family--display);
font-size: 1.75rem;
font-weight: 600;
letter-spacing: 0.06em;
padding: 0.2rem 0;
}
.sd-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; } /* 關掉桌機底線效果 */
.sd-nav .is-menu-open .wp-block-navigation-item {
opacity: 0;
animation: sd-menu-item .5s cubic-bezier(.22,1,.36,1) forwards;
}
.sd-nav .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .06s; }
.sd-nav .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .12s; }
.sd-nav .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .18s; }
.sd-nav .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .24s; }
.sd-nav .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .30s; }
.sd-nav .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .36s; }
.sd-nav .is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: .42s; }
.sd-nav .is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: .48s; }
@keyframes sd-menu-item {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.sd-nav .is-menu-open .wp-block-navigation-item { animation: none; opacity: 1; }
}
/* ---------- Hero ---------- */
.sd-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--wp--preset--color--accent-700);
/* 上方留白避開固定 header，內容垂直置中於剩餘空間 */
padding-top: 104px;
padding-bottom: var(--wp--preset--spacing--50);
padding-left: 0;
padding-right: 0;
}
.sd-hero.wp-block-cover {
padding-top: 104px;
padding-bottom: var(--wp--preset--spacing--50);
padding-left: 0;
padding-right: 0;
}
.sd-hero.wp-block-cover .wp-block-cover__image-background {
z-index: 0;
object-position: right bottom;
transform-origin: right bottom;
animation: sd-hero-zoom 24s ease-in-out infinite alternate;
}
.sd-hero.wp-block-cover .wp-block-cover__background {
z-index: 1;
opacity: 0 !important;
}
.sd-hero.wp-block-cover .wp-block-cover__inner-container {
position: relative;
z-index: 4 !important;
width: 100%;
color: inherit;
}
/* 圖層 1：背景大圖 + Ken Burns（用偽元素鋪底，保證滿版、絕不露白） */
.sd-hero:not(.wp-block-cover)::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: var(--sd-img-hero) right bottom / cover no-repeat;
transform-origin: right bottom;
animation: sd-hero-zoom 24s ease-in-out infinite alternate;
}
.page-id-45 .sd-hero:not(.wp-block-cover)::before {
background-image: var(--sd-img-okinawa);
background-position: right bottom;
transform-origin: right bottom;
}
.page-slug-bali-honeymoon .sd-hero:not(.wp-block-cover)::before {
background-image: var(--sd-img-bali-honeymoon, var(--sd-img-hero));
background-position: center bottom;
transform-origin: center bottom;
}
/* 圖層 2：深色漸層遮罩（靜態，文字清楚） */
.sd-hero::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(180deg, rgba(16,58,63,0.45) 0%, rgba(16,58,63,0.10) 24%, rgba(16,58,63,0) 44%),
linear-gradient(100deg, rgba(16,58,63,0.74) 0%, rgba(16,58,63,0.48) 42%, rgba(16,58,63,0.10) 72%, rgba(16,58,63,0) 100%);
}
@keyframes sd-hero-zoom {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.sd-hero::before, .sd-hero .wp-block-cover__image-background { animation: none; }
}
/* 內容容器：與 header logo 同寬同邊界（1280 置中 + root padding），文字靠左 */
.sd-hero-inner {
position: relative;
z-index: 4;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--40));
padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--40));
text-align: left;
}
.sd-hero-inner > * { max-width: 640px; margin-left: 0; margin-right: 0; }
/* Eyebrow：英文襯線（Cormorant Garamond）+ 寬字距，精品調性 */
.sd-hero-eyebrow {
font-family: var(--wp--preset--font-family--display);
font-size: clamp(0.85rem, 0.78rem + 0.3vw, 1.2rem);
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #fff;
opacity: 0.92;
margin: 0 0 var(--wp--preset--spacing--30);
}
/* 主標題：與「四大核心」區段標題同字形（Display 襯線體） */
.sd-hero-title {
font-family: var(--wp--preset--font-family--display);
color: #fff;
font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem) !important;
font-weight: 700;
line-height: 1.28;
letter-spacing: 0.02em;
text-wrap: balance;
text-shadow: 0 2px 22px rgba(16,58,63,0.35);
margin: 0 0 var(--wp--preset--spacing--30);
}
/* 副標題：略細、行距放鬆，與主標形成層次；桌機維持一行 */
.sd-hero-subtitle {
color: #fff;
font-weight: 500;
font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.2rem);
line-height: 1.7;
letter-spacing: 0.03em;
text-shadow: 0 1px 12px rgba(16,58,63,0.3);
margin: 0 0 var(--wp--preset--spacing--40);
max-width: none;
white-space: nowrap;
}
/* 說明文：最低調的層級 */
.sd-hero-desc {
color: rgba(255,255,255,0.9);
font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
line-height: 1.85;
letter-spacing: 0.02em;
margin: 0;
max-width: 720px;
}
/* 「×」符號：細一點、留白，更精緻 */
.sd-hero-title .sd-x,
.sd-hero-eyebrow .sd-x { font-weight: 300; padding: 0 0.12em; opacity: 0.85; }
/* 信任感標語：CTA 下方，小字、勾選點 */
.sd-hero-trust {
display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
margin: var(--wp--preset--spacing--40) 0 0;
max-width: none;
color: rgba(255,255,255,0.9);
font-size: var(--wp--preset--font-size--xs);
letter-spacing: 0.03em;
}
.sd-hero-trust span { position: relative; padding-left: 1.4em; white-space: nowrap; }
.sd-hero-trust span::before {
content: "✓";
position: absolute; left: 0; top: 0;
color: #fff; font-weight: 700;
}
/* Hero 內動畫：交錯「淡入＋上升＋微模糊轉清晰」 */
.sd-hero-eyebrow, .sd-hero-title, .sd-hero-subtitle, .sd-hero-desc, .sd-hero-cta, .sd-hero-trust {
animation: sd-hero-rise .9s cubic-bezier(.22,1,.36,1) both;
}
.sd-hero-eyebrow { animation-delay: .10s; }
.sd-hero-title { animation-delay: .25s; }
.sd-hero-subtitle { animation-delay: .45s; }
.sd-hero-desc { animation-delay: .60s; }
.sd-hero-cta { animation-delay: .75s; }
.sd-hero-trust { animation-delay: .90s; }
@keyframes sd-hero-rise {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
/* 主標題內 × 的細緻浮現（最後輕輕點綴） */
.sd-hero-eyebrow .sd-x { display: inline-block; animation: sd-x-pop .6s ease .6s both; }
@keyframes sd-x-pop {
from { opacity: 0; transform: scale(.6) rotate(-12deg); }
to { opacity: .85; transform: scale(1) rotate(0); }
}
/* 尊重「減少動態」偏好 */
@media (prefers-reduced-motion: reduce) {
.sd-hero-eyebrow, .sd-hero-title, .sd-hero-subtitle, .sd-hero-desc, .sd-hero-cta, .sd-hero-trust,
.sd-hero-eyebrow .sd-x { animation: none; }
}
/* Hero CTA：outline-light（白框白字，在深圖上） */
.wp-block-button.is-style-outline-light .wp-block-button__link {
background: rgba(255,255,255,0.10); color: #fff;
border: 1.5px solid rgba(255,255,255,0.85);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
background: rgba(255,255,255,0.22); color: #fff;
}
@media (max-width: 781px) {
.sd-hero { min-height: 100svh; padding-top: 92px; padding-bottom: var(--wp--preset--spacing--60); }
.sd-hero.wp-block-cover { padding-top: 92px; padding-bottom: var(--wp--preset--spacing--60); }
.sd-hero::before, .sd-hero .wp-block-cover__image-background { animation: none; }
.sd-nav .wp-block-navigation__responsive-container.is-menu-open {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.sd-hero-eyebrow { letter-spacing: 0.18em; }
.sd-hero-subtitle { white-space: normal; }
.sd-hero-trust { gap: 0.4rem 1.1rem; }
}
/* ---------- 四大資訊卡（編號） ---------- */
/* RWD：平板 2 欄、手機 1 欄 */
@media (max-width: 900px) {
.sd-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
.sd-info-grid { grid-template-columns: 1fr !important; }
}
.sd-info-card { position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, background .35s ease; }
.sd-info-card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--card); }
/* hover 時卡片帶極淡 accent 漸層 */
.wp-block-group.sd-info-card.is-style-card:hover {
background: linear-gradient(180deg, #ffffff 0%, var(--wp--preset--color--accent-100) 100%);
}
/* hover 時頂部浮現一條 accent 線 */
.sd-info-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--wp--preset--color--accent);
transform: scaleX(0); transform-origin: left;
transition: transform .35s ease;
}
.sd-info-card:hover::before { transform: scaleX(1); }
/* 圖示 + 編號 同一列 */
.sd-info-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--wp--preset--spacing--40);
}
/* 圖示：accent-100 圓形底襯 */
.sd-info-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: 50%;
background: var(--wp--preset--color--accent-100);
color: var(--wp--preset--color--accent-700);
transition: background .35s ease;
}
.sd-info-icon svg { width: 30px; height: 30px; transition: transform .35s ease; }
.sd-info-card:hover .sd-info-icon { background: #fff; }
.sd-info-card:hover .sd-info-icon svg { transform: scale(1.08) rotate(-3deg); }
.sd-info-num {
font-family: var(--wp--preset--font-family--display);
font-size: 2.2rem; font-weight: 700; line-height: 1;
color: var(--wp--preset--color--accent);
opacity: .35;
}
/* 「了解更多」連結 */
.sd-info-more-wrap { margin-bottom: 0; }
.sd-info-more {
display: inline-flex; align-items: center; gap: 0.4em;
color: var(--wp--preset--color--accent-700);
font-size: var(--wp--preset--font-size--small);
font-weight: 600; letter-spacing: 0.02em;
}
.sd-info-more .sd-arrow { transition: transform .25s ease; display: inline-block; }
.sd-info-more:hover { color: var(--wp--preset--color--text); text-decoration: none; }
.sd-info-card:hover .sd-info-more .sd-arrow,
.sd-info-more:hover .sd-arrow { transform: translateX(4px); }
/* ---------- 動態短代碼區塊：滿版背景、內容對齊版心 ---------- */
.sd-dynamic-section > .alignwide,
.sd-dynamic-section .sd-card-grid.alignwide,
.sd-dynamic-section .sd-church-scroll.alignwide,
.sd-dynamic-section .wp-block-query.alignwide {
width: calc(100% - (var(--wp--style--root--padding-left, var(--wp--preset--spacing--40)) + var(--wp--style--root--padding-right, var(--wp--preset--spacing--40))));
max-width: var(--wp--style--global--wide-size, 1280px);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.sd-dynamic-section .wp-block-post-template {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--preset--spacing--50);
}
/* ---------- 熱門婚禮教堂：圓形卡片橫向滑動 ---------- */
.sd-church-scroll {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-top: var(--wp--preset--spacing--60);
padding: 0.5rem 0.25rem 1.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--wp--preset--color--accent) transparent;
}
.sd-church-scroll::-webkit-scrollbar { height: 6px; }
.sd-church-scroll::-webkit-scrollbar-track { background: var(--wp--preset--color--gray-100); border-radius: 999px; }
.sd-church-scroll::-webkit-scrollbar-thumb { background: var(--wp--preset--color--accent); border-radius: 999px; }
.sd-church-card {
flex: 0 0 calc((100% - 4.5rem) / 4); /* 一排 4 個 */
min-width: 200px;
scroll-snap-align: start;
text-align: center;
}
.sd-church-thumb {
display: block;
width: 100%;
max-width: 220px;
margin: 0 auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
box-shadow: var(--wp--preset--shadow--card);
}
.sd-church-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sd-church-card:hover .sd-church-thumb img { transform: scale(1.06); }
.sd-church-country {
margin: var(--wp--preset--spacing--40) 0 0;
font-size: var(--wp--preset--font-size--xs);
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--wp--preset--color--accent-700);
}
.sd-church-name {
margin: 0.35rem 0 0;
font-size: var(--wp--preset--font-size--large);
font-weight: 600; line-height: 1.35;
color: var(--wp--preset--color--text);
}
.sd-church-en {
display: block;
margin-top: 3px;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--small);
font-weight: 500; font-style: italic; letter-spacing: 0.02em;
color: var(--wp--preset--color--gray);
}
.sd-church-more {
display: inline-flex; align-items: center; gap: 0.35em;
margin-top: var(--wp--preset--spacing--30);
color: var(--wp--preset--color--accent-700);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
}
.sd-church-more .sd-arrow { display: inline-block; transition: transform .25s ease; }
.sd-church-more:hover { color: var(--wp--preset--color--text); text-decoration: none; }
.sd-church-card:hover .sd-church-more .sd-arrow,
.sd-church-more:hover .sd-arrow { transform: translateX(4px); }
@media (max-width: 900px) {
.sd-church-card { flex-basis: calc((100% - 1.5rem) / 2); } /* 平板半屏看約 2 個 */
.sd-dynamic-section .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
.sd-church-card { flex-basis: 72%; } /* 手機一次看約 1.3 個，提示可滑動 */
.sd-dynamic-section .wp-block-post-template { grid-template-columns: 1fr !important; }
}
/* ---------- 教堂列表頁：篩選列 + 搜尋 ---------- */
.sd-church-archive { background: var(--wp--preset--color--background); }
.sd-filter-bar {
display: flex;
flex-direction: column;
gap: 1rem;
padding: var(--wp--preset--spacing--50);
background: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 18px;
box-shadow: var(--wp--preset--shadow--soft);
}
.sd-filter-search { display: flex; gap: 0.5rem; }
.sd-filter-search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
padding: 0.7rem 1rem;
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 999px;
font-size: var(--wp--preset--font-size--small);
background: var(--wp--preset--color--background);
transition: border-color .2s ease, box-shadow .2s ease;
}
.sd-filter-search input[type="search"]:focus {
outline: none;
border-color: var(--wp--preset--color--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
}
.sd-filter-search button {
flex: 0 0 auto;
padding: 0.7rem 1.4rem;
border: none;
border-radius: 999px;
background: var(--wp--preset--color--accent);
color: #fff;
font-weight: 600;
font-size: var(--wp--preset--font-size--small);
cursor: pointer;
transition: background .2s ease;
}
.sd-filter-search button:hover { background: var(--wp--preset--color--accent-700); }
.sd-filter-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.sd-filter-label {
flex: 0 0 auto;
font-size: var(--wp--preset--font-size--xs);
font-weight: 700; letter-spacing: 0.08em;
color: var(--wp--preset--color--gray);
padding-top: 0.45rem;
}
.sd-filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sd-filter-chip {
display: inline-flex; align-items: center; gap: 0.4em;
padding: 0.4rem 0.9rem;
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 999px;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--text);
background: var(--wp--preset--color--background);
transition: all .2s ease;
text-decoration: none;
}
.sd-filter-chip:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-700); text-decoration: none; }
.sd-filter-chip.is-active {
background: var(--wp--preset--color--accent);
border-color: var(--wp--preset--color--accent);
color: #fff;
}
.sd-filter-count { font-size: 0.72em; opacity: 0.7; }
.sd-filter-chip.is-active .sd-filter-count { opacity: 0.85; }
.sd-filter-more { width: 100%; }
.sd-filter-more > summary {
display: inline-flex; align-items: center; gap: 0.3em;
cursor: pointer;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--accent-700);
font-weight: 600;
margin-bottom: 0.5rem;
list-style: none;
}
.sd-filter-more > summary::-webkit-details-marker { display: none; }
.sd-filter-more > summary::after { content: "▾"; }
.sd-filter-more[open] > summary::after { content: "▴"; }
.sd-filter-result {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
margin-top: var(--wp--preset--spacing--50);
}
.sd-filter-count-text { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--gray); }
.sd-filter-count-text strong { color: var(--wp--preset--color--text); font-size: 1.1em; }
.sd-filter-crumbs { color: var(--wp--preset--color--accent-700); }
.sd-filter-clear {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--gray);
text-decoration: none;
}
.sd-filter-clear:hover { color: var(--wp--preset--color--accent-700); }
/* 教堂卡片（沿用 sd-dest-card，補強標籤/英文名/價格） */
.sd-church-grid { margin-top: var(--wp--preset--spacing--40); }
.sd-church-item-en {
margin: 2px 0 0;
font-family: var(--wp--preset--font-family--display);
font-style: italic; letter-spacing: 0.02em;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--gray);
}
.sd-church-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--wp--preset--spacing--30); }
.sd-church-tag {
font-size: var(--wp--preset--font-size--xs);
padding: 0.2rem 0.6rem;
border-radius: 999px;
background: var(--wp--preset--color--accent-soft, #eafaf9);
color: var(--wp--preset--color--accent-700);
text-decoration: none;
transition: background .2s ease;
}
.sd-church-tag:hover { background: var(--wp--preset--color--accent); color: #fff; text-decoration: none; }
.sd-church-item-price {
margin: var(--wp--preset--spacing--30) 0 0;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
color: var(--wp--preset--color--text);
}
.sd-church-empty { text-align: center; padding: var(--wp--preset--spacing--70) 0; color: var(--wp--preset--color--gray); }
.sd-church-empty p { margin: 0 0 var(--wp--preset--spacing--40); }
/* 分頁 */
.sd-church-pagination { margin-top: var(--wp--preset--spacing--60); }
.sd-church-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.sd-church-pagination a,
.sd-church-pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem;
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 999px;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--text);
text-decoration: none;
transition: all .2s ease;
}
.sd-church-pagination a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-700); }
.sd-church-pagination .current {
background: var(--wp--preset--color--accent);
border-color: var(--wp--preset--color--accent);
color: #fff;
}
.sd-church-pagination .dots { border: none; }
@media (max-width: 600px) {
.sd-filter-bar { padding: var(--wp--preset--spacing--40); }
.sd-filter-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.sd-filter-label { padding-top: 0; }
}
/* ---------- 教堂列表頁：精簡 hero + 桌機左側篩選兩欄 ---------- */
/* 注意：class 用 sd-church-archive-hero，勿用 sd-church-hero（後者是教堂「單頁」滿版 Hero） */
.sd-church-archive-hero { text-align: center; margin-bottom: var(--wp--preset--spacing--50); }
.sd-church-archive-hero .is-style-eyebrow { margin: 0 0 0.4rem; }
.sd-church-archive-title {
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
line-height: 1.2;
font-weight: 600;
color: var(--wp--preset--color--text);
text-wrap: balance;
}
.sd-church-archive-count { margin: 0.5rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--gray); }
.sd-church-archive-count strong { color: var(--wp--preset--color--accent-700); }
.sd-church-layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: var(--wp--preset--spacing--60);
align-items: start;
}
.sd-church-sidebar { position: sticky; top: 100px; }
/* 側欄篩選表單卡片 */
.sd-filter-form {
display: flex; flex-direction: column; gap: 1.1rem;
padding: var(--wp--preset--spacing--40);
background: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 16px;
box-shadow: var(--wp--preset--shadow--soft);
}
/* 側欄內：篩選列改直式、chips 直排滿寬 */
.sd-church-sidebar .sd-filter-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.sd-church-sidebar .sd-filter-label { padding-top: 0; margin-bottom: 0.1rem; }
.sd-church-sidebar .sd-filter-chips { flex-direction: column; gap: 0.3rem; }
.sd-church-sidebar .sd-filter-chip { justify-content: space-between; }
.sd-church-sidebar .sd-filter-more { width: 100%; }
.sd-church-sidebar .sd-filter-clear { display: inline-block; margin-top: 0.25rem; }
/* details 收合：桌機隱藏 summary（恆展開），手機顯示為切換鈕 */
.sd-church-filter > summary { display: none; }
/* 結果欄：有側欄時 2 欄網格 */
.sd-church-results .sd-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.sd-church-results .sd-church-pagination { margin-top: var(--wp--preset--spacing--60); }
.sd-church-results .sd-church-empty { padding: var(--wp--preset--spacing--60) 0; }
@media (max-width: 1100px) {
.sd-church-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--wp--preset--spacing--50); }
}
@media (max-width: 900px) {
.sd-church-layout { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
.sd-church-sidebar { position: static; }
.sd-church-filter > summary {
display: inline-flex; align-items: center; gap: 0.4em;
cursor: pointer; list-style: none;
padding: 0.7rem 1.2rem;
border: 1px solid var(--wp--preset--color--accent);
border-radius: 999px;
font-weight: 600; font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--accent-700);
background: var(--wp--preset--color--primary);
}
.sd-church-filter > summary::-webkit-details-marker { display: none; }
.sd-church-filter > summary::after { content: "▾"; }
.sd-church-filter[open] > summary { margin-bottom: 0.8rem; }
.sd-church-filter[open] > summary::after { content: "▴"; }
}
@media (max-width: 600px) {
.sd-church-results .sd-card-grid { grid-template-columns: 1fr; }
}
/* ---------- 地區主題頁：依婚禮類型分排的熱門教堂 ---------- */
.sd-church-cat-row { margin-top: var(--wp--preset--spacing--60); }
.sd-church-cat-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--wp--preset--color--gray-200, var(--wp--preset--color--gray-300));
}
.sd-church-cat-title {
margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: 600;
color: var(--wp--preset--color--text);
}
.sd-church-cat-count {
margin-left: 0.4em; font-size: 0.7em; font-weight: 500;
color: var(--wp--preset--color--accent-700);
}
.sd-church-cat-more {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 0.35em;
font-size: var(--wp--preset--font-size--small); font-weight: 600;
color: var(--wp--preset--color--accent-700); text-decoration: none;
}
.sd-church-cat-more .sd-arrow { transition: transform .25s ease; }
.sd-church-cat-more:hover { color: var(--wp--preset--color--text); }
.sd-church-cat-more:hover .sd-arrow { transform: translateX(4px); }
.sd-church-cat-row .sd-church-scroll { margin-top: var(--wp--preset--spacing--40); }
/* ---------- 目的地 / 蜜月：橫式卡片網格（CPT 動態） ---------- */
.sd-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wp--preset--spacing--50);
margin-top: var(--wp--preset--spacing--60);
}
/* 卡片在 grid 內，清掉 is-layout-flow 對第 2 張以後子層加的 margin-block-start（卡片間距由 grid gap 負責），避免第 2、3 張往下偏移 */
.sd-card-grid > * { margin-top: 0; margin-block-start: 0; }
.sd-dest-card {
background: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 18px;
overflow: hidden;
box-shadow: var(--wp--preset--shadow--soft);
transition: transform .3s ease, box-shadow .3s ease;
}
.sd-dest-card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--card); }
.sd-dest-thumb { background: var(--wp--preset--color--gray-100); }
/* 縮圖框固定 4:3，圖片用絕對定位鋪滿 → 不依賴 ![]()
自身尺寸、 包層、
size-full/size-large 或後台換圖，永遠等高不破版（避免 core .wp-block-image img 撐高） */
.sd-dest-card .sd-dest-thumb {
position: relative;
display: block;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.sd-dest-card .sd-dest-thumb a { position: absolute; inset: 0; display: block; }
.sd-dest-card .sd-dest-thumb img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none;
object-fit: cover;
transition: transform .5s ease;
}
.sd-dest-card:hover .sd-dest-thumb img { transform: scale(1.05); }
.sd-dest-body { padding: var(--wp--preset--spacing--40); }
.sd-card-en {
margin: 0; font-size: var(--wp--preset--font-size--xs);
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--wp--preset--color--gray);
}
.sd-card-title { margin: 4px 0 0; font-size: var(--wp--preset--font-size--large); line-height: 1.4; font-weight: 600; }
.sd-card-title a { color: var(--wp--preset--color--text); }
.sd-card-title a:hover { color: var(--wp--preset--color--accent-700); }
.sd-card-desc {
margin: var(--wp--preset--spacing--30) 0 0;
font-size: var(--wp--preset--font-size--small); line-height: 1.8;
color: var(--wp--preset--color--gray);
}
@media (max-width: 900px) { .sd-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sd-card-grid { grid-template-columns: 1fr; } }
/* ---------- 教堂單頁：桌機主視覺 ---------- */
.sd-church-single {
background:
linear-gradient(180deg, var(--wp--preset--color--background) 0%, #ffffff 58%, var(--wp--preset--color--background) 100%);
}
.sd-church-hero {
position: relative;
width: 100vw;
max-width: none !important;
margin-top: 0;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 104px;
padding-bottom: var(--wp--preset--spacing--50);
border-radius: 0;
overflow: hidden;
box-shadow: none;
background: var(--wp--preset--color--accent-700);
}
main.sd-church-single > .sd-church-hero.alignfull {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
.sd-church-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(16,58,63,0.45) 0%, rgba(16,58,63,0.10) 24%, rgba(16,58,63,0) 44%),
linear-gradient(100deg, rgba(16,58,63,0.76) 0%, rgba(16,58,63,0.50) 42%, rgba(16,58,63,0.12) 72%, rgba(16,58,63,0) 100%);
pointer-events: none;
z-index: 1;
}
.sd-church-hero-image {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
width: 100%;
height: 100%;
max-width: none !important;
min-height: 100%;
}
.sd-church-hero-image img {
display: block;
width: 100%;
height: 100%;
min-height: 100vh;
object-fit: cover;
transform-origin: right bottom;
animation: sd-hero-zoom 24s ease-in-out infinite alternate;
}
.sd-church-hero-copy {
position: relative;
left: auto;
bottom: auto;
z-index: 4;
width: 100%;
max-width: 1280px !important;
margin: 0 auto;
padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--40));
padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--40));
background: transparent;
color: #fff;
}
.sd-church-hero-copy > * {
max-width: 640px;
margin-left: 0 !important;
margin-right: 0 !important;
}
.sd-church-hero-copy .taxonomy-country {
display: none;
}
.sd-church-hero-copy .taxonomy-country a {
color: inherit !important;
text-decoration: none;
}
.sd-church-hero-kicker {
font-family: var(--wp--preset--font-family--display);
margin: 0 0 var(--wp--preset--spacing--30);
font-size: clamp(0.78rem, 0.72rem + 0.25vw, 1rem);
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #fff !important;
opacity: 0.92;
}
.sd-church-hero-copy .wp-block-post-title {
font-family: var(--wp--preset--font-family--display);
margin: 0;
color: #fff;
font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem) !important;
font-weight: 700;
line-height: 1.28;
letter-spacing: 0.02em;
text-shadow: 0 2px 22px rgba(16,58,63,0.35);
text-wrap: balance;
}
.sd-church-hero-excerpt {
max-width: 720px;
margin-top: var(--wp--preset--spacing--40);
color: rgba(255,255,255,0.9);
font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
line-height: 1.85;
letter-spacing: 0.02em;
}
.sd-church-hero-excerpt p { margin: 0; }
.sd-church-hero-actions {
margin-top: var(--wp--preset--spacing--50);
gap: 1rem;
}
.sd-church-hero-actions .is-style-ghost .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.85);
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.sd-church-hero-actions .is-style-ghost .wp-block-button__link:hover {
background: #fff;
color: var(--wp--preset--color--accent-700);
}
.sd-church-hero-kicker,
.sd-church-hero-copy .wp-block-post-title,
.sd-church-hero-excerpt,
.sd-church-hero-actions {
animation: sd-hero-rise .9s cubic-bezier(.22,1,.36,1) both;
}
.sd-church-hero-kicker { animation-delay: .10s; }
.sd-church-hero-copy .wp-block-post-title { animation-delay: .25s; }
.sd-church-hero-excerpt { animation-delay: .40s; }
.sd-church-hero-actions { animation-delay: .55s; }
@media (prefers-reduced-motion: reduce) {
.sd-church-hero-image img,
.sd-church-hero-kicker,
.sd-church-hero-copy .wp-block-post-title,
.sd-church-hero-excerpt,
.sd-church-hero-actions {
animation: none;
}
}
.sd-church-content { position: relative; }
.sd-church-content > .wp-block-column:first-child { max-width: 780px; }
.sd-church-content .wp-block-column:first-child > .wp-block-post-content > *:first-child { margin-top: 0; }
.sd-church-body {
background: var(--wp--preset--color--background);
}
.sd-church-body > .wp-block-post-content {
margin-block-start: 0;
}
.sd-church-body > .wp-block-post-content > *:first-child {
margin-top: 0;
}
.sd-church-section {
padding-top: var(--wp--preset--spacing--70);
padding-bottom: var(--wp--preset--spacing--70);
}
.sd-church-section + .sd-church-section {
margin-block-start: 0;
}
.sd-church-section.is-soft {
background: linear-gradient(180deg, #ffffff 0%, var(--wp--preset--color--accent-100) 100%);
}
.sd-church-section.is-white {
background: #fff;
}
.sd-church-section > .wp-block-group,
.sd-church-section > .wp-block-columns {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
}
.sd-church-lead {
max-width: 760px;
}
.sd-church-feature-list {
display: grid;
gap: 0.85rem;
list-style: none;
margin: var(--wp--preset--spacing--40) 0 0;
padding: 0;
}
.sd-church-feature-list li {
position: relative;
padding: 1rem 1rem 1rem 3rem;
border: 1px solid rgba(79,184,180,0.24);
border-radius: 8px;
background: rgba(255,255,255,0.78);
color: var(--wp--preset--color--text);
line-height: 1.75;
}
.sd-church-feature-list li::before {
content: "";
position: absolute;
left: 1rem;
top: 1.22rem;
width: 0.85rem;
height: 0.85rem;
border-radius: 50%;
background: var(--wp--preset--color--accent);
box-shadow: 0 0 0 5px rgba(120,215,212,0.18);
}
.sd-church-photo-panel {
position: relative;
margin: 0;
}
.sd-church-photo-panel img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px;
box-shadow: var(--wp--preset--shadow--card);
}
.sd-church-photo-panel figcaption {
margin-top: 0.75rem;
color: var(--wp--preset--color--gray);
font-size: var(--wp--preset--font-size--xs);
line-height: 1.7;
}
.sd-church-gallery.wp-block-gallery.has-nested-images {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
align-items: stretch;
}
.sd-church-gallery.wp-block-gallery.has-nested-images figure.wp-block-image {
display: block !important;
width: 100% !important;
margin: 0 !important;
}
.sd-church-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(3) {
grid-column: 1 / -1;
}
.sd-church-gallery.wp-block-gallery.has-nested-images img {
display: block;
width: 100% !important;
height: 100% !important;
min-height: 260px;
object-fit: cover;
}
.sd-package-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: var(--wp--preset--spacing--50);
}
.sd-package-card {
height: 100%;
padding: var(--wp--preset--spacing--50);
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 8px;
background: #fff;
box-shadow: var(--wp--preset--shadow--soft);
}
.sd-package-card h3 {
margin: 0 0 var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--large);
}
.sd-package-card ul {
margin: 0;
padding: 0;
list-style: none;
}
.sd-package-card li {
position: relative;
padding-left: 1.35rem;
line-height: 1.9;
color: var(--wp--preset--color--gray);
}
.sd-package-card li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--wp--preset--color--accent-700);
font-weight: 700;
}
.sd-church-cta-band {
border-radius: 8px;
background: linear-gradient(120deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--accent-700) 100%);
color: #fff;
}
.sd-church-cta-band .wp-block-heading,
.sd-church-cta-band p {
color: #fff !important;
}
/* ---------- 蜜月單頁：明細（天數／價格／亮點／每日行程／相簿） ---------- */
.sd-hm-detail {
background: linear-gradient(180deg, var(--wp--preset--color--background) 0%, #ffffff 60%, var(--wp--preset--color--background) 100%);
padding: var(--wp--preset--spacing--70) clamp(1.25rem, 5vw, 4rem);
}
.sd-hm-detail-inner {
max-width: 980px;
margin: 0 auto;
}
.sd-hm-section-label {
margin: 0 0 var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-700);
}
/* 天數／價格 */
.sd-hm-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: var(--wp--preset--spacing--60);
}
.sd-hm-meta-item {
flex: 1 1 200px;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: var(--wp--preset--spacing--50);
border: 1px solid rgba(79,184,180,0.24);
border-radius: 12px;
background: rgba(255,255,255,0.85);
}
.sd-hm-meta-label {
font-size: var(--wp--preset--font-size--xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--gray);
}
.sd-hm-meta-value {
font-family: var(--wp--preset--font-family--display, serif);
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.2;
color: var(--wp--preset--color--text);
}
/* 亮點 */
.sd-hm-highlights { margin-bottom: var(--wp--preset--spacing--60); }
.sd-hm-highlight-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.sd-hm-highlight-list li {
position: relative;
padding-left: 1.85rem;
line-height: 1.8;
color: var(--wp--preset--color--text);
}
.sd-hm-highlight-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--wp--preset--color--accent);
box-shadow: 0 0 0 4px rgba(120,215,212,0.18);
}
/* 每日行程時間軸 */
.sd-hm-itinerary { margin-bottom: var(--wp--preset--spacing--60); }
.sd-hm-timeline {
margin: 0;
padding: 0;
list-style: none;
}
.sd-hm-day {
position: relative;
display: grid;
grid-template-columns: 96px 1fr;
gap: 1.5rem;
padding: 0 0 var(--wp--preset--spacing--50) 0;
}
.sd-hm-day::before {
content: "";
position: absolute;
left: 47px;
top: 2.4rem;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--wp--preset--color--accent) 0%, rgba(120,215,212,0.2) 100%);
}
.sd-hm-day:last-child::before { display: none; }
.sd-hm-day-num {
position: relative;
z-index: 1;
align-self: start;
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px;
height: 2.4rem;
border-radius: 999px;
background: var(--wp--preset--color--accent-700);
color: #fff;
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.06em;
}
.sd-hm-day-title {
margin: 0.2rem 0 0.5rem;
font-size: var(--wp--preset--font-size--large);
line-height: 1.4;
}
.sd-hm-day-desc {
margin: 0;
color: var(--wp--preset--color--gray);
line-height: 1.85;
}
/* 餐食：凸顯成藍綠標籤條 */
.sd-hm-meal {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 0.6rem;
margin: 0.7rem 0 0;
padding: 0.55rem 0.9rem;
background: rgba(120, 215, 212, 0.12);
border-left: 3px solid var(--wp--preset--color--accent);
border-radius: 8px;
font-size: var(--wp--preset--font-size--small);
line-height: 1.7;
color: var(--wp--preset--color--text);
}
.sd-hm-meal-label {
flex: none;
font-weight: 700;
color: var(--wp--preset--color--accent-700);
}
.sd-hm-meal-label::before { content: "🍴"; margin-right: 0.3rem; }
/* 行程特點：圖文左右交替（內文可編輯） */
.sd-hm-features { margin-top: var(--wp--preset--spacing--40); }
.sd-hm-feature-rows {
display: grid;
gap: clamp(2.25rem, 5vw, 4.5rem);
margin-top: var(--wp--preset--spacing--60);
}
.sd-hm-feature-row {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(1.5rem, 4vw, 3.75rem);
align-items: center;
}
.sd-hm-feature-media { margin: 0; }
.sd-hm-feature-img { margin: 0; }
.sd-hm-feature-img img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--wp--preset--shadow--card);
}
/* 偶數列：圖片移到右邊、文字移到左邊 */
.sd-hm-feature-row:nth-child(even) .sd-hm-feature-media { grid-column: 2; }
.sd-hm-feature-row:nth-child(even) .sd-hm-feature-text { grid-column: 1; grid-row: 1; }
.sd-hm-feature-eyebrow {
margin: 0 0 0.6rem;
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-700);
}
.sd-hm-feature-title {
margin: 0 0 0.8rem;
font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
line-height: 1.35;
font-weight: 700;
}
.sd-hm-feature-desc {
margin: 0;
color: var(--wp--preset--color--gray);
line-height: 1.95;
}
.sd-hm-feature-title a { color: inherit; text-decoration: none; }
.sd-hm-feature-title a:hover { color: var(--wp--preset--color--accent-700); }
.sd-hm-feature-img a { display: block; }
.sd-hm-feature-link { margin: 1.1rem 0 0; }
.sd-hm-feature-link a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 600;
color: var(--wp--preset--color--accent-700);
text-decoration: none;
}
.sd-hm-feature-link a:hover { color: var(--wp--preset--color--text); }
@media (max-width: 820px) {
.sd-hm-feature-row { grid-template-columns: 1fr; gap: 1.1rem; }
.sd-hm-feature-row:nth-child(even) .sd-hm-feature-media { grid-column: 1; }
.sd-hm-feature-row:nth-child(even) .sd-hm-feature-text { grid-column: 1; grid-row: auto; }
}
/* 相簿 */
.sd-hm-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
}
.sd-hm-gallery-item {
margin: 0;
overflow: hidden;
border-radius: 10px;
}
.sd-hm-gallery-item img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.5s ease;
}
.sd-hm-gallery-item:hover img { transform: scale(1.05); }
@media (max-width: 700px) {
.sd-hm-highlight-list { grid-template-columns: 1fr; }
.sd-hm-day { grid-template-columns: 72px 1fr; gap: 1rem; }
.sd-hm-day::before { left: 35px; }
.sd-hm-day-num { width: 72px; }
.sd-hm-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
.sd-church-hero {
margin-top: 0;
width: 100vw;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: 100svh;
display: flex;
align-items: center;
padding-top: 92px;
padding-bottom: var(--wp--preset--spacing--60);
border-radius: 0;
box-shadow: none;
background: var(--wp--preset--color--accent-700);
}
.sd-church-hero::after { display: block; }
.sd-church-hero-image,
.sd-church-hero-image img { min-height: 100%; }
.sd-church-hero-image img { animation: none; }
.sd-church-hero-image img {
border-radius: 0;
}
.sd-church-hero-copy {
position: relative;
width: 100%;
max-width: 1280px !important;
padding: 0 var(--wp--style--root--padding-left, var(--wp--preset--spacing--40));
color: #fff;
background: transparent;
}
.sd-church-hero-copy .wp-block-post-title {
color: #fff;
font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem) !important;
}
.sd-church-hero-copy .taxonomy-country,
.sd-church-hero-kicker,
.sd-church-hero-excerpt {
color: rgba(255,255,255,0.9) !important;
}
.sd-church-hero-actions .is-style-ghost .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.85);
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.sd-church-hero-actions .wp-block-button.is-style-ghost .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.85);
color: #fff;
background: rgba(255, 255, 255, 0.08);
padding-left: 2rem;
padding-right: 2rem;
}
}
/* ---------- Buttons: Block Styles ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent; color: var(--wp--preset--color--text);
border: 1.5px solid var(--wp--preset--color--text);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--wp--preset--color--text); color: #fff;
}
.wp-block-button.is-style-ghost .wp-block-button__link {
background: transparent; color: var(--wp--preset--color--accent-700);
padding-left: 0; padding-right: 0; font-weight: 600;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { color: var(--wp--preset--color--text); }
.wp-block-button.is-style-accent .wp-block-button__link {
background: var(--wp--preset--color--accent); color: var(--wp--preset--color--text);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
background: var(--wp--preset--color--accent-700); color: #fff;
}
.sd-church-hero-actions .wp-block-button.is-style-ghost .wp-block-button__link {
border: 1.5px solid rgba(255, 255, 255, 0.85);
color: #fff;
background: rgba(255, 255, 255, 0.08);
padding-left: 1.4rem;
padding-right: 1.4rem;
}
.sd-church-hero-actions .wp-block-button.is-style-ghost .wp-block-button__link:hover {
background: #fff;
color: var(--wp--preset--color--accent-700);
}
@media (max-width: 781px) {
.sd-church-hero-actions .wp-block-button.is-style-ghost .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.85);
color: #fff;
background: rgba(255, 255, 255, 0.08);
padding-left: 1.4rem;
padding-right: 1.4rem;
}
.sd-church-section {
padding-top: var(--wp--preset--spacing--60);
padding-bottom: var(--wp--preset--spacing--60);
}
.sd-package-grid {
grid-template-columns: 1fr;
}
.sd-package-card {
padding: var(--wp--preset--spacing--40);
}
}
/* 白底按鈕（深色 / 藍綠底上使用） */
.wp-block-button.is-style-light .wp-block-button__link {
background: #fff; color: var(--wp--preset--color--accent-700);
}
.wp-block-button.is-style-light .wp-block-button__link:hover {
background: var(--wp--preset--color--text); color: #fff;
}
/* ---------- CTA：品牌藍綠漸層 ---------- */
.sd-cta {
background: linear-gradient(120deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--accent-700) 100%);
}
.sd-cta .sd-cta-sub { opacity: 0.95; }
/* ---------- Heading Block Styles ---------- */
.is-style-eyebrow { font-size: var(--wp--preset--font-size--xs) !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.is-style-display { font-family: var(--wp--preset--font-family--display) !important; font-weight: 600; letter-spacing: 0; }
/* 區段主標題（h2）：精煉、適中尺寸 */
h2.wp-block-heading.is-style-display { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem) !important; line-height: 1.3; }
/* 分類／彙整／搜尋頁標題（h1）統一字級：query-title 與自訂 archive 標題共用 */
.wp-block-query-title,
h1.sd-archive-title,
.wp-block-query-title.is-style-display {
font-size: clamp(2.6rem, 1.9rem + 3vw, 4rem) !important;
line-height: 1.14;
text-wrap: balance;
}
/* 數字統計：放大、藍綠、進場 + 跳動 */
.sd-stat-num {
color: var(--wp--preset--color--accent-700) !important;
font-size: clamp(2.8rem, 2rem + 3.2vw, 4.25rem) !important;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
}
.sd-stats .wp-block-column { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.sd-stats.is-in-view .wp-block-column { opacity: 1; transform: translateY(0); }
.sd-stats.is-in-view .wp-block-column:nth-child(2) { transition-delay: .12s; }
.sd-stats.is-in-view .wp-block-column:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
.sd-stats .wp-block-column { opacity: 1; transform: none; transition: none; }
}
/* 錨點捲動偏移：避免被固定 header 蓋住 */
#services { scroll-margin-top: 96px; }
/* ---------- Group Block Styles: Card / Section ---------- */
.wp-block-group.is-style-card { background: var(--wp--preset--color--primary); border: 1px solid var(--wp--preset--color--gray-300); box-shadow: var(--wp--preset--shadow--soft); }
.wp-block-group.is-style-card-hover { background: var(--wp--preset--color--primary); border: 1px solid var(--wp--preset--color--gray-300); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.wp-block-group.is-style-card-hover:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--card); }
.wp-block-group.is-style-card-hover img { transition: transform .5s ease; }
.wp-block-group.is-style-card-hover:hover img { transform: scale(1.04); }
.wp-block-group.is-style-soft-section { background: var(--wp--preset--color--secondary); }
/* ---------- Image Block Styles ---------- */
.wp-block-image.is-style-rounded-lg img { border-radius: 24px; }
.wp-block-image.is-style-frame img { border-radius: 16px; outline: 1px solid var(--wp--preset--color--gray-300); outline-offset: 10px; }
/* ---------- Separator ---------- */
.wp-block-separator.is-style-short { width: 48px; border: none; border-top: 2px solid var(--wp--preset--color--accent); opacity: 1; margin-left: 0; }
/* ---------- Check list ---------- */
.sd-check-list { list-style: none; padding-left: 0; }
.sd-check-list li { position: relative; padding-left: 1.6em; margin-bottom: .55em; }
.sd-check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--wp--preset--color--accent-700); font-weight: 700; }
.wp-block-list.is-style-check { list-style: none; padding-left: 0; }
.wp-block-list.is-style-check li { position: relative; padding-left: 1.6em; }
.wp-block-list.is-style-check li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--accent-700); font-weight: 700; }
/* ---------- Footer ---------- */
/* Footer：文字一律白色（連結、清單、段落） */
.sd-footer,
.sd-footer p,
.sd-footer li,
.sd-footer a:where(:not(.wp-element-button)) { color: #ffffff !important; text-decoration: none; }
.sd-footer a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--accent) !important; }
.sd-footer-list { list-style: none; padding-left: 0; line-height: 2.1; font-size: var(--wp--preset--font-size--small); }
.sd-footer-grid { align-items: flex-start !important; }
.sd-footer .is-style-eyebrow {
margin-bottom: var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--xs);
letter-spacing: .14em;
}
.sd-footer-hours {
margin: 0 0 var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--large);
line-height: 1.45;
font-weight: 600;
}
.sd-footer-hours strong {
color: var(--wp--preset--color--accent);
font-size: clamp(1.75rem, 3vw, 2.45rem);
letter-spacing: .02em;
line-height: 1.1;
}
.sd-footer-social { margin-top: var(--wp--preset--spacing--40) !important; }
.sd-footer-store {
padding: var(--wp--preset--spacing--50);
border: 1px solid rgba(255,255,255,.16);
border-radius: 14px;
background: rgba(255,255,255,.045);
min-height: 100%;
}
.sd-footer-store-col { display: flex; }
.sd-footer-store h4 {
margin: 0 0 var(--wp--preset--spacing--30);
color: var(--wp--preset--color--accent) !important;
font-size: var(--wp--preset--font-size--large);
}
.sd-footer-store p {
margin: 0;
color: rgba(255,255,255,.86) !important;
line-height: 1.9;
}
/* CTA：藍綠底上的標題與說明強制白字（避免被快取/全域樣式蓋掉） */
.sd-cta .wp-block-heading,
.sd-cta .sd-cta-sub { color: #ffffff !important; }
/* ---------- Accordion (FAQ) ---------- */
.sd-accordion summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sd-accordion summary::-webkit-details-marker { display: none; }
.sd-accordion summary::after { content: "+"; color: var(--wp--preset--color--accent-700); font-size: 1.4rem; line-height: 1; transition: transform .25s ease; }
.sd-accordion[open] summary::after { transform: rotate(45deg); }
/* ---------- Yoast FAQ ---------- */
/* 同時命中首頁 pattern（.sd-yoast-faq 包裝）與文章內嵌的原生 Yoast 區塊（.wp-block-yoast-faq-block） */
.sd-yoast-faq,
.wp-block-yoast-faq-block {
display: grid;
gap: var(--wp--preset--spacing--30);
}
.sd-yoast-faq .schema-faq-section,
.wp-block-yoast-faq-block .schema-faq-section {
background: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 14px;
padding: var(--wp--preset--spacing--40);
transition: border-color .2s ease, box-shadow .2s ease;
}
.sd-yoast-faq .schema-faq-question,
.wp-block-yoast-faq-block .schema-faq-question {
display: block;
color: var(--wp--preset--color--text);
font-size: var(--wp--preset--font-size--large);
font-weight: 600;
line-height: 1.6;
}
.sd-yoast-faq .schema-faq-answer,
.wp-block-yoast-faq-block .schema-faq-answer {
color: var(--wp--preset--color--gray);
margin-top: var(--wp--preset--spacing--30);
margin-bottom: 0;
line-height: 1.8;
}
/* 可折疊（漸進增強）：只有 JS 加上 .sd-faq-collapsible 後才收合，無 JS 時答案維持全展開 */
.sd-faq-collapsible .schema-faq-question {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
outline: none;
}
.sd-faq-collapsible .schema-faq-question::after {
content: "+";
flex: 0 0 auto;
color: var(--wp--preset--color--accent-700);
font-size: 1.5rem;
font-weight: 400;
line-height: 1;
transition: transform .25s ease;
}
.sd-faq-collapsible .schema-faq-section.is-open .schema-faq-question::after {
transform: rotate(45deg);
}
.sd-faq-collapsible .schema-faq-section:hover {
border-color: var(--wp--preset--color--accent-700);
}
.sd-faq-collapsible .schema-faq-question:focus-visible {
color: var(--wp--preset--color--accent-700);
}
.sd-faq-collapsible .schema-faq-answer {
overflow: hidden;
max-height: 0;
margin-top: 0;
opacity: 0;
transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.sd-faq-collapsible .schema-faq-section.is-open .schema-faq-answer {
max-height: 60rem;
margin-top: var(--wp--preset--spacing--30);
opacity: 1;
}
/* ---------- 文章內文排版節奏（single / page 的 post-content） ---------- */
/* ⚠️ 只作用於 post-content 的「直接子層」（> h2 …）。首頁 front-page.html 也把所有 pattern
包在 wp:post-content 裡，但 Hero/各區段標題是巢狀在 pattern group 內、非直接子層，
故用子組合器 `>` 可避免汙染首頁（如把 .sd-hero-subtitle 的 margin 蓋掉）。文章內文則是
h2/p/table 平鋪為直接子層，規則正常套用。 */
.wp-block-post-content > *:first-child { margin-top: 0; }
.wp-block-post-content > h2 { margin-top: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--30); }
.wp-block-post-content > h3 { margin-top: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--20); }
.wp-block-post-content > h4 { margin-top: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--20); }
.wp-block-post-content > p { line-height: 1.85; }
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol { margin-top: var(--wp--preset--spacing--30); }
/* Yoast FAQ 區塊與其上方標題拉開距離 */
.wp-block-post-content > .wp-block-yoast-faq-block { margin-top: var(--wp--preset--spacing--40); }
/* ---------- 內文表格（article tables） ---------- */
/* 限定文章內容區的直接子層 table，避免影響獨立的 .sd-compare-table 設計 pattern 與首頁 */
.wp-block-post-content > .wp-block-table { overflow-x: auto; }
.wp-block-post-content > .wp-block-table table {
border-collapse: collapse;
width: 100%;
border: 1px solid var(--wp--preset--color--gray-300);
border-radius: 12px;
overflow: hidden;
}
.wp-block-post-content > .wp-block-table thead th,
.wp-block-post-content > .wp-block-table tr:first-child th {
background: var(--wp--preset--color--accent-700);
color: #fff;
font-weight: 600;
text-align: left;
}
.wp-block-post-content > .wp-block-table th,
.wp-block-post-content > .wp-block-table td {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--wp--preset--color--gray-300);
vertical-align: top;
line-height: 1.7;
}
.wp-block-post-content > .wp-block-table tbody tr:nth-child(even) { background: var(--wp--preset--color--gray-100); }
.wp-block-post-content > .wp-block-table tr:last-child td { border-bottom: 0; }
/* ---------- Compare table ---------- */
.sd-compare-table table { border-collapse: collapse; width: 100%; }
.sd-compare-table th { background: var(--wp--preset--color--text); color: #fff; padding: 1rem; text-align: left; font-weight: 600; }
.sd-compare-table td { padding: 1rem; border-bottom: 1px solid var(--wp--preset--color--gray-300); }
.sd-compare-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--wp--preset--color--gray-100); }
/* ---------- Timeline ---------- */
.sd-timeline-step { height: 100%; text-align: center; transition: transform .3s ease, box-shadow .3s ease; }
.sd-timeline-step:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--card); }
/* 步驟數字：圓形徽章 */
.sd-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 50px; height: 50px; border-radius: 50%;
margin: 0 auto var(--wp--preset--spacing--30);
background: var(--wp--preset--color--accent);
color: #fff;
font-family: var(--wp--preset--font-family--display);
font-style: italic; font-weight: 700; font-size: 1.5rem; line-height: 1;
transition: background .3s ease, transform .3s ease;
}
.sd-timeline-step:hover .sd-step-num { background: var(--wp--preset--color--accent-700); transform: scale(1.06); }
/* ---------- Badge / Tag (utility，可用 HTML 自訂 block) ---------- */
.sd-badge { display: inline-block; padding: .3em .9em; border-radius: 999px; font-size: var(--wp--preset--font-size--xs); font-weight: 600; background: var(--wp--preset--color--accent-100); color: var(--wp--preset--color--accent-700); }
.sd-tag { display: inline-block; padding: .25em .8em; border-radius: 6px; font-size: var(--wp--preset--font-size--xs); background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--text); }
/* ---------- Alert (utility) ---------- */
.sd-alert { padding: 1rem 1.25rem; border-radius: 12px; border-left: 4px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--accent-100); font-size: var(--wp--preset--font-size--small); }
/* ==========================================================================
RWD — Mobile First：以上為共通樣式，以下為較大斷點微調 + 手機收斂
========================================================================== */
/* Tablet 以下：服務流程 / 多欄收斂 */
@media (max-width: 1024px) {
.sd-timeline { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Mobile：Hero 與多欄堆疊、字級收斂 */
@media (max-width: 781px) {
.sd-hero .wp-block-column { flex-basis: 100% !important; }
.sd-timeline { grid-template-columns: 1fr !important; }
.sd-footer { text-align: left; }
.sd-footer-grid { gap: var(--wp--preset--spacing--50) !important; }
.sd-footer-store { padding: var(--wp--preset--spacing--30); }
.sd-footer-store-col { display: block; }
/* 手機保留「聯絡我們」按鈕（nav 內已無此連結），縮小一點放在漢堡旁 */
.sd-header .sd-line-btn { flex: 0 0 auto; }
.sd-header .sd-line-btn .wp-block-button__link {
min-width: 6.25rem;
min-height: 3rem;
padding: 0.6rem 1rem;
font-size: var(--wp--preset--font-size--xs);
letter-spacing: 0;
}
.sd-church-gallery.wp-block-gallery.has-nested-images { grid-template-columns: 1fr; }
.sd-church-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(3) { grid-column: auto; }
.sd-church-gallery.wp-block-gallery.has-nested-images img { min-height: 220px; }
.sd-compare-table { overflow-x: auto; }
.sd-compare-table table { min-width: 640px; }
}