@import url('https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,300;0,400;0,500;0,600;0,700;1,600&family=Noto+Sans+TC:wght@400;500;700&display=swap'); /* 僅載入 PDF 中指定的 Livvic 和 Noto Sans TC 粗細及斜體 */
/*!
Theme Name: roucoule rouc
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: roucoule-rouc
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

roucoule rouc is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/* 游標樣式 */
/* ---------------------------------------------------------------- */

/* 隱藏整個網頁的預設游標 */
body, a, button, input, textarea, select {
    cursor: none !important; /* 隱藏所有元素的預設游標 */
}

/* 自訂游標樣式 */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%; /* 圓形游標 */
    background-color: #111111;
    pointer-events: none; /* 確保游標不會阻礙下層元素的點擊事件 */
    transform: translate(-50%, -50%); /* 讓游標中心點對齊滑鼠位置 */
    z-index: 9999; /* 確保游標在最上層 */
    transition: width 0.1s ease, height 0.1s ease, background-color 0.1s ease;
}

/* 為自訂游標添加一個偽元素，並讓它「偏離中心」 */
.custom-cursor::before {
    content: ''; /* 偽元素必須有 content 屬性 */
    position: absolute; /* 相對於 .custom-cursor 定位 */
    top: 50%; /* 先將自身左上角對齊父元素的中心 */
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: rgba(250, 250, 250, 0);
    border-radius: 50%; /* 確保是圓形 */
    /* 這裡的 translate(-50%, -50%) 將小點的中心對齊父元素中心。
       translateX讓它從中心向右偏移。或者改成 translate(10px, 10px) 往右下方偏移。 */
    transform: translate(-50%, -50%) translateX(7px); /* 讓小圓點向右偏移 */
    pointer-events: none; /* 確保不影響點擊 */
}

/* 當 JS 添加 'active-cursor' class 時的游標變化 */
.custom-cursor.active-cursor {
    width: 45px;
    height: 45px;
    background-color: rgba(250, 250, 250, 0.85);
    animation: spin 1s linear infinite;
}

.custom-cursor.active-cursor::before {
    width: 30px; /* 小點放大到 20px */
    height: 30px; /* 小點放大到 20px */
    background-color: rgba(17, 17, 17, 1);
}

/* 這個動畫的 transform 會影響 .custom-cursor 本身及其偽元素 */
@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css- Tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/


/* Typography
--------------------------------------------- */
body {
    background-color: #ffffff; /* 網站整體背景色 */
    font-family: 'Livvic', 'Noto Sans TC', sans-serif;
    font-size: 15px; /* 基礎字體大小 */
    font-weight: 400;
    line-height: 1.45;
    color: #111111; /* 網站整體文字色 */
}

/* 確保以下規則存在，如果不存在則添加 */
button,
input,
select,
textarea {
    font-family: inherit; /* 這些元素繼承 body 的字體 */
    font-size: 1rem;
    line-height: 1.4; /* 與 body 保持一致 */
}

/* 精確的標題層級樣式設定 (根據 hiérarchisation typographique-2.pdf) */
h1 {
    font-family: 'Livvic', 'Noto Sans TC', sans-serif;
    font-weight: 700; /* Livvic Bold */
    font-style: normal; /* 確保沒有斜體 */
    font-size: 3rem;
    line-height: 1;
    margin: 0em;
    color: #111111; /* 標題文字主色 */
    clear: both;
}

h2 {
    font-family: 'Livvic', 'Noto Sans TC', sans-serif;
    font-weight: 600; /* Livvic SemiBold */
    font-style: italic; /* Livvic SemiBold Italic */
    font-size: 2.4rem;
    line-height: 1.25;
    margin: 0 0 0.2em;
    color: #111111; /* 標題文字主色 */
    clear: both;
}

h3 {
    font-family: 'Livvic', 'Noto Sans TC', sans-serif;
    font-weight: 500; /* Livvic Medium */
    font-style: normal; /* 確保沒有斜體 */
    font-size: 1.65rem;
    line-height: 1.3;
    margin: 0 0 0.5em;
    color: #111111; /* 標題文字主色 */
    clear: both;
}

h4 {
    font-family: 'Livvic', 'Noto Sans TC', sans-serif;
    font-weight: 700; /* Livvic Bold */
    font-style: normal; /* 確保沒有斜體 */
    font-size: 1.4rem;
    line-height: 1.25;
    margin: 0 0 0.2em;
    color: #111111; /* 標題文字主色 */
    clear: both;
}

h5 {
    font-family: 'Livvic', 'Noto Sans TC', sans-serif;
    font-weight: 500; /* Livvic Regular */
    font-style: normal; /* 確保沒有斜體 */
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 0.2em;
    color: #111111; /* 標題文字主色 */
    clear: both;
}

h6 {
    font-family: 'Livvic', 'Noto Sans TC', sans-serif;
    font-weight: 400; /* Livvic Light */
    font-style: normal; /* 確保沒有斜體 */
    font-size: 1rem;
    line-height: 0.55;
    margin: 0em;
    color: #111111; /* 標題文字主色 */
    clear: both;
}

p {
	margin: 0 0 0.6em; /* 段落底部間距調整為 1em */
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 0px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #ffffff;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #fff;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 0em;
}

ul {
	list-style: none;
	padding-left: 0;
	margin: 0;

}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	list-style: none;
	margin-bottom: 0;
	margin-left: 0em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 0 0 1.3em;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
    color: #111111; /* 超連結指定顏色 */
    text-decoration: none; /* 移除預設下劃線 */
}

a:visited {
    color: #111111; /* 已訪問的連結顏色與預設一致 */
}

