/* 鄭哥 Hany 博客共用樣式
   由各頁原本的 inline <style> 抽出，讓瀏覽器跨頁快取。 */

*{margin:0;padding:0;box-sizing:border-box;}
/* 黏性導覽高 85px（56px 容器 + 上下 14px padding + 1px 底線），實測 375–1280px
   各寬度、各頁皆相同；面板展開時會增至 188px，但跳去 #anchor 會先收起面板，
   所以以收起後的高度為準。加 17px 呼吸位，令目標頂邊不會被導覽蓋住。
   site.css 在每頁 inline <style> 之前載入，所以個別頁面若有自己的
   scroll-margin-top，仍以該頁的數值為準（topics.html / products.html 已同步調為 102px）。 */
html { scroll-padding-top: 102px; }
.author-card h4{font-size:1rem;margin-bottom:6px;}
.author-card img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.author-card p{font-size:0.88rem;color:var(--text-secondary);line-height:1.6;}
.author-card{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius);padding:28px;margin-top:32px;display:flex;gap:20px;align-items:flex-start;}
.container{max-width:720px;margin:0 auto;padding:0 24px;}
/* 2026-10-18：文章頁用 .search-page > .search-inner 包住正文，但那 5 頁只在 inline
   寫了 max-width:820px，冇 margin:0 auto，令 820px 闊的欄在寬螢幕鎖死在左邊、
   右邊留一大片空白（視窗 ≤800px 時才看似正常）。search.html 自己已寫 margin:0 auto，
   所以只有文章頁受影響。呢條規則補回置中，同時防止日後新文章再犯。 */
.search-page .search-inner{margin-left:auto;margin-right:auto;}

