/* 神婆個仔 — 樣式。Token 定義見 docs/DESIGN.md,唔好喺呢度自創顏色。 */

:root {
  /* 由 logo 實際取色(見 docs/DESIGN.md) */
  --color-bg:#FCF7E8; --color-surface:#F5ECD6; --color-border:#E5D7B6; --color-border-strong:#8B7F63;
  --color-text:#1C2C28; --color-text-muted:#51625A;
  --color-primary:#BB4226; --color-primary-hover:#98341C; --color-on-primary:#FFFFFF;
  --color-accent:#CCA468; --color-accent-text:#7C5424;
  /* 衣包袋身:唔跟 UI 主色走。要同時做到「對背景睇得到」同「描邊分得開」 */
  --color-bag-1:#BB4226; --color-bag-2:#9E3620;
  /* 插畫:紙。兩個 mode 都係「一張紙」,唔跟主題反轉 —— 見 DESIGN.md §3.1a。
     ⚠️ 紙上嘅字同墨線一律用 --color-paper-ink,唔准用 --color-text(深色得 1.15:1) */
  --color-paper:#FFFDF6; --color-paper-shade:#F0E7D2; --color-paper-ink:#1C2C28;
  /* 插畫:衣包朱紅,深色版校正過(唔跟 --color-primary 走)。見 DESIGN.md §3.1b。
     ✅ 2026-09-06 揀咗路線 A:深色 --color-bag-1/2 直接改用插畫實測值(冇 UI 用呢兩隻色),-ill 只係別名 */
  --color-bag-1-ill:var(--color-bag-1); --color-bag-2-ill:var(--color-bag-2);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-full:999px;

  --font-sans:"Noto Sans TC","PingFang HK","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"Noto Serif TC","Songti TC",Georgia,serif;
  --maxw:720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:#141D1A; --color-surface:#1E2A25; --color-border:#33423B; --color-border-strong:#748679;
    --color-text:#F2ECDB; --color-text-muted:#A6B3AA;
    --color-primary:#EC8064; --color-primary-hover:#F4917A; --color-on-primary:#141D1A;
    --color-accent:#D9B47A; --color-accent-text:#D9B47A;
    --color-bag-1:#C7492A; --color-bag-2:#A83A22;
    /* 插畫:紙。兩個 mode 都係「一張紙」,唔跟主題反轉 —— 見 DESIGN.md §3.1a。
       ⚠️ 紙上嘅字同墨線一律用 --color-paper-ink,唔准用 --color-text(深色得 1.15:1) */
    --color-paper:#E7DCC4; --color-paper-shade:#D2C4A6; --color-paper-ink:#1C2C28;
    /* 插畫:衣包朱紅,深色版校正過(唔跟 --color-primary 走)。見 DESIGN.md §3.1b。
       ✅ 2026-09-06 揀咗路線 A:深色 --color-bag-1/2 直接改用插畫實測值(冇 UI 用呢兩隻色),-ill 只係別名 */
    --color-bag-1-ill:var(--color-bag-1); --color-bag-2-ill:var(--color-bag-2);
  }
}
:root[data-theme="dark"] {
  --color-bg:#141D1A; --color-surface:#1E2A25; --color-border:#33423B; --color-border-strong:#748679;
  --color-text:#F2ECDB; --color-text-muted:#A6B3AA;
  --color-primary:#EC8064; --color-primary-hover:#F4917A; --color-on-primary:#141D1A;
  --color-accent:#D9B47A; --color-accent-text:#D9B47A;
  --color-bag-1:#C7492A; --color-bag-2:#A83A22;
  /* 插畫:紙。兩個 mode 都係「一張紙」,唔跟主題反轉 —— 見 DESIGN.md §3.1a。
     ⚠️ 紙上嘅字同墨線一律用 --color-paper-ink,唔准用 --color-text(深色得 1.15:1) */
  --color-paper:#E7DCC4; --color-paper-shade:#D2C4A6; --color-paper-ink:#1C2C28;
  /* 插畫:衣包朱紅,深色版校正過(唔跟 --color-primary 走)。見 DESIGN.md §3.1b。
     ✅ 2026-09-06 揀咗路線 A:深色 --color-bag-1/2 直接改用插畫實測值(冇 UI 用呢兩隻色),-ill 只係別名 */
  --color-bag-1-ill:var(--color-bag-1); --color-bag-2-ill:var(--color-bag-2);
}

