/*
Theme Name: Business Theme
Theme URI: https://example.com/
Author: AivarCode
Author URI: https://example.com/
Description: 具備會員系統、產品管理以及 AI 生成摘要功能的商業網站佈景主題。
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: business-theme
Domain Path: /languages
*/

/* ==========================================================================
   1. 全域變數與基礎設定 (Variables & Reset)
   ========================================================================== */
:root {
    --primary-color: #2563eb;       /* 專業藍 */
    --primary-hover: #1d4ed8;
    --secondary-color: #0f172a;     /* 深色字體 */
    --text-color: #334155;          /* 一般內文 */
    --bg-color: #f8fafc;            /* 淺灰背景 */
    --light-blue-bg: #f0f9ff;       /* 淡藍背景，用於區塊交錯 */
    --white: #ffffff;
    --border-color: #e2e8f0;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-hover);
}

/* ==========================================================================
   2. 頁首與導覽列 (Header & Navigation)
   ========================================================================== */
.site-header {
    background-color: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 1.25rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.site-title a {
    color: var(--secondary-color);
}

.site-description {
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    align-items: center;
    margin: 0;
}

.main-navigation a {
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 1rem;
}

.main-navigation a:hover {
    color: var(--primary-color);
}

/* 下拉選單 (Sub-menu) 樣式 */
.main-navigation li {
    position: relative;
}

.main-navigation .sub-menu {
    display: none; /* 預設隱藏 */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 160px;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
    z-index: 1000; /* 確保桌面版次選單不會被下方的內容區塊遮擋 */
}

.main-navigation li:hover > .sub-menu {
    display: flex; /* 滑鼠懸停時顯示 */
}

.main-navigation .sub-menu a {
    padding: 0.75rem 1.25rem;
    display: block;
}

.main-navigation .sub-menu a:hover {
    background-color: var(--bg-color);
}

/* ==========================================================================
   3. 首頁英雄區塊 (Hero Section)
   ========================================================================== */
.hero-section-reimagined {
    background-color: var(--light-blue-bg);
    padding: 6rem 5% 8rem;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .hero-container {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--secondary-color);
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    color: var(--text-color);
}

.hero-actions {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
}

.hero-image-wrapper {
    height: 400px;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* 確保圖片能被圓角裁切 */
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片填滿容器且不變形 */
    object-position: top; /* 將圖片對齊頂部，避免上方文字被裁切 */
}

/* ==========================================================================
   4. 按鈕元件 (Buttons)
   ========================================================================== */
.button {
    display: inline-block;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.button-primary {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.button-primary:hover {
    background-color: var(--primary-hover);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.button-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.button-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

/* ==========================================================================
   5. 功能特色區塊 (Features Section)
   ========================================================================== */
.features-section {
    background-color: var(--white);
    padding: 6rem 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.features-section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 4rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-item {
    background-color: var(--bg-color);
    padding: 3rem 2rem;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.feature-item h3 {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.feature-item p {
    color: #64748b;
}

/* ==========================================================================
   6. 解決方案區塊 (Solutions Section)
   ========================================================================== */
.solutions-section {
    background-color: var(--bg-color);
    padding: 6rem 5%;
}

.solutions-section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}

.section-description {
    font-size: 1.125rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto 4rem;
    text-align: center;
}

.solutions-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.solution-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 768px) {
    .solution-item {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    /* Alternating layout */
    .solution-item:nth-child(even) .solution-item-image {
        order: 2;
    }
}

.solution-item-image {
    height: 350px;
    background-color: var(--border-color);
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.03);
}

/* Placeholder images with text */
.solution-image-1 {
    background-image: url('assets/images/AIVARCODE_Sample01.jpg');
}
.solution-image-2 {
    background-image: url('assets/images/AIVARCODE_Sample02.jpg');
}
.solution-image-3 {
    background-image: url('assets/images/AIVARCODE_Sample03.jpg');
}

.solution-feature-label {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--light-blue-bg);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.solution-item-content h3 {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.solution-item-content p {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* ==========================================================================
   7. 應用場景區塊 (Application Scenarios Section)
   ========================================================================== */
.scenarios-section {
    padding: 8rem 5%;
    background-color: var(--white);
    text-align: center;
}

.scenarios-section h2 {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}

.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.scenario-item {
    background-color: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.scenario-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.scenario-image-wrapper {
    height: 200px;
    overflow: hidden;
}

.scenario-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.scenario-item:hover .scenario-image-wrapper img {
    transform: scale(1.05);
}

.scenario-item h3 {
    font-size: 1.25rem;
    color: var(--secondary-color);
    padding: 1.5rem;
    margin: 0;
    text-align: center;
}

/* ==========================================================================
   8. 行動呼籲區塊 (Call to Action Section)
   ========================================================================== */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: 5rem 2rem;
    text-align: center;
}

.cta-section h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--white);
}

.cta-section p {
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: #cbd5e1;
}

.cta-section .button-primary {
    font-size: 1.125rem;
    padding: 1rem 2.5rem;
}

/* ==========================================================================
   9. 頁尾 (Footer)
   ========================================================================== */
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-footer {
    background-color: var(--secondary-color);
    color: #94a3b8;
    padding: 4rem 5% 0;
    margin-top: auto; /* 將頁尾推到底部 */
}

.footer-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #334155;
}

.footer-column h3.footer-title {
    font-size: 1.125rem;
    color: var(--white);
    margin-bottom: 1.5rem;
}

.footer-about p {
    font-size: 0.95rem;
    line-height: 1.7;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-column ul a {
    color: #94a3b8;
    transition: color 0.3s ease;
}

.footer-column ul a:hover {
    color: var(--white);
}

.footer-logo {
    display: block; /* 確保寬高設定能正確作用 */
    max-width: 100%; /* 確保圖片不會超出容器 */
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
    object-fit: cover; /* 確保圖片比例正確 */
    border-radius: 8px; /* 與 QR Code 樣式一致 */
}

.footer-qr-codes .qr-code-container {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
}

.footer-qr-codes .qr-code-item {
    text-align: center;
}

.footer-qr-codes .qr-code-item img {
    width: 100px;
    height: 100px;
    background-color: var(--white);
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.footer-bottom {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.9rem;
    color: #64748b;
}

/* ==========================================================================
   10. 法律資訊頁面 (Legal Pages)
   ========================================================================== */
.legal-page {
    background-color: var(--white);
    padding: 4rem 5%;
}

.legal-container {
    max-width: 800px;
    margin: 0 auto;
}

.legal-page .entry-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.legal-page .entry-subtitle {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-top: 1rem;
}

.legal-page .entry-title {
    font-size: 2.5rem;
    color: var(--secondary-color);
}

.legal-page .entry-content h3 {
    font-size: 1.75rem;
    color: var(--secondary-color);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.legal-page .entry-content h4 {
    font-size: 1.25rem;
    color: var(--secondary-color);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-page .entry-content p,
.legal-page .entry-content li {
    font-size: 1.05rem;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.legal-page .entry-content ul,
.legal-page .entry-content ol {
    padding-left: 2rem;
}

.legal-page .entry-content strong {
    color: var(--secondary-color);
}

.contact-form-placeholder {
    padding: 2rem;
    background-color: var(--bg-color);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    text-align: center;
    color: var(--text-color);
    margin-top: 1rem;
}

/* ==========================================================================
   11. 即將推出頁面 (Coming Soon Page)
   ========================================================================== */
.coming-soon-page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 5%;
    background-color: var(--white);
}

.coming-soon-container {
    max-width: 600px;
}

.coming-soon-icon {
    width: 4rem;
    height: 4rem;
    color: var(--primary-color);
    margin: 0 auto 1.5rem;
}

.coming-soon-title {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.coming-soon-text {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 2.5rem;
}

/* ==========================================================================
   12. 一般頁面與文章 (Generic Page & Post)
   ========================================================================== */
.site-main {
    /* 為非首頁的頁面提供通用邊距 */
    padding: 4rem 5%;
}

.page-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--white);
    padding: 2rem 3rem 3rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.page-container .entry-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.page-container .entry-title {
    font-size: 2.5rem;
    color: var(--secondary-color);
}

.page-container .entry-content p,
.page-container .entry-content li {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.page-container .entry-content h2 {
    font-size: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.page-container .entry-content h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

/* ==========================================================================
   13. AIVAR 外掛整合樣式 (Plugin Integration Styles)
   ========================================================================== */

/* --- 會員註冊/登入表單 ([aivar_frontend_auth]) --- */
.aivar-auth-shell {
    --aivar-sand: var(--bg-color);
    --aivar-ink: var(--secondary-color);
    --aivar-accent: var(--primary-color);
    --aivar-accent-dark: var(--primary-hover);
    --aivar-line: var(--border-color);
    --aivar-muted: var(--text-color);
    --aivar-warm: var(--white);
}

.aivar-auth-status {
    background-color: var(--light-blue-bg);
    border-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 8px;
}

.aivar-auth-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.aivar-auth-input {
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-family: var(--font-main);
}

.aivar-auth-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); /* 使用主題主要顏色 */
}

.aivar-auth-button {
    /* 模仿 .button-primary */
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.aivar-auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.aivar-auth-button-secondary {
    /* 模仿 .button-secondary */
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.aivar-auth-button-secondary:hover {
    background: var(--primary-color);
    color: var(--white);
}

.aivar-auth-pill {
    background-color: var(--light-blue-bg);
    color: var(--primary-color);
}

/* --- 產品管理介面 ([aivar_product_manager]) --- */
.aivar-product-manager-auth {
    padding: 2rem;
    background-color: var(--light-blue-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-align: center;
}

.aivar-product-manager-auth p {
    margin-bottom: 1.5rem;
}

.aivar-product-manager-auth a {
    display: inline-block;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.aivar-product-manager-auth a:hover {
    background-color: var(--primary-hover);
    color: var(--white);
}

/* 產品管理表單與表格 */
.entry-content form {
    background-color: var(--light-blue-bg);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.entry-content form p {
    margin-bottom: 1rem;
}

.entry-content form label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.entry-content form input[type="text"],
.entry-content form input[type="url"],
.entry-content form select {
    width: 100%;
    max-width: 450px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
}

.entry-content form button[type="submit"] {
    /* 套用 .button-primary 樣式 */
    display: inline-block;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.entry-content form button[type="submit"]:hover {
    background-color: var(--primary-hover);
}

/* 產品列表與操作按鈕 */
.aivar-front-table-wrap {
    margin-top: 1.5rem;
}

.aivar-front-actions {
    display: flex;
    flex-direction: column; /* 將按鈕垂直排列 */
    align-items: stretch;   /* 讓按鈕撐滿容器寬度 */
    gap: 8px;               /* 按鈕之間的間距 */
    min-width: 90px;        /* 設定一個最小寬度，避免文字換行 */
}

/*
 * 修正「刪除」按鈕的樣式與排版問題
 * 1. 使用 white-space: nowrap; 防止按鈕內的文字（如「刪除」）被換行。
 * 2. 使用高優先權的選擇器 .entry-content .aivar-front-actions .aivar-front-button-danger
 *    來覆寫全域的 form button 樣式，確保「刪除」按鈕顯示為紅色，而非預設的藍色。
 */
.aivar-front-actions .aivar-front-button {
    white-space: nowrap;
}

.entry-content .aivar-front-actions .aivar-front-button-danger {
    background-color: #b32d2e; /* 外掛預設的危險紅色 */
    color: #fff;
    border-color: #b32d2e;
}

/* 
 * 使用 display: contents; 讓 <form> 標籤在排版上消失，
 * 使得內部的 <button> 直接成為 .aivar-front-actions 的 flex item。
 * 這樣可以確保「編輯」和「刪除」按鈕的對齊和尺寸完全一致。
 */
.aivar-front-actions form {
	/*
	 * 重新採用 display: contents; 這是處理此類排版問題最理想的方案。
	 * 這個屬性會讓 <form> 標籤在視覺上「消失」，使其子元素 <button> 直接成為 .aivar-front-actions 的 flex 子項目。
	 * 如此一來，<button>（刪除）和 <a>（編輯）就會被視為處於完全相同的層級，
	 * flexbox 就能完美地將它們的尺寸和對齊處理得完全一致，從根本上解決高度不一的問題。
	*/
	display: contents;
}

/* 統一按鈕互動效果，並增加陰影提升立體感 */
.aivar-front-button {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    will-change: transform; /* 優化動畫效能 */
}

.aivar-front-button:hover {
    transform: translateY(-2px); /* 讓按鈕上浮效果更明顯 */
    opacity: 1; /* 確保 hover 時不透明 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* 增加陰影以提升立體感 */
}

/* 覆寫外掛的次要按鈕 (編輯) hover 樣式，使其更一致 */
.aivar-front-button-secondary:hover {
    background-color: #18372a; /* 佈景主題的主要綠色 */
    color: #fff;
    border-color: #18372a; /* 同步邊框顏色 */
}

/* 覆寫外掛的危險按鈕 (刪除) 樣式，使其更一致 */
.aivar-front-button-danger:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

/* ==========================================================================
   14. AIVAR Gemini Reader 樣式 ([aivar_reader_4])
   ========================================================================== */
.aivar-reader-gemini {
    max-width: 800px;
    margin: 0 auto; /* site-main already has padding */
    font-family: var(--font-main);
    background-color: var(--white);
    padding: 2rem 3rem 3rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.aivar-reader-gemini h2 {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.aivar-reader-gemini h2:first-of-type {
    margin-top: 0;
}

.aivar-reader-gemini p#gemini_label-product {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

#gemini_ai-summary {
    background-color: var(--light-blue-bg);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
    line-height: 1.7;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.aivar-reader-gemini button {
    /* Re-use theme button styles */
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.aivar-reader-gemini button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

/* Secondary button style for stop buttons */
.aivar-reader-gemini button#gemini_aivar-stop,
.aivar-reader-gemini button#gemini_aivar-stop-qa {
    background-color: #64748b; /* Slate */
}
.aivar-reader-gemini button#gemini_aivar-stop:hover,
.aivar-reader-gemini button#gemini_aivar-stop-qa:hover {
    background-color: var(--secondary-color);
}



#gemini_aivar-chat-box {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#gemini_aivar-chat-box div {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    line-height: 1.6;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    align-self: flex-start;
}

/* Style for user messages */
#gemini_aivar-chat-box div.user-message {
    background-color: var(--light-blue-bg);
    border: 1px solid var(--primary-color);
    align-self: flex-end;
}

#gemini_aivar-chat-status {
    margin-top: 0.5rem;
    color: var(--text-color);
    font-size: 0.9rem;
}

/* ==========================================================================
   15. AIVAR Perplexity Reader 樣式 ([aivar_reader_2])
   ========================================================================== */
.aivar-reader-pplx {
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--font-main);
    background-color: var(--white);
    padding: 2rem 3rem 3rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.aivar-reader-pplx .product-image-wrapper {
    margin-bottom: 20px;
    text-align: center;
}

.aivar-reader-pplx .product-image-wrapper img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.aivar-reader-pplx h2 {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.aivar-reader-pplx h2:first-of-type {
    margin-top: 0;
}

.aivar-reader-pplx p#pplx_label-product {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

#pplx_ai-summary {
    background-color: var(--light-blue-bg);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
    line-height: 1.7;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.aivar-reader-pplx button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.aivar-reader-pplx button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.aivar-reader-pplx button#pplx_aivar-stop,
.aivar-reader-pplx button#pplx_aivar-stop-qa {
    background-color: #64748b; /* Slate */
}
.aivar-reader-pplx button#pplx_aivar-stop:hover,
.aivar-reader-pplx button#pplx_aivar-stop-qa:hover {
    background-color: var(--secondary-color);
}



#pplx_aivar-chat-box {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#pplx_aivar-chat-box div {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    line-height: 1.6;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    align-self: flex-start;
}

#pplx_aivar-chat-box div.user-message {
    background-color: var(--light-blue-bg);
    border: 1px solid var(--primary-color);
    align-self: flex-end;
}

#pplx_aivar-chat-status {
    margin-top: 0.5rem;
    color: var(--text-color);
    font-size: 0.9rem;
}

/* ==========================================================================
   16. AIVAR OpenAI Reader 樣式 ([aivar_reader])
   ========================================================================== */
.aivar-reader-openai {
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--font-main);
    background-color: var(--white);
    padding: 2rem 3rem 3rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.aivar-reader-openai .product-image-wrapper {
    margin-bottom: 20px;
    text-align: center;
}

.aivar-reader-openai .product-image-wrapper img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.aivar-reader-openai h2 {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.aivar-reader-openai h2:first-of-type {
    margin-top: 0;
}

.aivar-reader-openai p#openai_label-product {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

#openai_ai-summary {
    background-color: var(--light-blue-bg);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
    line-height: 1.7;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.aivar-reader-openai button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.aivar-reader-openai button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.aivar-reader-openai button#openai_aivar-stop,
.aivar-reader-openai button#openai_aivar-stop-qa {
    background-color: #64748b; /* Slate */
}
.aivar-reader-openai button#openai_aivar-stop:hover,
.aivar-reader-openai button#openai_aivar-stop-qa:hover {
    background-color: var(--secondary-color);
}



#openai_aivar-chat-box {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#openai_aivar-chat-box div {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    line-height: 1.6;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    align-self: flex-start;
}

#openai_aivar-chat-box div.user-message {
    background-color: var(--light-blue-bg);
    border: 1px solid var(--primary-color);
    align-self: flex-end;
}

#openai_aivar-chat-status {
    margin-top: 0.5rem;
    color: var(--text-color);
    font-size: 0.9rem;
}

/* ==========================================================================
   17. AIVAR Nvidia Reader 樣式 ([aivar_reader_3])
   ========================================================================== */
.aivar-reader-nvidia {
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--font-main);
    background-color: var(--white);
    padding: 2rem 3rem 3rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.aivar-reader-nvidia .product-image-wrapper {
    margin-bottom: 20px;
    text-align: center;
}

.aivar-reader-nvidia .product-image-wrapper img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.aivar-reader-nvidia h2 {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.aivar-reader-nvidia h2:first-of-type {
    margin-top: 0;
}

.aivar-reader-nvidia p#nvidia_label-product {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

#nvidia_ai-summary {
    background-color: var(--light-blue-bg);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
    line-height: 1.7;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.aivar-reader-nvidia button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.aivar-reader-nvidia button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.aivar-reader-nvidia button#nvidia_aivar-stop,
.aivar-reader-nvidia button#nvidia_aivar-stop-qa {
    background-color: #64748b; /* Slate */
}
.aivar-reader-nvidia button#nvidia_aivar-stop:hover,
.aivar-reader-nvidia button#nvidia_aivar-stop-qa:hover {
    background-color: var(--secondary-color);
}

/* --- AIVAR Chatroom Input Box Shared Styles --- */
.aivar-chat-input-container {
    display: flex;
    align-items: flex-end;
    background-color: var(--light-blue-bg, #f3f8fc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 24px;
    padding: 8px 16px;
    gap: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.aivar-chat-input-container:focus-within {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.aivar-chat-input-container textarea {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 8px 4px !important;
    margin: 0 !important;
    resize: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    max-height: 120px !important;
    min-height: 24px !important;
    height: 36px;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    color: var(--text-color, #334155);
}

.aivar-chat-input-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.aivar-chat-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer !important;
    background-color: transparent !important;
    color: #64748b !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.aivar-chat-btn:hover {
    background-color: rgba(37, 99, 235, 0.08) !important;
    color: var(--primary-color, #2563eb) !important;
    transform: scale(1.08);
}

.aivar-chat-btn.aivar-btn-send {
    color: var(--primary-color, #2563eb) !important;
}

.aivar-chat-btn.aivar-btn-send:hover {
    background-color: var(--primary-color, #2563eb) !important;
    color: var(--white, #ffffff) !important;
}

.aivar-chat-btn.aivar-btn-voice[aria-pressed="true"] {
    background-color: #ef4444 !important;
    color: var(--white, #ffffff) !important;
    animation: aivar-pulse 1.5s infinite;
}

@keyframes aivar-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

#nvidia_aivar-chat-box {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#nvidia_aivar-chat-box div {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    line-height: 1.6;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    align-self: flex-start;
}

#nvidia_aivar-chat-box div.user-message {
    background-color: var(--light-blue-bg);
    border: 1px solid var(--primary-color);
    align-self: flex-end;
}

#nvidia_aivar-chat-status {
    margin-top: 0.5rem;
    color: var(--text-color);
    font-size: 0.9rem;
}

/* --- AIVAR Reader Optimized Speak Controls & Highlights --- */
.speak-actions-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.aivar-speak-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aivar-speak-btn svg {
    flex-shrink: 0;
}

.aivar-audio-visualizer {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    width: 24px;
    height: 20px;
    margin-left: 12px;
    vertical-align: middle;
}

.aivar-audio-visualizer .bar {
    width: 3px;
    height: 4px;
    background-color: var(--primary-color, #2563eb);
    border-radius: 2px;
    transition: height 0.2s ease;
}

.aivar-audio-visualizer.playing .bar {
    animation: aivar-bounce 0.8s ease-in-out infinite alternate;
}

.aivar-audio-visualizer.playing .bar:nth-child(1) {
    animation-delay: 0.1s;
}

.aivar-audio-visualizer.playing .bar:nth-child(2) {
    animation-delay: 0.4s;
}

.aivar-audio-visualizer.playing .bar:nth-child(3) {
    animation-delay: 0.2s;
}

.aivar-audio-visualizer.playing .bar:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes aivar-bounce {
    0% {
        height: 4px;
    }
    100% {
        height: 20px;
    }
}

.aivar-highlight {
    background-color: rgba(253, 224, 71, 0.6);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
    transition: background-color 0.1s ease;
}

/* ==========================================================================
   18. Mobile Navigation
   ========================================================================== */

/* Standard WordPress class for accessibility */
.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;
	width: 1px;
	word-wrap: normal !important;
}

.menu-toggle {
    display: none; /* Hidden by default, shown in media query */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 101; /* Ensure it's above other header content */
}

.menu-toggle .hamburger-icon {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    background-color: var(--secondary-color);
    transition: background-color 0.2s ease-in-out;
}

.menu-toggle .hamburger-icon::before,
.menu-toggle .hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--secondary-color);
    transition: transform 0.2s ease-in-out;
}

.menu-toggle .hamburger-icon::before {
    top: -8px;
}

.menu-toggle .hamburger-icon::after {
    bottom: -8px;
}

/* Toggled state (X icon) */
.toggled .menu-toggle .hamburger-icon {
    background-color: transparent;
}

.toggled .menu-toggle .hamburger-icon::before {
    transform: translateY(8px) rotate(45deg);
}

.toggled .menu-toggle .hamburger-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 991px) {
    .menu-toggle {
        display: block;
    }

    .main-navigation {
        /* display: none; is replaced by animation properties */
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--white);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border-color);

        /* Animation properties for smooth dropdown */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-in-out, visibility 0.4s;
    }

    .main-navigation.toggled {
        /* display: block; is replaced by animation properties */
        max-height: 80vh; /* A large enough value to show all items */
        opacity: 1;
        visibility: visible;
        overflow-y: auto; /* Allow scrolling if menu is very long */
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
        align-items: stretch; /* Make items full width */
        padding: 0.5rem 0; /* Add some vertical padding to the container */
    }

    .main-navigation ul > li {
        border-bottom: 1px solid var(--border-color);
    }

    .main-navigation ul > li:last-child {
        border-bottom: none;
    }

    .main-navigation ul a {
        display: block;
        width: 100%;
        padding: 1.1rem 5%;
        font-weight: 500;
        color: var(--text-color);
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .main-navigation ul a:hover,
    .main-navigation ul a:focus {
        background-color: var(--light-blue-bg);
        color: var(--primary-color);
    }

    /* Style for the currently active page link */
    .main-navigation .current-menu-item > a,
    .main-navigation .current-page-ancestor > a {
        background-color: var(--light-blue-bg);
        color: var(--primary-color);
        font-weight: 600;
    }

    /* 修正手機版下拉選單 (語系切換) 的顯示方式 */
    .main-navigation .sub-menu {
        position: static; /* 取消絕對定位，展開時向下推開後續選單 */
        box-shadow: none;
        border: none;
        border-radius: 0;
        background-color: var(--bg-color); /* 使用背景色區別層級 */
        padding: 0;
        width: 100%;
    }

    .main-navigation .sub-menu a {
        padding-left: 10%; /* 增加左側縮排，呈現次選單視覺層次感 */
    }
}

/* ==========================================================================
   19. Content Area Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .page-container {
        /* On mobile, set a base padding for standard pages */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .aivar-reader-gemini,
    .aivar-reader-pplx,
    .aivar-reader-openai,
    .aivar-reader-nvidia {
        /* On mobile, use negative margins to break out of the parent's padding */
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        /* Then, apply a smaller padding for the content inside the reader */
        padding-left: 1rem;
        padding-right: 1rem;
    }
}