/* ============================================================
   OctoFlow Chrome — redesign 2026-08
   由 redesign-2026-08/chrome-prototype.html 移植，重新對準 Astra 嘅實際 selector。

   規矩：
   1. 全部規則掛喺 `body.ofw-chrome` 之下 —— 冇 flag 就一條都唔生效。
   2. 顏色／字體一律行 brand token（var(--teal) 等）。呢層新增嘅世界色用 --ofwc-* 前綴。
   3. **唔改 Astra 任何 markup 同 JS** —— mobile menu 嘅開合、aria、鍵盤全部原封不動，
      呢度淨係換樣。所以下面見到嘅都係 Astra 自己嗰啲 class。
   ============================================================ */

body.ofw-chrome{
  --ofwc-board:#0B0A08;
  --ofwc-flap:#211D17;
  --ofwc-flap-hi:#2C2720;
  --ofwc-edge:rgba(242,239,230,.14);
  --ofwc-paint:#F2EFE6;
  --ofwc-dim:#B3ACA0;
  --ofwc-steel-1:#8d9297;
  --ofwc-steel-2:#4a4e52;
  --ofwc-cjk:var(--font-cjk);
  --ofwc-mono:var(--font-mono);
}

/* ── 鋼 rail：成個站嘅 signature ─────────────────── */
body.ofw-chrome .ofw-rail{
  height:10px;
  background:linear-gradient(180deg,var(--ofwc-steel-1),var(--ofwc-steel-2) 55%,#2b2e31);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.6);
  position:relative;
}
body.ofw-chrome .ofw-rail--top{position:sticky;top:0;z-index:1000}
body.ofw-chrome .ofw-rail::before,
body.ofw-chrome .ofw-rail::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--ofwc-steel-1);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.4);
}
body.ofw-chrome .ofw-rail::before{left:clamp(14px,4vw,64px)}
body.ofw-chrome .ofw-rail::after{right:clamp(14px,4vw,64px)}

/* ── Header：Astra 原生 markup，換樣 ─────────────── */
body.ofw-chrome .site-header,
body.ofw-chrome .ast-primary-header-bar,
body.ofw-chrome .main-header-bar,
body.ofw-chrome .ast-mobile-header-wrap{
  background:var(--ofwc-board) !important;
  border-bottom:1px solid rgba(242,239,230,.10);
  box-shadow:none;
}
/* sticky 貼喺 rail 下面（rail 高 10px） */
body.ofw-chrome .site-header{position:sticky;top:10px;z-index:900}

body.ofw-chrome .site-title,
body.ofw-chrome .site-title a{
  color:#fff !important;
  font-family:var(--ofwc-cjk);
  font-weight:900;letter-spacing:.02em;font-size:16.5px;
}
/* 〔2026-08-08 Kenny：唔要 logo 隔籬粒點〕—— logo 本身已經係個標記，
   再加粒 teal 點變咗兩個標記打交。原本嗰條 .site-branding::before 已刪。 */
body.ofw-chrome .site-branding{display:flex;align-items:center;gap:10px}

/* ── Nav ─────────────────────────────────────────── */
/* 〔2026-08-08 Kenny：個 tab 要修〕—— Astra 畀 <li> 同 <a> 撐到成條 header 咁高，
   所以我落嘅底色由頂到底拉成一條長方柱，唔似個掣。
   解法：<li> 做 flex 置中，<a> 自己嘅高度由 padding 決定（height:auto ＋ line-height），
   個底色先會收成一粒貼住文字嘅膠囊。 */
body.ofw-chrome .main-header-menu > li{
  display:flex;align-items:center;
}
body.ofw-chrome .main-header-menu > li > a.menu-link,
body.ofw-chrome .main-header-menu > li > .menu-link{
  color:var(--ofwc-dim) !important;
  font-family:var(--ofwc-cjk);
  font-size:14px;font-weight:500;letter-spacing:.02em;
  padding:9px 14px !important;
  height:auto !important;line-height:1.5 !important;
  align-self:center;
  border-radius:2px;
  transition:color .15s ease,background .15s ease,box-shadow .15s ease;
}
body.ofw-chrome .main-header-menu > li > a.menu-link:hover{color:var(--teal-glow) !important}
/* 當前頁：翻片式高亮（唔用 underline，唔淨係改色） */
body.ofw-chrome .main-header-menu > li.current-menu-item > a.menu-link{
  color:var(--teal-glow) !important;
  background:var(--ofwc-flap);
  box-shadow:inset 0 0 0 1px rgba(20,184,172,.32);
}
/* 最後一項（免費資源）＝ 行動掣。
   ⚠️ 一定要 scope 落 .ast-builder-menu-1（桌面 primary menu）——
   站上有**兩張** .main-header-menu：一張係真 primary（4 項），
   另一張係 Astra 喺 mobile header 嘅 fallback，佢 `wp_page_menu` 列晒全站每一頁
   （Home／Privacy Policy／服務條款／各 API 頁…）。淨寫 `li:last-child` 會
   喺嗰張度把「服務條款」染成 teal 主掣。
   〔fallback 本身係舊有問題 —— mobile 位置冇指定 menu，唔係今次造成，另行處理〕 */
