/* 公用工具类（纯 CSS，全站每页随布局加载）。
        .nav-scrolled / .card-hover 含 @apply，已迁至 /assets/css/tailwind.css 由构建器编译。 */
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    .bg-gradient {
        background: linear-gradient(135deg, #000000 0%, #4b4f58 100%);
    }
    .transition-custom {
        transition: all 0.3s ease-in-out;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: 'Inter', sans-serif;
    }
    /* Slider Styles */
    .slider-container {
        position: relative;
        overflow: hidden;
    }
    .slider-wrapper {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    .slider-item {
        min-width: 100%;
        flex-shrink: 0;
    }
    .slider-nav {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        margin-top: 2rem;
    }
    .slider-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #e5e7eb;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .slider-dot.active {
        background-color: #a91f29;
    }
    .slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(169, 31, 41, 0.8);
        color: white;
        border: none;
        padding: 0.75rem 1rem;
        cursor: pointer;
        border-radius: 0.375rem;
        z-index: 10;
        transition: background-color 0.3s ease;
        font-size: 1.25rem;
    }
    .slider-btn:hover {
        background-color: rgba(169, 31, 41, 1);
    }
    .slider-btn.prev {
        left: 1rem;
    }
    .slider-btn.next {
        right: 1rem;
    }
    /* Pagination styles */
    .pagination {
        display: flex;
        justify-content: center;
        padding-left: 0;
        list-style: none;
        border-radius: 0.375rem;
    }
    .pagination .page-item {
        margin: 0 0.25rem;
    }
    .pagination .page-link {
        position: relative;
        display: block;
        padding: 0.5rem 0.75rem;
        margin-left: -1px;
        line-height: 1.5;
        color: #4b4f58;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .pagination .page-link:hover {
        color: #a91f29;
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }
    .pagination .page-item.active .page-link {
        color: #fff;
        background-color: #a91f29;
        border-color: #a91f29;
    }
    .pagination .page-link:focus {
        z-index: 3;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(169, 31, 41, 0.25);
    }
    .pagination input[type="text"] {
        width: 45px;
        margin: 0;
        padding: 0;
        text-align: center;
        border: 0;
        font-size: 0.875rem;
        font-weight: 500;
        color: #a91f29;
    }
    .pagination input[type="text"]:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(169, 31, 41, 0.2);
        border-radius: 0.25rem;
    }
    /* Nav dropdown image border styles */
    .nav-dropdown-img {
        position: relative;
        border-left: 10px solid #000;
        border-top: 10px solid #000;
        transition: all 0.3s ease;
    }
    .nav-dropdown-img:hover {
        border-left-color: #a91f29;
        border-top-color: #a91f29;
    }



/* 修正語言切換器不要浮動到右上角 */
#navbar .yf-language-switch {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
z-index: 9999 !important;
}

/* 語言切換外層 */
#navbar .yf-language-switch .yf-dropdown {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
}

/* 語言按鈕 */
#navbar .yf-language-switch .yf-btn,
#navbar .yf-language-switch .yf-header-item,
#navbar #language-btn {
height: 40px !important;
padding: 8px 14px !important;
border-radius: 6px !important;
border: none !important;
background-color: #A91F29 !important;
color: #ffffff !important;
font-size: 14px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
box-shadow: none !important;
cursor: pointer !important;
text-decoration: none !important;
}

/* 語言按鈕 hover */
#navbar .yf-language-switch .yf-btn:hover,
#navbar .yf-language-switch .yf-header-item:hover,
#navbar #language-btn:hover {
background-color: #8f1821 !important;
color: #ffffff !important;
}

/* 國旗圖標 */
#navbar .yf-language-switch img {
width: 22px !important;
height: auto !important;
display: inline-block !important;
}

/* 語言下拉菜單 */
#navbar .yf-language-switch .yf-dropdown-menu {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
margin-top: 0 !important;
min-width: 160px !important;
background: #ffffff !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
padding: 6px 0 !important;
z-index: 99999 !important;
}

/* 語言下拉 hover 緩衝區，避免鼠標移動時消失 */
#navbar .yf-language-switch .yf-dropdown-menu::before {
content: "";
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}

/* 語言下拉選項 */
#navbar .yf-language-switch .yf-dropdown-item {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 14px !important;
color: #111111 !important;
font-size: 14px !important;
line-height: 1.4 !important;
white-space: nowrap !important;
text-decoration: none !important;
background: transparent !important;
}

/* 語言下拉選項 hover */
#navbar .yf-language-switch .yf-dropdown-item:hover {
background-color: #f7f0f1 !important;
color: #A91F29 !important;
}

