/* 
 * 鉅微 EAP (FFCEAP) - 職場霸凌防制與處置專章 
 * 專屬樣式表 (style.css)
 * 
 * 本樣式表採用極致優雅、專業度極高的商務暗色美學，
 * 完美融合使用者指定的金繼主色：#EFC561。
 * 專為初學者設計，程式碼直觀、好懂，關鍵處皆附有詳細的繁體中文註解。
 */

/* 引入 Google Fonts 頂級商務字體 - Outfit (標題) 與 Inter (內文) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700&display=swap');

/* 全域設計變數定義 */
:root {
  --color-bg-dark: #0b0f19;       /* 極致深邃的黑藍灰色底色，比原本的 slate-900 更具奢華感 */
  --color-bg-card: #171f30;       /* 搭配背景色的精緻卡片底色 */
  
  /* 金繼主色調設計 */
  --color-gold-light: #EFC561;    /* 使用者指定的主色：典雅金繼黃金 */
  --color-gold-gradient-1: #FFF0B3; /* 高亮金，用於漸層頂部，增加光澤感 */
  --color-gold-gradient-2: #EFC561; /* 中間過渡主色 */
  --color-gold-gradient-3: #B89033; /* 典雅古銅金，用於漸層底部，增加沉穩感 */
  
  --color-text-main: #f8fafc;     /* 亮白主文字色 */
  --color-text-muted: #94a3b8;    /* 優雅灰次要文字色 */
  
  --font-title: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* 頂級平滑互動過渡曲線 */
}

/* === 1. 基礎與全域樣式設定 === */

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-dark);
  color: var(--color-text-main);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* 強制覆寫 Tailwind 的 slate-900 背景，確保全站底色完美一致 */
body.bg-slate-900, .bg-slate-900, .bg-slate-950 {
  background-color: var(--color-bg-dark) !important;
}

/* 標題套用 Outfit 字體，微調字距展現專業感 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  letter-spacing: -0.01em;
}

/* 頂級極細客製化捲動條 (Scrollbar) 設計 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
}
::-webkit-scrollbar-thumb {
  background: rgba(239, 197, 97, 0.3);
  border-radius: 9999px;
  border: 2px solid var(--color-bg-dark);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-light);
}

/* === 2. 版面呼吸感與響應式 RWD 調整 === */

