/* ==========================================================================
   WasteWise TW styles
   這份 CSS 用清楚分段示範：設計變數、版面、元件、狀態與 RWD。

   給新手的讀法：
   1. 先看 :root，了解專案如何用 CSS 變數集中管理顏色與尺寸。
   2. 再看共用基礎設定，例如 box-sizing、focus-visible、sr-only。
   3. 接著看主要版面：header、search-panel、content-grid。
   4. 最後看元件狀態與 RWD，理解同一個 HTML 在不同寬度下如何變形。
   ========================================================================== */

/*
  設計變數：
  CSS 變數可以把常用設計值集中在一處。之後如果品牌綠要變深，
  只需要改 --green，不必到每個 button、卡片、標籤裡逐一修改。
  這也是大型前端專案常見的 design token 概念。
*/
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --ink: #17202a;
  --muted: #607080;
  --line: #d9e1ea;
  --green: #0f9f6e;
  --green-dark: #08744e;
  --blue: #2563eb;
  --orange: #f97316;
  --red: #dc2626;
  --purple: #7c3aed;
  --shadow: 0 16px 45px rgba(17, 24, 39, 0.09);
  --radius: 8px;
  --container: 1180px;
}

/*
  box-sizing: border-box 是切版基本功。
  預設的 content-box 會讓 width 不包含 padding 和 border，容易算錯寬度。
  改成 border-box 後，元素總寬度更直覺，RWD 也更穩。
*/
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/*
  body 是整個網站的基礎視覺：
  - background 用兩層背景，營造乾淨但不單調的工具感。
  - font-family 使用系統字體，避免額外載入字型造成部署負擔。
  - overflow-x hidden 是保險，主要防止小螢幕因陰影或極端內容出現頁面橫向捲動。
*/
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(15, 159, 110, 0.12), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 48%, #eef3f8 100%);
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans TC",
    sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
  overflow-x: hidden;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

/*
  focus-visible 是鍵盤使用者的重要提示。
  很多新手只做 hover，卻忘了鍵盤 Tab 操作也需要看得見目前焦點在哪。
*/
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}

/*
  sr-only：畫面上看不到，但螢幕閱讀器讀得到。
  例如搜尋框已經有 placeholder，但 placeholder 不是可靠的 label，
  所以 HTML 仍保留 <label>，再用 sr-only 隱藏視覺呈現。
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 版面：整體寬度固定在易閱讀範圍，工具區保持第一屏可操作。 */
/*
  Header 使用 sticky：
  使用者往下看結果時，仍能快速回到資料提醒或辨識目前工具。
  backdrop-filter 是漸進增強；不支援的瀏覽器仍會看到半透明背景。
*/
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 247, 251, 0.86);
  border-bottom: 1px solid rgba(217, 225, 234, 0.75);
  backdrop-filter: blur(16px);
}

/*
  內容容器：
  min(calc(100% - 32px), var(--container)) 代表：
  - 大螢幕最多 1180px，不讓內容過寬。
  - 小螢幕左右至少留 16px 空白，不貼邊。
*/
.topbar,
.app-shell,
.site-footer {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #ffffff;
  background: var(--green);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(15, 159, 110, 0.24);
}

.brand strong,
.brand small {
  display: block;
}

.brand small,
.source-link,
.eyebrow,
.result-count,
.card-meta,
.empty-state p,
.site-footer {
  color: var(--muted);
}

.source-link {
  text-decoration: none;
}

.source-link:hover {
  color: var(--green-dark);
}

.app-shell {
  padding: 38px 0 44px;
}

/*
  搜尋面板是第一屏核心，所以用較大的 padding、陰影與柔和背景凸顯。
  這裡不用 hero landing page，因為工具型專案應該讓使用者一進來就能操作。
*/
.search-panel {
  display: grid;
  gap: 22px;
  padding: 30px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 58%, #eef7f2 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.search-copy {
  max-width: 780px;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: 2.25rem;
  line-height: 1.2;
}

h2 {
  margin-bottom: 0;
  font-size: 1.2rem;
  line-height: 1.35;
}

