/* style.css - 通用樣式與淺色模式顏色變數 */


/* ========== 顏色變數 (淺色模式) ========== */

:root {
    /* 基礎配色 */
    --color-bg-primary: #F0F8FF;
    /* 柔和淺藍背景 */
    --color-bg-secondary: #FFFFFF;
    /* 輔助背景 (卡片改為純白色，或半透明，待會處理) */
    --color-text-primary: #1F2937;
    /* **主要文字色 (深灰藍) - 確保是深色** */
    --color-text-secondary: #4B5563;
    /* 輔助文字色 */
    /* 強調色 (Accent Color) */
    --color-accent: #1E40AF;
    /* 專業寶石藍 */
    --color-accent-hover: #102B78;
    /* 強調色滑鼠懸停 */
    /* 程式碼區塊 */
    --color-code-bg: #F0F8FF;
    /* 淺色程式碼背景 */
    --color-code-text: #333333;
    /* 邊框與陰影 */
    --color-border: #D1D5DB;
    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.05);
}


/* ========== 字體定義 ========== */


/* 引入英文/數字的現代 Sans-serif 字體 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&display=swap');
body {
    font-family: 'Iansui', 'Inter', sans-serif;
    background-color: var(--color-bg-primary);
    /* 主要背景色 */
    color: var(--color-text-primary);
    line-height: 1.6;
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
    /* 更新背景圖片設定 - 淺色模式 */
    background-image: url('../images/abstract-tech-light.jpg');
    /* 淺色模式背景圖 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: luminosity;
    /* 使用亮度混合模式，讓圖片與淺藍色主色融合 */
    opacity: 0.9;
    /* 讓圖片稍微不那麼顯眼 */
}


/* 程式碼區塊專用字體 */

code,
pre {
    font-family: 'Roboto Mono', monospace;
}


/* style.css - 關鍵組件樣式 */


/* ========== 導覽列 (Navbar) ========== */

.navbar {
    position: sticky;
    top: 0;
    background-color: rgba(230, 240, 255, 0.95);
    /* 淺藍色半透明 */
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
    backdrop-filter: blur(5px);
    /* 磨砂玻璃效果 */
    z-index: 1000;
}