a:hover,
a:focus,
a:active {
    color: #777777; /* 滑鼠懸停、聚焦和激活時顏色不變 */
    text-decoration: none; /* 滑鼠懸停時顯示下劃線，提供視覺回饋 */
    outline: 0; /* 移除瀏覽器預設的聚焦外框 */
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Header Layout (通用和桌面版)
--------------------------------------------------------------*/
.site-header {
    display: grid;
    /* 桌面版佈局：Logo (1fr) | 導航+語言切換器 (auto) | 漢堡按鈕 (auto，桌面隱藏) */
    grid-template-columns: 1fr auto auto; /* 核心改變：讓 Logo 佔滿左側空間，將其他元素推向右側 */
    align-items: center; /* 垂直居中所有網格項 */
    gap: 0px; /* 項目之間的間距 */
    padding: 5px 30px;
    padding-right: 15px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* 假設您的 Header 高度約為 100px。請根據您 Header 的實際高度調整此值。 */
.site-content {
    margin-top: 75px; /* 根據實際 Header 高度調整此值 */
    min-height: calc(100vh - 110px); /* 確保內容區域至少佔滿剩餘可視高度 */
}

body {
    padding-top: 0;
    margin-top: 0;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
}

/* 網站標題 */
.site-branding .site-title,
.site-branding .site-description {
    margin: 0;
    font-size: 3em;
    font-family: 'Livvic', sans-serif;
    font-weight: bold;
}
.site-branding .site-title a,
.site-branding .site-description a {
    color: #111111;
    text-decoration: none;
}

/* 桌面版主導航菜單 (包含語言切換器) */
.main-navigation {
    display: flex !important; /* 強制為 Flex 容器，讓子元素水平排列 */
    justify-content: flex-start; /* 回歸預設，不再需要強制靠右，因為 Grid 已經處理了 */
    align-items: center; /* 垂直居中它們 */
    gap: 90px; /* 導航菜單和語言切換器之間的間距 */

    position: static;
    top: auto;
    left: auto;
    box-shadow: none;
    background-color: transparent;
    z-index: auto;
    width: auto; /* 讓其內容決定寬度 */
}

/* 修正 wp_nav_menu 容器 Div 導致的桌面版換行問題 */
.main-navigation .menu-menu-primaire-container {
    display: flex !important; /* 強制為 Flex 容器，讓 ul 成為 Flex 項目 */
    align-items: center; /* 垂直居中 ul */
    flex-shrink: 0; /* 防止其壓縮 */
    flex-grow: 0; /* 防止其拉伸 */
    width: auto !important; /* 確保它不會佔據全部寬度 */
}

.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
    flex-direction: row; /* 確保桌面版是橫向排列 */
}

.main-navigation li {
    margin: 0;
}

/* 導航菜單連結樣式 */
.main-navigation a {
    text-decoration: none;
    color: #111111;
    font-size: 1.2em;
    font-family: 'Livvic', sans-serif;
    font-weight: normal;
}
.main-navigation li.current-menu-item a,
.main-navigation li.current_page_item a,
.main-navigation a:hover {
    font-weight: bold;
}

/* 桌面版語言切換器 */
.language-switcher {
    font-size: 1.15em;
    color: #111111;
    font-family: 'Livvic', sans-serif;
    font-weight: normal;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: block !important; /* 確保在桌面版顯示 */
}

.language-switcher a {
    color: #111111;
    text-decoration: none;
    font-weight: normal;
}
.language-switcher a:hover {
    font-weight: bold;
}

/* 桌面版顯示下拉選單 */
.language-switcher select.pll-switcher-select {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #111111 !important;
    font-size: 1em !important;
    font-family: 'Livvic', sans-serif !important;
    font-weight: normal !important;
    padding-right: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.language-switcher select.pll-switcher-select:focus {
    outline: none !important;
}

/* 桌面版隱藏手機專用列表 */
.language-switcher ul.pll-mobile-langswitcher-list {
    display: none !important;
}

/* 隱藏小工具標題 */
.widget_polylang h2.widgettitle {
    display: none;
}

/* 桌面版隱藏漢堡菜單按鈕 */
.menu-toggle {
    display: none;
}


/*--------------------------------------------------------------
# 手機版樣式 (Responsive Design - Mobile)
--------------------------------------------------------------*/
@media (max-width: 768px) {
    .site-header {
        display: grid;
        grid-template-columns: auto 1fr auto; /* logo | 空白 | 漢堡按鈕 */
        align-items: center;
        gap: 20px;
        padding: 15px 20px;
    }

    /* 確保 Logo / 網站標題靠左 */
    .site-branding {
        justify-self: start;
        grid-column: 1 / 2;
        width: auto;
    }

    .site-branding .site-title,
    .site-branding .site-description {
        font-size: 2.3em; /* 縮小手機版標題 */
    }

    /* 手機版主導航菜單 (包含語言切換器) */
    .main-navigation {
        display: none; /* 預設隱藏，由 JS 控制顯示 */
        grid-column: 1 / -1; /* 跨越 header 的所有列 */
        position: absolute; /* 使選單彈出在 header 下方 */
        top: 100%; /* 位於 header 的正下方 */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        z-index: 998;

        flex-direction: column; /* 垂直堆疊其子元素（ul 和 language-switcher） */
        align-items: flex-start; /* 菜單項和語言切換器都靠左對齊 */
        padding-bottom: 0;
        font-size: 1.2em;
    }

    /* 當菜單被打開時 (由主題 JS 添加 .toggled class)，顯示為 Flex 容器 */
    .main-navigation.toggled {
        display: flex; /* 保持 flex，讓內部菜單項目可以堆疊 */
        flex-direction: column; /* 讓菜單項目垂直堆疊 */
        align-items: flex-start; /* 讓菜單項目靠左對齊 */
        gap: 40px;

        position: fixed; /* 關鍵：改變為固定定位，相對於視窗 */
        top: 66px; /* 貼齊視窗頂部 */
        left: 0;** /* 貼齊視窗左側 */
        width: 100vw; /* 填滿整個視窗寬度 */
        height: 100vh; /* 填滿整個視窗高度 (viewport height) */
        
        background-color: #ffffff; /* 菜單背景顏色 */
        z-index: 9999; /* 確保它在最上層 */
        overflow-y: auto; /* 如果內容超出高度，允許滾動 */

        /* 根據需要調整內邊距，讓內容與邊緣有距離 */
        padding: 40px 2px; /* 這裡的 padding-top 60px 是為了避開固定 Header */
    }

    /* 強制語言切換器隱藏，除非其父級 main-navigation 被 toggled */
    .main-navigation:not(.toggled) .language-switcher {
        display: none !important;
    }

    /* 修正 wp_nav_menu 容器 Div 在手機菜單內部 */
    .main-navigation .menu-menu-primaire-container {
        display: flex;
        flex-direction: column; /* 使菜單項目垂直堆疊 */
        align-items: flex-start;
        width: 100%;
        padding: 0px;
    }

    /* 調整彈出菜單內部的項目堆疊 */
    .main-navigation ul {
        flex-direction: column;
        gap: 15px;
        text-align: left;
        padding: 0px;
        width: 100%;
    }

    /* 手機版語言切換器 (在 main-navigation 內部) */
    .language-switcher {
        width: 100%;
        margin-top: 10px;
        padding: 0 0 20px;
        box-sizing: border-box;
        /* 在手機版隱藏下拉選單 */
        select.pll-switcher-select {
            display: none !important;
        }
    }

    /* 在手機版顯示語言列表 */
    .language-switcher ul.pll-mobile-langswitcher-list {
        display: flex !important; /* 確保手機版語言列表顯示 */
        list-style: none;
        margin: 0;
        padding: 0;
        flex-direction: column; /* 關鍵：語言選項垂直堆疊 */
        justify-content: flex-start; /* 靠左對齊 */
        gap: 7px; /* 調整語言選項之間的間距 */
        width: 100%;
    }

    .language-switcher ul.pll-mobile-langswitcher-list li {
        margin: 0;
        padding: 0;
    }

    .language-switcher ul.pll-mobile-langswitcher-list li a {
        display: block;
        text-decoration: none;
        color: #111111;
        font-size: 1em;
        font-weight: normal;
        transition: background-color 0.2s, color 0.2s;
    }

    .language-switcher ul.pll-mobile-langswitcher-list li a:hover {
        font-weight: bold;
    }

    /* 手機版顯示漢堡菜單按鈕 */
    .menu-toggle {
        display: block;
        justify-self: end;
        grid-column: 3 / 4;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        outline: none;
        z-index: 1001;
        text-indent: -9999px;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        width: 30px;
        height: 24px;
        background-image:
            linear-gradient(to bottom, #111111 3px, transparent 3px),
            linear-gradient(to bottom, #111111 3px, transparent 3px),
            linear-gradient(to bottom, #111111 3px, transparent 3px);
        background-repeat: no-repeat;
        background-size: 100% 3px;
        background-position:
            0 0,
            0 10.5px,
            0 21px;
        transition: background-image 0.9s ease-in-out;

        &.toggled {
            background-image: none;
            &::before,
            &::after {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                width: 100%;
                height: 3px;
                background-color: #111111;
                transition: transform 0.9s ease-in-out, top 0.9s ease-in-out;
            }
            &::before {
                transform: translateY(-50%) rotate(45deg);
            }
            &::after {
                transform: translateY(-50%) rotate(-45deg);
            }
        }
    }
}

/*--------------------------------------------------------------
# Footer Layout
--------------------------------------------------------------*/
.site-footer {
    display: grid; /* 使用 Grid 佈局來排版內部元素 */
    grid-template-columns: 1fr 1fr; /* 將 Footer 分成兩列 */
    gap: 30px; /* 兩列之間的間距 */
    align-items: center; /* 垂直置中兩列的內容 */
    padding: 5px 30px; /* 上下內邊距 5px，左右內邊距 30px */
    background-color: #transparent;
    color: #111111;
}

/* 版權資訊的排版與字體規範 */
.site-info {
    text-align: left;
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    font-size: 0.2em; /* 基本字體大小，你可以根據需要調整 */
    color: #111111; /* 確保顏色為深色 */
}

/* 社交連結的排版 */
.social-links {
    text-align: right;
}

/* 社交連結的樣式與字體規範 */
.site-footer .social-links a {
    margin-left: 20px; /* 每個連結之間的間距 */
    font-family: 'Livvic', sans-serif;
    font-weight: 400; /* 預設為 Livvic Regular (400) */
    font-size: 1em; /* 基本字體大小*/
}

.site-footer .social-links a:hover {
    font-weight: 600; /* **這裡修改：鼠標懸停時字體變粗體 (Livvic Bold 對應的粗細)** */
}

/* 響應式調整：在小螢幕下 Footer 內容堆疊顯示 */
@media (max-width: 768px) {
    .site-footer {
        grid-template-columns: 1fr; /* 在小螢幕上只顯示一列，內容垂直堆疊 */
        text-align: center; /* 堆疊後內容居中對齊 */
        padding: 20px 15px; /* 調整小螢幕的上下左右內邊距 */
        gap: 0px;
    }
    .site-info,
    .social-links {
        text-align: center; /* 確保所有項目都居中 */
        margin-bottom: 0px; /* 堆疊項目之間增加一點間距 */
    }
    .site-footer .social-links a {
        margin: 0 8px; /* 小螢幕下調整社交連結的間距 */
    }
}

/*--------------------------------------------------------------
# Front Page Layout
--------------------------------------------------------------*/

/* Main Content Area Styling - 確保與 Header 內容區域對齊 */
main#primary.site-main {
    margin-top: 10px;    /* 保持現有的頂部間距 */
    margin-bottom: 5px; /* 保持現有的底部間距 */
    padding-left: 30px;  /* 確保左側內邊距與 Header 的內容起始點對齊 */
    padding-right: 30px; /* 保持右側內邊距與 Header 的內容結束點對齊 */
    padding-bottom: 5px;
    width: 100%;         /* 讓主內容區塊佔滿可用寬度 */
    box-sizing: border-box; /* 確保 padding 包含在 width 內，避免佈局跑版 */
    /* 移除 max-width 和 margin: auto; 以實現靠左對齊和全寬佈局 */
}

/* 1. Presentation Section */
.presentation {
    margin-bottom: 80px;
    text-align: left; /* 保持靠左對齊 */
}

.presentation h2,
.presentation h2.wp-block-heading {
    font-family: 'Livvic', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 2.5rem;
    color: #111111;
    margin-bottom: 10px;
    line-height: 1.2;
}

.presentation h3,
.presentation h3.wp-block-heading {
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.7rem;
    line-height: 1.3;
    color: #111111;
    max-width: 730px; /* 保持最大寬度以提高可讀性 */
    margin-left: 0; /* 確保 H3 靠左對齊，而非居中 */
    margin-right: auto; /* 允許右側自動邊距，當達到 max-width 時 */
}

/* 2. Projets Preview Section */
.projets-preview {
    margin-bottom: 5px;
}

.projet-categories-grid {
    display: grid;
    /* 這會讓網格項目自動在 main#primary.site-main 的可用寬度內均勻分佈 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.category-column {
    padding: 0px;
    padding-top: 20px;
}

.category-column h4 {
    margin-bottom: 5px;
}

/* 確保 .category-column 內部 p 的預設樣式 */
.category-column p {
    font-weight: 500; /* Livvic Medium */
    font-style: normal;
    font-size: 1.2em;
    margin-bottom: 0.1em; /* 為 .category-description-wrapper p 提供基礎樣式 */
}

/* ================================================================ */
/* 3. 控制 Projet Item 的元數據顯示 (懸浮效果) */
/* ---------------------------------------------------------------- */

/* 預設狀態：當 .projet-item 沒有 .hovered class 時隱藏 */
.projet-meta-hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, height 0.5s ease-out, padding 0.5s ease-out, margin 0.5s ease-out;
}

/* 當 .projet-item 有 .hovered class 時顯示 */
.projet-item.hovered .projet-meta-hidden {
    opacity: 1;
    visibility: visible;
    height: auto;
    padding-top: 0px;
    padding-bottom: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: visible;
}

/* ================================================================ */
/* 4. 首頁滾動效果樣式 - Desktop */
/* ---------------------------------------------------------------- */

/* 確保 .category-description-wrapper 及其 p 標籤在桌面版預設是顯示的 */
.category-description-wrapper {
    margin-bottom: 2rem;
    transition: height 0.9s ease-out, margin 0.9s ease-out, padding 0.9s ease-out, opacity 0.9s ease-out, transform 0.9s ease-out;
}

.category-description-wrapper p { /* 確保 P 標籤在預設狀態下是可見的 */
    opacity: 1;
    visibility: visible;
    height: auto;
    /* 過渡效果應該由父級 .category-description-wrapper 控制，除非有特殊需要 */
    /* transition: opacity 0.5s ease-out, visibility 0.5s ease-out, height 0.5s ease-out; */
}


/* 當 body 有 'scrolled-down' class 時，隱藏 .category-description-wrapper */
body.scrolled-down .category-description-wrapper {
    opacity: 0;
    transform: translateY(-10px); /* 向上稍微移動 */
    pointer-events: none; /* 禁用互動 */
    height: 0 !important; /* 使用 !important 確保覆蓋 */
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 確保 .projets-preview 區塊有平滑的 padding-top 過渡 */
.projets-preview {
    transition: padding-top 0.9s ease-out; /* 添加過渡效果 */
    padding-top: 0; /* 預設情況下，當 presentation 可見時，這裡不需要額外 padding */
}

/* 當 body 有 'scrolled-down' class 時，為 .projets-preview 添加額外的 padding-top */
body.scrolled-down .projets-preview {
    /* 這個值應該是：你的 Header 實際高度 + 額外希望的間距 */
    padding-top: 10px;
    /* 移除任何可能衝突的 margin-top，確保這裡只有 padding-top 生效 */
    margin-top: 0 !important; 
}


/* ================================================================ */
/* 5. 響應式調整 - Mobile */
/* ---------------------------------------------------------------- */

@media (max-width: 768px) {
    /* 主要頁面和佈局調整 */
    main#primary.site-main {
        margin-top: 70px;
        margin-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .presentation {
        padding: 2px;
    }

    .presentation h2 {
        font-size: 1.7em;
    }

    .presentation h3 {
        font-size: 1.2em;
    }

    .projet-categories-grid {
        grid-template-columns: 1fr; /* 在手機上單列顯示 */
        gap: 30px; /* 項目之間的垂直間距 */
        /* 確保網格容器沒有任何負邊距或重疊問題 */
        margin-top: 0 !important;
        position: static !important;
        z-index: auto !important;
    }

    .category-column {
        padding: 2px;
        padding-top: 80px;
        /* 確保每個列之間有正確的間距，沒有負邊距導致重疊 */
        margin-bottom: 0 !important;
    }

    /* 強制顯示 Category 介紹文字及其內容 (手機版) */
    /* 這裡同時確保 .category-description-wrapper 和其內的 p 都被強制顯示 */
    body .projets-preview .category-description-wrapper, /* 針對非滾動狀態 */
    body.scrolled-down .projets-preview .category-description-wrapper { /* 針對滾動狀態 */
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important; /* 確保高度自動，內容能完全顯示 */
        transform: translateY(0) !important; /* 移除任何位移 */
        pointer-events: auto !important; /* 啟用互動 */
        overflow: visible !important; /* 允許內容溢出 */
        display: block !important; /* 確保作為區塊元素顯示 */
        
        margin-top: 0 !important;
        margin-bottom: 15px !important; /* 在文字下方留出空間 */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 確保 .category-description-wrapper 內的 p 標籤樣式也被正確重置 */
    body .projets-preview .category-description-wrapper p,
    body.scrolled-down .projets-preview .category-description-wrapper p {
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        transform: none !important; 
    }

    /* 確保 .projet-items-scrollable 的行為在手機版正常 */
    .projet-items-scrollable {
        max-height: none !important; /* 取消固定高度 */
        overflow-y: visible !important; /* 內容完全可見，無滾動條 */
        padding-right: 0 !important; /* 移除滾動條空間 */
        
        margin-top: 0 !important; /* 移除任何可能的負上邊距 */
        position: static !important; /* 確保其在正常文檔流中 */
        z-index: auto !important; /* 確保 z-index 不會導致覆蓋 */
    }

    /* 確保 .projet-items-scrollable 內部每個項目沒有負邊距 */
    .projet-items-scrollable .projet-item {
        margin-top: 0 !important; /* 防止項目自身向上移動 */
    }

    /* 隱藏滾動條 */
    .projet-items-scrollable::-webkit-scrollbar {
        width: 0 !important;
    }
    .projet-items-scrollable {
        scrollbar-width: none !important; /* Firefox */
    }
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 0.1em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 0em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ================================================================ */
/* 1. archive-projet基本布局：讓頁面內容居中，並為分類容器提供空間 */
/* ---------------------------------------------------------------- */
.site-main { /* 注意這裡的選擇器是 .site-main，而不是 main#primary.site-main */
    max-width: none !important; /* 移除最大寬度限制，確保內容可以全寬顯示 */
    margin-left: 0 !important;  /* 強制靠左對齊，覆蓋任何居中或固定邊距 */
    margin-right: 0 !important; /* 強制靠左對齊 */
    margin-top: 40px;           /* 保持頂部外邊距 */
    margin-bottom: 40px;        /* 保持底部外邊距 */
    padding-left: 20px;         /* 保持左側內邊距與 Header 對齊 */
    padding-right: 20px;        /* 保持右側內邊距 */
    width: 100%;                /* 確保佔滿可用寬度 */
    box-sizing: border-box;     /* 確保 padding 包含在 width 內 */
}

/* ================================================================ */
/* 2. archive-projet專案標題樣式 */
/* ---------------------------------------------------------------- */
.projet-header h1 {
    font-size: 3.5em; /* 根據 PDF H1 的視覺尺寸，可以比 h1 預設 2.5em 更大  */
    font-weight: 700; /* 確保是 Bold */
    color: #111111;
    margin-top: 0;
}

/* ================================================================ */
/* 3. archive-projet分類容器：實現多欄布局 (四個分類欄位) */
/* ---------------------------------------------------------------- */
.projet-categories-container {
    display: flex; /* 使用 Flexbox 實現多欄 */
    justify-content: space-around; /* 欄位間均勻分佈空間 */
    gap: 20px; /* 欄位之間的間距 */
    flex-wrap: wrap; /* 如果空間不足，允許換行 */
    align-items: flex-start; /* 讓每個欄位的內容從頂部對齊 */
}

/* ================================================================ */
/* 4. archive-projet單個分類欄位樣式 */
/* ---------------------------------------------------------------- */
.projet-category-column {
    flex: 1; /* 讓每個欄位彈性佔用空間 */
    min-width: 250px; /* 設定最小寬度，防止過度擠壓 */
    max-width: 450px; /* 設定最大寬度，可根據設計稿調整 */
    background-color: #ffffff; /* 欄位背景色 */
    padding: 15px;
    box-sizing: border-box; /* 邊框和內邊距包含在寬度內 */
    display: flex; /* 讓欄位內部元素垂直排列 */
    flex-direction: column;
}

/* archive-projet.php 中的分類名稱 (H4: Livvic Bold) */
.projet-category-column h4 { /* 注意這裡的選擇器變為 h4 */
    font-family: 'Livvic', 'Noto Sans TC', sans-serif; /* 確保字體 */
    font-weight: 700; /* Livvic Bold (來自基礎 h4) */
    font-size: 1.25em; /* 與基礎 h4 的尺寸一致，或根據視覺微調 */
    color: #111111;
    margin-bottom: 1em;
    text-align: center;
}

/* ================================================================ */
/* 5. 作品項目可滾動區域 */
/* ---------------------------------------------------------------- */
.projet-item {
    margin-bottom: 35px;
}

.projet-meta-hidden h4 {
    margin-top: 3px;
    margin-bottom: 3px; /* 調整 h4 下方的間距 */
}

.projet-meta-hidden h5.projet-date {
    margin-bottom: 0px; /* 調整日期下方的間距 */
}

/* 如果 .projet-hashtags 區塊需要上方間距 */
.projet-meta-hidden .projet-hashtags {
    margin-bottom: 3px; /* 調整 hashtag 區塊上方的間距 */
}

.projet-items-scrollable {
    flex-grow: 1; /* 讓內容區域填滿剩餘空間 */
    overflow-y: auto; /* 垂直方向滾動條 */
    max-height: 680px; /* 設定一個最大高度，超出則滾動。 */
    padding-right: 2px; /* 為滾動條留出空間，避免內容被遮擋 */
    box-sizing: border-box;
}

/* 滾動條樣式 (針對 Webkit 瀏覽器，如 Chrome/Safari) */
.projet-items-scrollable::-webkit-scrollbar {
    width: 8px;
}

/*--------------------------------------------------------------
# Infos Page Layout
--------------------------------------------------------------*/
/* 確保 main 元素有正確的高度和 Flexbox 容器 */
#primary.site-main.infos-page-main-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 頂部對齊 */
    padding: 0;
    margin-top: 100px; /* 留出 Header 的空間，根據實際 Header 高度調整 */
    height: calc(100vh - 100px); /* 讓 main 區域佔滿視窗剩餘高度，確保內部滾動生效 */
    box-sizing: border-box;
    width: 100%;
}

/* infos-content-wrapper 作為 Flexbox 容器，負責兩欄排列 */
#primary .infos-content-wrapper {
    display: flex; /* **** 核心設定：啟用 Flexbox 佈局 **** */
    width: 100%;
    height: 100%; /* 確保內容容器佔滿父容器的高度 */
    box-sizing: border-box;
    padding: 0 30px; /* 這裡設定左右兩側的內邊距 */
}

/* 左側欄：內容區域，可滾動 */
#primary .infos-left-column {
    flex: 0 0 45%; /* **** 核心設定：左側固定佔 50% 寬度 **** */
    max-width: 50%;
    padding-right: 30px; /* 左側內容與右側內容的間距 */
    box-sizing: border-box;
    height: 100%; /* 確保高度與父容器相同，以便滾動生效 */
    display: flex; /* 讓內容在內部以 flex 方式排列，如果需要進一步控制文字 */
    flex-direction: column;
    overflow-y: auto; /* **** 核心設定：使左側內容可垂直滾動 **** */
    -webkit-overflow-scrolling: touch; /* 改善 iOS 上的滾動體驗 */

    /* 以下用於隱藏滾動條，如果您希望顯示，請刪除這些規則 */
    scrollbar-width: none; /* Firefox 隱藏滾動條 */
    -ms-overflow-style: none; /* IE/Edge 隱藏滾動條 */
}

#primary .infos-left-column::-webkit-scrollbar {
    width: 0px !important; /* Webkit 隱藏垂直滾動條 */
    height: 0px !important; /* Webkit 隱藏水平滾動條 */
    background: transparent !important; /* 背景透明 */
}

.infos-section-title {
	margin: 0 0 0.1em;
}

/* 右側欄：社群連結區域 */
#primary .infos-right-column {
    flex: 1; /* 核心設定：右側佔據剩餘所有空間 */
    padding-left: 30px; /* 右側內容與左側內容的間距 */
    box-sizing: border-box;
    height: 100%;
    display: flex; /* 使用 Flexbox 讓內部連結靠右對齊 */
    flex-direction: column;
    justify-content: flex-start; /* 將連結組推到底部 (靠右對齊通常是針對文字本身) */
    align-items: flex-end; /* 將連結組水平靠右對齊 */
    overflow: hidden; /* 右側區域不希望滾動 */
}

#primary .infos-contact-links {
    text-align: right; /* 確保連結文字靠右對齊 */
}

#primary .infos-link-item {
    margin-bottom: 5px; /* 連結項目之間的間距 */
    font-size: 1.5em; /* 範例字體大小 */
    color: #111111; /* 範例顏色 */
}

