/* ═══════════════════════════════════════════════════════════════
   好好生活物理治療所 — 頁首導覽（單一來源）
   ═══════════════════════════════════════════════════════════════

   ⚠️ 為什麼獨立成一支檔案：
   頁首樣式原本在 haohao/index.html 的 inline <style> 與 article.css
   各寫一份。兩份就一定會漂移 —— 2026-08 頁首雙 logo 爆版就是這樣來的
   （見 docs/架構-好好生活官網.md §11）。現在首頁與所有衛教文都載入這一支，
   改一次就到處生效。

   ⚠️ 好好生活這區不吃 public-official/pages.css（那是母站的視覺語言）。
   母站頁首若有共用性的調整，要判斷是否手動同步過來，不會自動套用。

   搭配 nav.js（手機漢堡與下拉的行為）。沒有 JS 也能用：
   桌機下拉走 :hover / :focus-within，手機則以 <details> 般的展開呈現。
   ═══════════════════════════════════════════════════════════════ */

.site-head{
  position:sticky; top:0; z-index:60;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  background:var(--head-bg,rgba(253,251,247,.86));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border,#E4DCCB);
}
.head-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:74px; padding-top:6px; padding-bottom:6px;
}

/* ───────── 集團品牌切換：兩個 logo 並排 ───────── */
.brand-tabs{display:flex;align-items:center;gap:14px;flex:0 1 auto;min-width:0}
.brand-tab{
  display:flex; align-items:center; line-height:0; text-decoration:none;
  padding:6px 0 5px; border-bottom:2px solid transparent;
  opacity:.5; filter:grayscale(.25);
  transition:opacity .25s ease,filter .25s ease,border-color .25s ease;
}
.brand-tab:hover,.brand-tab:focus-visible{opacity:1;filter:none}
.brand-tab.is-current{opacity:1;filter:none}
.brand-tab.is-current.tab-bl{border-bottom-color:#d4c34a}
.brand-tab.is-current.tab-hh{border-bottom-color:var(--navy,#16305C)}
.brand-tab img{width:auto;display:block}
.brand-tab.tab-bl img{height:34px}
.brand-tab.tab-hh img{height:27px}
.brand-tabs .tab-sep{width:1px;height:26px;background:var(--border,#E4DCCB);flex:0 0 auto}

/* ───────── 快速入口 ───────── */
.head-nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px)}
.head-nav .nav-list{
  display:flex; align-items:center; gap:clamp(10px,1.6vw,24px);
  list-style:none; margin:0; padding:0;
}
.head-nav .nav-item{position:relative}
.head-nav a{
  display:inline-block; text-decoration:none; font-size:14.5px;
  color:var(--ink-soft,#655F53); letter-spacing:.04em; padding:6px 0;
  border-bottom:1px solid transparent; white-space:nowrap;
  transition:color .25s ease,border-color .25s ease;
}
.head-nav a:hover,.head-nav a:focus-visible{
  color:var(--navy,#16305C); border-bottom-color:var(--gold,#E39B12);
}

/* 下拉觸發鈕 */
.nav-toggle{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; cursor:pointer; font:inherit;
  font-size:14.5px; color:var(--ink-soft,#655F53); letter-spacing:.04em;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}
.nav-toggle:hover,.nav-toggle:focus-visible{
  color:var(--navy,#16305C); border-bottom-color:var(--gold,#E39B12);
}
.nav-toggle .caret{
  width:7px; height:7px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .25s ease;
}
.nav-item.is-open > .nav-toggle .caret{transform:rotate(-135deg) translate(-2px,-2px)}

/* 下拉面板 */
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  min-width:216px; list-style:none; margin:0; padding:8px 0;
  background:var(--white,#fff); border:1px solid var(--border,#E4DCCB);
  border-radius:3px; box-shadow:0 10px 28px var(--shadow-navy,rgba(22,48,92,.10));
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown,
.nav-item.is-open > .dropdown{opacity:1;visibility:visible;pointer-events:auto}
.dropdown li{margin:0}
.dropdown a{
  display:block; padding:9px 18px; font-size:14px; line-height:1.65;
  border-bottom:0; white-space:normal;
}
.dropdown a:hover,.dropdown a:focus-visible{
  background:var(--cream-2,#F7F1E6); color:var(--navy,#16305C); border-bottom:0;
}

/* 頁首的 LINE 入口 */
.nav-cta{
  background:var(--gold,#E39B12); color:var(--navy-deep,#0F2344)!important;
  font-weight:700; padding:9px 18px!important; border-radius:2px;
  border-bottom:0!important; letter-spacing:.06em;
  transition:transform .2s ease,box-shadow .2s ease;
}
.nav-cta:hover,.nav-cta:focus-visible{
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(227,155,18,.34);
  border-bottom:0!important;
}

/* ───────── 手機漢堡鈕 ───────── */
.menu-toggle{
  display:none; width:42px; height:42px; padding:0;
  background:none; border:0; cursor:pointer; position:relative; flex:0 0 auto;
}
.menu-toggle span{
  display:block; position:absolute; left:11px; width:20px; height:1.5px;
  background:var(--navy,#16305C); transition:transform .28s ease,opacity .2s ease;
}
.menu-toggle span:nth-child(1){top:15px}
.menu-toggle span:nth-child(2){top:20.5px}
.menu-toggle span:nth-child(3){top:26px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ───────── 手機版：漢堡展開的面板 ───────── */
@media (max-width:900px){
  .menu-toggle{display:block}
  .head-nav{
    position:absolute; top:100%; left:0; right:0;
    display:block; background:var(--cream,#FDFBF7);
    border-bottom:1px solid var(--border,#E4DCCB);
    box-shadow:0 12px 28px var(--shadow-navy,rgba(22,48,92,.10));
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .3s ease,visibility .3s ease;
  }
  .head-nav.is-open{max-height:78vh;overflow-y:auto;visibility:visible}
  .head-nav .nav-list{
    display:block; padding:6px var(--gutter,24px) 18px;
  }
  .head-nav .nav-item{border-bottom:1px solid var(--border,#E4DCCB)}
  .head-nav .nav-item:last-child{border-bottom:0}
  .head-nav a{
    display:block; padding:14px 0; font-size:15.5px;
    border-bottom:0; white-space:normal;
  }
  .nav-toggle{
    display:flex; width:100%; justify-content:space-between;
    padding:14px 0; font-size:15.5px; border-bottom:0;
  }
  /* 手機的下拉改成展開，不浮在上面 */
  .dropdown{
    position:static; transform:none; min-width:0; width:100%;
    border:0; border-radius:0; box-shadow:none; background:none;
    padding:0 0 8px; opacity:1; visibility:visible; pointer-events:auto;
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .nav-item:hover > .dropdown,.nav-item:focus-within > .dropdown{max-height:0}
  .nav-item.is-open > .dropdown{max-height:420px}
  .dropdown a{padding:11px 0 11px 16px;font-size:14.5px;color:var(--ink-soft,#655F53)}
  .dropdown a:hover{background:none}
  .nav-cta{
    display:block!important; text-align:center; margin:14px 0 4px;
    padding:14px 18px!important;
  }
  .brand-tabs{gap:10px}
  .brand-tab.tab-bl img{height:29px}
  .brand-tab.tab-hh img{height:23px}
  .brand-tabs .tab-sep{height:22px}
}

@media (max-width:420px){
  .brand-tabs{gap:8px}
  .brand-tab.tab-bl img{height:25px}
  .brand-tab.tab-hh img{height:20px}
}

@media (prefers-reduced-motion:reduce){
  .head-nav,.dropdown,.menu-toggle span,.nav-cta{transition:none}
}