/* 
 * dark-theme.css
 * Sons2Shine 網站深色主題樣式
 * 現代化、流線型的深色模式設計
 */

/* 防止主題閃爍的預載入樣式 */
html.dark-theme-loading {
    background: #0f0f1e;
}

/* 深色模式的 CSS 變數覆蓋 */
body.dark-theme {
    /* 主要色彩系統 - 深色版本 */
    --primary-gradient: linear-gradient(135deg, #8b9cef 0%, #a97dd4 100%);
    --primary-color: #8b9cef;
    --primary-color-darker: #7a8ee1; /* 新增 */
    --secondary-color: #f4a7fb;
    --accent-color: #7fc3fe;
    --accent-color-darker: #69b2e8; /* 新增 */
    --morning-light: #3a3a4a;
    --heaven-gold: #ffdb4d;
    --pure-white: #ffffff;
    --soft-gray: #16162a;
    --text-primary: #e8e8ec;
    --text-secondary: #b8b8c8;
    --text-light: #9898a8;

    /* 深色模式特有的顏色 */
    --dark-bg: #0f0f1e;
    --dark-surface: #1a1a2e;
    --dark-surface-light: #252538;
    --dark-border: #2a2a3e;

    /* 更新陰影效果 */
    --soft-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);

    /* 分隔線顏色 */
    --divider-color: #2a2a3e;
}

/* 背景與基礎元素 */
body.dark-theme {
    background: var(--dark-bg);
    color: var(--text-primary);
}