body.ofw-chrome .ast-builder-menu-1 .main-header-menu > li:last-child > a.menu-link{
  background:var(--teal);color:#0d1211 !important;font-weight:700;
  box-shadow:0 0 0 1px rgba(20,184,172,.4),0 4px 12px rgba(6,8,7,.5);
  margin-left:6px;
}
body.ofw-chrome .ast-builder-menu-1 .main-header-menu > li:last-child > a.menu-link:hover{
  background:var(--teal-glow);color:#0d1211 !important;transform:translateY(-1px);
}
/* 下拉 submenu 跟返深底 */
body.ofw-chrome .main-header-menu .sub-menu{
  background:var(--ofwc-flap);border:1px solid var(--ofwc-edge);
}
body.ofw-chrome .main-header-menu .sub-menu a{color:var(--ofwc-dim) !important}
body.ofw-chrome .main-header-menu .sub-menu a:hover{color:var(--teal-glow) !important}

/* mobile：只換色，開合行為完全交返 Astra */
body.ofw-chrome .ast-mobile-menu-trigger-minimal,
body.ofw-chrome .ast-mobile-menu-trigger-fill,
body.ofw-chrome .menu-toggle{
  background:transparent !important;color:var(--ofwc-paint) !important;
  border:1px solid rgba(242,239,230,.24) !important;border-radius:2px;
}
body.ofw-chrome .ast-mobile-header-content,
body.ofw-chrome .ast-mobile-popup-drawer .ast-mobile-popup-inner{
  background:var(--ofwc-board) !important;
}
body.ofw-chrome .ast-mobile-popup-drawer .menu-link{color:var(--ofwc-paint) !important}

/* ── Footer：收埋 Astra 嗰個，出返自己嗰個 ───────── */
body.ofw-chrome .site-footer{display:none}

body.ofw-chrome .ofw-foot{
  background:var(--ofwc-board);
  color:var(--ofwc-paint);
  font-family:var(--ofwc-cjk);
  border-top:1px solid rgba(242,239,230,.10);
  padding:clamp(36px,5vw,56px) 0 0;
}
body.ofw-chrome .ofw-foot__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
body.ofw-chrome .ofw-foot__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,48px);
  padding-bottom:clamp(28px,4vw,44px);
}
body.ofw-chrome .ofw-foot__brand{display:flex;flex-direction:column;gap:12px;max-width:32ch}
body.ofw-chrome .ofw-foot__brand p{margin:0;color:var(--ofwc-dim);font-size:14.5px;line-height:1.75}
body.ofw-chrome .ofw-mark{
  display:flex;align-items:center;gap:10px;
  font-weight:900;letter-spacing:.02em;color:#fff;text-decoration:none;font-size:17px;
}
body.ofw-chrome .ofw-mark__dot{
  width:11px;height:11px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 3px rgba(20,184,172,.16);flex:0 0 auto;
}
body.ofw-chrome .ofw-foot__col{display:flex;flex-direction:column;gap:10px}
/* 〔2026-08-08〕footer 欄標題本來用 <h2>，會同內文標題爭 heading outline
   （每一版都有三個 footer h2）。改做 <p class="ofw-foot__ct">，純樣式冇語義。 */
body.ofw-chrome .ofw-foot__ct{
  font-family:var(--ofwc-mono);
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ofwc-dim);font-weight:400;margin:0 0 4px;
}
body.ofw-chrome .ofw-foot__col a{
  color:var(--ofwc-paint);text-decoration:none;font-size:14.5px;line-height:1.6;
}
body.ofw-chrome .ofw-foot__col a:hover{color:var(--teal-glow)}

body.ofw-chrome .ofw-foot__bar{
  border-top:1px solid rgba(242,239,230,.08);
  padding:20px 0 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
body.ofw-chrome .ofw-foot__c{
  font-family:var(--ofwc-mono);font-size:13px;letter-spacing:.04em;color:var(--ofwc-dim);
}
body.ofw-chrome .ofw-foot__c b{color:var(--ofwc-paint);font-weight:500}
body.ofw-chrome .ofw-foot__legal{display:flex;gap:8px 18px;flex-wrap:wrap}
body.ofw-chrome .ofw-foot__legal a{color:var(--ofwc-dim);text-decoration:none;font-size:13px}
body.ofw-chrome .ofw-foot__legal a:hover{color:var(--teal-glow)}
body.ofw-chrome .ofw-rail--bot{margin-top:8px}

@media(max-width:820px){
  body.ofw-chrome .ofw-foot__grid{grid-template-columns:1fr 1fr;gap:24px}
  body.ofw-chrome .ofw-foot__brand{grid-column:1/-1}
}
@media(max-width:560px){
  body.ofw-chrome .ofw-foot__grid{grid-template-columns:1fr}
  body.ofw-chrome .ofw-foot__bar{flex-direction:column;align-items:flex-start;gap:10px}
}