#primary .infos-link-item a {
    text-decoration: none; /* 移除下劃線 */
    color: inherit; /* 繼承父元素的顏色 */
    transition: color 0.3s ease; /* 添加顏色過渡效果 */
}

#primary .infos-link-item a:hover {
    color: #777777; /* 懸停時的顏色 */
}

/* 響應式調整 */
@media (max-width: 768px) {
    #primary.infos-page-main-container {
        margin-top: 126px !important;
        height: auto;
    }

    #primary .infos-content-wrapper {
        flex-direction: column; /* 左右兩欄變為垂直堆疊 */
        padding: 0 20px;
        height: auto;
    }

    #primary .infos-left-column {
        flex: none;
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
        height: auto;
        overflow-y: visible; /* 在小螢幕上，如果內容很長，頁面整體滾動，所以左欄內部不需要單獨滾動 */
    }

    #primary .infos-right-column {
        flex: none;
        width: 100%;
        padding-left: 0;
        height: auto;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    #primary .infos-contact-links {
        text-align: left;
    }

    body.infos-page footer,
    body.infos-page #colophon,
    body.infos-page .site-footer { 
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}

/* ================================================================ */
/* 5. 單一作品頁面 */
/* ---------------------------------------------------------------- */

/* 確保 html 和 body 佔滿整個視窗高度 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.single-projet {
    overflow: hidden;
}

/* 定義 Header 和 Footer 的高度 (請根據你網站的實際高度調整) */
/* 這是一個範例，你可能需要用開發者工具測量 header 和 footer 的精確高度 */
:root {
    --header-height: 85px; /* 範例：你的網站 header 高度 */
    --footer-height: 37px; /* 範例：你的網站 footer 高度 */
}