/* 為所有主要區塊（Section）增加適當的內距，展現大氣的呼吸感 */
section {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

/* 行動裝置/平板響應式間距與排版優化 */
@media (max-width: 1024px) {
  section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

@media (max-width: 640px) {
  section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  /* 確保行動端標題不會因過大而超出畫面 */
  h1 {
    font-size: 2.25rem !important;
    line-height: 1.25 !important;
  }
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  /* 導覽列在手機版的高度調整，避免遮擋內容 */
  .h-20 {
    height: 5rem !important;
  }
}

/* === 3. 玻璃擬態 (Glassmorphism) 與光環效果 === */

/* 高質感毛玻璃卡片面板 */
.glass-panel {
  background: rgba(23, 31, 48, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  /* 精緻的淡金色微透光邊框 */
  border: 1px solid rgba(239, 197, 97, 0.12) !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5) !important;
}

/* 卡片懸停發光與升起效果 */
.hover-glow {
  transition: var(--transition-smooth) !important;
}

.hover-glow:hover {
  transform: translateY(-8px) !important;
  /* 懸停時外圍發出淡淡的金色光暈 */
  box-shadow: 0 20px 40px -10px rgba(239, 197, 97, 0.18) !important;
  border-color: rgba(239, 197, 97, 0.4) !important;
}

/* === 4. 金繼風格按鈕與漸層樣式 === */

/* 金繼奢華黃金漸層文字 */
.text-kintsugi-gradient {
  background: linear-gradient(135deg, var(--color-gold-gradient-1) 0%, var(--color-gold-gradient-2) 50%, var(--color-gold-gradient-3) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 金繼風格主要按鈕 */
.btn-kintsugi {
  background: linear-gradient(135deg, var(--color-gold-gradient-1) 0%, var(--color-gold-gradient-2) 50%, var(--color-gold-gradient-3) 100%) !important;
  color: #0b0f19 !important; /* 按鈕文字使用極深色以保證絕佳的色彩對比度與易讀性 */
  font-weight: 600 !important;
  border: none !important;
  transition: var(--transition-smooth) !important;
  /* 外圍溫和的金色投影 */
  box-shadow: 0 4px 20px -2px rgba(239, 197, 97, 0.45) !important;
  border-radius: 12px !important;
}

.btn-kintsugi:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 25px rgba(239, 197, 97, 0.6) !important;
  filter: brightness(1.06) !important;
}

.btn-kintsugi:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* 主視覺次要按鈕 hover 效果調整 */
.bg-slate-800.border-slate-700:hover {
  background-color: rgba(23, 31, 48, 0.9) !important;
  border-color: var(--color-gold-light) !important;
  color: var(--color-gold-light) !important;
  box-shadow: 0 4px 15px rgba(239, 197, 97, 0.15) !important;
}

/* === 5. 外部超連結（Hyperlink）高級感樣式 === */

.hyperlink-premium {
  color: var(--color-gold-light) !important;
  text-decoration: none;
  position: relative;
  transition: var(--transition-smooth) !important;
  font-weight: 500;
}

.hyperlink-premium::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(90deg, var(--color-gold-gradient-1), var(--color-gold-gradient-2));
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.hyperlink-premium:hover {
  color: var(--color-gold-gradient-1) !important;
}

.hyperlink-premium:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* === 6. 卡片盒筆記（Zettelkasten）卡片樣式 === */

.zettel-card {
  transition: var(--transition-smooth) !important;
  border-radius: 16px !important;
  background: rgba(23, 31, 48, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.zettel-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(239, 197, 97, 0.45) !important;
  box-shadow: 0 15px 35px -10px rgba(239, 197, 97, 0.22) !important;
}

/* 卡片內部的標籤小徽章 */
.zettel-card span[class*="bg-"] {
  background-color: rgba(239, 197, 97, 0.1) !important;
  color: var(--color-gold-light) !important;
  border: 1px solid rgba(239, 197, 97, 0.25) !important;
}

/* === 7. 圖片專屬發光與精緻漂浮動畫 === */

/* 為主視覺抽象藝術區塊加上淡淡的金繼光環 */
.hover-glow img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 讓圖片填滿正圓形容器 */
  transform: scale(1.45) !important; /* 關鍵：稍微放大，將圖片原本突兀的白色邊框全部擠出容器外裁剪 */
  filter: drop-shadow(0 0 20px rgba(239, 197, 97, 0.3)) !important;
  transition: var(--transition-smooth) !important;
}

/* 懸停時瓷盤有輕微的放大與優雅微旋轉互動 */
.hover-glow:hover img {
  transform: scale(1.52) rotate(4deg) !important;
}

/* 行動端圖片尺寸自適應限制，防止窄螢幕溢出 */
@media (max-width: 400px) {
  .relative.w-80.h-80 {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}

.hover-glow {
  position: relative;
  border-radius: 50% !important; /* 修改為完美正圓形，以利完美裁切白邊 */
  overflow: hidden !important; /* 關鍵：隱藏所有超出圓形範圍的白色邊框 */
  background: radial-gradient(circle, rgba(239, 197, 97, 0.25) 0%, transparent 70%) !important;
  animation: kintsugiFloat 6s ease-in-out infinite; /* 平滑流暢的浮動效果 */
  border: 2px solid rgba(239, 197, 97, 0.3) !important; /* 加強淡金色邊框質感 */
  box-shadow: 0 15px 50px rgba(239, 197, 97, 0.15), inset 0 0 20px rgba(239, 197, 97, 0.1) !important; /* 內外雙重金色發光 */
}

@keyframes kintsugiFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1.5deg); /* 上下漂浮並伴隨極輕微的旋轉 */
  }
}

/* === 8. 全站 Tailwind 顏色類名重映射（關鍵覆寫，保持 JS 相容） === */

/* 覆寫所有與金色相關的背景與文字類名，強制使用 #EFC561 */
.bg-amber-500 {
  background-color: var(--color-gold-light) !important;
  color: #0b0f19 !important;
}

.text-amber-500, .text-amber-400 {
  color: var(--color-gold-light) !important;
}

.border-amber-500 {
  border-color: var(--color-gold-light) !important;
}

.border-amber-500\/30 {
  border-color: rgba(239, 197, 97, 0.3) !important;
}

.border-amber-500\/20 {
  border-color: rgba(239, 197, 97, 0.2) !important;
}

.bg-amber-500\/10 {
  background-color: rgba(239, 197, 97, 0.1) !important;
}

.bg-amber-400\/20 {
  background-color: rgba(239, 197, 97, 0.15) !important;
}

.border-amber-400\/40 {
  border-color: rgba(239, 197, 97, 0.35) !important;
}

.text-amber-300 {
  color: var(--color-gold-gradient-1) !important;
}

/* 全域邊框顏色調和（淡金色透光邊框替代死板的深色邊框） */
.border-slate-800, .border-slate-700, .border-slate-850 {
  border-color: rgba(239, 197, 97, 0.1) !important;
}

/* 導覽列連結 hover 顏色覆寫 */
.text-slate-300:hover {
  color: var(--color-gold-light) !important;
}

/* === 9. 表單輸入框焦點與元件美化 === */

/* 高級商務輸入框設計 */
.form-input-premium {
  background-color: rgba(11, 15, 25, 0.8) !important;
  border: 1px solid rgba(239, 197, 97, 0.2) !important;
  color: var(--color-text-main) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  transition: var(--transition-smooth) !important;
}

.form-input-premium:focus {
  outline: none !important;
  border-color: var(--color-gold-light) !important;
  /* 焦點狀態下溫和的金色外發光 */
  box-shadow: 0 0 0 4px rgba(239, 197, 97, 0.25) !important;
  background-color: rgba(11, 15, 25, 0.95) !important;
}

/* 複選框 (Checkbox) 顏色金化 */
input[type="checkbox"] {
  accent-color: var(--color-gold-light) !important;
  cursor: pointer;
}

/* 表單複選框容器 hover 微動效 */
#requirements-checkbox-group label {
  transition: var(--transition-smooth) !important;
}

#requirements-checkbox-group label:hover {
  border-color: rgba(239, 197, 97, 0.4) !important;
  background-color: rgba(23, 31, 48, 0.5) !important;
}

/* === 10. 導覽列與飾線動畫 === */

/* 頂部 Sticky 導覽列微調 */
header {
  border-bottom: 1px solid rgba(239, 197, 97, 0.12) !important;
}

/* 頂部金繼漸層飾線升級為流光動畫效果 */
.kintsugi-line-decor {
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(239, 197, 97, 0) 0%, 
    var(--color-gold-light) 50%, 
    rgba(239, 197, 97, 0) 100%);
  background-size: 200% 100%;
  animation: shineDecor 4s linear infinite;
}

@keyframes shineDecor {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* === 11. 成功提交懸浮彈窗 (Success Modal) 美化 === */

#success-modal .glass-panel {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 50px rgba(239, 197, 97, 0.15) !important;
}

#success-modal .w-16.h-16 {
  animation: scaleSuccess 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes scaleSuccess {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}