/* css/style.css */

/* 通用設定（礦物清單和礦物介紹設定） */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6; /* 行高 */
    margin: 0; /* 移除瀏覽器預設外邊距 */
    background-color: #f4f4f4;
    color: #272727; /* 文字顏色 */
}

.container { /* 容器 */
    max-width: 900px; /* max-width 900px */
    margin: 20px auto; /* 上下 20px，左右自動居中 */
    background: #FFFFFF; /* 背景顏色 */
    padding: 20px 30px; /* 填充 上下20px 左右30px */
    border-radius: 8px; /* 邊框半徑 8px */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 盒子陰影: 0 0 10px rgba(0,0,0,0.1) */
}

h1, h2, h3 { /* h1, h2, h3標題文字設定 */
    color: #2c3e50; /* 顏色: #2c3e50 */
}

h1 { /* h1 標題文字設定 */
    text-align: center;
    border-bottom: 2px solid #eee; /* 下邊框:2px solid #eee */
    padding-bottom: 10px; /* 填充底部: 10px */
    margin-bottom: 20px; /* 下邊距: 20px */
}

h2 { /* h2 標題文字設定 */
    margin-top: 25px; /* 上邊距: 25px */
    border-left: 5px solid #7f8c8d; /* 左邊框: 5px solid #7f8c8d */
    padding-left: 10px; /* 左填充: 10px */
    color: #34495e; /* 字體顏色: #34495e */
}

p { /* p 文字設定 */
    margin-bottom: 10px; /* 下邊距: 10px */
}

ul { /* ul 文字設定 */
    list-style-type: disc; /* 清單樣式類型: disc */
    margin-left: 20px; /* 左邊距: 20px */
    padding-left: 0; /* 左填充: 0 */
}

li { /* li 文字設定 */
    margin-bottom: 5px; /* 下邊距: 5px */
}

/* 礦物解紹圖片樣式 */
.mineral-image { /* 礦物影像 */
    text-align: center; /* 文字對齊：居中 */
    margin-bottom: 20px; /* 下邊距：20px */
}
.mineral-image img { /* 礦物影像 img */
    max-width: 100%; /* 最大寬度：100% */
    height: auto; /* 高度：自動； */
    border-radius: 5px; /* 邊框半徑：5px； */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 盒子陰影: 0 4px 8px rgba(0,0,0,0.1) */
}

/* 屬性列表樣式 (用於詳細介紹頁) */
.property-list li {
    list-style-type: none; /* 清單樣式類型：無 （移除預設的項目符號） */
    padding-left: 0; /* 左填充：0 */
    margin-bottom: 5px; /* 下邊距：5px */
}
.property-list strong {
    display: inline-block; /* 顯示：內聯塊 */
    width: 150px; /* 統一標籤的寬度，你可以根據實際內容調整:150px */
    color: #555; /* 顏色: #555 */
}

/* 礦物清單頁的圖卡佈局 */
.mineral-cards {
    display: flex; /* 顯示：彈性 */
    flex-wrap: wrap; /* 允許換行 : wrap*/
    gap: 20px; /* 圖卡之間的間距: 20px */
    justify-content: center; /* 讓圖卡居中 */
    margin-top: 30px; /* 上邊距: 30px */
}

.mineral-card { /* 礦物卡 */
    background: #ffffff; /* 背景：#ffffff */
    border-radius: 8px; /* 邊框半徑：8px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 盒子陰影：0 2px 5px rgba(0,0,0,0.1) */
    padding: 15px; /* 填充：15px */
    width: 220px; /* 每個圖卡的寬度: 200px */
    text-align: center; /* 文字對齊：居中 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 過渡：變換 0.2s 緩和，框陰影 0.2s 緩和 */
}

.mineral-card:hover { /* 礦物卡：懸停 */
    transform: translateY(-5px); /* 懸停時輕微上浮: translateY(-5px) */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2); /* 盒子陰影：0 8px 15px rgba(0,0,0,0.2) */
}