/* 主要內容容器，佔據 Header 和 Footer 之外的所有空間 */
.single-projet-main-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* 左右兩欄的容器 (文章本身) */
.projet-layout-wrapper {
    display: flex; /* 啟用 Flexbox */
    flex-grow: 1; /* 讓其佔據 .single-projet-main-container 內所有可用垂直空間 */
    height: 100%; /* 確保其佔滿父容器 .single-projet-main-container 的高度 */
    flex-wrap: nowrap; /* 防止欄位在小螢幕上換行 */
    min-width: 0;
}

/* 左側資訊欄 */
.projet-info-column {
    flex: 1; /* 佔據 1 單位寬度 */
    display: flex;
    flex-direction: column; /* 讓內部內容垂直堆疊 */
    box-sizing: border-box; /* 確保 padding 和 border 包含在寬度內 */
    padding: 0px; /* 內部間距 */
    background-color: #ffffff; /* 可選：背景色 */
    /* 確保內容不會溢出其高度 */
    min-width: 300px; /* 設置最小寬度以防內容擠壓 */
}

/* 左側資訊欄的可滾動內容區域 */
.projet-info-content-scrollable {
    flex-grow: 1; /* 讓內容佔滿可用空間 */
    overflow-y: auto; /* 啟用獨立的垂直滾動 */
    padding-right: 25px; /* 為滾動條留出空間，防止內容被遮擋 */
    /* 滾動條可以添加自訂樣式：*/
    /*
    &::-webkit-scrollbar { width: 8px; }
    &::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }
    */
}

