/* =========================================================
   謝建騰教學個人網站 - 有機人文／日系生活風格 (Organic Editorial Style)
   色系：米白 (#F9F6F0)、淺灰 (#ECEBE7)、淡綠/鼠尾草綠 (#E3E8E1)
   視覺：襯線字體、手寫註記、微紙質雜訊底紋、圓潤幾何、細緻線條與自然光感
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Noto+Serif+TC:wght@400;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* 自然核心調色盤 */
  --bg-paper: #F9F6F0;           /* 溫潤米白主底色 */
  --bg-sage: #E3E8E1;            /* 柔和鼠尾草淡綠 (過渡與特色區塊) */
  --bg-pebble: #ECEBE7;          /* 柔霧淺灰 (卡片與微區塊) */
  --bg-card: #FFFFFF;            /* 卡片純淨白底 */
  
  /* 細緻線條與文字 */
  --text-ink: #262927;           /* 炭墨黑 (印刷墨水質感，溫和不刺眼) */
  --text-secondary: #575C58;     /* 炭灰次要文字 */
  --text-muted: #828783;         /* 說明微文字 */
  --border-delicate: rgba(38, 41, 39, 0.12); /* 纖細分割線 */
  --border-medium: rgba(38, 41, 39, 0.22);
  
  /* 大膽點綴碰撞色 */
  --accent-terracotta: #C85A32;  /* 陶土磚紅 (手寫標籤、警示) */
  --accent-ochre: #C29B38;       /* 橄欖芥黃 (行動呼籲 CTA、重要焦點) */
  --accent-forest: #3F5646;      /* 森林深綠 (沉穩強調) */
  
  /* 圓潤元素 */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 9999px;
}

body {
  background-color: var(--bg-paper);
  /* 微噪點紙質纖維紋理 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--text-ink);
  font-family: 'Plus Jakarta Sans', 'Noto Serif TC', -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.005em;
  line-height: 1.65;
}

/* ================= 襯線與手寫字體混搭 ================= */
h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', 'Noto Serif TC', serif;
  color: var(--text-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Noto Serif TC', sans-serif;
  color: var(--text-ink);
  font-weight: 700;
}

/* 手寫筆觸便箋標籤 */
.handwrite-badge {
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  color: var(--accent-terracotta);
  display: inline-block;
  transform: rotate(-2deg);
  line-height: 1;
}

.handwrite-note {
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  color: var(--accent-terracotta);
}

/* ================= 頂端導覽列 ================= */
.navbar-custom {
  background: rgba(249, 246, 240, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-delicate) !important;
  padding: 0.9rem 0;
  transition: all 0.3s ease;
}

.navbar-custom .navbar-brand {
  color: var(--text-ink) !important;
  font-family: 'Playfair Display', 'Noto Serif TC', serif;
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
}

.navbar-custom .navbar-brand i {
  color: var(--accent-forest) !important;
}

.navbar-custom .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.45rem 0.95rem !important;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
  color: var(--text-ink) !important;
  background: var(--bg-sage);
}