/* 修正主導航二級菜單 hover 斷層 */
#navbar .group > div.absolute {
margin-top: 0 !important;
padding-top: 8px !important;
z-index: 9999 !important;
}

/* 主導航二級菜單 hover 緩衝區 */
#navbar .group > div.absolute::before {
content: "";
position: absolute;
top: -8px;
left: 0;
right: 0;
height: 8px;
}

/* 二級菜單選項 */
#navbar .group > div.absolute a {
color: #111111 !important;
}

/* 二級菜單選項 hover */
#navbar .group > div.absolute a:hover {
background-color: #ffffff !important;
color: #A91F29 !important;
}

/* Login / Contact Us 按鈕統一主題紅 */
#navbar a.bg-primary {
background-color: #A91F29 !important;
color: #ffffff !important;
}

#navbar a.bg-primary:hover {
background-color: #8f1821 !important;
color: #ffffff !important;
}

/* 二級/三級下拉面板底色兜底：
HTML 上的 bg-[#D7D8D9]/90 、/95 是 Tailwind 任意值類，編譯版 tailwind.css 並未收錄
（只有額外加載 CDN 版 Tailwind 的頁面才生效），否則面板全透明、頁面文字會透上來。
這裡用純 CSS 指定不透明底色，任何頁面都可靠。 */
#navbar .group > div.absolute,
#navbar .nav-sub-panel {
background-color: #D7D8D9;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border-radius: 0.375rem;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

/* ── 主導航三級菜單 ──
不使用 Tailwind 具名 group 變體（編譯版 tailwind.css 未必包含），改用純 CSS 控制展開 */

/* 二級項容器（帶三級子菜單的那一項） */
#navbar .nav-sub {
position: relative;
}

/* 二級項標題：文字靠左、箭頭靠右 */
#navbar .nav-sub > .nav-sub-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

/* 三級面板：默認隱藏，hover 二級項時從右側展開 */
#navbar .nav-sub-panel {
position: absolute;
left: 100%;
top: -8px;
margin-left: 2px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
z-index: 10000;
}

#navbar .nav-sub:hover > .nav-sub-panel {
opacity: 1;
visibility: visible;
}

/* 三級面板 hover 緩衝區，避免鼠標橫向移動時斷開 */
#navbar .nav-sub-panel::before {
content: "";
position: absolute;
top: 0;
left: -6px;
width: 6px;
height: 100%;
}

/* 窄視窗時三級菜單改向左展開，避免溢出屏幕右緣 */
@media (max-width: 1279px) {
#navbar .nav-sub-panel {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
}
#navbar .nav-sub-panel::before {
    left: auto;
    right: -6px;
}
}

/* ══ 導航欄響應式規劃 ══════════════════════════════════════════════
三段式：
    ≥1536px  寬屏 —— 容器沿用站點寬屏寬度 1536px（維持現狀）
    1200px–1535.98px  PC 窄屏 —— 容器佔滿視口寬度（100vw），並收緊間距
    <1200px  改用移動端漢堡菜單
桌面導航共 8 組項目（About Us / What is AIPO / GEO Optimization / Blog /
GEO Lab / Whitepaper / Join Free / 語言切換）加 logo，單行排開需約 1130px。
關鍵：#navbar 內用的是 Tailwind 響應式 .container，視口 1080–1279px 時它被卡在
1024px（比視口還窄），導航被迫擠在 1024px 內換行 —— 這才是換行的根因，
因此下面用 header#navbar 提高優先級接管容器寬度（頁面級 CSS 裡的
「#navbar .container」還原塊優先級較低，不會再覆蓋它）。
若要調整臨界值，只需改下面的 1199.98px / 1200px。 */

/* 導航條高度變量 —— 供各頁面包屑的頂部避讓使用（fixed 導航浮於內容之上）。
高度 = logo 渲染高度 + py-2 的上下各 8px。logo 原圖 1091×322（比例 0.2952）：
    logo 350px → 103px + 16px ≈ 120px
    logo 240px →  71px + 16px ≈  88px（僅 1200–1535.98px 這一檔會縮小 logo）
面包屑統一用 calc(var(--navbar-h) + 20px)，20px 為導航條與面包屑之間的呼吸間距。
日後若調整導航 logo 尺寸，只需改這裡的變量，12 個頁面的面包屑會自動跟隨。 */
:root { --navbar-h: 120px; }
@media (min-width: 1200px) and (max-width: 1535.98px) {
:root { --navbar-h: 88px; }
}
/* 移動端 logo 限高 56px → 導航條約 56+16=72px */
@media (max-width: 1199.98px) {
:root { --navbar-h: 72px; }
}