.en{display:none;}
.lang-btn{background:none;border:1px solid var(--border-light);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:0.85rem;margin-left:8px;}
.logo span{color:var(--accent);}
.logo{font-weight:700;color:var(--text);text-decoration:none;font-size:1.1rem;}
.nav-links{display:flex;gap:6px;align-items:center;}
.nav-panels .inner{max-width:1100px;margin:0 auto;padding:16px 24px 20px;display:flex;flex-wrap:wrap;gap:8px 20px;}
.nav-panels .panel-title{width:100%;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px;}
.nav-panels a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.nav-panels a{font-size:.9rem;color:var(--text-secondary);text-decoration:none;padding:5px 0;border-bottom:1px solid transparent;}
.nav-panels.open{display:block;}
.nav-panels{display:none;background:var(--bg-elevated);border-top:1px solid var(--border-light);}
.nav-parent .caret{font-size:.58rem;opacity:.65;transition:transform .2s;}
.nav-parent:hover,.nav-parent[aria-expanded="true"]{color:var(--accent);background:var(--accent-light);}
.nav-parent[aria-expanded="true"] .caret{transform:rotate(180deg);}
.nav-parent{background:none;border:none;padding:8px 12px;font:inherit;font-size:.88rem;color:var(--text-secondary);cursor:pointer;border-radius:8px;display:inline-flex;align-items:center;gap:5px;transition:all .18s;}
.post-content blockquote::before{content:'\201C';position:absolute;left:14px;top:6px;font-size:2.4rem;color:var(--accent);opacity:.45;font-family:Georgia,serif}
.post-content blockquote{border-left:4px solid var(--accent);padding:16px 24px;margin:1.5em 0;background:var(--accent-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;}
.post-content blockquote{position:relative;border-left:none;background:#fff7f3;border-radius:0 12px 12px 0;padding:20px 26px 20px 52px;margin:2em 0;font-style:normal;font-size:1.02rem;line-height:1.9;color:#4a3a32}
.post-content h2{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang HK','Noto Sans TC',sans-serif;font-size:1.32rem;font-weight:700;line-height:1.5;margin:2.4em 0 .9em;padding:0 0 0 14px;border-left:4px solid var(--accent);border-bottom:none;letter-spacing:0}
.post-content h2{font-size:1.3rem;font-weight:600;margin:2em 0 0.8em;padding-bottom:8px;border-bottom:2px solid var(--accent-light);}
.post-content img{max-width:100%;border-radius:var(--radius);margin:1.5em 0;box-shadow:var(--shadow);}
.post-content p{margin-bottom:1.4em;}
.post-content p{margin:0 0 1.5em}
.post-content strong{color:var(--accent);}
.post-content>p:first-of-type::first-letter{font-size:1.9em;font-weight:700;line-height:1;float:left;margin:.08em .12em 0 0;color:var(--accent)}
.post-content{font-family:Georgia,'Times New Roman','Noto Serif TC','Songti TC','SimSun',serif;font-size:1.08rem;line-height:2.0;letter-spacing:.015em;color:#2b2b2b;text-align:justify;max-width:42em;margin:0 auto}
.post-content{font-size:1.05rem;line-height:1.9;}
.post-footer .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.post-footer .tag{background:#f5f5f5;padding:4px 12px;border-radius:4px;font-size:0.8rem;color:var(--text-secondary);}
.post-footer p{color:var(--text-muted);font-size:0.9rem;}
.post-footer{margin-top:48px;padding-top:32px;border-top:1px solid var(--border-light);}
.post-header h1{font-family:Georgia,'Noto Serif TC','Songti TC',serif;font-size:1.72rem;line-height:1.45;letter-spacing:0}
.post-header h1{font-size:1.7rem;font-weight:700;line-height:1.4;margin-bottom:16px;letter-spacing:-0.3px;}
.post-header{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--border-light);}
.post-meta .tag{background:var(--accent-light);color:var(--accent);padding:3px 12px;border-radius:20px;font-weight:500;}
.post-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--text-muted);font-size:0.85rem;}
:root{--bg:#fafafa;--bg-elevated:#fff;--text:#1a1a1a;--text-secondary:#555;--text-muted:#888;--accent:#c41e3a;--accent-light:#fef2f2;--border-light:#eee;--border:#ddd;--radius:12px;--radius-sm:8px;--shadow:0 1px 3px rgba(0,0,0,0.04);--shadow-hover:0 8px 24px rgba(0,0,0,0.08);}
@media(max-width:640px){.post-content{font-size:1.0rem;line-height:1.95}.post-header h1{font-size:1.38rem}.post-content>p:first-of-type::first-letter{font-size:1.7em}}
article{padding:48px 0 64px;}
body.show-en .cn{display:none;}
body.show-en .en{display:block;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans TC','PingFang TC',sans-serif;background:var(--bg);color:var(--text);line-height:1.8;}
footer p{font-size:0.82rem;color:var(--text-muted);}
footer{background:var(--bg-elevated);border-top:1px solid var(--border-light);padding:32px 0;text-align:center;margin-top:64px;}
nav .container{display:flex;justify-content:space-between;align-items:center;height:56px;}
nav a:hover,nav a.active{color:var(--accent);background:var(--accent-light);}
nav a{color:var(--text-secondary);text-decoration:none;padding:8px 14px;border-radius:6px;font-size:0.88rem;transition:all 0.2s;}
nav{background:var(--bg-elevated);border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:100;}
nav .container{position:relative;}

/* 14. 手風琴容器的預設狀態：任何寬度都收起。
   不可以只寫在 max-width:768px 裡面 —— 手風琴是 JS 建的，
   如果建在桌面寬度下而又只有手機才有 display:none，
   它就會當成一般 flex item 遒入桌面導航條。 */
.nav-accordion{display:none;width:100%;box-sizing:border-box;background:var(--bg);border-bottom:1px solid var(--border-light);}

/* ==========================================================================
   手機版面修復（2026-10-08）— 只修破版，唔改設計、唔改色、唔改文案
   --------------------------------------------------------------------------
   主問題：全站 59 頁之中只有 16 頁（about / blog / contact / xhs / topics /
   products / search / 6 個社交頁 / 3 篇最新文章）的 <nav> 裡面有
   <div class="nav-wrapper">；其餘 43 頁的 <div class="nav-links"> 直接掛在
   nav .container（display:flex; height:56px）之下，而所有「唔准換行」的保險
   規則全部包在「min-width: 769px」的 media query 裡面 —— 即係手機（≤768px）
   完全冇任何後備方案，連 .nav-wrapper 這個選擇器都揀唔到任何元素。
   算一算 320px：內容區 320-24-24=272px；9 個 white-space:nowrap 的項目
   約 612px + 8 個 6px gap = 660px，加 logo 83px = 743px 想塞入 272px，
   於是整頁橫向捲動 470px。修法：把 16 頁已經用開的漢堡選單模式搬入
   site.css，令全部 59 頁共用同一套手機導航。
   ========================================================================== */

/* 1. 圖片任何情況下都唔可以撐爆容器。height:auto 同時修掉 <img width height>
      在 width:100% 之下高度仍然被鎖死而造成的比例失真。 */
img{max-width:100%;height:auto;}

/* 2. 內文的長網址／長英文字唔會撐爆版面（只在需要斷行時才生效）。 */
.post-content{overflow-wrap:break-word;}

/* 3. 表格橫向捲動容器（HTML 已為每張 <table> 包上 .table-scroll）。
      表格係 display:table，無法縮到比 min-content 更窄，所以一定要外面
      有一層可以橫向捲動的 block，否則整頁會多一條橫向 scrollbar。 */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0;}
.table-scroll>table{margin:0 !important;}

/* 4. 漢堡選單（桌面隱藏，同 about.html 等 16 頁本來嘅寫法一致）。 */
.hamburger{display:none;background:none;border:none;font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;padding:6px 10px;color:var(--text);border-radius:8px;}
.hamburger:hover{background:var(--accent-light);color:var(--accent);}
.nav-wrapper{display:flex;align-items:center;}

@media (max-width:768px){
  /* 5. nav 唔再鎖死 56px 高；選單變成絕對定位下拉，唔會影響文流。 */
  nav .container{height:auto;min-height:56px;}
  .hamburger{display:block !important;flex:0 0 auto;padding:11px 12px !important;min-width:44px;min-height:44px;}
  .nav-wrapper{display:none !important;position:absolute !important;top:100% !important;left:0 !important;right:0 !important;
    max-height:calc(100vh - 56px);overflow-x:hidden;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--bg-elevated);border-top:1px solid var(--border-light);
    box-shadow:0 6px 18px rgba(0,0,0,.10);z-index:20;}
  .nav-wrapper.open{display:block !important;}

  /* 6. 選單一列一項，48px 高。呢兩條用 nav 提高 specificity，
        以蓋過各頁 inline <style> 冇 media query 的 .nav-links{gap:24px}
        同 white-space:nowrap。 */
  nav .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:6px 0;flex-wrap:nowrap;}
  nav .nav-links>a,
  nav .nav-links .nav-parent,
  nav .nav-links .lang-btn,
  nav .nav-links .lang-toggle{
    display:flex;align-items:center;width:100%;min-height:48px;box-sizing:border-box;
    padding:12px 24px;margin:0;border-radius:0;text-align:left;font-size:.95rem;
    border-bottom:1px solid var(--border-light);white-space:nowrap;}
  nav .nav-links .nav-parent{justify-content:flex-start;gap:6px;}
  nav .nav-links>*:last-child{border-bottom:none;}

  /* 7. 下拉面板同社交列的點擊區域 ≥44px。 */
  nav .nav-panels a{display:block;padding:9px 0;min-height:44px;line-height:1.5;}
  .social-links a{min-height:44px;}

  /* 8. iOS Safari 一聚焦就會因為輸入框字級 <16px 而自動放大整頁（版面即刻
        走位、要手動縮返）。輸入框字級寫在 inline style（.88rem），
        所以這裡一定要用 !important 才蓋得過。 */
  input,select,textarea{font-size:16px !important;}

  /* 9. 內文目錄連結的點擊區域。 */
  .toc-box a{display:block;padding:9px 0;min-height:44px;}

  /* 10.（已移除）原本這裡有一條
        nav:has(.nav-panels.open) .nav-wrapper.open{display:none;}
        用意係唔想絕對定位的漢堡選單蓋住下拉面板。但係 toggleNavPanel() 一開面板
        就會同時開 .nav-panels，於是呢條規則會連整個漢堡選單一齊隱藏 ——
        founder 見到嘅「点击进去出现第二级链接都没有显示」就係呢條規則造成：
        選單消失，只剩低一個脫離選單、貼在文流裡面嘅面板。
        改為用下面 11/12 的內聯手風琴（accordion），選單同二級連結在同一棵樹之內，
        兩者唔會再互相遮蓋，所以呢條規則唔需要存在。 */

  /* 11. 手機版內聯手風琴：一級項目（文章／點評／專題／搜尋／關於／連結）點一下就
        在選單內、按鈕正下方展開自己的二級連結，唔會跳轉、唔會彈出另一個面板。
        - 面板內容由 JS 複製入 .nav-accordion（唔改動 .nav-panels 本身），
          所以 ≥769px 的桌面面板機制完全唔受影響。
        - .nav-accordion 係 .nav-links（flex column）的直接子項，會自然佔滿一行，
          並把下方項目推落去。
        - 用 flex-start 對齊，令 <a> 唔會被 flex 拉闊或壓扁。
        注意：基本 .nav-accordion{display:none} 寫在 media query 外面（見下面 14），
        否則桌面一旦建立了容器就會顯示出來，反而搞亂桌面導航。 */
  .nav-accordion.open{display:block;padding:4px 0 10px;}
  .nav-accordion>*{box-sizing:border-box;max-width:100%;}

  /* 11a. 二級連結：足夠大的點擊區（≥44px），長標題換行而唔會撐爆版面。 */
  nav .nav-accordion a{display:flex;align-items:center;min-height:44px;
    padding:10px 24px 10px 34px;margin:0;border-radius:0;font-size:.9rem;
    line-height:1.5;color:var(--text-secondary);text-decoration:none;
    white-space:normal;overflow-wrap:break-word;word-break:break-word;
    border-bottom:1px solid transparent;}
  nav .nav-accordion a:hover,nav .nav-accordion a:active{color:var(--accent);}
  /* 一級標題（複製過來的 .panel-title）當做小標籤。 */
  nav .nav-accordion .panel-title{width:auto;padding:8px 24px 2px 34px;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-muted);}

  /* 11b. 搜尋面板裡面有一個 <form>，用 flex 排好輸入框同按鈕，320px 都唔會爆。 */
  nav .nav-accordion form{display:flex;gap:8px;width:auto;margin:6px 24px 6px 34px;
    flex-wrap:wrap;}
  nav .nav-accordion form input{flex:1 1 120px;min-width:0;}
  nav .nav-accordion form button{flex:0 0 auto;}

  /* 11c. 手風琴展開時角標轉向（aria-expanded 已由 JS 同步）。 */
  nav .nav-links .nav-parent[aria-expanded="true"]{color:var(--accent);}
  nav .nav-links .nav-parent[aria-expanded="true"] .caret{transform:rotate(180deg);}

  /* 12. 手機版確保回退：面板本身在手機一律唔顯示（內容已複製入選單），
        就算舊頁面／舊快取漏了 JS，都唔會再出現一個脫離選單的長面板。 */
  nav .nav-panels{display:none !important;}

  /* 13. 語言掣：各頁 inline 用 .lang-toggle 帶深色底，在淺色選單裡面會被拉成
        一整條深色橫條（實測 375px 見到）。統一成跟其他選單項一致的外觀。
        .lang-btn（site.css 自己的寫法）保持不變。 */
  nav .nav-links .lang-toggle{background:var(--bg-elevated);color:var(--text-secondary);
    border:none;border-radius:0;font-size:.95rem;font-weight:400;}
  nav .nav-links .lang-toggle:hover{color:var(--accent);}
}