.mineral-card img { /* 礦物卡影像 */
    max-width: 100%; /* 最大寬度：100% */
    height: 150px; /* 固定圖片高度，保持一致性: 150px */
    object-fit: cover; /* 圖片填滿空間並裁剪 */
    border-radius: 8px; /* 邊框半徑：4px */
    margin-bottom: 5px; /* 下邊距：10px */
}

.mineral-card h3 { /* 礦物卡 H3 */
    margin-top: 0; /* 上邊距：0 */
    margin-bottom: 10px; /* 下邊距：10px */
    font-size: 1.2em; /* 字體大小：1.1em */
    color: #2c3e50; /* 顏色：#2c3e50 */
}

.mineral-card p { /* 礦物卡 P */
    font-size: 1em; /* 字體大小：0.9em */
    color: #666; /* color: #666 */
    height: 40px; /* 固定簡短描述的高度: 40px */
    overflow: hidden; /* 超出部分隱藏 */
    text-overflow: ellipsis; /* 超出部分顯示省略號 */
}

.mineral-card a { /* 礦物卡 A */
    display: inline-block; /* 顯示：內聯區塊 */
    background-color: #ECECFF; /* 背景顏色：#5cb85c 綠色連結按鈕 */
    color: white; /* 顏色：white白色 */
    padding: 8px 8px; /* 填充：8px 15px */
    text-decoration: none; /* 文字修飾：無 */
    border-radius: 8px; /* 邊框半徑：20px */
    font-size: 0.9em; /* 字體大小：0.9em */
    margin-top: 2px; /* 上邊距：10px */
    transition: background-color 0.3s ease; /* 過渡：背景顏色 0.3s 緩和 */
}

.mineral-card a:hover { /* 礦物卡 a:hover */
    background-color: #CECEFF; /* 背景顏色：#4cae4c */
}

/* 響應式設計：小螢幕調整佈局 */
@media (max-width: 768px) { */
    .container { /* 容器
        margin: 10px; 邊距：/* 10px */
        padding: 15px;  /*填充：15px */
    }
    .welcome-section { /* 歡迎部分 */
        padding: 30px; /* 填充：30px */
    }
    .welcome-section h1 { /* 歡迎部分 H1 */
        font-size: 2em; /* 字體大小：2em */
    }
    .welcome-section p { /* 歡迎部分 p */
        font-size: 1em; /* 字體大小：1em */
    }
    .start-button { /* 開始按鈕 */
        font-size: 1em; /* 字體大小：1em */
        padding: 12px 25px; /* 填充：12px 25px */
    }
    .mineral-card { /* 礦物卡 */
        width: 150px; /* 寬度：150px （小螢幕下圖卡更窄） */
    }
}

/* 浮動按鈕樣式 */
.fixed-buttons { /* 固定按鈕 */
    position: fixed; /* 固定在視窗中 */
    bottom: 30px; /* 距離底部 30px */
    right: 30px; /* 距離右邊 30px */
    z-index: 1000; /* 確保按鈕在其他內容之上: 1000 */
    display: flex; /* 讓按鈕並排顯示 */
    flex-direction: column; /* 垂直排列 */
    gap: 10px; /* 按鈕之間的間距: 10 */
}

.fixed-buttons button { /* 固定按鈕 */
    background-color: #3498db; /* 按鈕背景色: #3498db */
    color: #F0F0F0; /* 文字顏色: white */
    border: none; /* 邊界: none無邊框 */
    border-radius: 5px; /* 邊框半徑：5px（圓角） */
    padding: 10px 15px; /* 填充：10px 15px（內邊距） */
    font-size: 1em; /* 字體大小：1em */
    cursor: pointer; /* 遊標：指針（鼠標懸停時顯示手型） */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 盒子陰影：0 2px 5px rgba(0,0,0,0.2)輕微陰影 */
    transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease; /* 過渡：背景顏色 0.3s 緩和，變換 0.2s 緩和，不透明度 0.3s 緩和 */
    display: none; /* 顯示：無（預設隱藏，由 JavaScript 控制顯示） */
    opacity: 0.8; /* 不透明度：0.8（預設透明度） */
}

