/**
 * 頁首：固定與收合、桌機選單、平板與手機選單、深色配色
 *
 * @package Yafun2027
 */

/* ==========================================================================
   基礎樣式（源自 Dyad，已精簡；先於本檔下方的野放樣式）
   ========================================================================== */

.site-header {
  display: table;
  left: 0;
  min-height: 90px;
  padding: 15px 40px;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 5;
}

.admin-bar .site-header,
.admin-bar.is-singular .site-header {
  top: 32px;
}

.site-branding {
  display: table-cell;
  vertical-align: middle;
}

.site-title {
  clear: none;
  font-size: 3rem;
  line-height: 1.2;
  margin: 0;
  vertical-align: middle;
}

.site-title,
.site-branding a,
.site-branding a:hover,
.site-branding a:focus,
.site-branding a:active {
  color: inherit;
  text-decoration: none;
}

.site-branding .site-description {
  display: none;
  font-size: 1.6rem;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

#site-navigation {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  width: 70%;
}

#site-navigation a {
  color: #fff;
  display: inline-block;
  transition: opacity 0.3s;
}

#site-navigation ul,
#site-navigation li {
  list-style: none;
  margin: 0;
}

#site-navigation li {
  position: relative;
}

#site-navigation ul li {
  display: inline-block;
  letter-spacing: 0.1em;
  margin-left: 1.5em;
  padding: 6px 0 10px;
  text-transform: uppercase;
}

#site-navigation ul ul {
  left: -9999em;
  margin-top: 10px;
  position: absolute;
  width: 220px;
  z-index: 10;
}

#site-navigation ul ul::before {
  border-style: solid;
  border-width: 0 10px 10px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  top: -10px;
  width: 0;
}

#site-navigation ul ul li {
  display: block;
  font-size: 1.4rem;
  letter-spacing: 0;
  margin-left: 0;
  padding: 0;
  text-align: left;
  text-transform: none;
}

#site-navigation ul ul a {
  display: block;
  padding: 1rem 2rem;
}

#site-navigation ul li:hover > ul,
#site-navigation ul li.focus > ul {
  left: 50%;
  margin-left: -110px;
}

.menu-toggle {
  display: none;
}

@media only screen and (max-width: 1400px) {
  .site-header,
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    position: absolute;
  }

  #site-navigation {
    width: 65%;
  }

}
@media only screen and (max-width: 960px) {
  .site-header {
    min-height: 0 !important;
  }

  .site-header,
  .is-scrolled .site-header,
  .blog .site-header,
  .home .site-header {
    background-color: #292c2f;
  }

  .site-branding {
    padding-bottom: 2rem;
  }

  .is-singular:not(.home) .site-header > .site-branding {
    display: block;
  }

  #site-navigation {
    text-align: left;
    width: 100%;
  }

  .menu-toggle {
    right: 2rem;
    top: 1rem;
  }

  .menu-toggle::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    background-color: currentcolor;
    -webkit-mask: url("../../icons/menu.svg") center / contain no-repeat;
    mask: url("../../icons/menu.svg") center / contain no-repeat;
    font-size: 85%;
    margin: 0 6px 0 0;
    position: relative;
    top: 1px;
  }

  .open .menu-toggle::before {
    -webkit-mask-image: url("../../icons/close.svg");
    mask-image: url("../../icons/close.svg");
  }

  #site-navigation > div {
    display: none;
  }

  #site-navigation.open > div {
    display: block;
  }

  #site-navigation ul li {
    border-top: 1px solid #363b40;
    display: block;
    margin: 0;
    padding: 0;
  }

  #site-navigation ul a {
    color: #8c97a2;
  }

  #site-navigation ul ul {
    line-height: 1.6;
    position: static;
    width: auto;
    margin: 0 0 0 2rem !important;
  }

  #site-navigation ul ul::before {
    display: none;
  }

  #site-navigation ul ul li {
    border: 0;
  }

  #site-navigation ul ul a {
    padding: 1rem 0;
  }

  #site-navigation ul li:hover > ul,
  #site-navigation ul li.focus > ul {
    left: 0;
    margin: 0;
  }

}
@media only screen and (max-width: 680px) {
  .site-title {
    font-size: 2.2rem;
  }

  .menu-toggle {
    font-size: 1.2rem;
  }

}
@media only screen and (max-width: 400px) {
  .site-branding {
    padding-bottom: 1.3rem;
  }

  .site-title {
    padding: 0;
    text-align: center;
  }

  .menu-toggle {
    margin: 0 auto 10px;
    right: auto;
    top: auto;
  }

  #site-navigation {
    padding-bottom: 1px;
  }

}