*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-sans); font-size:17px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { line-height:1.35; letter-spacing:.02em; margin:0 0 var(--space-4); }
h1 { font-family:var(--font-serif); font-size:clamp(28px,7vw,40px); font-weight:600; }
h2 { font-size:clamp(22px,5vw,26px); font-weight:600; }
h3 { font-size:18px; font-weight:600; }
p  { margin:0 0 var(--space-4); }

a { color:var(--color-primary); text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm); }

img { max-width:100%; height:auto; border-radius:var(--radius-md); display:block; }

/* 「關於我哋」嘅真實相片(public/photos/)。
   ⚠️ 呢組 class 只准用喺真相 —— 插畫用 .ill / .figure。兩者唔可以撈亂(DESIGN.md §9.7)。
   margin-inline:0 —— 覆蓋瀏覽器對 <figure> 嘅 40px 預設邊距(同 .figure 一樣嘅坑)。 */
.about-figure { margin-block:var(--space-12); margin-inline:0; }
.about-photo {
  width:100%; max-width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; /* 2026-09-06 東主:直橫相闊度唔一致睇落唔統一 → 五張統一正方形 */
  border-radius:var(--radius-lg); border:1px solid var(--color-border);
  background:var(--color-surface);
}
/* 直相(900×1600 / 1200×1600)喺 390px 手機會高過成個螢幕,要碌成世先見到下一段。
   封頂 70vh + width:auto:瀏覽器照住 width/height 屬性嘅比例縮,唔會變形、唔會 CLS。 */
.about-figure figcaption { margin-top:var(--space-3); text-align:center; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-6); }
section { padding-block:var(--space-16); }
section + section { border-top:1px solid var(--color-border); }

.muted { color:var(--color-text-muted); }
.small { font-size:15px; line-height:1.7; }

/* TODO 標記 — 業務資料未齊嘅位。上線前呢個 class 一個都唔應該剩低。
 * 2026-09-05 驗收:186 個徽章對讀者可見,連內部檔案路徑同代碼都出咗街(docs/QA-驗收-2026-09-05.md 根因 1)。
 * 而家預設隱藏;東主開 ?draft=1(lang.js 會記住)先顯示,而且顯示成明顯係內部嘅樣,唔用品牌金。
 * HTML 標記保留,check-pages.py 繼續數得到。 */
.todo { display:none; }
html[data-draft] .todo {
  display:inline-block; font-size:13px; font-weight:500; line-height:1.4;
  padding:2px var(--space-2); border-radius:var(--radius-sm);
  border:1px dashed var(--color-text-muted); color:var(--color-text-muted); background:transparent;
}
html[data-draft] .todo::before { content:"內部 · "; font-weight:600; }

/* 按鈕 — 最少 44px 高,手機點得到 */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:var(--space-3) var(--space-6);
  border:1px solid transparent; border-radius:var(--radius-md);
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  background:var(--color-primary); color:var(--color-on-primary);
}
.btn:hover { background:var(--color-primary-hover); }
.btn--ghost {
  background:transparent; color:var(--color-primary); border-color:var(--color-border-strong); /* 2026-09-06:控件邊界要 ≥3:1(DESIGN.md §4.2),--color-border 只有 1.33 */
}
.btn--ghost:hover { background:var(--color-surface); }

/* 卡 — 唔落陰影,陰影會令莊重感變輕浮 */
.card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-6);
}
.stack > * + * { margin-top:var(--space-4); }
.grid { display:grid; gap:var(--space-4); }
@media (min-width:760px) { .grid--3 { grid-template-columns:repeat(3,1fr); } .grid--4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .grid--4 { grid-template-columns:repeat(4,1fr); } }

/* Hero */
.hero { padding-block:var(--space-16) var(--space-12); }
.hero__lede { font-size:19px; color:var(--color-text-muted); max-width:34em; }
.hero__cta { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }

