/*
 * 森林遊戲攻略網 - style.css
 * 最後更新日期：2025年6月10日
 * 包含所有基礎樣式、Header、Main Content (輪播/關於我/聯絡我) 及 Footer 樣式，
 */

/* :: Base CSS (基本樣式) */
/* 全局樣式 */
* {
  box-sizing: border-box; /* 確保盒模型行為一致 */
  margin: 0; /* 重置所有元素的預設外邊距 */
  padding: 0; /* 重置所有元素的預設內邊距 */
}

html {
  height: 100%; /* 讓 html 佔滿整個視窗高度 */
}

body {
  background-color: #1e1e1e; /* 設定網頁背景色 */
  color: #e0e0e0; /* 設定主文字顏色 */
  font-family: sans-serif; /* 使用無襯線字體 */
  min-height: 100vh; /* **修改：確保 body 至少佔滿一個視窗的高度，如果內容超出，它會繼續延伸** */
  display: flex; /* 使用 Flexbox 佈局 */
  flex-direction: column; /* 讓內容垂直排列 */
  overflow-y: auto; /* <--- 確保 body 在垂直方向可以捲動 */
  overflow-x: hidden; /* 防止水平捲動，除非是特殊內容需要 */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff; /* 設定標題文字顏色為白色 */
  font-weight: 300; /* 設定標題字體粗細為細體 */
}

p {
  color: #e0e0e0; /* 設定段落文字顏色 */
  font-size: 15px;
  line-height: 2;
  font-weight: 100;
}

a {
  -webkit-transition-duration: 500ms; /* Safari 和 Chrome 的過渡效果 */
  transition-duration: 500ms; /* 所有瀏覽器的過渡效果 */
  text-decoration: none; /* 移除超連結的底線 */
  outline: none; /* 移除點擊時的焦點外框 */
  font-size: 14px;
  font-weight: 700;
  color: #e0e0e0; /* 恢復全局連結的預設顏色為淡灰色 */
}

a:hover,
a:focus {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  text-decoration: none; /* 確保懸停時也沒有底線 */
  outline: none;
  color: #ffffff; /* 全局連結懸停時變白色 */
}

img {
  height: auto;
  max-width: 100%; /* 確保圖片不超出其父容器 */
  display: block; /* 讓圖片成為區塊元素，避免底部空白 */
}

/* --- */

/* :: Header Area CSS (標題/導航列) */
header {
  background-color: #2a2a2a; /* 標題背景色 */
  color: #ffffff; /* 標題文字顏色 */
  padding: 1rem;
  display: flex; /* 使用 Flexbox 佈局 */
  justify-content: space-between; /* 標題和菜單按鈕左右分開 */
  align-items: center; /* 垂直置中對齊 */
  position: sticky; /* 啟用粘性定位 */
  top: 0; /* 粘在頂部 */
  z-index: 1000; /* 確保在其他內容之上 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 陰影效果 */
  flex-shrink: 0; /* 防止 header 被壓縮 */
  height: 10vh; /* 設定 header 佔據視窗高度的 10% */
}

header h1 {
  color: #ffffff; /* 確保 header 內的 h1 文字為白色 */
}

.menu-toggle {
  font-size: 1.5rem;
  cursor: pointer;
  color: #ffffff; /* 菜單開關圖示顏色 */
}

.menu {
  display: none; /* 預設隱藏菜單 */
  flex-direction: column;
  background-color: #2d2d2d; /* 菜單背景色 */
  position: absolute;
  top: 60px; /* 位於 header 下方 */
  right: 0;
  min-width: 150px;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 菜單陰影 */
}

.menu a {
  color: #e0e0e0; /* 菜單項文字顏色 */
  padding: 1rem;
  text-decoration: none;
  border-bottom: 1px solid #444; /* 菜單項底線 */
  font-weight: 400; /* 菜單連結字體粗細 */
  font-size: 16px; /* 菜單連結字體大小 */
}

.menu a:last-child {
  border-bottom: none; /* 最後一個菜單項沒有底線 */
}

.menu a:hover {
  background-color: #444; /* 菜單項懸停背景色 */
}

.menu a i {
  margin-right: 8px; /* 圖示與文字之間的間距 */
}

/* --- */

/* :: Main Content Area CSS (主內容區域) */
.main {
  flex: 1; /* 讓 main 元素填充剩餘的垂直空間 */
  padding: 2rem 0; /* 垂直方向的 padding */
  display: flex; /* 保持這個，因為首頁需要它來置中輪播圖 */
  justify-content: center; /* 水平置中主軸上的項目 */
  align-items: center; /* 垂直置中交叉軸上的項目 (如果 main 內部有剩餘空間) */
  height: 80vh; /* 設定 main 佔據視窗高度的 80% */
  overflow-y: auto; /* 內容超出時顯示垂直捲軸 */
  position: relative;
  width: 100%;
}