/* ================= 圓潤膠囊按鈕 (CTA) ================= */
.btn-cta {
  background-color: var(--accent-ochre) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.45rem;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(194, 155, 56, 0.28);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cta:hover {
  background-color: #A9852A !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(194, 155, 56, 0.38);
  color: #FFFFFF !important;
}

.btn-outline-dark {
  border-color: var(--border-medium) !important;
  color: var(--text-ink) !important;
  background: transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.btn-outline-dark:hover {
  background: var(--text-ink) !important;
  color: #FFFFFF !important;
}

/* ================= 圓潤卡片與不規則編排 ================= */
.card-fashion {
  background: var(--bg-card);
  border: 1px solid var(--border-delicate);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(38, 41, 39, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-ink);
  overflow: hidden;
}

.card-fashion:hover {
  border-color: var(--border-medium);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(38, 41, 39, 0.08);
}

/* 自然綠與米白過渡色塊卡片 */
.card-sage {
  background-color: var(--bg-sage);
  border: 1px solid rgba(63, 86, 70, 0.15);
  border-radius: var(--radius-lg);
}

.card-pebble {
  background-color: var(--bg-pebble);
  border: 1px solid var(--border-delicate);
  border-radius: var(--radius-lg);
}

/* ================= 自然光感 Hero Banner ================= */
.hero-banner {
  background: linear-gradient(135deg, #FAF7F2 0%, #E9EEE7 100%);
  border: 1px solid var(--border-delicate);
  border-radius: 32px;
  padding: 4.5rem 3rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(38, 41, 39, 0.05);
}

/* 模擬自然窗櫺斜射晨光陰影效果 */
.hero-banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
  pointer-events: none;
}

/* 自然生活有機標籤 */
.badge-organic {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(63, 86, 70, 0.08);
  border: 1px solid rgba(63, 86, 70, 0.2);
  color: var(--accent-forest);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

.badge-organic::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-forest);
}

/* ================= 精緻表格 (細緻線條與自然紙感) ================= */
.table {
  color: var(--text-ink) !important;
  --bs-table-bg: transparent !important;
  --bs-table-hover-bg: rgba(227, 232, 225, 0.45) !important;
  border-color: var(--border-delicate) !important;
}

.table-light, thead.table-light th {
  background-color: var(--bg-sage) !important;
  color: var(--text-ink) !important;
  border-color: var(--border-delicate) !important;
  font-weight: 700 !important;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 0.95rem 1rem;
}

.table td {
  padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--border-delicate);
  color: var(--text-ink) !important;
}

/* 等寬代碼標籤 (學號等) */
code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-sage);
  color: var(--accent-forest);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(63, 86, 70, 0.2);
  font-size: 0.88rem;
  font-weight: 600;
}

/* 自然系狀態徽章 */
.badge.bg-success {
  background-color: #3D6B4F !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.badge.bg-danger {
  background-color: #B94A2D !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.badge.bg-primary {
  background-color: #4A6572 !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.badge.bg-secondary {
  background-color: #79827B !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.badge.bg-warning {
  background-color: #D4A338 !important;
  color: #262927 !important;
  font-weight: 700;
}

/* ================= 溫潤下拉式選單 ================= */
.dropdown-menu-custom {
  background: #FFFFFF !important;
  border: 1px solid var(--border-delicate);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(38, 41, 39, 0.09);
  padding: 0.6rem;
}

.dropdown-menu-custom .dropdown-item {
  color: var(--text-ink) !important;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-menu-custom .dropdown-item:hover {
  background: var(--bg-sage) !important;
  color: var(--accent-forest) !important;
}

/* ================= 彈窗 (Modals) 結構防擋與溫潤紙感 ================= */
.modal {
  z-index: 1065 !important;
  overflow-y: auto !important;
}

.modal-backdrop {
  z-index: 1060 !important;
  background-color: rgba(38, 41, 39, 0.45) !important;
  backdrop-filter: blur(4px);
}

.modal-dialog {
  z-index: 1070 !important;
  position: relative !important;
}

.modal-content {
  background: #FCFAF7 !important;
  border: 1px solid var(--border-delicate);
  border-radius: 24px !important;
  color: var(--text-ink);
  box-shadow: 0 24px 60px rgba(38, 41, 39, 0.15) !important;
  pointer-events: auto !important;
}

.modal-content * {
  pointer-events: auto;
}

/* 表單元件 */
.form-control, .form-select {
  background: #FFFFFF !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-ink) !important;
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
  background: #FFFFFF !important;
  border-color: var(--accent-forest) !important;
  box-shadow: 0 0 0 3px rgba(63, 86, 70, 0.18) !important;
  color: var(--text-ink) !important;
}

/* 頁尾 */
footer {
  margin-top: auto;
  background: #EFECE6;
  border-top: 1px solid var(--border-delicate);
  color: var(--text-muted);
  padding: 3rem 0;
}