.navbar .logo {
    color: var(--color-accent);
    /* Logo 使用寶石藍強調色 */
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.navbar a {
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
}

.navbar a:hover {
    color: var(--color-accent);
    /* 滑鼠懸停變為寶石藍 */
}


/* ========== 英雄區塊 (Hero Section) ========== */

.hero-section {
    /* 設定一致的上下外邊距，讓它在頁面中保持垂直位置 */
    margin: 4rem auto;
    padding: 0;
    text-align: center;
    /* 淺色模式下保持居中 */
}

.hero-section .greeting {
    color: var(--color-accent);
    /* 引導語使用寶石藍 */
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.hero-section .title {
    font-size: 4rem;
    margin: 0;
}

.hero-section .cta-button {
    display: inline-block;
    background-color: var(--color-accent);
    /* 按鈕背景寶石藍 */
    color: white;
    padding: 0.75rem 2rem;
    margin-top: 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
}

.hero-section .cta-button:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
}

.hero-section .container {
    /* 淺色模式下，確保內部的 padding 足夠大 */
    padding: 3rem 4rem;
    /* 這是我們之前為淺色模式添加的背景和邊框，保持不變 */
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}


/* ========== 專案卡片 (Project Card) ========== */

.project-card {
    /* 使用半透明白色背景，讓淺色背景圖透出，但確保文字在上方清晰可見 */
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
    padding: 2.5rem;
    border-radius: 8px;
    /* 確保卡片內文字使用深色 */
    color: var(--color-text-primary);
    transition: all 0.3s;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.project-card .tech-tag {
    display: inline-block;
    background-color: rgba(30, 64, 175, 0.1);
    /* 寶石藍的半透明背景 */
    color: var(--color-accent);
    padding: 0.3rem 0.6rem;
    margin-right: 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.project-card .links a {
    /* 讓連結變成一個小按鈕 */
    display: inline-block;
    color: var(--color-accent);
    /* 連結文字色：寶石藍 */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    /* 增加按鈕內邊距 */
    margin-right: 1.2rem;
    border: 1px solid var(--color-accent);
    /* 寶石藍邊框 */
    border-radius: 4px;
    transition: all 0.2s;
}

.project-card .links a:hover {
    /* 懸停時，填充寶石藍的背景色 */
    background-color: var(--color-accent);
    color: white;
    /* 文字變為白色 */
    text-decoration: none;
    transform: translateY(-1px);
    /* 輕微上移效果 */
}

.container {
    /* 限制內容的最大寬度，確保內容不會在超寬螢幕上拉得太長 */
    max-width: 1200px;
    /* 讓容器居中對齊 */
    margin-left: auto;
    margin-right: auto;
    /* 新增左右邊距，解決內容貼邊的問題 (手機/平板/電腦都適用) */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


/* ========== 導覽列 (Navbar) 修正 ========== */


/* 修正導覽列讓內容使用 .container 的設定 */

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* 移除這裡的左右 padding，改由 .container 處理 */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


/* ========== 專案總覽區塊 (Projects Grid) 修正 ========== */

.projects-section .section-title {
    margin-bottom: 2rem;
    font-size: 2rem;
}


/* 確保專案卡片排版在淺色模式下也是網格佈局 */

.projects-grid {
    display: grid;
    /* 自動調整列數，最小寬度為 300px，確保響應式設計 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    /* 卡片間距 */
}

.project-card {
    /* ... 專案卡片樣式保持不變 ... */
    padding: 2.5rem;
    /* 確保內邊距足夠 */
}


/* style.css - 模式切換按鈕樣式 */


/* ========== 模式切換按鈕 (Mode Toggle Button) ========== */

.mode-toggle {
    background: none;
    /* 移除背景 */
    border: none;
    /* 移除邊框 */
    color: var(--color-text-secondary);
    /* 預設顏色 */
    font-size: 1.2rem;
    /* 圖示大小 */
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    /* 圓形按鈕 */
    transition: all 0.3s ease;
    display: flex;
    /* 讓圖示居中 */
    align-items: center;
    justify-content: center;
}

.mode-toggle:hover {
    color: var(--color-accent);
    /* 懸停時使用強調色 */
    background-color: rgba(0, 0, 0, 0.05);
    /* 淺色模式下輕微背景 */
}


/* 深色模式下的按鈕樣式 */

.dark .mode-toggle {
    color: var(--color-text-secondary);
    /* 深色模式下的預設顏色 */
}

.dark .mode-toggle:hover {
    color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.05);
    /* 深色模式下輕微背景 */
}

.error-main {
    min-height: calc(100vh - 150px);
    /* 讓 main 佔滿視窗高度，減去導航和頁腳的高度 */
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    text-align: center;
    padding: 2rem 0;
}


/* 錯誤面板樣式 */

.error-panel {
    /* 沿用面板風格 */
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 4rem 3rem;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.error-code {
    font-size: 8rem;
    /* 巨大的 404 數字 */
    font-weight: 700;
    color: var(--color-accent);
    /* 使用強調色 */
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.8;
    /* 稍微透明，增加層次感 */
}

.error-panel h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.error-panel p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.error-actions {
    margin-top: 2rem;
}

.error-actions .cta-button {
    /* 確保按鈕之間有間隔 */
    margin: 0 0.5rem;
}

.section-panel {
    /* 讓它看起來像一個浮動的標籤/面板 */
    /* 將背景色調整為更透明的白色，讓下層的背景圖更多地透出 */
    background-color: rgba(255, 255, 255, 0.95);
    /* 邊框使用一個較深的顏色，增加區隔度 */
    border: 1px solid rgba(100, 100, 100, 0.3);
    /* 使用深灰色的半透明邊框 */
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: none;
    /* 移除陰影，減少浮出感，使其更內斂 */
    display: flex;
    align-items: center;
}

.section-title {
    margin: 0;
    /* 移除 h2 預設的 margin */
    font-size: 2rem;
}


/* style.css - Footer 樣式修正 (新增面板外觀) */

.footer {
    /* 1. 繼承面板樣式 */
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    /* 輕微陰影，與上方區隔 */
    /* 2. 移除原有的底部和上部間距，由 padding 控制 */
    margin-top: 4rem;
    /* 確保與上方內容有足夠間距 */
    padding: 2.5rem 0;
    /* 確保 Footer 內部有足夠空間 */
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

.footer p {
    margin: 0.5rem 0;
}

.footer a {
    color: var(--color-accent);
    text-decoration: none;
}