/* Owl Carousel 容器樣式 */
.owl-carousel {
  width: 100%; /* 讓它佔滿父容器 */
  padding: 0; /* 移除容器的 padding，讓 margin 處理卡片間距 */
}

/* 遊戲卡片樣式 - 適用於輪播中的單個項目 */
.game-card {
  position: relative;
  background-color: #2e2e2e;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  width: 100%; /* 讓 game-card 填滿其父元素 .item 的寬度 */
  height: 70vh; /* 維持明確的 vh 高度，讓卡片能夠響應式拉伸 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 確保內容不會溢出圓角 */
  color: #e0e0e0;
}

.game-card img {
  width: 100%;
  height: 100%; /* 讓圖片填滿其父元素 game-card 的高度 */
  object-fit: cover; /* 保持圖片比例並裁切 */
  flex-shrink: 0;
  flex-grow: 1; /* 讓圖片在 flex 容器中盡量佔據剩餘空間 */
}

.card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none; /* 讓下層的圖片可以被點擊，除非有其他互動 */
  z-index: 1;
}

.card-title {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.75rem 1rem;
  text-align: center;
  z-index: 2;
  pointer-events: auto; /* 讓標題可點擊 */
  flex-shrink: 0;
  font-size: 1rem; /* 假設你希望卡片標題有較大的字體 */
  font-weight: bold; /* 加粗 */
}

/* 針對 .card-title 內的超連結設定樣式 */
.card-title a {
  color: #ffffff;          /* 強制連結文字顏色為白色 */
  text-decoration: none;    /* 移除預設底線 */
  display: block;           /* 讓連結填充整個 .card-title 區域，更容易點擊 */
}

.card-title a:hover,
.card-title a:focus {
  color: #cccccc;          /* 滑鼠懸停或選中時，顏色變為淡灰色 */
  text-decoration: none; /* 確保懸停時也沒有底線 */
}

.card-overlay {
  background-color: rgba(0, 0, 0, 0.85);
  padding: 1rem;
  transform: translateY(100%); /* 預設隱藏在底部 */
  transition: transform 0.4s ease; /* 滑鼠懸停時的過渡效果 */
  pointer-events: auto; /* 讓覆蓋層可點擊 */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: calc(100% - 60px); /* 確保覆蓋層不會遮住標題 */
  overflow-y: auto; /* 內容過多時顯示捲軸 */
  z-index: 3;
}

.game-card:hover .card-overlay {
  transform: translateY(0); /* 滑鼠懸停時顯示覆蓋層 */
}

/* Owl Carousel 導航箭頭樣式 */
.owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* 預設不響應點擊事件，由內部按鈕處理 */
  z-index: 10;
}