/* 證明鏈 —— 呢節係產品本身,唔係信任徽章,唔好縮細 */
.proof-step { display:flex; gap:var(--space-4); align-items:flex-start; }
.proof-step__n {
  flex:0 0 auto; width:32px; height:32px; border-radius:var(--radius-full);
  display:grid; place-items:center; font-weight:600; font-size:15px;
  background:var(--color-primary); color:var(--color-on-primary);
}
.proof-step__body { flex:1 1 auto; }
.proof-step__body h3 { margin-bottom:var(--space-1); }

/* 流程 */
ol.flow { margin:0; padding-left:1.4em; }
ol.flow li { margin-bottom:var(--space-4); }

/* FAQ */
details {
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-4); background:var(--color-surface);
}
details + details { margin-top:var(--space-3); }
/* FAQ 掣:設計驗收量到 31px 高,唔夠 44px 觸控目標(DESIGN.md §9.8)。用 padding 撐高,唔改字級。 */
summary { cursor:pointer; font-weight:600; padding:var(--space-3) 0; } /* 保留 display:list-item,否則 ::marker 會消失 */
summary::marker { color:var(--color-primary); }
details[open] summary { margin-bottom:var(--space-3); }

footer { padding-block:var(--space-12); border-top:1px solid var(--color-border); }

/* ═══════════ 全站骨架:skip link / site header / site footer ═══════════
   2026-09-05 加。之前 51 版冇 footer、56 版冇 header —— 一個由 Google 直接
   落喺文章嘅讀者,除咗㩒「上一頁」之外冇任何出口(東主親口投訴,
   docs/qa/2026-09-05-架構.md E1/E2、設計.md E1/E2)。

   ⚠️ 呢條 bar 要低調:同 body 同一個底色、淨係一條 1px 下框線。
   唔准加陰影 / 漸變 / 發光(DESIGN.md「明確唔好做」),亦唔准同首頁 hero 爭。
   ⚠️ 唔用 position:sticky —— 42 篇文章有 .toc 錨點,黏頭會令跳落去嘅標題匿埋喺
   bar 下面,要成套 scroll-margin 先補得返。呢一輪先解「完全冇掣」,黏唔黏另議。 */

/* skip link —— 每版 <body> 第一個元素。平時移出畫面,鍵盤 Tab 第一下就出。
   ⚠️ order.css 亦有一份舊嘅 .skip(落單 / 追蹤頁),嗰兩版會用返佢個版本,
      兩份行為一致(收埋 → focus 變 static)。呢度呢份係全站版本。 */
.skip { position:absolute; left:-9999px; top:0; }
.skip:focus-visible {
  position:static; display:inline-flex; align-items:center; min-height:44px;
  margin:var(--space-2) var(--space-4); padding-inline:var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); font-weight:600; text-decoration:none;
}

.site-header {
  border-bottom:1px solid var(--color-border); background:var(--color-bg);
  position:sticky; top:0; z-index:50; /* 2026-09-06 東主:頂部 heading 要鎖死,拉落去唔好消失 */
}
/* 52px + 1px 框線 = 53px,喺 56px 上限之內;入面每粒掣仍然 44px 高。 */
.site-header__in {
  display:flex; align-items:center; gap:var(--space-2);
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--space-4); min-height:52px;
}
@media (min-width:480px) { .site-header__in { padding-inline:var(--space-6); } }

.site-header__brand {
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:44px; margin-right:auto;
  color:var(--color-text); text-decoration:none;
  font-weight:600; font-size:15px; white-space:nowrap;
}
.site-header__brand:hover { color:var(--color-primary); }
/* logo 自帶米白圓底(見 DESIGN.md),所以深色模式唔會消失,唔使另做深色版。 */
.site-header__brand img { flex:0 0 auto; width:28px; height:28px; border-radius:var(--radius-full); }