/* 左側資訊欄的頁眉部分 */
.projet-info-column .entry-header {
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* 所有標籤的通用樣式 (作品介紹、委託方、合作夥伴) */
.projet-info-column .entry-content-info h4 {
    margin: 0px; /* 標籤間距 */
    margin-bottom: 10px; /* 標籤與下方內容的間距 */
    font-weight: 600; /* 標籤文字為粗體 (Livvic SemiBold) */
    font-size: 1em; /* 調整標籤字體大小 */
    line-height: 0.5;
}

/* 內容文字的通用樣式 (作品介紹的 div.projet-long-text 和新的 p.projet-label-content) */
.projet-info-column .projet-long-text,
.projet-info-column .projet-label-content {
    margin-top: 0px;
    margin-bottom: 20px;
    margin-right: 8px;
    line-height: 1.35;
    font-size: 1em;/* 調整內容字體大小 */
    font-weight: 400; /* 內容文字為常規字重 (Livvic Regular) */
}

/* 左側資訊欄的頁腳導航 */
.projet-info-column .entry-footer {
    padding-top: 6px;
    margin-top: auto; /* 將其推到 .projet-info-column 的底部 */
    flex-shrink: 0; /* 防止頁腳被壓縮 */
}


/* 右側圖像欄 - 合併後的樣式 */
.projet-image-column {
    flex: 2; /* 佔據 2 單位寬度 (比例為 1:2) */
    box-sizing: border-box;
    padding: 0px; /* 統一為 0px */
    background-color: #ffffff;
    min-width: 0;
    min-height: 500px; /* 根據您的設計調整，確保有最小高度 */
}

/* 右側圖像欄的可滾動內容區域 - 合併後的通用設置 */
.projet-image-content-scrollable {
    flex-grow: 1; /* 讓內容佔滿可用空間 */
    height: 100%; /* 確保容器佔滿 .projet-image-column 的高度 */
    width: 100%; /* 確保容器佔滿可用寬度 */
    padding-right: 3px; /* 為垂直滾動條留出空間（如果有的話） */
    padding-bottom: 0px !important; /* 確保沒有多餘空間導致橫向滾動條顯示異常 */

    /* 隱藏預設的滾動條 - 通用 */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}
/* 對於 WebKit 瀏覽器隱藏滾動條 - 通用 */
.projet-image-content-scrollable::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
}