.search-copy p:last-child,
.note-panel p,
.site-footer p {
  margin-bottom: 0;
}

/*
  搜尋框使用 position: relative：
  這樣可以把左側搜尋符號放在 input 上方，
  但 input 本身仍保留完整可點擊與可輸入行為。
*/
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box::before {
  position: absolute;
  left: 18px;
  color: var(--green-dark);
  content: "⌕";
  font-size: 1.3rem;
  pointer-events: none;
}

.search-box input {
  width: 100%;
  min-height: 62px;
  padding: 0 20px 0 52px;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 28px rgba(31, 41, 55, 0.08);
}

.search-box input:focus {
  border-color: rgba(15, 159, 110, 0.4);
}

/*
  熱門區用 grid 而不是單純 flex：
  左側「熱門」文字寬度固定，右側 chip 列用 minmax(0, 1fr) 可收縮。
  minmax(0, 1fr) 是避免 grid item 因內容太長撐破容器的常用技巧。
*/
.quick-area {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.quick-area > span {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
}

.chip-row,
.side-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.quick-area .chip-row {
  width: 100%;
}

.chip,
.filter-button,
.text-button,
.favorite-button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.chip {
  max-width: 100%;
  padding: 6px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.68);
  border-color: #dbe5ef;
  font-size: 0.95rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.chip:hover,
.filter-button:hover,
.favorite-button:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 159, 110, 0.45);
}

.chip:hover {
  background: #ffffff;
}

/*
  分類列在桌機可換行，在手機會改成橫向捲動。
  這種做法比把按鈕縮得很窄更好點，也避免文字擠壓。
*/
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.filter-button {
  padding: 10px 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.84);
}

.filter-button.is-active {
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
}

.filter-button .count {
  margin-left: 6px;
  color: currentColor;
  opacity: 0.76;
  font-size: 0.82rem;
}

/*
  主內容使用兩欄：
  左邊結果列表彈性填滿，右邊側欄固定 320px。
  minmax(0, 1fr) 可以防止左欄內容過寬時把整個 grid 撐爆。
*/
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.results-panel,
.mini-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
}

.results-panel {
  padding: 24px;
}

.section-heading,
.mini-panel__heading,
.card-top,
.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.section-heading {
  margin-bottom: 18px;
}

.result-count {
  margin: 0;
  white-space: nowrap;
}

/*
  結果卡片在桌機雙欄呈現，提升資訊密度。
  到手機寬度時會在 media query 裡改成單欄，閱讀比較舒服。
*/
.results-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/*
  結果卡片：
  每張卡片由 JS 產生，並帶有 data-category。
  CSS 透過 .waste-card[data-category="trash"] 這種選擇器套用分類色條。
  這讓「資料狀態」可以直接影響「視覺狀態」，不需要 JS 手動加一堆 class。
*/
.waste-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--green);
  border-radius: var(--radius);
  min-width: 0;
}

.waste-card[data-category="trash"] {
  border-left-color: var(--muted);
}

.waste-card[data-category="food"] {
  border-left-color: var(--orange);
}

.waste-card[data-category="hazardous"] {
  border-left-color: var(--red);
}

.waste-card[data-category="bulky"] {
  border-left-color: var(--purple);
}

.waste-card[data-category="local"] {
  border-left-color: var(--blue);
}

.card-title {
  display: flex;
  align-items: center;
  min-width: 0;
}

/*
  overflow-wrap: anywhere 用來處理很長的物品名稱或使用者輸入。
  沒有它時，長字串可能在手機版撐破卡片。
*/
.card-title h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1.08rem;
  line-height: 1.35;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  color: var(--green-dark);
  background: #e5f8ef;
  border-radius: var(--radius);
  font-size: 0.84rem;
  font-weight: 800;
}

.category-pill[data-category="trash"] {
  color: #475569;
  background: #eef2f7;
}

.category-pill[data-category="food"] {
  color: #9a4c00;
  background: #fff1dc;
}

.category-pill[data-category="hazardous"] {
  color: #a91b1b;
  background: #ffe5e5;
}

.category-pill[data-category="bulky"] {
  color: #5b21b6;
  background: #efe7ff;
}