/* 容器寬度：窄屏佔滿視口，寬屏維持 1536px */
header#navbar > .container {
width: 100%;
max-width: none;
padding-left: 24px;
padding-right: 24px;
}
@media (min-width: 1536px) {
header#navbar > .container { max-width: 1536px; }
}

/* 導航行本身永不換行 */
#navbar nav { flex-wrap: nowrap; }
#navbar .nav-desktop { flex-wrap: nowrap; }
#navbar .nav-desktop a { white-space: nowrap; }
/* logo 不被壓縮 —— 僅限桌面區間；移動端仍需讓 logo 隨視口收縮，
否則 350px 的 logo 會把漢堡按鈕擠出屏幕 */
@media (min-width: 1200px) {
#navbar nav > a:first-child { flex-shrink: 0; }
}

/* 斷點切換 */
@media (max-width: 1199.98px) {
#navbar .nav-desktop { display: none !important; }
/* 漢堡按鈕：原本沒有任何內距，點擊區只有圖標本身（約 24px），
    低於 44px 的觸控建議值，且視覺上貼著容器邊緣。
    這裡給足 44×44 的點擊區，並用負右邊距讓圖標的光學邊緣仍與
    容器內距對齊（按鈕變大但看上去位置不變）。 */
#navbar #menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border-radius: 8px;
    transition: background-color .2s ease;
}
#navbar #menu-toggle:active { background-color: #f3f4f6; }
#navbar #menu-toggle i { line-height: 1; }
/* 漢堡按鈕必定有位置 —— 之前僅靠 flex-shrink 讓 logo 收縮，依賴圖片加載時機，
    375px 屏（容器內寬 327px）上 350px 的 logo 會把按鈕推到 x≈374px 的視口邊緣，
    表現為「閃一下就不見」。這裡對 logo 顯式限高，寬度按比例自適應，結果可預期。 */
#navbar nav { gap: 12px; }
#navbar #menu-toggle { flex: 0 0 auto; }
#navbar nav > a:first-child { min-width: 0; flex: 0 1 auto; }
#navbar nav > a:first-child img { max-height: 56px; width: auto; max-width: 100%; }
}
@media (min-width: 1200px) {
#navbar .nav-desktop { display: flex !important; }
#navbar #menu-toggle { display: none !important; }
/* 視窗由窄變寬時，避免已展開的移動菜單殘留在桌面版導航下方 */
#mobile-menu { display: none !important; }
}

/* PC 窄屏（1200–1535.98px）：容器雖已佔滿視口，仍需收緊間距與縮小 logo，
確保 8 組項目穩定保持單行。 */
@media (min-width: 1200px) and (max-width: 1535.98px) {
#navbar .nav-desktop { font-size: 0.9rem; }
#navbar .nav-desktop > :not([hidden]) ~ :not([hidden]) { margin-left: 16px; }
#navbar nav > a:first-child img { width: 240px; }
}

/* ── 移動端菜單項樣式 ──
原本 22 個條目只是一串 space-y-4 的純文字鏈接，點擊區僅約 20px 高（低於
44px 的觸控建議值），層級也只靠 pl-4 / pl-8 的縮進體現，不易辨認。
下面把間距改由每項自身的內邊距承擔（點擊區連貫）、分組標題加分隔線、
三級項加左側細線，並修正底部按鈕的對齊與文字顏色。 */
#mobile-menu { padding: 4px 8px 16px; }
#mobile-menu a {
display: block;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 12px;
font-size: 15px;
line-height: 1.4;
border-radius: 6px;
}
/* 未帶 pl-* 縮進的頂層項補左內距；帶 pl-* 的保留 Tailwind 的縮進值 */
#mobile-menu a:not([class*="pl-"]) { padding-left: 12px; }
#mobile-menu a:active { background-color: #f3f4f6; }
/* 分組標題（font-semibold）上方加分隔線 */
#mobile-menu a.font-semibold {
margin-top: 10px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
/* 三級項用左側細線體現層級 */
#mobile-menu a.pl-8 {
margin-left: 16px;
padding-left: 12px;
border-left: 2px solid #e5e7eb;
}
/* ── 底部按鈕組 ──
上面把 space-y-4 的外邊距清零後，鏈接項靠自身內邊距補回了間距，
但按鈕與語言切換條沒有補足，三者視覺上粘連在一起。這裡單獨給間距：
按鈕之間 12px，按鈕組與上方鏈接列表之間 20px，語言條再留 16px。 */
#mobile-menu a.bg-primary {
margin-top: 12px;
padding-top: 12px;
padding-bottom: 12px;
color: #ffffff;
font-weight: 600;
text-align: center;
}
#mobile-menu a.bg-primary:hover { color: #ffffff; }
/* 按鈕組的第一個（緊跟在普通鏈接之後）與列表多拉開一些 */
#mobile-menu a:not(.bg-primary) + a.bg-primary {
margin-top: 20px;
padding-top: 12px;
border-top: none;
}
/* 語言切換區是 div，不受上面針對 a 的規則影響，單獨補間距。 */
#mobile-menu .mobile-menu-list > div { margin-top: 16px; }