.site-nav { display:flex; align-items:center; gap:var(--space-1); }
.site-nav a {
  display:inline-flex; align-items:center; min-height:44px;
  padding-inline:var(--space-2); border-radius:var(--radius-sm);
  color:var(--color-text-muted); text-decoration:none;
  font-size:15px; white-space:nowrap;
}
.site-nav a:hover { color:var(--color-primary); }
/* 目前頁:字色 + 字重兩樣一齊變,唔淨靠顏色分。 */
.site-nav a[aria-current="page"] { color:var(--color-text); font-weight:600; }

/* langbar 本來獨立浮喺頁頂,而家搬咗入 header —— 抵消返佢自己嗰個 padding。
   ⚠️ 唔郁 article.css 入面嗰 44x44 觸控尺寸(2026-09-04 sps-qa 專登加大過)。 */
.site-header .langbar { padding:0; margin-left:var(--space-1); gap:0; }

.site-footer { margin-top:var(--space-16); }
.site-footer__nav {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:0 var(--space-4); margin-bottom:var(--space-2);
}
.site-footer__nav a { display:inline-flex; align-items:center; min-height:44px; }
.site-footer p { margin-bottom:0; }

/* 相位 placeholder — 上線前每一個都要換成真相片。
   呢盤生意賣信任,真實現場相係產品嘅一部分,唔係裝飾。 */
.ph {
  display:grid; place-items:center; text-align:center;
  border:2px dashed var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface); color:var(--color-text-muted);
  padding:var(--space-6); font-size:14px; line-height:1.6;
}
.ph--wide { aspect-ratio:16/9; }
.ph--sq   { aspect-ratio:1/1; }
.ph strong { display:block; color:var(--color-accent-text); margin-bottom:var(--space-1); }
.ph-row { display:grid; gap:var(--space-3); grid-template-columns:repeat(3,1fr); }

/* 手繪 SVG 插畫 — 明確係插畫,唔扮相片,所以冇欺騙成分。
   真實相片(舖頭、細妹、實際證明)唔可以用插畫代替。 */
.ill {
  display:block; width:100%; height:auto;
  background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
}
.ill + .ill-cap { display:block; margin-top:var(--space-2); font-size:13px; color:var(--color-text-muted); }
/* 首頁「我哋係邊個」三格先要方形;知識庫圖解係 520x300,唔可以夾硬 1:1 */
.ph-row figure .ill { aspect-ratio:1/1; }
.ill-cap { display:block; margin-top:var(--space-2); font-size:13px; color:var(--color-text-muted); text-align:center; }

/* 品牌主視覺。來源 381x413(由 IG 高解析度截圖抽出,原檔仍未搵返)。
   顯示封頂 320px,再大會蒙 —— 見 docs/BRIEF.md 嘅原檔搶救步驟。 */
.brand-art {
  display:block; width:100%; max-width:320px; height:auto;
  margin:var(--space-12) auto var(--space-8); border-radius:var(--radius-lg);
  /* 2026-09-06 東主手機實測:圖同 CTA 掣痴住。第一次修用咗唔存在嘅 --space-10,成句 margin 失效,先冇效果 */
}

/* ---------- 浮動快捷掣(右下,全站;2026-09-06 東主要求)---------- */
.fab {
  position:fixed; right:var(--space-3); bottom:calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  display:flex; gap:var(--space-2); z-index:40;
}
.fab a {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-full); font-weight:600; font-size:15px; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.fab__wa { background:var(--color-bg); color:var(--color-text); border:1px solid var(--color-border-strong); }
.fab__wa:hover { color:var(--color-primary); }
.fab__order { background:var(--color-primary); color:var(--color-on-primary); border:1px solid var(--color-primary); }
.fab__order:hover { filter:brightness(1.08); }
/* 唔好遮住 footer 最後幾行 */
.site-footer { padding-bottom:calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); }
@media print { .fab { display:none; } }

/* ---------- 首頁「我哋係邊個」真相三格(2026-09-06 東主:「首頁簡介上可以加真相」)---------- */
.photo-row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-block:var(--space-6); }
.photo-row__item { margin:0; }
.photo-row__img { display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-surface); }
.photo-row figcaption { margin-top:var(--space-2); text-align:center; }
@media (max-width:479px) { .photo-row { gap:var(--space-2); } .photo-row figcaption { font-size:12px; } }