.fixed-buttons button:hover { /* 固定按鈕按鈕：懸停 */
    background-color: #2980b9; /* 背景顏色：#2980b9（懸停時顏色變深） */
    transform: translateY(-2px); /* 輕微上浮效果 */
    opacity: 1; /* 懸停時不透明 */
}

/* 可以為特定的按鈕調整樣式 */
#scrollToTopBtn { /* 捲動到頂部按鈕 */
    /* 如果你想讓它獨特一些，可以在這裡加樣式 */
}

#scrollToSearchBtn { /* 捲動到搜尋按鈕 */
    background-color: #2ecc71; /* 背景顏色: #2ecc71（搜尋框按鈕使用不同的顏色） */
}

#scrollToSearchBtn:hover { /* 捲動到搜尋按鈕:懸停 */
    background-color: #27ae60; /* 背景顏色: #27ae60（搜尋框按鈕使用不同的顏色） */
}

/* 導航按鈕樣式 (應用於礦物詳細頁面) */
.navigation-buttons { /* 導航按鈕 */
    margin-bottom: 20px; /* 下邊距：20px */
    text-align: center; /* 讓按鈕居中 */
}

.navigation-buttons button, /* 導航按鈕 */
.navigation-buttons .button { /* 對 button 和 class 為 button 的 a 標籤都應用樣式 */
    display: inline-block; /* 顯示：內聯區塊 */
    padding: 5px 10px; /* 填充：10px 20px */
    margin: 5px; /* 邊距：5px */
    border: none; /*邊框：none（無） */
    border-radius: 5px; /* 邊框半徑：25px（圓角按鈕） */
    font-size: 1em; /* 字體大小：1em */
    cursor: pointer; /* 遊標：指針（鼠標懸停時顯示手型） */
    text-decoration: none; /* 文字修飾：none無（移除連結的底線） */
    color: #FFFFFF; /* 顏色：白色（white） */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 過渡：背景顏色 0.3s 緩和，變換 0.2s 緩和 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 盒子陰影：0 2px 5px rgba(0,0,0,0.1) */
}

.navigation-buttons button { /* 導航按鈕 */
    background-color: #66B3FF; /* 背景顏色：#555（回上一頁的顏色） */
}

.navigation-buttons button:hover { /* 導航按鈕 懸浮 */
    background-color: #0072E3; /* 背景顏色：#333（回上一頁的顏色） */
    transform: translateY(-2px); /* 變換：平移 Y（-2px） */
}

.navigation-buttons .button { /* 針對 a 標籤按鈕 */
    background-color: #3498db; /* 背景顏色：#3498db（預設連結按鈕顏色） */
}

.navigation-buttons .button:hover { /* 針對 a 懸浮 標籤按鈕 */
    background-color: #2980b9; /* 背景顏色：#3498db（預設連結按鈕顏色） */
    transform: translateY(-2px); /* 背景顏色：#3498db（預設懸浮連結按鈕顏色） */
}

/* 可以為特定按鈕設置不同顏色，例如回到首頁 */
.navigation-buttons .button[href="../index.html"] {
    background-color: #BE77FF; /* 背景顏色：#e67e22（回首頁按鈕用橘色） */
}

.navigation-buttons .button[href="../index.html"]:hover { /* 導覽按鈕 .button 徘徊 */
    background-color: #B15BFF; /* 背景顏色：#d35400（徘徊回首頁按鈕用橘色變暗） */
}

/* 可以為礦物清單按鈕設置不同顏色 */
.navigation-buttons .button[href="../minerals_list.html"] {
    background-color: #1abc9c; /* 背景顏色：#1abc9c（礦物清單按鈕用綠色） */
}

.navigation-buttons .button[href="../minerals_list.html"]:hover {
    background-color: #16a085; /* 背景顏色：#16a085（徘徊礦物清單按鈕用綠色變暗） */
}