/* style.css */
body { 
  font-family: 'Noto Sans TC', system-ui, sans-serif; 
  color: #3d2b20; 
  overflow-x: hidden; 
  transition: background-color 0.2s ease-out, opacity 0.3s ease;
}
h1, h2, h3, h4, .font-serif { 
  font-family: 'Noto Serif TC', Georgia, serif; 
}

/* ─── 全站一致導覽列 NAVBAR ─── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: transparent; transition: all 0.4s ease;
}
#navbar.scrolled {
  background: rgba(251, 249, 245, 0.96); backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(60, 40, 25, 0.04);
  border-bottom: 1px solid rgba(106, 76, 45, 0.05);
}

.nav-link {
  font-size: 18.4px; font-weight: 600; color: #ffffff;
  letter-spacing: 0.06em; text-shadow: 0 1px 3px rgba(0,0,0,0.4); 
  transition: all 0.3s ease;
}
#navbar.scrolled .nav-link { color: #3d2b20; text-shadow: none; }
.nav-link:hover, #navbar.scrolled .nav-link:hover { color: #5e8b3a; }

/* ─── LOGO 高級白邊 / 發光濾鏡 ─── */
#navbar:not(.scrolled) .logo-img {
  filter: drop-shadow(2px 0px 0px #ffffff) drop-shadow(-2px 0px 0px #ffffff) 
          drop-shadow(0px 2px 0px #ffffff) drop-shadow(0px -2px 0px #ffffff);
  transition: filter 0.4s ease;
}
#navbar.scrolled .logo-img { filter: none; transition: filter 0.4s ease; }

/* ─── 下拉選單樣式 ───
   注意：下拉選單容器（.dropdown-wrap）從導覽項目底部「無縫」開始（top-full，不設 margin），
   視覺間距改用 padding-top 做在容器內部，讓滑鼠從文字移動到選單的路徑全程都在同一個可
   hover 的區塊內，滑鼠才不會因為中間的間隙而提早觸發收合。 */
.dropdown-wrap {
  position: absolute; top: 100%; left: 0; padding-top: 0.5rem; width: 14rem;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 50;
}
.group:hover .dropdown-wrap {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu {
  background: #ffffff; border: 1px solid #e7e2d8; box-shadow: 0 20px 45px rgba(60,40,25,0.12);
  border-radius: 0.5rem; padding: 0.5rem 0;
}

/* style.css */
/* 這是給頁尾的設定 */

/* ─── 語系切換按鈕 ─── */
/* ─── 語系切換按鈕（桌機版：下拉選單，支援中/EN/日/DE 4 種語言） ─── */
.lang-switcher-btn { border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); }
#navbar.scrolled .lang-switcher-btn { border-color: rgba(106, 76, 45, 0.3); background: transparent; color: #6a4c2d; }
.lang-switcher-btn:hover { color: #ffffff; }
#navbar.scrolled .lang-switcher-btn:hover { color: #5e8b3a; }
#langToggleBtn[aria-expanded="true"] i { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 0.5rem; width: 8rem;
  background: #ffffff; border: 1px solid #e7e2d8; box-shadow: 0 20px 45px rgba(60,40,25,0.12);
  border-radius: 0.5rem; padding: 0.4rem 0; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.25s ease;
}
.lang-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-btn {
  display: block; width: 100%; text-align: left; padding: 0.5rem 1rem;
  font-size: 0.85rem; font-weight: 600; color: #6a4c2d; background: transparent; border: none; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-btn:hover { background: #f4f1ea; color: #5e8b3a; }
.lang-btn.active { color: #ffffff; background: #6a4c2d; }

/* 手機版：語言切換改成 4 顆並排的小按鈕，放在漢堡選單清單最下方 */
.mobile-lang-row .lang-btn.mobile-lang-btn {
  text-align: center; border: 1px solid #e7e2d8; border-radius: 0.4rem; padding: 0.5rem 0;
}
.mobile-lang-row .lang-btn.mobile-lang-btn.active { border-color: #6a4c2d; }

/* ─── 手機版漢堡選單（原本 lg 以下完全沒有導覽選單，這裡補上） ─── */
.mobile-toggle {
  width: 26px; height: 20px; position: relative; display: inline-flex; flex-direction: column;
  justify-content: space-between; cursor: pointer; z-index: 1001;
}
.mobile-toggle span {
  display: block; height: 2px; width: 100%; background: #ffffff; border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
#navbar.scrolled .mobile-toggle span { background: #3d2b20; }
.mobile-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-panel {
  position: fixed; top: 90px; left: 0; right: 0; z-index: 998;
  background: rgba(251, 249, 245, 0.98); backdrop-filter: blur(14px);
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
  box-shadow: 0 12px 30px rgba(60,40,25,0.08);
}
.mobile-panel.open { max-height: 80vh; overflow-y: auto; }
.mobile-panel a { color: #3d2b20; }
.mobile-panel .mobile-sub { display: none; }
.mobile-panel .mobile-sub.open { display: block; }

/* ─── 內頁共用頂部大圖（原本 lessons/lesson-gyro/partners 各自重複定義一份，收進來統一管理） ─── */
.page-hero {
  height: 40vh; min-height: 320px; position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
}
.page-hero--tall { height: 45vh; min-height: 360px; }

/* 通用卡片圖片 hover 效果（教案主圖框等），全站共用 */
.product-photo-frame { transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: hidden; }
.product-photo-frame:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(45,73,32,0.14); }
.product-photo-frame img { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.product-photo-frame:hover img { transform: scale(1.06); }

/* ─── 滾動淡入動畫（原本只有首頁有，這裡收進共用檔讓全站頁面都能套用） ─── */
/* 雙向捲動淡入淡出：預設完全可見（安全），opacity/transform 由 JS 持續更新，
   CSS 只負責讓數值變化時有平滑的過渡動畫 */
.reveal { opacity: 1; transition: opacity 0.15s linear, transform 0.15s linear; will-change: transform, opacity; }

/* 磁吸按鈕 */
.magnetic-btn { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.magnetic-ripple {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.55); transform: scale(0); opacity: 1; pointer-events: none;
}

/* 循環呼吸動畫：裝飾用小底線，不需要滑鼠也會持續微幅律動 */
.section-eyebrow::after { animation: eyebrow-breathe 4s ease-in-out infinite; transform-origin: left; }
@keyframes eyebrow-breathe { 0%, 100% { opacity: 1; transform: scaleX(1); } 50% { opacity: 0.65; transform: scaleX(0.72); } }

/* ─── 段落小標籤（原本只有首頁有，這裡收進共用檔讓 partners.html 等內頁也能套用） ─── */
.section-eyebrow {
  display: inline-block; font-size: 1rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #5e8b3a; margin-bottom: 16px; position: relative;
}
.section-eyebrow::after { content: ''; display: block; width: 44px; height: 2px; background: linear-gradient(90deg, #5e8b3a, transparent); margin-top: 8px; }

/* ─── 多語言排版修正 ───
   text-justify（左右對齊）在中文很好看，但英文／日文／德文遇到長單字時，
   瀏覽器會把字與字之間的空白硬拉開，出現一行只有幾個字、空白很大的怪異排版。
   這裡依 <html lang="..."> 判斷，非中文時一律改回靠左對齊，避免切換語言後版面跑掉。 */
html:lang(en) .text-justify,
html:lang(ja) .text-justify,
html:lang(de) .text-justify {
  text-align: left;
}

/* ─── 英文／德文字級與字型調整 ───
   中文字級系統（text-sub、text-h2...）是照中文閱讀習慣設計的，
   套用到英文／德文時，因為字母本身較寬、單字較長，同樣的 px 數看起來會顯得偏大、偏粗。
   這裡把英文／德文的字級整體調降，並改用 Arial Narrow（比預設的 Noto Sans TC 更適合拉丁字母），
   同時把預設字距收緊一點，避免看起來鬆散笨重。 */
html:lang(en) body,
html:lang(de) body {
  font-family: 'Arial Narrow', Arial, 'Helvetica Neue', sans-serif;
  letter-spacing: -0.01em;
}
html:lang(en) .text-caption, html:lang(de) .text-caption { font-size: 13px; }
html:lang(en) .text-body,    html:lang(de) .text-body    { font-size: 14px; }
html:lang(en) .text-sub,     html:lang(de) .text-sub     { font-size: 15px; }
html:lang(en) .text-h3,      html:lang(de) .text-h3      { font-size: 18px; }
html:lang(en) .text-h2,      html:lang(de) .text-h2      { font-size: 26px; }
html:lang(en) .text-h1,      html:lang(de) .text-h1      { font-size: 36px; }
html:lang(en) .text-lead,    html:lang(de) .text-lead    { font-size: 19px; }
html:lang(en) .text-card-title,    html:lang(de) .text-card-title    { font-size: 23px; }
html:lang(en) .text-section-title, html:lang(de) .text-section-title { font-size: 34px; }
html:lang(en) .text-display,       html:lang(de) .text-display       { font-size: 44px; }

/* 主導覽列：英文／德文用稍大一點的 20px，中文／日文維持 18.4px */
html:lang(en) .nav-link, html:lang(de) .nav-link { font-size: 18.6px; }