/* 導航列深色模式 */
body.dark-theme nav {
    background: rgba(15, 15, 30, 0.98);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

body.dark-theme .nav-menu a {
    color: var(--text-primary);
}

body.dark-theme .nav-menu a:hover {
    color: var(--primary-color);
}

/* 主題切換按鈕樣式優化 */
body.dark-theme .theme-toggle {
    background: var(--dark-surface-light);
    color: var(--heaven-gold);
}

body.dark-theme .theme-toggle:hover {
    background: var(--dark-surface);
    box-shadow: 0 0 15px rgba(255, 219, 77, 0.3);
}

/* 語言選擇器深色模式 */
body.dark-theme .language-selector {
    background: var(--dark-surface-light);
    color: var(--text-primary);
}

body.dark-theme .language-selector:hover {
    background: var(--primary-color);
    color: var(--dark-bg);
}

/* 語言選擇器 SVG 圖標深色模式 */
body.dark-theme .language-selector .lang-icon {
    color: var(--text-primary);
}

body.dark-theme .language-selector:hover .lang-icon {
    color: var(--dark-bg);
}

body.dark-theme .language-dropdown {
    background-color: var(--dark-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.dark-theme .language-dropdown a {
    color: var(--text-primary);
}

body.dark-theme .language-dropdown a:hover {
    background-color: var(--dark-surface-light);
}

/* Hero 區域深色模式 */
body.dark-theme .hero-subtitle,
body.dark-theme .hero h1,
body.dark-theme .hero-description {
    color: #ffffff; /* 強制設定為白色以確保在圖片背景上的可讀性 */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); /* 增強陰影效果，提升現代感與易讀性 */
}

body.dark-theme .btn-primary {
    background: var(--primary-gradient);
    color: #ffffff; /* 修正按鈕文字顏色，確保其在深色模式下為白色 */
    box-shadow: 0 4px 20px rgba(139, 156, 239, 0.3);
}

body.dark-theme .btn-primary:hover {
    box-shadow: 0 6px 30px rgba(139, 156, 239, 0.5);
    background: linear-gradient(135deg, #9ca9f0 0%, #b589d6 100%);
}

body.dark-theme .btn-secondary {
    background: rgba(255, 255, 255, 0.15); /* 微調背景透明度 */
    border-color: #ffffff; /* 修正邊框顏色為白色 */
    color: #ffffff; /* 修正文字顏色為白色，確保可讀性 */
    backdrop-filter: blur(10px); /* 新增玻璃擬態效果，與淺色模式保持一致 */
}

body.dark-theme .btn-secondary:hover {
    background: rgba(139, 156, 239, 0.3);
}

/* 關於我們區塊深色模式 */
body.dark-theme .about-us {
    background: var(--dark-bg);
}

body.dark-theme .about-us-content {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

body.dark-theme .training-item::before {
    color: var(--heaven-gold);
}

/* 區塊背景深色模式 */
body.dark-theme .mission {
    background: var(--dark-surface);
}

body.dark-theme .values {
    background: var(--dark-bg);
}

body.dark-theme .events {
    background: var(--dark-surface);
}

body.dark-theme .healing-centers {
    background: var(--dark-bg);
}

body.dark-theme .partner-churches {
    background: var(--dark-surface);
}

body.dark-theme .testimonials {
    background: var(--dark-bg);
}

/* 卡片深色模式 */
body.dark-theme .value-card {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

body.dark-theme .value-card:hover {
    background: var(--dark-surface-light);
    box-shadow: 0 8px 30px rgba(139, 156, 239, 0.2);
}

body.dark-theme .event-card {
    background: var(--dark-surface);
}

body.dark-theme .event-card:hover {
    box-shadow: 0 8px 30px rgba(139, 156, 239, 0.2);
}

body.dark-theme .center-card {
    background: var(--dark-surface);
}

body.dark-theme .center-card:hover {
    box-shadow: 0 8px 30px rgba(139, 156, 239, 0.2);
}

body.dark-theme .partner-card {
    background: var(--dark-surface);
}

body.dark-theme .partner-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 30px rgba(139, 156, 239, 0.2);
}

/* 影片見證深色模式 */
body.dark-theme .video-testimonial,
body.dark-theme .featured-testimonial {
    background: var(--dark-surface);
}

body.dark-theme .video-testimonial:hover,
body.dark-theme .featured-testimonial:hover {
    box-shadow: 0 10px 40px rgba(139, 156, 239, 0.2);
}

/* 文字見證卡片深色模式 */
body.dark-theme .text-testimony-card {
    background: var(--dark-surface);
}

body.dark-theme .text-testimony-card:hover {
    background: var(--dark-surface-light);
    border-color: var(--primary-color);
    box-shadow: 0 8px 30px rgba(139, 156, 239, 0.2);
}

/* CTA 區塊深色模式 */
body.dark-theme .cta-section {
    background: linear-gradient(135deg, #4a5588 0%, #6a4a88 100%);
}

/* 頁尾深色模式 */
body.dark-theme footer {
    background: var(--dark-surface);
    /* 設定頁尾區域的基礎文字顏色，修正聯絡資訊等非連結文字的顏色 */
    color: var(--text-secondary);
}

body.dark-theme .footer-section h3 {
    /* 標題使用最亮的文字顏色，確保清晰醒目 */
    color: var(--text-primary);
}

body.dark-theme .footer-section a {
    /* 連結使用次亮的顏色，並帶有透明度以便與標題區分 */
    color: var(--text-primary);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

body.dark-theme .footer-section a:hover {
    /* 滑鼠懸停時完全不透明，提供清晰的互動反饋 */
    color: var(--text-primary);
    opacity: 1;
}

body.dark-theme .footer-bottom {
    border-top-color: var(--dark-border);
}

/* 回到頂部按鈕深色模式 */
body.dark-theme .back-to-top-btn {
    background-color: var(--dark-surface-light);
    color: var(--primary-color);
}

body.dark-theme .back-to-top-btn:hover {
    background-color: var(--primary-color);
    color: var(--dark-bg);
}

/* 燈箱深色模式 */
body.dark-theme .lightbox-overlay {
    background-color: rgba(10, 10, 20, 0.95);
}

body.dark-theme .lightbox-container {
    background-color: var(--dark-surface);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
}

body.dark-theme .lightbox-close-btn {
    color: var(--text-secondary);
}

body.dark-theme .lightbox-close-btn:hover {
    color: var(--text-primary);
}

body.dark-theme .lightbox-lang-switcher button {
    background: var(--dark-surface-light);
    border-color: var(--dark-border);
    color: var(--text-secondary);
}

body.dark-theme .lightbox-lang-switcher button.active {
    background: var(--primary-color);
    color: var(--dark-bg);
    border-color: var(--primary-color);
}

body.dark-theme .lightbox-lang-switcher button:hover:not(.active) {
    background: var(--dark-border);
    color: var(--text-primary);
}

/* 捲軸深色模式 */
body.dark-theme ::-webkit-scrollbar {
    width: 10px;
}

body.dark-theme ::-webkit-scrollbar-track {
    background: var(--dark-surface);
}

body.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--dark-surface-light);
    border-radius: 5px;
}

/* body.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
} */

/* 選取文字深色模式 */
body.dark-theme ::selection {
    background: var(--primary-color);
    color: var(--dark-bg);
}

body.dark-theme ::-moz-selection {
    background: var(--primary-color);
    color: var(--dark-bg);
}

/* 輸入框與表單元素深色模式 */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
    background: var(--dark-surface-light);
    color: var(--text-primary);
    border-color: var(--dark-border);
}

body.dark-theme input:focus,
body.dark-theme textarea:focus,
body.dark-theme select:focus {
    border-color: var(--primary-color);
    outline-color: var(--primary-color);
}

/* 分隔線深色模式 */
body.dark-theme .section-divider {
    background-color: var(--dark-border);
    opacity: 0.5;
}

/* 漢堡選單深色模式 */
body.dark-theme .hamburger-menu span {
    background: var(--text-primary);
}

/* 行動版選單深色模式 */
@media (max-width: 992px) {
    body.dark-theme .nav-menu {
        background-color: var(--dark-surface);
    }
}

/* 主題切換動畫 */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body * {
    transition: background-color 0.3s ease, color 0.3s ease,
        border-color 0.3s ease;
}

/* 避免圖片受到主題切換影響 */
img,
video,
iframe {
    transition: none !important;
}

/* Logo 圖片深色模式優化 */
body.dark-theme .logo-image {
    filter: brightness(1.2);
}

/* leader avatar 深色模式優化 */
body.dark-theme .leader-avatar {
    filter: brightness(0.9);
}

/* 合作夥伴 logo 深色模式 */
body.dark-theme .partner-logo {
    background: var(--dark-surface-light);
}

/* 事件圖片深色模式 */
body.dark-theme .event-image {
    filter: brightness(0.9);
}