/* 針對 Gutenberg 編輯器內容的滾動行為（當沒有 .has-banner-chart class 時）*/
.projet-image-content-scrollable:not(.has-banner-chart) {
    overflow-y: auto; /* 啟用獨立的垂直滾動 */
    overflow-x: hidden; /* 禁用水平滾動 */
}

/* 確保 Gutenberg 編輯器中插入的圖片響應式顯示 */
.projet-image-content-scrollable:not(.has-banner-chart) img {
    max-width: 100%; /* 最大寬度為父容器寬度 */
    height: auto; /* 高度自動調整以保持比例 */
    display: block; /* 防止圖片下方出現多餘間隙 */
    margin-bottom: 5px; /* 您圖片之間的間距 */
}

/* 針對橫幅長條圖表模式的特定滾動行為和樣式（當有 .has-banner-chart class 時）*/
.projet-image-content-scrollable.has-banner-chart {
    width: 100%; /* << 關鍵：讓容器佔滿其父元素的可用寬度 */
    max-width: 100%;
    
    /* 核心變更：強制內容在水平方向溢出時，容器不擴展 */
    overflow-x: auto; /* 啟用水平滾動條 */
    overflow-y: hidden !important; /* 強制隱藏垂直滾動條 */
    
    -webkit-overflow-scrolling: touch; /* 改善 iOS 上的滾動手感 */
    box-sizing: border-box; /* 確保 padding/border 不會導致溢出計算錯誤 */
}

/* 針對嵌入的橫幅圖表圖片的樣式 */
.projet-image-content-scrollable.has-banner-chart .projet-banner-chart-image {
    /* 確保圖片顯示其原始寬度 */
    width: auto !important; 
    min-width: unset !important; 
    max-width: none !important; 

    /* 確保圖片高度 */
    height: 100% !important; 
    max-height: 100% !important; 

    object-fit: contain !important; /* 確保圖片內容完整顯示，不裁剪 */
    display: block !important; /* 移除可能的內聯元素間隙 */
    margin: 0 !important; /* 移除圖片周圍可能的邊距 */

    /* 確保圖片本身不會導致換行 */
    white-space: nowrap; /* 新增此行 */
}

/* 導航箭頭樣式 */

.projet-info-column .entry-footer .nav-links {
    display: flex;
    justify-content: space-between; /* 讓上一篇和下一篇連結分開到兩端 */
    width: 100%; /* 確保它佔滿整個 entry-footer 寬度 */
    align-items: center; /* 垂直居中箭頭 */
    min-height: 30px; /* 確保有足夠的高度容納箭頭 */
}

/* 針對 WordPress 生成的 nav-previous 和 nav-next (它們是 DIV) */
.projet-layout-wrapper .entry-footer .nav-previous,
.projet-layout-wrapper .entry-footer .nav-next {
    /* 這些 div 只需要作為 flex item 的容器，不需要設置大小或背景 */
    /* 它們的子元素 <a> 會處理視覺和點擊 */
    flex-grow: 0; /* 不讓它們無限增長 */
    flex-shrink: 0; /* 不讓它們收縮 */
}

/* **關鍵修正：當右箭頭是唯一的子元素時，將其推到右側** */
.projet-info-column .entry-footer .nav-links .nav-next:only-child {
    margin-left: auto; /* 將唯一的 .nav-next 元素推到右側 */
    margin-right: 0;
}

/* 當左箭頭是唯一的子元素時，它會預設靠左 (flex-start)，所以無需額外 `margin-right: auto;` */
.projet-info-column .entry-footer .nav-links .nav-previous:only-child {
    margin-right: 0;
    margin-left: 0;
}