.category-pill[data-category="local"] {
  color: #1d4ed8;
  background: #e5efff;
}

/*
  步驟與警告清單使用 ul/li：
  這比用一堆 <p> 更有語意，也方便螢幕閱讀器理解這是一組列表。
  ::before 產生符號，HTML 就不用塞裝飾用字元。
*/
.step-list,
.warning-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.step-list li,
.warning-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.step-list li::before {
  flex: 0 0 auto;
  color: var(--green);
  content: "✓";
  font-weight: 900;
}

.warning-list li::before {
  flex: 0 0 auto;
  color: var(--orange);
  content: "!";
  font-weight: 900;
}

.local-note {
  padding: 10px 12px;
  margin: 0;
  color: #1f4d67;
  background: #e9f6fb;
  border: 1px solid #cce7f2;
  border-radius: var(--radius);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 3px 7px;
  color: var(--muted);
  background: #f1f5f9;
  border-radius: var(--radius);
  font-size: 0.78rem;
}

.favorite-button {
  flex: 0 0 auto;
  min-width: 42px;
  min-height: 38px;
  color: var(--muted);
  background: #ffffff;
}

.favorite-button.is-saved {
  color: #9a3412;
  background: #fff3e8;
  border-color: #fdba74;
}

/*
  側欄在桌機 sticky，使用者捲動結果時仍能看到收藏與最近查詢。
  到平板以下會取消 sticky，因為窄版固定側欄容易佔掉太多空間。
*/
.side-panel {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 96px;
}

.mini-panel {
  padding: 18px;
}

.mini-panel__heading {
  margin-bottom: 12px;
}

.text-button {
  padding: 6px 9px;
  color: var(--muted);
  background: #ffffff;
}

.text-button:hover {
  color: var(--ink);
  background: #f8fafc;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 34px 20px;
  text-align: center;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius);
}

.empty-state strong {
  display: block;
  margin-bottom: 4px;
}

.empty-state p {
  margin-bottom: 0;
}

.site-footer {
  padding: 26px 0 36px;
  border-top: 1px solid var(--line);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
}

.site-footer a {
  color: var(--blue);
}

/*
  RWD 斷點 920px：
  兩欄內容改成單欄，避免結果列表與側欄互相壓縮。
*/
@media (max-width: 920px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .side-panel {
    position: static;
  }
}

/*
  RWD 斷點 680px：
  針對手機調整間距、標題大小、分類列與結果卡片欄數。
  注意這裡沒有用 vw 控制字體，避免不同手機寬度造成字級忽大忽小。
*/
@media (max-width: 680px) {
  .topbar,
  .app-shell,
  .site-footer {
    width: min(calc(100% - 24px), var(--container));
  }

  .topbar {
    min-height: 64px;
  }

  .brand small,
  .source-link {
    font-size: 0.82rem;
  }

  .app-shell {
    padding-top: 22px;
  }

  .search-panel,
  .results-panel,
  .mini-panel {
    padding: 18px;
  }

  h1 {
    font-size: 1.85rem;
  }

  .search-box input {
    min-height: 58px;
    padding-right: 18px;
  }

  /*
    手機上的分類按鈕很多，改成橫向滑動。
    flex-wrap: nowrap 搭配 overflow-x: auto 可以保留按鈕寬度與可讀性。
  */
  .filter-panel {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .quick-area {
    grid-template-columns: 1fr;
  }

  .quick-area .chip-row {
    width: 100%;
  }

  .filter-button {
    flex: 0 0 auto;
  }

  .results-list {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .result-count {
    white-space: normal;
  }
}

/*
  RWD 斷點 420px：
  這裡處理很窄的手機，例如隱藏右上資料連結、讓卡片內部改成垂直排列。
*/
@media (max-width: 420px) {
  .source-link {
    display: none;
  }

  .brand__mark {
    width: 38px;
    height: 38px;
  }

  h1 {
    font-size: 1.65rem;
  }

  .card-top,
  .card-actions {
    align-items: flex-start;
  }

  .card-top,
  .card-actions {
    flex-direction: column;
  }
}