/* 黃彥翔醫師個人品牌站 — 元件樣式（移植自 04_設計稿/assets/site.css）。
   設計 token（配色/字型/字級/間距）由 theme.json 提供；此檔僅放元件專屬 class。
   字型 @font-face 由 theme.json fontFamilies 註冊，不在此重複。 */

:root{
  --bg:#FAF8F5; --blush:#F3EAE2; --card:#FBF8F4; --card-2:#FFFFFF;
  /* 卡片暖色對角漸層（參考 zen.dentist）；hover 再加深一階 */
  --card-grad:linear-gradient(to bottom right,#FCF8F1,#F6EFE2);
  --card-grad-hover:linear-gradient(to bottom right,#F6EFE2,#EDE1CC);
  --ink:#1C1C1A; --ink-2:#6B6B67; --accent:#8B7355; --accent-strong:#6E5A41;
  --clay:#D9CFC2; --line:rgba(28,28,26,.12);
  --h-serif:"Fraunces","Noto Serif TC",Georgia,Cambria,"PMingLiU","新細明體","Songti TC",serif;
  --body:"Source Sans 3","Noto Sans TC","Segoe UI","Microsoft JhengHei","微軟正黑體","PingFang TC",sans-serif;
}

/* ---- 通用排版輔助 ---- */
.hd-eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-strong);display:inline-flex;align-items:center;gap:14px;font-family:var(--body);}
.hd-eyebrow::before{content:"";width:30px;height:1px;background:var(--accent);}
.hd-lead{color:#3a3a36;font-size:clamp(16px,2vw,18.5px);max-width:40em;line-height:1.7;}
/* 在受限版面(page 內容)中，WP 以 margin-inline:auto !important 把有 max-width 的子元素置中；
   覆蓋為靠左以對齊設計稿。 */
.is-layout-constrained > .hd-lead,.is-layout-constrained > .hd-eyebrow{margin-left:0 !important;margin-right:auto !important;}
.hd-muted{color:var(--ink-2);}
.hd-serif{font-family:var(--h-serif);}

/* ---- 頁首 / 導覽 ---- */
.wp-site-blocks .hd-header{position:sticky;top:0;z-index:20;background:rgba(250,248,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:0;}
.hd-brand-sub{font-family:var(--body);font-weight:400;color:var(--ink-2);font-size:12px;letter-spacing:.1em;}
/* ---- 自製導覽（CSS checkbox 開關，不依賴 WP Interactivity；靜態站穩定）---- */
.hd-header-inner{max-width:1088px;margin:0 auto;padding:12px clamp(20px,5vw,56px);display:flex;align-items:center;justify-content:space-between;position:relative;gap:12px;}
.hd-brand{font-family:var(--h-serif);font-weight:600;font-size:20px;color:var(--ink);text-decoration:none;line-height:1.1;display:flex;flex-direction:row;align-items:center;gap:11px;}
.hd-logo{width:46px;height:46px;display:block;flex:none;}
.hd-brand-tx{display:flex;flex-direction:column;line-height:1.1;}
.hd-brand small{font-family:var(--body);font-weight:400;color:var(--ink-2);font-size:12px;letter-spacing:.1em;margin-top:3px;}
.hd-nav{display:flex;align-items:center;gap:24px;}
.hd-nav a{color:var(--ink);text-decoration:none;font-size:15px;}
.hd-nav a:hover{color:var(--accent-strong);}
.hd-nav-cta{background:var(--accent-strong);color:#fff !important;border-radius:999px;padding:9px 20px;font-size:14.5px;}
.hd-nav-cta:hover{background:#5d4c37;}
.hd-navtoggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.hd-burger{display:none;cursor:pointer;width:44px;height:40px;position:relative;}
.hd-burger span,.hd-burger span::before,.hd-burger span::after{content:"";position:absolute;left:10px;width:24px;height:2px;background:var(--ink);transition:.2s;}
.hd-burger span{top:19px;} .hd-burger span::before{top:-7px;} .hd-burger span::after{top:7px;}
.hd-navtoggle:checked ~ .hd-burger span{background:transparent;}
.hd-navtoggle:checked ~ .hd-burger span::before{top:0;transform:rotate(45deg);}
.hd-navtoggle:checked ~ .hd-burger span::after{top:0;transform:rotate(-45deg);}
.hd-navtoggle:focus-visible ~ .hd-burger{outline:2px solid var(--accent-strong);outline-offset:2px;}
@media(max-width:860px){
  .hd-burger{display:block;}
  .hd-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 24px 44px -22px rgba(110,90,65,.45);padding:6px 0;}
  .hd-navtoggle:checked ~ .hd-nav{display:flex;}
  .hd-nav a{padding:15px clamp(20px,5vw,56px);border-bottom:1px solid var(--line);font-size:16px;}
  .hd-nav a:last-child{border-bottom:none;}
  .hd-nav-cta{background:none;color:var(--accent-strong) !important;border-radius:0;font-weight:600;}
}

/* ---- 首頁 Hero ---- */
.hd-hero h1{font-family:var(--h-serif);font-weight:700;line-height:1.22;word-break:keep-all;overflow-wrap:normal;}
/* H1 兩行式（B3 定案 2026-07-03）：第一行＝關鍵字小標（陶色），第二行＝情感主標。膠囊「專注於微創治療」保留。 */
.hd-hero h1 .l1,.hd-hero h1 .l2{display:block;font-family:var(--h-serif);word-break:keep-all;}
.hd-hero h1 .l1{font-size:clamp(17px,2.4vw,25px);font-weight:600;color:var(--accent-strong);letter-spacing:.5px;line-height:1.3;}
.hd-hero h1 .l2{font-size:clamp(28px,4.6vw,48px);font-weight:700;color:var(--ink);line-height:1.24;margin-top:6px;}
.hd-portrait{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#E7DFD4,var(--clay));box-shadow:0 30px 60px -30px rgba(110,90,65,.45);}
.hd-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block;}
/* 桌機並排時把醫師照縮到約 75%、置中，與文字欄高度相稱、減少垂直置中造成的上方留白 */
@media(min-width:782px){.hd-hero .hd-portrait{max-width:75%;margin-inline:auto;}}
/* 縮小 header 下方到首頁內容的空隙（約現有一半）：main 上邊距 20→10、hero 上內距桌機 8/手機 19（覆寫 pattern inline，用 !important） */
.wp-site-blocks > main{margin-block-start:10px;}
.hd-hero{padding-top:8px !important;}
@media(max-width:781px){.hd-hero{padding-top:19px !important;}}
/* 手機：區段間距的 clamp 最小值在窄螢幕偏大（區段間隔40px＋區段上下56px疊加≈96px），縮小讓區塊更緊湊 */
@media(max-width:781px){:root{--wp--preset--spacing--60:1.5rem;--wp--preset--spacing--70:2.5rem;--wp--preset--spacing--80:3rem;}}
/* 手機：h1 原 word-break:keep-all 讓標題成不可斷整塊，撐大 flex 文字欄的 min-content 導致整欄超出視窗；
   解法＝欄位 min-width:0 可縮 ＋ h1 允許 CJK 逐字換行 */
@media(max-width:781px){
  .hd-hero .wp-block-column{min-width:0;}
  .hd-hero h1,.hd-hero h1 .l1,.hd-hero h1 .l2{word-break:normal;overflow-wrap:anywhere;}
}
.hd-note{color:var(--ink-2);font-size:14.5px;}
.hd-note a{color:var(--accent-strong);border-bottom:1px solid var(--accent);text-decoration:none;}
.hd-pill{display:inline-block;font-family:var(--body);font-weight:600;font-size:16.5px;color:var(--accent-strong);background:var(--blush);border-radius:999px;padding:10px 22px;line-height:1.25;}
.hd-tx-dot{font-size:16px;color:var(--accent-strong);font-weight:600;display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;line-height:1.6;}
.hd-tx-dot::before{content:"";width:26px;height:1px;background:var(--accent);flex:none;}
.is-layout-constrained > .hd-tx-dot,.is-layout-constrained > .hd-pill{margin-left:0 !important;margin-right:auto !important;}

/* ---- 子頁 hero ---- */
.hd-t-hero{padding:18px 0 38px;border-bottom:1px solid var(--line);}
.hd-t-hero h1{font-family:var(--h-serif);font-weight:700;font-size:clamp(32px,5.4vw,52px);line-height:1.2;word-break:keep-all;}

/* ---- 理念交錯卡片 ---- */
.hd-card{background:var(--card-grad);border:1px solid rgba(28,28,26,.05);border-radius:18px;padding:26px 24px;box-shadow:0 18px 40px -28px rgba(110,90,65,.4);transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;}
.hd-card:hover{transform:translateY(-6px);background:var(--card-grad-hover);border-color:rgba(139,115,85,.4);box-shadow:0 30px 60px -28px rgba(51,35,31,.32);}
.hd-card .ico{width:30px;height:30px;color:var(--accent);margin-bottom:16px;transition:color .22s ease;}
.hd-card:hover .ico{color:var(--accent-strong);}
.hd-card h3{font-family:var(--h-serif);font-weight:500;font-size:20px;line-height:1.3;margin:0 0 10px;}
.hd-card p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.7;}
.hd-stagger > .wp-block-column:nth-child(2){margin-top:48px;}

/* ---- 編號手風琴（療程 / FAQ）---- */
.hd-acc{border-top:1px solid var(--line);}
.hd-acc details{border-bottom:1px solid var(--line);}
.hd-acc summary{list-style:none;cursor:pointer;padding:24px 4px;font-family:var(--h-serif);font-weight:500;font-size:clamp(18px,2.3vw,22px);line-height:1.3;color:var(--ink);position:relative;padding-right:36px;}
.hd-acc summary::-webkit-details-marker{display:none;}
.hd-acc .hd-num{font-family:var(--body);font-size:13px;color:var(--accent);letter-spacing:.1em;margin-right:16px;font-weight:400;}
.hd-acc summary::after{content:"▾";position:absolute;right:6px;top:24px;color:var(--accent-strong);transition:transform .2s;font-size:16px;}
.hd-acc details[open] summary::after{transform:rotate(180deg);}
.hd-acc .hd-sub{display:block;font-family:var(--h-serif);font-style:italic;color:var(--accent-strong);font-size:15px;margin-top:4px;font-weight:400;}
.hd-acc .hd-answer{padding:0 4px 26px 4px;color:var(--ink-2);font-size:16px;line-height:1.8;max-width:64ch;}
.hd-acc .hd-answer p{margin:0 0 10px;}
.hd-acc .hd-answer ul{margin:6px 0 10px;padding-left:1.3em;}
.hd-acc .hd-answer li{margin:5px 0;}
.hd-tx-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;}
.hd-tx-pills a{font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--accent-strong);background:var(--blush);border-radius:999px;padding:8px 16px;text-decoration:none;transition:.15s;}
.hd-tx-pills a:hover{background:var(--accent-strong);color:#fff;}
.hd-acc details{scroll-margin-top:88px;}
.hd-more{display:inline-block;margin-top:6px;color:var(--accent-strong) !important;font-weight:600;border-bottom:1px solid var(--accent);text-decoration:none;}
.hd-more:hover{color:#5d4c37 !important;}
.hd-eqgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;}
.hd-eqgrid-2{grid-template-columns:repeat(2,1fr);gap:18px;}
@media(max-width:820px){.hd-eqgrid,.hd-eqgrid-2{grid-template-columns:1fr;}}
.hd-eq{background:var(--card-grad);border:1px solid rgba(28,28,26,.06);border-radius:14px;padding:20px;box-shadow:0 18px 40px -32px rgba(110,90,65,.4);transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;}
.hd-eq:hover{transform:translateY(-6px);background:var(--card-grad-hover);border-color:rgba(139,115,85,.4);box-shadow:0 30px 60px -28px rgba(51,35,31,.32);}
.hd-eq h4{font-family:var(--h-serif);font-weight:600;font-size:16.5px;margin:0 0 4px;line-height:1.3;}
.hd-eq p{color:var(--ink-2);font-size:13.5px;line-height:1.65;margin:0;}
.hd-eq-more{display:inline-block;color:var(--accent-strong);font-weight:600;border-bottom:1px solid var(--accent);text-decoration:none;}

/* ---- FAQ 左標題＋右手風琴 ---- */
.hd-split{align-items:start;}
@media(min-width:782px){ .hd-split .hd-split-head{position:sticky;top:96px;} }

/* ---- 看診據點 ---- */
.hd-loc{background:var(--card-2);border:1px solid rgba(28,28,26,.06);border-radius:16px;padding:24px;height:100%;}
.hd-loc img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:14px;display:block;}
.hd-loc .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);}
.hd-loc h3{font-family:var(--h-serif);font-weight:600;font-size:20px;margin:8px 0 12px;}
.hd-loc p{margin:5px 0;color:var(--ink-2);font-size:14.5px;}
.hd-loc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.hd-loc .hd-loc-time{color:var(--accent-strong);font-weight:600;margin-top:10px;}