/* **針對真正的連結 <a> 元素** */
.projet-layout-wrapper .entry-footer .nav-previous a,
.projet-layout-wrapper .entry-footer .nav-next a {
    display: flex; /* 讓 <a> 成為 Flex 容器來居中內部圖片 */
    align-items: center; /* 垂直居中圖片 */
    justify-content: center; /* 水平居中圖片 */
    text-decoration: none; /* 移除下劃線 */
    
    /* 給 <a> 連結一個足夠大的可點擊區域 */
    /* 這裡的寬高應該比圖片大，以增加點擊的便利性 */
    width: 50px; /* 假設箭頭圖片寬度 50px + 左右各 10px 視覺留白/點擊區 */
    height: 30px; /* 假設箭頭圖片高度 20px + 上下各 10px 視覺留白/點擊區 */
    
    padding: 0; /* 這裡 <a> 標籤本身不需要額外 padding，尺寸由 width/height 控制，內容由 <img> 決定 */
    box-sizing: border-box; /* 確保寬高包含了 padding 和 border (儘管這裡沒有設置) */

    /* 不再需要 background-image 相關屬性 */
    background-image: none;
    background-repeat: unset;
    background-position: unset;
    background-size: unset;
    
    transition: opacity 0.3s ease; /* 添加懸停過渡效果 */
}

/* **針對新插入的 <img> 箭頭圖片** */

.projet-layout-wrapper .entry-footer .nav-previous a .nav-arrow,
.projet-layout-wrapper .entry-footer .nav-next a .nav-arrow {
    width: 50px; /* 箭頭圖片實際寬度 */
    height: 20px; /* 箭頭圖片實際高度 */
    display: block; /* 確保它作為一個塊級元素，方便控制尺寸 */
    object-fit: contain; /* 確保圖片能完整顯示在分配的空間內 */
}

/* 懸停效果 (現在應用在 <a> 連結本身) */
.projet-layout-wrapper .entry-footer .nav-previous a:hover,
.projet-layout-wrapper .entry-footer .nav-next a:hover {
    opacity: 0.5; /* 懸停時變半透明 */
}

/* 響應式佈局：在小螢幕上垂直堆疊欄位 */
@media (max-width: 768px) {
    body.single-projet {
        overflow: visible !important; /* 確保 body 可以滾動 */
    }

    /* 確保 html 也在手機上允許滾動 */
    html {
        overflow: visible !important; /* 確保 html 可以滾動 */
    }

    .single-projet-main-container {
        height: auto; /* 允許高度根據內容調整 */
        min-height: auto;
    }
    .projet-layout-wrapper {
        flex-direction: column; /* 讓左右欄位變成上下堆疊 */
        height: auto;
    }

    .projet-info-column,
    .projet-image-column {
        width: 100%;
        flex: none;
        border-right: none;
    }

    /* 小螢幕下禁用獨立滾動，讓內容隨頁面滾動 */
    .projet-info-content-scrollable,
    .projet-image-content-scrollable {
        overflow-y: visible !important; /* 禁用獨立滾動，讓內容隨頁面滾動 */
        padding-right: 0 !important; /* 移除滾動條的填充 */
        scrollbar-width: auto !important; /* 讓 Firefox 的捲軸顯示 */
        -ms-overflow-style: auto !important; /* 讓 IE/Edge 的捲軸顯示 */
    }

    .projet-image-content-scrollable.has-banner-chart {
        height: 500px; /* 固定高度為 500px */
    }

    .projet-info-column .entry-footer {
        margin-top: 20px;
        /* 在小螢幕下，頁腳可能不需要 sticky 底部，因為會一起滾動 */
        position: static;
    }
}

/* 針對單一作品頁面中，兩個有獨立滾動的欄位 */
.projet-info-content-scrollable,
.projet-image-content-scrollable {
    /* 確保其內部滾動條被隱藏 */

    /* Firefox 瀏覽器特定區域的捲軸隱藏 */
    scrollbar-width: none !important; /* 完全移除 Firefox 的捲軸 */
    -ms-overflow-style: none !important; /* 移除 IE/Edge (舊版) 的捲軸 */
}

/* WebKit 核心瀏覽器特定區域的捲軸隱藏 (手動展開版) */
.projet-info-content-scrollable::-webkit-scrollbar,
.projet-image-content-scrollable::-webkit-scrollbar {
        width: 0 !important; /* 允許垂直捲軸有寬度 */
        height: 0 !important; /* 允許水平捲軸有高度 */
        background: auto !important; /* 允許背景顯示 */
        -webkit-appearance: auto !important; /* 恢復瀏覽器預設外觀 */
        display: block !important; /* 嘗試直接顯示捲軸 */
}

.projet-info-content-scrollable::-webkit-scrollbar-track,
.projet-image-content-scrollable::-webkit-scrollbar-track {
    background: transparent !important; /* 捲軸軌道透明 */
}

.projet-info-content-scrollable::-webkit-scrollbar-thumb,
.projet-image-content-scrollable::-webkit-scrollbar-thumb {
    background: transparent !important; /* 捲軸滑動條透明 */
    border: none !important; /* 無邊框 */
}

/* ---------------------------------------------------------------- */
/* 6. Hashtag 樣式 (通用佈局與區分視覺) */
/* ---------------------------------------------------------------- */

/* === Hashtag 容器的通用佈局樣式 (適用於所有頁面中帶有這些 class 的 Hashtag 區塊) === */
.projet-single-hashtags, /* 單一作品頁面的 Hashtag 容器 */
.projet-hashtags,
.essai-hashtags,
.essai-single-hashtags {        /* 歸檔頁面的 Hashtag 容器 (以及未來可能在首頁使用的相同 class) */
    display: flex;        /* 使用 Flexbox 讓 Hashtag 橫向排列 */
    flex-wrap: wrap;      /* 允許 Hashtag 換行 */
    gap: 3.5px 7.5px;             /* 每個 Hashtag 之間的間距 */
    margin-top: 5px;     /* 調整與上方內容的間距 */
}

/* === 歸檔頁面的 Hashtag 視覺樣式 (作為基礎樣式) === */
.projet-hashtags h6,
.essai-hashtags h6 { /* **這行末尾沒有逗號** */
    background-color: transparent;
    padding: 5px 0px;
    border-radius: 0px;
    margin: 0; /* 移除 h6 預設外邊距 */
    white-space: nowrap;
    text-decoration: none;
}