/* ==========================================================================
   頁首：所有寬度都固定在上方，往下捲收起、往上捲出現（由 js/header.js 控制）
   ========================================================================== */

.site-header,
.is-singular .site .site-header,
.admin-bar .site-header,
.admin-bar.is-singular .site-header {
  position: fixed;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.35s;
}

.site-header.yf-header-hidden {
  transform: translateY(calc(-100% - 50px));
}

@media only screen and (max-width: 1400px) {
  .site-header,
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    top: 0;
  }

  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    top: 32px;
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  /* WordPress 管理列在此寬度不固定，頁首直接貼齊頂端 */
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

@property --yf-zoom {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
/* ==========================================================================
   平板橫向（961–1280px）：桌面選單收緊，避免與 Logo 擠在一起換行
   ========================================================================== */

@media only screen and (min-width: 961px) and (max-width: 1280px) {
  .site-header {
    padding: 12px 24px;
  }

  .site-branding {
    width: 24%;
  }

  #site-navigation {
    width: 76%;
    font-size: 1.3rem;
  }

  #site-navigation ul li {
    margin-left: 1.1em;
    letter-spacing: 0.04em;
  }

  .site-branding .site-logo-link img {
    max-width: 200px;
    height: auto;
  }
}
/* ==========================================================================
   手機與平板直向（≤960px）：精簡頁首列 + 全螢幕選單
   - 頁首固定在上方，高度由 header.js 寫入 --yf-header-h，.site 以 padding 補位
   - 選單面板以 absolute 接在頁首下方，避免被 backdrop-filter 限制
   ========================================================================== */

@media only screen and (max-width: 960px) {
  .site-header,
  .is-singular .site .site-header,
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) max(1.6rem, env(safe-area-inset-right, 0px)) 1rem max(1.6rem, env(safe-area-inset-left, 0px));
    background-color: rgba(24, 33, 28, 0.94);
  }

  /* Dyad 沒有 .site 外層容器，改由 body 補上固定頁首的高度 */
  body {
    padding-top: var(--yf-header-h, 64px);
  }

  /* 首頁 Banner 在此寬度改為一般流動版面，不需額外補位 */
  .home .site-banner,
  .blog .site-banner {
    top: 0;
  }

  .site-branding,
  .is-singular:not(.home) .site-header > .site-branding {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 0;
  }

  .site-branding .site-logo-link img {
    display: block;
    max-width: 150px;
    max-height: 44px;
    width: auto;
    height: auto;
  }

  #site-navigation {
    position: static;
    flex: 0 0 auto;
    width: auto;
  }

  /* 漢堡按鈕 */
  .menu-toggle {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: none;
  }

  .menu-toggle::before {
    top: 0;
    margin: 0;
  }

  /* 選單面板：接在頁首下方，佔滿剩餘螢幕高度 */
  #site-navigation > div {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--yf-header-h, 64px));
    height: calc(100dvh - var(--yf-header-h, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2rem max(2.4rem, env(safe-area-inset-right, 0px)) calc(4rem + env(safe-area-inset-bottom, 0px)) max(2.4rem, env(safe-area-inset-left, 0px));
    background: #18211c;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  #site-navigation.open > div {
    animation: yf-menu-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #site-navigation ul li {
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
    padding: 0;
  }

  #site-navigation ul a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.4rem 0;
    color: #f0ece2;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  #site-navigation ul a:hover,
  #site-navigation ul a:focus {
    color: #a9d1b3;
    opacity: 1;
  }

  #site-navigation .current-menu-item > a,
  #site-navigation .current-menu-parent > a,
  #site-navigation .current-category-ancestor > a {
    color: #a9d1b3;
  }

  #site-navigation ul ul {
    margin: 0 0 1.2rem 1.2rem !important; /* 需蓋過 Dyad 子選單的 margin 設定 */
    padding-left: 1.2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  #site-navigation ul ul li {
    border-bottom: 0;
  }

  #site-navigation ul ul a {
    min-height: 44px;
    font-size: 1.6rem;
    font-weight: 500;
    color: #c8cfc4;
  }

  /* 選單開啟時鎖住背景捲動 */
  html.yf-menu-open,
  html.yf-menu-open body {
    overflow: hidden;
  }

  /* 開啟選單時頁首改為不透明，避免與下方內容重疊難讀 */
  html.yf-menu-open .site-header {
    background-color: #18211c;
  }

  /* 文章頁：父主題在手機上讓精選圖貼齊頂端，改由 .site 補位後不需再上推 */
  .admin-bar.is-singular .entry-media {
    top: auto;
  }
}