/* ---- 比較表 ---- */
table.hd-cmp{width:100%;border-collapse:collapse;margin-top:16px;font-size:15.5px;}
table.hd-cmp th,table.hd-cmp td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top;}
table.hd-cmp th{color:var(--accent-strong);font-weight:600;font-family:var(--body);}

/* ---- callout ---- */
.hd-callout{background:var(--card);border-left:3px solid var(--accent);border-radius:8px;padding:16px 18px;color:#3a3a36;margin:14px 0;}
.hd-byline{color:var(--ink-2);font-size:14.5px;}

/* ---- 療程時間軸 ---- */
.hd-tl{background:var(--card);border:1px solid rgba(28,28,26,.06);border-radius:16px;padding:20px 20px 24px;box-shadow:0 18px 40px -30px rgba(110,90,65,.4);margin-top:18px;}
.hd-tl.opt{background:linear-gradient(180deg,#fff,#F3EAE2);border-color:#e3d6c5;}
.hd-tl .tl-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.hd-tl .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.hd-tl .tag.s{color:var(--accent-strong);font-weight:600;}
.hd-track{display:flex;align-items:flex-start;gap:6px;overflow-x:auto;padding-bottom:6px;}
.hd-step{flex:1;min-width:96px;text-align:center;position:relative;}
.hd-step::before{content:"";position:absolute;top:13px;left:50%;width:100%;height:2px;background:var(--line);}
.hd-step:last-child::before{display:none;}
.hd-dot{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--accent);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--accent-strong);font-weight:600;position:relative;z-index:1;}
.hd-tl.opt .hd-dot{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;}
.hd-step .lbl{font-size:14px;line-height:1.4;} .hd-step .mo{font-size:12px;color:var(--ink-2);margin-top:3px;}
.hd-tl .punch{margin-top:14px;font-family:var(--h-serif);font-weight:600;font-size:clamp(19px,3vw,26px);color:var(--accent-strong);}
.hd-tl .punch small{font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--ink-2);margin-left:8px;}