.owl-nav button {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 2rem;
  cursor: pointer;
  pointer-events: auto; /* 讓按鈕可點擊 */
  border-radius: 5px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.owl-nav button:hover {
  opacity: 1;
}

.owl-nav .owl-prev {
  margin-left: 20px;
}

.owl-nav .owl-next {
  margin-right: 20px;
}

/* 隱藏 Owl Carousel 導航點 (dots) */
.owl-dots {
  display: none;
}

/* --- */

/* 關於我頁面專用樣式 */
.main.about-page {
  /* 移除 flex: none; 和 height: auto; 讓它保持 flex: 1 行為 */
  display: block; /* 讓內容回歸正常的塊級流，覆蓋 .main 的 flex */
  max-width: 900px; /* 限制內容的最大寬度，讓文字不會太長 */
  margin: 2rem auto; /* 水平置中，並提供垂直邊距 */
  padding: 0 1rem; /* 左右內邊距，防止內容緊貼螢幕邊緣 */
  overflow-y: auto; /* <--- 確保內容過多時顯示捲軸 */
  -webkit-overflow-scrolling: touch; /* <--- iOS 平滑捲動 */
  /* flex: none; (移除此行) */
  /* height: auto; (移除此行) */
}

.about-content {
  background-color: #2e2e2e; /* 與遊戲卡片背景色一致 */
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.about-content h2,
.about-content h3 {
  color: #ffffff;
  margin-bottom: 1rem;
  text-align: center; /* 讓標題置中 */
}

.about-content p {
  margin-bottom: 1rem;
  text-align: justify; /* 文字兩端對齊 */
}

.about-content ul {
  margin-left: 20px; /* 列表左邊縮排 */
  margin-bottom: 1rem;
  list-style-type: disc; /* 預設圓點，可改為 circle, square 等 */
}

.about-content ul li {
  margin-bottom: 0.5rem;
}

/* --- */

/* 聯繫我頁面專用樣式 */
.main.contact-page {
  /* 移除 flex: none; 和 height: auto; 讓它保持 flex: 1 行為 */
  display: block; /* 讓內容回歸正常的塊級流，覆蓋 .main 的 flex */
  max-width: 900px; /* 限制內容的最大寬度 */
  margin: 2rem auto; /* 水平置中，並提供垂直邊距 */
  padding: 0 1rem; /* 左右內邊距 */
  overflow-y: auto; /* <--- 確保內容過多時顯示捲軸 */
  -webkit-overflow-scrolling: touch; /* <--- iOS 平滑捲動 */
  /* flex: none; (移除此行) */
  /* height: auto; (移除此行) */
}

.contact-content {
  background-color: #2e2e2e; /* 與遊戲卡片背景色一致 */
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.contact-content h2,
.contact-content h3 {
  color: #ffffff;
  margin-bottom: 1rem;
  text-align: center; /* 讓標題置中 */
}

.contact-content p {
  margin-bottom: 1rem;
  text-align: justify;
}

.contact-info {
  margin-bottom: 2rem;
  text-align: center; /* 聯絡資訊置中 */
}

.contact-info p {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.contact-info a {
  color: #ffffff; /* 確保 Email 連結為白色 */
  text-decoration: none; /* 移除底線 */
}

.contact-info a:hover {
  color: #cccccc; /* 懸停時變淡灰色 */
}

.contact-info i {
  margin-right: 8px; /* 圖示與文字的間距 */
  width: 20px; /* 固定圖示寬度，讓文字對齊 */
  text-align: center;
}

/* 聯繫表單樣式 */
.contact-form-section {
  margin-top: 2rem;
  border-top: 1px solid #444; /* 與上方資訊分隔 */
  padding-top: 2rem;
}

.contact-form .form-group {
  margin-bottom: 1.5rem;
}

.contact-form label {
  display: block; /* 讓 label 獨立一行 */
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #ffffff;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #444;
  background-color: #3a3a3a; /* 輸入框背景色 */
  color: #e0e0e0; /* 輸入文字顏色 */
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  border-color: #007bff; /* 聚焦時邊框顏色 */
  outline: none; /* 移除瀏覽器預設外框 */
}

.contact-form textarea {
  resize: vertical; /* 允許垂直調整大小 */
  min-height: 100px;
}

.contact-form .submit-button {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: #007bff; /* 按鈕背景色 */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form .submit-button:hover {
  background-color: #0056b3; /* 按鈕懸停背景色 */
}

.form-note {
  font-size: 0.9rem;
  color: #aaa;
  margin-top: 1rem;
  text-align: center;
}

/* --- */

/* :: Footer CSS (頁腳) */
footer {
  background-color: #2a2a2a;
  color: #aaa;
  /* **修改：讓內容垂直置中** */
  display: flex;
  align-items: center;
  justify-content: center; /* 為了保持水平置中，雖然 text-align 已經做了 */
  
  padding: 1rem;
  flex-shrink: 0; /* 防止頁腳被壓縮 */
  height: 10vh; /* 設定 footer 佔據視窗高度的 10% */
}

footer i {
  margin: 0 4px; /* 版權圖示的間距 */
}

/* --- */

/* RWD 響應式設計調整 */
@media (max-width: 1200px) {
  .owl-nav button {
    padding: 8px 12px;
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  /* 在小螢幕上，重新調整主內容區域的比例，讓其有足夠空間 */
  header {
    height: auto; /* 小螢幕下 header 高度自動，避免佔用過多空間 */
  }
  .main {
    height: auto; /* 小螢幕下 main 高度自動，避免內容被裁切 */
    padding: 1rem 0;
  }
  footer {
    height: auto; /* 小螢幕下 footer 高度自動 */
  }
  .owl-nav {
    display: none; /* 在小螢幕上隱藏箭頭 */
  }
  /* 針對 about 和 contact 頁面在小螢幕上的共同調整 */
  .main.about-page,
  .main.contact-page {
    margin: 1rem auto;
    padding: 0 0.75rem;
    /* min-height: auto; (移除此行) */
    /* height: auto; (移除此行) */
  }
  .about-content,
  .contact-content { /* 調整內容內邊距 */
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  /* 在最小螢幕下，Owl Carousel 的 margin 配合 item 的 margin
     這裡通常會根據 Owl Carousel 的 responsive 設定來調整，
     如果 Owl Carousel 本身有設定 margin 則不需要特別處理。 */
}