/* 全站頁首（唯一樣式來源）。版型在 scripts/site-header.mjs、行為在 js/site-header.js。
   首頁／內容頁（style.css 色票：--text/--border/--bg-card）與命書頁（solo.css 色票：--ink/--line/--card）
   都載本檔，故每個變數都帶另一套色票當退路。 */
.site-header {
  position: relative;   /* 手機版主選單面板以頁首為定位基準 */
  padding: 20px 24px;
  border-bottom: 1px solid var(--border, var(--line, #e4ddce));
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.site-header .brand {
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.15em;
  color: var(--text, var(--ink, #201d18)); text-decoration: none;
}
.site-header .brand span { color: var(--gold, #a6824c); }

/* 主選單：桌機＝三個主要連結＋「主題」下拉；手機（≤760px）＝只剩一顆「選單」，主要連結也收進面板 */
.main-nav { display: flex; align-items: center; gap: 2px; margin-left: 18px; }
.main-nav .nav-link {
  color: var(--text-dim, var(--ink-soft, #6f685c)); font-size: 14.5px; text-decoration: none;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; transition: color .15s, background .15s;
}
.main-nav .nav-link:hover { color: var(--text, var(--ink, #201d18)); background: rgba(166, 130, 76, 0.08); }
.main-nav .nav-link[aria-current="page"] { color: var(--text, var(--ink, #201d18)); font-weight: 600; }
.nav-menu { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  color: var(--text-dim, var(--ink-soft, #6f685c)); font-family: inherit; font-size: 14.5px; padding: 6px 10px; border-radius: 8px;
}
.nav-trigger:hover, .nav-menu.open .nav-trigger { color: var(--text, var(--ink, #201d18)); background: rgba(166, 130, 76, 0.08); }
.nav-trigger:focus-visible { outline: 2px solid var(--gold-soft, #c0a070); outline-offset: 2px; }
.nav-t-mob { display: none; }
.nav-caret {
  width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.nav-menu.open .nav-caret { transform: rotate(-135deg) translateY(-1px); }
.nav-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: none;
  width: 560px; max-width: calc(100vw - 32px); padding: 16px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px;
  background: var(--bg-card, var(--card, #fff)); border: 1px solid var(--border, var(--line, #e4ddce)); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(32, 29, 24, 0.16);
}
.nav-menu.open .nav-panel { display: grid; }
.nav-group { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-group-h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--text, var(--ink, #201d18));
  margin: 0 0 4px; padding: 0 8px;
}
.nav-item {
  display: block; color: var(--text-dim, var(--ink-soft, #6f685c)); font-size: 14px; text-decoration: none;
  padding: 6px 8px; border-radius: 7px;
}
.nav-item:hover { background: rgba(166, 130, 76, 0.1); color: var(--text, var(--ink, #201d18)); }
.nav-item[aria-current="page"] { color: var(--gold, #a6824c); font-weight: 600; }
.nav-item[hidden] { display: none; }
.nav-primary-m { display: none; }

@media (max-width: 760px) {
  .main-nav { order: 3; margin-left: 0; position: static; }
  .main-nav .nav-link { display: none; }
  .nav-menu { position: static; }
  .nav-t-desk { display: none; }
  .nav-t-mob { display: inline; }
  .nav-trigger { border: 1px solid var(--border, var(--line, #e4ddce)); padding: 5px 11px; font-size: 14px; }
  .nav-panel {
    left: 12px; right: 12px; top: calc(100% - 4px); width: auto; max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .nav-primary-m {
    display: flex; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border, var(--line, #e4ddce));
  }
  .nav-primary-m .nav-item { border: 1px solid var(--border, var(--line, #e4ddce)); color: var(--text, var(--ink, #201d18)); padding: 6px 12px; }
  .site-header .lang-menu { order: 1; }
  .site-header .auth-slot { order: 2; }
}

/* 語言：單顆「文A」下拉 */
.lang-menu { position: relative; margin-left: auto; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 1px;
  background: none; border: 1px solid var(--border, var(--line, #e4ddce)); color: var(--text-dim, var(--ink-soft, #6f685c));
  font-size: 14px; font-family: inherit; padding: 5px 11px; border-radius: 8px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.lang-trigger .lang-trigger-ic { font-size: 15px; }
.lang-trigger:hover, .lang-menu.open .lang-trigger { color: var(--gold, #a6824c); border-color: var(--gold, #a6824c); }
.lang-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 148px; padding: 6px; display: none; flex-direction: column; gap: 2px;
  background: var(--bg-card, var(--card, #fff)); border: 1px solid var(--border, var(--line, #e4ddce)); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(32, 29, 24, 0.16);
}
.lang-menu.open .lang-dropdown { display: flex; }
/* 首頁繁中是 <button>（頁內換字），其餘頁是 <a>（走到隔壁語系網址）——兩者同一套樣式 */
.lang-dropdown button, .lang-dropdown a {
  display: block; text-align: left; background: none; border: 0; color: var(--text, var(--ink, #201d18));
  font-family: inherit; font-size: 14px; line-height: 1.4; padding: 9px 12px; border-radius: 8px;
  cursor: pointer; text-decoration: none;
}
.lang-dropdown button:hover, .lang-dropdown a:hover { background: rgba(166, 130, 76, 0.12); color: var(--gold, #a6824c); }
.lang-dropdown .lang-cur { color: var(--gold, #a6824c); font-weight: 600; }
.lang-dropdown .lang-cur::after { content: "✓"; float: right; margin-left: 12px; }

/* 登入／會員 */
.auth-slot { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auth-guest { color: var(--text-dim, var(--ink-soft, #6f685c)); font-size: 12px; }
.auth-chip {
  display: inline-block; background: none; border: 1px solid var(--border, var(--line, #e4ddce));
  color: var(--text, var(--ink, #201d18)); font-size: 13px; line-height: 1.5; padding: 5px 12px; border-radius: 8px;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.auth-chip:hover { border-color: var(--gold, #a6824c); color: var(--gold, #a6824c); }
.auth-chip-ghost { color: var(--text-dim, var(--ink-soft, #6f685c)); }
.auth-chip-gold { border-color: var(--gold, #a6824c); color: var(--gold, #a6824c); font-weight: 600; }
.auth-chip-gold:hover { background: rgba(166, 130, 76, 0.12); }

@media (max-width: 480px) {
  .site-header { padding: 14px 16px; gap: 8px; }
  .site-header .brand { font-size: 1.15rem; letter-spacing: 0.1em; }
}

@media print { .site-header .lang-menu, .site-header .auth-slot, .site-header .main-nav { display: none; } }

/* 窄手機：頁首要一行塞下品牌＋文A＋登入＋選單。英文字長（KnowYourBaZi、Log in / Sign up），
   「Menu」改成三條線圖示（文字留給讀屏），360px 再縮品牌與登入鈕字級；中文仍顯示「選單」兩字 */
@media (max-width: 420px) {
  .site-header { gap: 6px; padding: 14px 12px; }
  .site-header .brand { letter-spacing: 0.04em; }
  .lang-trigger { padding: 5px 8px; }
  .auth-chip { padding: 5px 9px; }
  html[lang="en"] .nav-t-mob { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[lang="en"] .nav-caret { display: none; }
  html[lang="en"] .nav-trigger::before {
    content: ""; width: 16px; height: 2px; margin: 6px 0; background: currentColor;
    box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
  }
}
@media (max-width: 380px) {
  html[lang="en"] .site-header .brand { font-size: 1.05rem; letter-spacing: 0.02em; }
  html[lang="en"] .auth-chip { font-size: 12.5px; padding: 5px 8px; }
}