/* === 單一作品頁面的 Hashtag 視覺樣式 (覆蓋上面的基礎樣式) === */
/* **這段 CSS 必須定義在 .projet-hashtags h6 之後，以確保優先級生效** */
.projet-single-hashtags h6 a,
.essai-single-hashtags h6 a {
    text-decoration: none !important; /* 移除連結下劃線 */
    display: inline-block !important; /* 讓其可以設定 padding 和 width/height */
    background-color: #111111 !important;
    color: #ffffff !important;
    padding: 6px 6px !important;
    border: none !important;
    border-radius: 3px !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
    margin: 0 !important;
    white-space: nowrap !important; /* 防止文字斷行 */
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

.projet-single-hashtags h6 a:hover,
.essai-single-hashtags h6 a:hover {
    background-color: #777777 !important; /* 懸停時顏色變深 */
    color: #ffffff !important; /* 懸停時保持白色 */
}

/* ---------------------------------------------------------------- */
/* essais 瀑布流布局 */
/* ---------------------------------------------------------------- */

/* 瀑布流網格容器樣式 (針對 .essais-flat-list) */
.essais-flat-list {
    display: block; /* 保持塊級元素特性 */
    column-count: 4; /* 設置為 4 列，與 hashtag-archive 的預設保持一致 */
    column-gap: 20px; /* 列之間的間距 */
    padding: 0px; /* 調整內邊距 */
}

/* 瀑布流項目樣式 (針對 .essai-item-flat) */
.essai-item-flat {
    break-inside: avoid-column; /* 防止內容塊在列中被截斷 */
    margin-bottom: 20px; /* 設置每個項目之間的垂直間距 */
    /* 您可以在這裡添加其他樣式，如背景、邊框、陰影等，以匹配您的設計 */
}

/* 媒體查詢：適應不同螢幕尺寸 */
@media (max-width: 768px) {
    .essais-flat-list {
        column-count: 1;
        padding: 0 0px; /* 調整左右邊距 */
    }
}

/* ---------------------------------------------------------------- */
/* 7. Hashtag 瀑布流布局 */
/* ---------------------------------------------------------------- */

.hashtag-archive-main-container {
    padding: 40px 20px; /* 上下 40px，左右 20px 的頁面邊距 */
    margin: 0 auto; /* 保持水平居中 */
    box-sizing: border-box; /* 確保 padding 不增加總寬度 */
}

/* ================================================================ */
/* 瀑布流網格容器樣式 (針對 .projet-grid-container) */
/* ---------------------------------------------------------------- */
.projet-grid-container {
    display: block;
    column-count: 4;
    column-gap: 20px; /* 列之間的間距，與原來的 gap 保持一致 */
    padding: 0px;
}

/* ================================================================ */
/* 卡片 (card) 樣式 (針對 hashtag 歸檔頁面) */
/* ---------------------------------------------------------------- */
.projet-card,
.essai-card {
    padding: 5px; /* 卡片內部內容的內邊距：維持與圖說一致的內部間距 */
    overflow: hidden; /* 確保內容不會溢出 */
    break-inside: avoid; /* 幫助瀑布流佈局避免卡片被切斷（儘管現在用 grid，這是一個好的通用屬性） */
    box-sizing: border-box; /* 邊框和內邊距包含在寬度內 */
    display: block; /* 讓 .projet-card 成為一個塊級元素，方便內部排版 */
    text-decoration: none; /* 移除連結下劃線（如果卡片本身作為連結） */
    color: inherit; /* 繼承父元素顏色 */
    width: 100%; /* 確保卡片在各自的列中佔滿寬度 */
    margin-bottom: 20px;
}

/* 確保卡片內的連結覆蓋整個圖片區域 (根據你提供的 PHP，連結只包裹圖片) */
.projet-card > a,
.essai-card > a {
    display: block; /* 讓圖片連結覆蓋整個圖片區域 */
    text-decoration: none; /* 移除連結下劃線 */
    color: inherit; /* 繼承父元素顏色 */
}

/* 圖片樣式 */
.projet-card img, 
.essai-card img {
    width: 100% !important; /* 圖片寬度 100% */
    height: auto !important; /* 高度自動調整，保持圖片比例 */
    display: block; /* 圖片顯示為塊級元素 */
    margin-bottom: 7.5px; /* 圖片下方與標題的間距：維持與圖說一致 */
}

/* 標題樣式 (來自 h4) */
.projet-card .projet-title h4,
.essai-card .essai-title h4{
    margin: 0 0 0.15em;
}

/* 日期樣式 (來自 h5) */
.projet-card .projet-date h5 {
    margin: 0; /* 下方與 Hashtag 的間距 */
}

/* Hashtag 容器樣式 */
.projet-card .projet-hashtags,
.essai-card .essai-hashtags {
    display: flex; /* 使用 Flexbox 讓其子元素橫向排列 */
    flex-wrap: wrap; /* 允許換行 */
    gap: 3.5px 7.5px; /* 設定每個 hashtag 之間的間距 */
    margin-top: 0.15; /* 已經由 .projet-date 的 margin-bottom 控制間距 */
    margin-bottom: 0; /* 確保容器底部沒有多餘間距 */
}

/* 單個 Hashtag 的樣式 (來自 h6) */
.projet-card .projet-hashtags h6,
.essai-card .essai-hashtags h6 {
    background-color: transparent; /* 保持透明背景 */
    padding: 5px 0px; /* 保持內邊距 */
    border-radius: 0px; /* 保持圓角 */
}

/* 針對 Hashtag 連結的樣式 */
.projet-card .projet-hashtags h6 a,
.essai-card .essai-hashtags h6 a {
    text-decoration: none; /* 移除連結下劃線 */
    color: inherit; /* 繼承父元素顏色 */
}

/* 響應式調整 */

@media (max-width: 768px) { /* 在小螢幕（例如手機）下調整 */
    .projet-grid-container {
        column-count: 1 !important; /* 強制顯示為單一欄 */
        column-gap: 0; /* 單欄時列之間不需要間距 */
        padding: 0;
    }

    .hashtag-archive-main-container {
        padding: 20px 10px; /* 小螢幕下調整頁面邊距 */
    }

    .projet-card,
    .essai-card {
        margin-bottom: 15px; /* 卡片之間的垂直間距 */
        width: auto;
    }

    .projet-card img,
    .projet-card .projet-title,
    .projet-card .projet-date,
    .essai-card img,
    .essai-card .essai-title {
        margin-bottom: 15px; /* 小螢幕下調整間距 */
    }

    .projet-card .projet-title,
    .essai-card .essai-title {
        font-size: 1.5rem; /* 小螢幕下標題字體縮小 */
        line-height: 1.2;
    }

    .projet-card .projet-date {
        font-size: 1.2rem; /* 小螢幕下日期字體縮小 */
        line-height: 1.2;
    }
}

/* ================================================================ */
/* 浮動標題卡片樣式 (用於隨機散佈的標題) */

.floating-title-card {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: left;
    text-align: left;
    break-inside: avoid-column;
    margin-bottom: 20px;
}

.floating-title-card h3 {
    font-size: 2.6rem;
    color: #111111;
    font-family: 'Livvic', 'Noto Sans TC', sans-serif;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .floating-title-card {
        /* 確保這裡也沒有 min-height 屬性 */
    }
    .floating-title-card h3 {
        font-size: 3rem;
    }
}

/* Custom Styles for Video Max Height */
.wp-block-video video,
.wp-block-video iframe {
    max-width: 100%;
    height: auto;
    max-height: 600px; /* 您設定的最大高度 */
}