@media only screen and (max-width: 600px) {
  .site-branding .site-logo-link img {
    max-width: 130px;
    max-height: 38px;
  }

  #site-navigation ul a {
    font-size: 1.8rem;
  }
}

@keyframes yf-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #site-navigation.open > div {
    animation: none;
  }
}
/* ==========================================================================
   Header／Footer 統一配色
   兩者共用森林綠深色系（--forest-*）、米白文字（--on-dark）、淺葉綠互動色（--on-dark-accent），
   並以同一條沙色細線作為頁首底部與頁尾頂部的收邊。
   ========================================================================== */

body {
  background-color: var(--forest-900);
}

/* ---------- Header ---------- */

.site-header,
.blog .site-header,
.is-scrolled .site-header {
  background-color: rgba(23, 32, 27, 0.92);
  color: var(--on-dark);
  text-shadow: none;
}

/* 首頁頂端疊在 Banner 上：上深下透的漸層，捲動後轉為實色 */
.home .site-header:not(.yf-header-solid),
.blog .site-header:not(.yf-header-solid) {
  background: linear-gradient(to bottom, rgba(17, 25, 20, 0.7), rgba(17, 25, 20, 0));
}

.site-header.yf-header-solid,
.blog .site-header.yf-header-solid {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(23, 32, 27, 0.9);
  box-shadow: inset 0 -1px 0 rgba(201, 169, 110, 0.35);
}

#site-navigation a {
  color: var(--on-dark);
  transition: color 0.2s;
}

#site-navigation a:hover,
#site-navigation a:focus {
  text-decoration: none;
  color: var(--on-dark-accent);
  opacity: 1;
}

/* 目前所在分類：沙色底線 */
@media only screen and (min-width: 961px) {
  #site-navigation > div > ul > li > a {
    position: relative;
  }

  #site-navigation > div > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--color-sand);
    transform: scaleX(0);
    transition: transform 0.25s;
  }

  #site-navigation > div > ul > li > a:hover::after,
  #site-navigation > div > ul > li.current-menu-item > a::after,
  #site-navigation > div > ul > li.current-menu-parent > a::after,
  #site-navigation > div > ul > li.current-category-ancestor > a::after {
    transform: scaleX(1);
  }
}

/* 下拉子選單 */
#site-navigation ul ul li {
  background: var(--forest-900);
}

#site-navigation ul ul::before {
  border-color: transparent transparent var(--forest-900) transparent;
}

#site-navigation ul ul ul::before {
  border-color: transparent transparent transparent var(--forest-900);
}

#site-navigation ul ul a {
  color: var(--on-dark-muted);
}

@media only screen and (max-width: 960px) {
  .site-header,
  .home .site-header:not(.yf-header-solid),
  .blog .site-header:not(.yf-header-solid),
  .site-header.yf-header-solid,
  .is-singular .site .site-header,
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    background: var(--forest-900);
    box-shadow: inset 0 -1px 0 rgba(201, 169, 110, 0.35);
  }

  #site-navigation > div,
  html.yf-menu-open .site-header {
    background: var(--forest-900);
  }

  #site-navigation ul li {
    border-bottom-color: var(--line-dark);
  }

  #site-navigation ul a {
    color: var(--on-dark);
  }

  #site-navigation ul ul a {
    color: var(--on-dark-muted);
  }

  #site-navigation ul a:hover,
  #site-navigation ul a:focus,
  #site-navigation .current-menu-item > a,
  #site-navigation .current-menu-parent > a,
  #site-navigation .current-category-ancestor > a {
    color: var(--on-dark-accent);
  }

  .menu-toggle {
    border-color: rgba(240, 236, 226, 0.35);
    color: var(--on-dark);
  }
}

/* WordPress 內建自訂 Logo（停用 Jetpack 後使用）：與 Jetpack 版相同的尺寸與置中處理 */
.site-branding .custom-logo-link {
  display: block;
  line-height: 0;
}

