/* === 全域樣式 === */
html, body {
  width: 100%;
  overflow-x: hidden; /* 防止右側黑邊 */
  font-family: 'Noto Sans TC', sans-serif;
  margin: 0;
  padding: 0;
  background: #FFF;
  color: #000;
  -webkit-tap-highlight-color: transparent;
}

/* === Navbar === */
header {
  background: #000;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 999; /* 抽屜與遮罩會在這之上，按鈕仍可點擊 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

/* 僅限導覽選單 UL，避免影響頁面其他 ul */
nav ul#menu {
  list-style: none;
  display: flex;      /* 桌機為水平選單 */
  margin: 0;
  padding: 0;
}

nav ul#menu li {
  margin-left: 1.5rem;
}

nav ul#menu a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  padding: .25rem 0;         /* 給底線陰影留空間，避免 hover 推擠 */
  transition: color 0.2s ease;
  outline: none;
}

nav ul#menu a:hover,
nav ul#menu a.active {
  color: #a88d65;
  /* 改用 inset 陰影模擬底線，不會造成版面位移 */
  box-shadow: inset 0 -2px 0 0 #a88d65;
}

nav ul#menu a:focus-visible {
  outline: 2px dashed #a88d65;
  outline-offset: 3px;
}

/* === 漢堡選單 === */
.menu-toggle {
  display: none;                 /* 桌機隱藏、手機顯示 */
  flex-direction: column;
  cursor: pointer;
  width: 28px;
  height: 22px;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative; /* 擴大點擊熱區 */
}

.menu-toggle::after {
  /* 擴大點擊熱區到 44x44 */
  content: "";
  position: absolute;
  inset: -11px -8px; /* 28x22 -> +16/+22 大約達 44x44 */
}

.menu-toggle:focus-visible {
  outline: 2px dashed #a88d65;
  outline-offset: 6px;
  border-radius: 6px;
}

.menu-toggle span {
  width: 100%;
  height: 3px;
  background: #a88d65;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 開啟選單時，讓漢堡變 X（利用 body.menu-open 狀態） */
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* === 手機版抽屜選單 === */
@media (max-width: 768px) {
  nav ul#menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 85vw;             /* 用 vw 避免右邊黑邊 */
    max-width: 320px;
    height: 100svh;          /* 修正 iOS 工具列造成的可視高度誤差 */
    background: #1b1b1b;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0) + 72px) 0 1rem 1.5rem; /* 瀏海安全區 */
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.35s ease-in-out;
    z-index: 1001;           /* 高於遮罩(1000) 以確保抽屜在上層 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    will-change: transform;  /* 硬體加速，避免卡頓 */
  }

  nav ul#menu.open { transform: translateX(0); }

  nav ul#menu li { margin: 1rem 0; }

  nav ul#menu a {
    font-size: 1.05rem;
    padding: .5rem 1rem .5rem 0; /* 手機更好點 */
    display: inline-block;
  }

  .menu-toggle { display: flex; }
}

/* === 半透明背景遮罩 === */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 1000;
}
#overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* === 開啟選單時鎖住背景滾動 === */
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* === Hero 區塊（示例） === */
.hero {
  background: #f0ece6;
  padding: 5rem 1.5rem;
  text-align: center;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #a88d65;
}
.hero p {
  font-size: 1.2rem;
  color: #333;
}

/* === Section === */
.section {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}
.section h2 {
  border-bottom: 2px solid #a88d65;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  color: #a88d65;
}

/* === Footer === */
footer {
  background: #f9f7f2;
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
  color: #999;
}

/* === Navbar 遮到標題的三段式保險 === */
:root { --header-h: clamp(56px, 9vw, 72px); }  /* 依實際 header 高度可再調 */

/* 全域：讓錨點捲動自帶上方留白 */
html { scroll-padding-top: var(--header-h); }

/* 區塊：帶 id 的標題或段落主動留出 header 高度 */
section[id],
h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: var(--header-h); }

/* 常用區塊再加一層保險 */
#about, #experience, #services { scroll-margin-top: var(--header-h); }

/* Fallback：舊瀏覽器/部分 WebView 的 hash 導航 */
:target::before {
  content: "";
  display: block;
  height: var(--header-h);
  margin-top: calc(var(--header-h) * -1);
}

/* === 動效降噪（使用者偏好減少動效） === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}