/* =========================
   Site Navigation
   ========================= */
.site-nav {
  display: flex; /* 桌面版 Flex */
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

/* 左右按鈕 + logo 都不影響桌面 Flex */
.logo-link {
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  white-space: nowrap; /* 避免換行 */
}

/* 右側桌面選單 */
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-right li a {
  color: #fff;
  text-decoration: none;
}

.nav-right li a:hover {
  text-decoration: underline;
}

/* -------------------------
   漢堡 + 搜尋按鈕
   ------------------------- */
button.menu-btn,
button.search-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: none; /* 桌面版隱藏 */
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
}

button.menu-btn:hover,
button.search-btn:hover,
button.menu-btn:focus,
button.search-btn:focus {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

button.menu-btn svg,
button.search-btn svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: #fff;
}

/* 初始顯示 search，隱藏 xmark */
.search-btn .icon-search {
  display: inline;
}
.search-btn .icon-xmark {
  display: none;
}

/* 按下 active 狀態時切換 */
.search-btn.active .icon-search {
  display: none;
}
.search-btn.active .icon-xmark {
  display: inline;
}

/* 初始：表單隱藏 */
.nav-search-form {
  display: none;
}

.nav-search-form input {
  appearance: none;      /* 核心：移除預設樣式 */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */

  width: 100%;
  border: none;
  outline: none;
  background: none;

  padding: 0;
  margin: 0;

  font: inherit;   /* 跟父層字體一致 */
  font-size: 20px;
  color: #fff;
}

.nav-search-form input::placeholder {
  color: #fff;
  opacity: 1;
}

.site-nav.search-active {
  grid-template-columns: 1fr 48px;
}

/* 搜尋模式開啟：隱藏其他 nav 元素 */
.site-nav.search-active .menu-btn,
.site-nav.search-active .logo-link,
.site-nav.search-active .nav-right {
  display: none;
}

/* 顯示搜尋表單 */
.site-nav.search-active .nav-search-form {
  display: flex;
}

/* =========================
   行動版漢堡選單
   ========================= */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 75%;
  max-width: 300px;
  height: 100%;
  background-color: #222;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  padding-top: 64px; /* 避開 nav 高度 */
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0 16px;
}

.mobile-links li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
}

.mobile-links li a:hover {
  text-decoration: underline;
}

/* 背景遮罩 */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 900;
}

.mobile-menu-overlay.active {
  display: block;
}

/* =========================
   RWD 行動版 (<768px)
   ========================= */
@media (max-width: 768px) {
  /* 隱藏桌面選單 */
  .desktop-links {
    display: none;
  }

  /* Grid 三欄：左漢堡 / 中 logo / 右搜尋 */
  .site-nav {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    /* height: 64px; */
  }

  /* logo 完全置中 */
  .logo-link {
    grid-column: 2 / 3;
    justify-self: center;
    text-align: center;
  }

  /* 左漢堡 + 右搜尋：覆蓋桌面 display:none */
  button.menu-btn {
    justify-self: start;
  }

  button.search-btn {
    justify-self: end;
  }

  /* 顯示漢堡 + 搜尋按鈕 */
  button.menu-btn,
  button.search-btn {
    display: inline-flex;
  }
}