.site-branding .custom-logo-link img {
  display: block;
  width: auto;
  height: auto;
  max-height: 70px;
}

@media only screen and (min-width: 961px) and (max-width: 1280px) {
  .site-branding .custom-logo-link img {
    max-width: 200px;
  }
}

@media only screen and (max-width: 960px) {
  .site-branding .custom-logo-link img {
    max-width: 150px;
    max-height: 44px;
  }
}

@media only screen and (max-width: 600px) {
  .site-branding .custom-logo-link img {
    max-width: 130px;
    max-height: 38px;
  }
}

/* 手機／平板：子選單字級與點擊範圍加大（考量年長使用者） */
@media only screen and (max-width: 960px) {
  #site-navigation ul ul a,
  #site-navigation ul ul li a {
    min-height: 52px;
    padding: 0.6rem 0;
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #dfe5db;
  }

  #site-navigation ul ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  #site-navigation ul ul li:last-child {
    border-bottom: 0;
  }
}

@media only screen and (max-width: 600px) {
  #site-navigation ul ul a,
  #site-navigation ul ul li a {
    font-size: 2rem;
  }
}

/* Logo 垂直置中：Jetpack 輸出的 <a> 是 inline，內含區塊化的 <img> 時會在上下產生空白行，
   使 Logo 偏上；改為區塊並去除行高 */
.site-branding .site-logo-link {
  display: block;
  line-height: 0;
}

.site-branding .site-logo-link img {
  display: block;
  vertical-align: middle;
}

@media only screen and (max-width: 960px) {
  .site-branding {
    display: flex;
    align-items: center;
  }
}

/* 內頁頁首：比照首頁，頁面頂端時不使用深色實底，捲動後才轉為實色（桌面寬度）
   - 分類／標籤／搜尋：頂端是深色主視覺，與首頁相同的上深下透漸層
   - 有封面的文章／頁面：左半是封面、右半是白色內文，漸層只落在左側封面上，右側選單改為深色字
   - 其他頂端為白底的頁面（無封面的頁面、404）維持實色，避免白字落在白底上 */
@media only screen and (min-width: 1201px) {
  .archive .site-header:not(.yf-header-solid),
  .search .site-header:not(.yf-header-solid) {
    background: linear-gradient(to bottom, rgba(17, 25, 20, 0.7), rgba(17, 25, 20, 0));
    box-shadow: none;
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) {
    background: linear-gradient(to right, rgba(17, 25, 20, 0.55) 0%, rgba(17, 25, 20, 0.25) 35%, rgba(17, 25, 20, 0) 50%);
    box-shadow: none;
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation a {
    color: var(--color-ink);
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation a:hover,
  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation a:focus {
    color: var(--color-leaf);
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) .yf-search-toggle {
    border-color: rgba(31, 42, 36, 0.35);
    color: var(--color-ink);
  }

  /* 下拉子選單仍是深色底，維持淺色字 */
  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation ul ul a {
    color: var(--on-dark-muted);
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation ul ul a:hover {
    color: var(--on-dark-accent);
  }
}

/* 主選單：加粗 */
#site-navigation a {
  font-weight: 700;
  letter-spacing: 0.08em;
}

#site-navigation ul ul a {
  font-weight: 600;
}

/* 主選單字級加大 */
#site-navigation {
  font-size: 1.65rem;
}

#site-navigation ul ul {
  font-size: 1.5rem;
}

@media only screen and (min-width: 961px) and (max-width: 1280px) {
  #site-navigation {
    font-size: 1.5rem;
  }

  #site-navigation ul li {
    margin-left: 0.9em;
  }
}

@media only screen and (max-width: 960px) {
  #site-navigation ul a {
    font-size: 2.2rem;
  }

  #site-navigation ul ul a {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 600px) {
  #site-navigation ul a {
    font-size: 2rem;
  }

  #site-navigation ul ul a {
    font-size: 1.7rem;
  }
}

/* 平板橫向（961–1200px）：父主題在此寬度讓首頁 Banner 改為一般流動版面，
   固定頁首會蓋住 Banner 上緣，同樣以 body 補位並讓頁首改為實色 */
@media only screen and (min-width: 961px) and (max-width: 1200px) {
  body {
    padding-top: var(--yf-header-h, 90px);
  }

  .home .site-header:not(.yf-header-solid),
  .blog .site-header:not(.yf-header-solid) {
    background: rgba(23, 32, 27, 0.92);
  }
}