/* ---- 文章卡 ---- */
.hd-post{background:var(--card-2);border:1px solid rgba(28,28,26,.06);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:.15s;height:100%;}
.hd-post:hover{transform:translateY(-2px);box-shadow:0 24px 50px -34px rgba(110,90,65,.5);}
.hd-post .thumb{aspect-ratio:16/10;background:linear-gradient(160deg,#E7DFD4,var(--clay));display:flex;align-items:center;justify-content:center;color:#8a785f;font-size:13px;}
.hd-post .body{padding:18px 20px 22px;}
.hd-post .cat{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-strong);}
.hd-post h3{font-family:var(--h-serif);margin:8px 0;font-size:18px;line-height:1.35;font-weight:600;}
.hd-post p{margin:0;color:var(--ink-2);font-size:14px;}

/* ---- 微笑見證 ---- */
.hd-story{background:var(--card-2);border:1px solid rgba(28,28,26,.06);border-radius:16px;padding:24px;height:100%;}
.hd-story .who{font-size:13px;color:var(--ink-2);letter-spacing:.05em;}
.hd-story .body{font-family:var(--h-serif);font-size:18px;line-height:1.7;color:#2c2c28;margin:10px 0 14px;}
.hd-story .disc{font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px;}

/* ---- 頁尾 ---- */
.hd-footer{background:var(--footer,#211d18);color:#d7cfc4;font-size:14px;}
.hd-footer h4{font-family:var(--h-serif);color:#fff;font-weight:500;margin:0 0 14px;}
.hd-footer a{color:#d7cfc4;text-decoration:none;} .hd-footer a:hover{color:#fff;}
.hd-footer .bn{font-family:var(--h-serif);font-size:20px;color:#fff;}
.hd-footer p{margin:6px 0;}

/* ---- 麵包屑 / 草稿提示 ---- */
.hd-crumbs{font-size:13.5px;color:var(--ink-2);}
.hd-crumbs a{color:var(--ink-2);text-decoration:none;}
.hd-draftbar{background:#fff6e9;border:1px solid #e7d3ad;border-radius:10px;padding:10px 14px;font-size:13.5px;color:#7a5a1e;margin:18px 0;}

/* ---- 診療項目 hub 列表 ---- */
.hd-tx-list{border-top:1px solid var(--line);margin-top:8px;}
.hd-tx-row{display:flex;align-items:baseline;gap:18px;padding:22px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);}
.hd-tx-row:hover .hd-tx-name{color:var(--accent-strong);}
.hd-tx-name{font-family:var(--h-serif);font-weight:500;font-size:clamp(19px,2.4vw,23px);}
.hd-tx-sub{color:var(--ink-2);font-size:15px;}
.hd-tx-arrow{margin-left:auto;color:var(--accent-strong);}

/* ---- 預約據點三欄 ---- */
.hd-loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
@media(max-width:880px){ .hd-loc-grid{grid-template-columns:1fr;} }

/* ---- 區段底色 ---- */
.hd-blush{background:var(--blush);}

/* ---- 動態（尊重 reduced-motion）---- */
@media (prefers-reduced-motion:no-preference){
  .hd-reveal{opacity:0;transform:translateY(16px);animation:hd-rise .8s cubic-bezier(.2,.7,.2,1) forwards;}
  @keyframes hd-rise{to{opacity:1;transform:none;}}
}

@media(max-width:880px){
  .hd-stagger > .wp-block-column:nth-child(2){margin-top:0;}
}

/* ---- 手機浮動「預約諮詢」按鈕（2026-07-05；桌機隱藏，手機全頁固定右下）---- */
.hd-fab{display:none;}
@media(max-width:860px){
  .hd-fab{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:8px;
    background:var(--accent-strong);color:#fff !important;padding:12px 18px 12px 15px;border-radius:999px;
    box-shadow:0 12px 30px -8px rgba(110,90,65,.65);text-decoration:none;font-family:var(--body);font-weight:600;font-size:15px;
    transition:background .15s,transform .15s;}
  .hd-fab:hover,.hd-fab:focus-visible{background:#5d4c37;transform:translateY(-2px);}
  .hd-fab:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .hd-fab svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  /* 讓頁尾/頁末有足夠空間，避免浮動鈕長期擋住最後一行內容 */
  .wp-site-blocks{scroll-padding-bottom:80px;}
}