/* ── 移動菜單內的語言切換 ──
框架的語言組件（Language_model::code()->bar）帶硬編碼 ID
（#language-switch / #language-btn / #yf-dropdown-menu），同頁輸出兩次
會產生重複 ID；其 app.js 全部用 getElementById/querySelector 取元素，
只會綁到第一個（桌面那份），移動菜單那份沒有任何事件 —— 點了沒反應。
所以移動菜單不再輸出該組件，改由頁尾腳本克隆桌面那份的語言鏈接，
平鋪成一組膠囊按鈕：一次點擊即達，也不會被滾動容器裁掉下拉層。 */
#mobile-lang-switch { display: none; }
#mobile-lang-switch.is-ready { display: block; }
#mobile-lang-switch .mobile-lang-label {
padding: 0 12px 8px;
font-size: 12px;
color: #6b7280;
}
#mobile-lang-switch .mobile-lang-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 12px;
}
/* 語言項是克隆來的 <a class="yf-dropdown-item not-translate-url">，
這裡把它從「下拉選項」重塑為膠囊按鈕。特異性需壓過上面的 #mobile-menu a。 */
#mobile-lang-switch .yf-dropdown-item {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin: 0 !important;
padding: 9px 14px !important;
border: 1px solid #e5e7eb;
border-radius: 999px;
background: #ffffff;
color: #111827 !important;
font-size: 14px !important;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
#mobile-lang-switch .yf-dropdown-item img {
width: 22px;
height: auto;
margin: 0 !important;
display: inline-block;
}
/* 當前語言：不可點的高亮態 */
#mobile-lang-switch .yf-dropdown-item.is-current {
border-color: #A91F29;
background: #A91F29;
color: #ffffff !important;
}
#mobile-lang-switch .yf-dropdown-item:active { background-color: #f3f4f6; }
#mobile-lang-switch .yf-dropdown-item.is-current:active { background-color: #A91F29; }
/* 底部留一點空間，避免最後一項緊貼容器邊緣 */
#mobile-menu { padding-bottom: 24px; }

/* 移動菜單項目較多，超出視窗時允許菜單自身滾動，避免底部項目點不到
（導航條是 fixed，菜單溢出屏幕後無法通過頁面滾動看到） */
/* 展開態：JS 通過移除 .hidden 來展開，這裡顯式聲明避免被其它 display 規則壓住 */
#navbar #mobile-menu:not(.hidden) { display: block; }
#mobile-menu {
max-height: calc(100vh - 120px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh) {
#mobile-menu { max-height: calc(100dvh - 120px); }
}

    /* ── Footer 配色：对齐全站基调 ──
        站点主体为白/浅灰底 + #991B2D 主色，多数页面 footer 上方即是整块主色 CTA，
        因此页脚用站点墨色 #111827 收尾，避免与上方红色通栏连成一片。
        标题白、正文与链接用次级灰，悬停转白；主色只保留在社交按钮悬停与订阅按钮上。 */
    #footer { background: #111827; color: #9ca3af; }
    #footer h4 { color: #ffffff; }
    /* 社交按钮与订阅按钮里的图标：墨色底上统一取白，不依赖各处是否写了 .text-white */
    #footer .fa { color: #ffffff; }
    #footer a { transition: color .2s ease; }
    /* 页脚链接统一「悬停转白」，覆盖个别未写 hover:text-white 的链接 */
    #footer a:hover { color: #ffffff; }
    #footer input[type="email"] { color: #111827; }

    /* 回到頂部按鈕：層級與導航條 (#navbar 的 z-50) 對齊，避免被帶層級的內容蓋住。
        按鈕本身未帶 .text-white 類，紅底上的箭頭在此直接指定白色。 */
    #back-to-top { color: #ffffff; }