/*
Theme Name: 蕙林診所
Theme URI: https://healclinic.com.tw
Author: 野薑設計
Description: 蕙林診所自刻 block theme（PHP + Gutenberg + Block Pattern）。設計稿 → design tokens → Pattern，客戶在後台拉版面。以 gaia-starter 切版起步。
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: healclinic-theme
*/

/* ============================================================
   1) DESIGN TOKENS — 設計稿的「規範」全部變成 CSS 變數
   把設計稿量到的色碼、字級、間距填進來，全站只引用 var(--token)
   原則：8 倍數間距、不硬編碼任何定值（呼應 deck Page 08）
   ============================================================ */
:root{
  /* 顏色：從 Logo / 設計稿抽出 */
  --color-ink:#0a1f3d;          /* 主文字 / 深色 */
  --color-paper:#f1f3f5;        /* 背景 / 淺色 */
  --color-accent:#c8962f;       /* 品牌強調色（換成你設計稿的主色） */
  --color-muted:#6b7280;

  /* 蕙林診所品牌色（專案專用，不動上方 starter 通用色） */
  --pain-main-01:#dc7d28;       /* 主橘：有下拉的選單項 / 強調 */
  --main-01:#ba8242;            /* 淺棕金：副標 */
  --main-02:#83522b;            /* 主棕：標題 / CTA 按鈕 / Banner 漸層 */
  --text-black:#3e3e3e;         /* 內文黑：選單文字 */
  --gray-01:#60535d;            /* 內文灰紫：段落本文 */
  /* 金萱（商用字，需掛 justfont kit 才會生效，否則 fallback Noto Serif TC） */
  --font-jinxuan:"jf-jinxuan-3.1","jf-jinxuan","Noto Serif TC",serif;

  /* 字體 */
  --font-serif:"Noto Serif TC",serif;
  --font-sans:"Noto Sans TC",system-ui,sans-serif;

  /* 字級 */
  --fs-h1:clamp(2rem,5vw,3.5rem);
  --fs-h2:clamp(1.5rem,3.5vw,2.4rem);
  --fs-body:1.0625rem;
  --fs-small:0.875rem;

  /* 間距：8 倍數查表，不要憑感覺 */
  --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-20:80px; --space-24:96px;

  /* 圓角 / 陰影 / 過渡 */
  --radius:6px;
  --shadow:0 4px 24px rgba(10,31,61,.08);
  --transition:.4s ease;   /* 卡片 hover 統一（呼應 deck Page 13） */

  /* 版面寬度 */
  --container:1200px;
}

/* ============================================================
   2) 全站排版 SCOPE 在 .site-main（呼應 deck Page 12）
   只動 .site-main 內，不污染後台、不蓋掉 WP 預設
   ============================================================ */
.site-main{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--color-ink);
}
.site-main h1,.site-main h2,.site-main h3{font-family:var(--font-serif);line-height:1.2}
.site-main h1{font-size:var(--fs-h1)}
.site-main h2{font-size:var(--fs-h2)}
.site-main .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-6)}

/* ============================================================
   3) 元件層 — 卡片 / 按鈕（呼應 deck Page 13 · S4）
   ============================================================ */
.site-main .btn{
  display:inline-block;padding:var(--space-3) var(--space-6);
  background:var(--color-accent);color:#fff;border-radius:var(--radius);
  text-decoration:none;transition:var(--transition);
}
.site-main .btn:hover{filter:brightness(1.08);transform:translateY(-2px)}

.site-main .card{
  padding:var(--space-8);background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);transition:var(--transition);
}
.site-main .card:hover{transform:translateY(-4px)}

/* scroll reveal（IntersectionObserver 在 functions.php 掛的 JS 會加 .is-visible） */
.site-main [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.site-main [data-reveal].is-visible{opacity:1;transform:none}

/* ============================================================
   Header 導覽列（蕙林診所）— 白底、高 79px、Logo / 選單 / CTA 三段
   ============================================================ */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  height:79px;padding-inline:70px;
  background:#fff;border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header .site-logo{display:flex;align-items:center;flex-shrink:0}
.site-header .site-logo img{height:40px;width:auto;display:block}

/* 主選單 */
.site-nav .site-menu{list-style:none;display:flex;align-items:center;margin:0;padding:0}
.site-nav .site-menu li{position:relative}
.site-nav .site-menu a{
  display:flex;align-items:center;gap:5px;height:79px;padding-inline:10px;
  font-family:var(--font-sans);font-size:16px;letter-spacing:.8px;
  color:var(--text-black);text-decoration:none;white-space:nowrap;
  transition:color .2s ease;
}
/* 平常灰字；hover 或當前頁才轉橘 */
.site-nav .site-menu a:hover,
.site-nav .site-menu .current-menu-item > a,
.site-nav .site-menu .current-menu-ancestor > a,
.site-nav .site-menu .current_page_item > a{color:var(--pain-main-01)}
/* 有下拉的項目：向下箭頭，顏色跟著文字（平常灰、hover 橘） */
.site-nav .site-menu .menu-item-has-children > a::after{
  content:"";width:6px;height:6px;margin-left:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
/* 下拉子選單：白底圓角，項目棕字；hover 橘底白字 */
.site-nav .site-menu ul.sub-menu{
  list-style:none;position:absolute;top:79px;left:0;
  display:none;flex-direction:column;min-width:max-content;margin:0;padding:0;
  background:#fff;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden;z-index:50;
}
.site-nav .site-menu li:hover > ul.sub-menu{display:flex}
.site-nav .site-menu ul.sub-menu a{
  height:auto;padding:8px 24px;color:var(--main-02);letter-spacing:.8px;
  transition:background .2s ease,color .2s ease;
}
.site-nav .site-menu ul.sub-menu a:hover{background:var(--pain-main-01);color:#fff}

/* CTA 按鈕 */
.site-header .site-cta{
  flex-shrink:0;background:var(--main-02);color:#fff;
  padding:5px 20px;border-radius:var(--radius);
  font-family:var(--font-sans);font-weight:500;font-size:16px;letter-spacing:1.6px;
  line-height:1.85;text-decoration:none;white-space:nowrap;transition:filter .2s ease;
}
.site-header .site-cta:hover{filter:brightness(1.08)}

/* 視窗較窄時：縮邊距、選單暫時收起（手機版漢堡選單為後續項目） */
@media (max-width:1100px){
  .site-header{padding-inline:24px}
  .site-nav{display:none}
}

/* ============================================================
   Footer（蕙林診所）— 三層：CTA 米條 200 ｜ 主 5 欄 337 ｜ Copyright 灰條 109
   ============================================================ */

/* 上：CTA 米色條 */
.site-footer-cta{
  position:relative;overflow:hidden;
  height:200px;background:#e9e1c7;
  display:flex;align-items:center;justify-content:center;
}
.site-footer-cta::before,
.site-footer-cta::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:538px;height:200px;opacity:.53;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(186,130,66,.35),transparent 70%);
}
.site-footer-cta::before{left:0}
.site-footer-cta::after{right:0}
.site-footer-cta__btn{
  position:relative;background:var(--main-02);color:#fff;
  padding:10px 40px;border-radius:var(--radius);
  font-size:24px;font-weight:700;letter-spacing:4.8px;line-height:1.85;
  text-decoration:none;transition:filter .2s ease,transform .2s ease;
}
.site-footer-cta__btn:hover{filter:brightness(1.08);transform:translateY(-2px)}

/* 中：主 footer 白底 5 欄 */
.site-footer-main{background:#fff;padding:112px 110px}
.site-footer-main__inner{
  max-width:1220px;margin-inline:auto;
  display:flex;gap:120px;align-items:flex-start;flex-wrap:wrap;
}
.site-footer-main__logo img{max-width:200px;height:auto;display:block}
.site-footer-main__col{display:flex;flex-direction:column;gap:10px;min-width:80px}
.site-footer-main__info{min-width:200px}
.site-footer-main__info h4{
  font-family:var(--font-sans);font-weight:400;font-size:16px;
  color:var(--text-black);margin:0;letter-spacing:normal;line-height:1.5;
}
.site-footer-main__info p{
  font-size:14px;color:var(--text-black);line-height:1.85;margin:0;
}
.site-footer-main__social{display:flex;gap:5px;margin-top:5px;align-items:center}
.site-footer-main__social a{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s ease;
}
.site-footer-main__social a:hover{transform:translateY(-2px)}
.site-footer-main__social img{width:30px;height:30px;display:block}
.site-footer-main__menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.site-footer-main__menu a{
  font-size:16px;color:var(--text-black);text-decoration:none;
  transition:color .2s ease;
}
.site-footer-main__menu a:hover{color:var(--pain-main-01)}

/* 下：Copyright 灰條 */
.site-footer-copyright{
  background:#f2f2f2;padding:24px;text-align:center;
  color:#a1a1a1;font-size:12px;line-height:1.85;
}
.site-footer-copyright p{max-width:800px;margin:0 auto}

/* Footer RWD */
@media (max-width:1100px){
  .site-footer-main{padding:60px 40px}
  .site-footer-main__inner{gap:40px}
}
@media (max-width:700px){
  .site-footer-main__inner{flex-direction:column;gap:32px}
  .site-footer-cta__btn{font-size:18px;letter-spacing:2px;padding:10px 24px}
}

/* ============================================================
   4) Pattern: 首頁 Banner 輪播（gaia/hero-clinic）
   滿版、純圖片淡入淡出。圖片比例 2160:1182（= 設計稿 1440:788）。
   ============================================================ */
.site-main{overflow-x:clip}            /* 防 100vw 滿版產生水平捲動 */
.site-main .gaia-hero-clinic{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);      /* 全寬：不論外層容器都頂到視窗左右 */
  aspect-ratio:2160 / 1182;
  overflow:hidden;
  background:var(--color-ink);         /* 圖片載入前的底色 */
}
.site-main .gaia-hero-slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
}
.site-main .gaia-hero-slide.is-active{opacity:1}

/* ============================================================
   5) Pattern: 無痛哲學（gaia/philosophy）— 左圖文 / 右形象照
   ============================================================ */
.site-main .gaia-philosophy{padding-block:var(--space-24)}
.site-main .gaia-philosophy .wp-block-columns{gap:var(--space-16)}
.site-main .gaia-philosophy__title{
  font-family:var(--font-jinxuan);font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.25rem);
  color:var(--main-02);letter-spacing:.2em;line-height:1.5;margin:0;
}
.site-main .gaia-philosophy__sub{
  font-family:var(--font-jinxuan);
  font-size:1.125rem;color:var(--main-01);letter-spacing:.1em;
  margin:var(--space-2) 0 var(--space-8);
}
.site-main .gaia-philosophy__body{
  font-size:1rem;color:var(--gray-01);line-height:1.85;letter-spacing:.1em;
  text-align:justify;margin:0 0 var(--space-6);
}
.site-main .gaia-philosophy__cta{margin-top:var(--space-8)}
.site-main .gaia-philosophy__img img{
  width:100%;aspect-ratio:373 / 639;object-fit:cover;
  border-radius:var(--radius);display:block;
}

/* 共用：棕色品牌按鈕（philosophy / reviews 等沿用） */
.site-main .gaia-btn-brand .wp-block-button__link{
  background:var(--main-02);color:#fff;border-radius:var(--radius);
  padding:10px 20px;font-family:var(--font-sans);font-weight:500;
  font-size:16px;letter-spacing:1.6px;line-height:1.85;
  transition:filter .2s ease;
}
.site-main .gaia-btn-brand .wp-block-button__link:hover{filter:brightness(1.08)}

/* ============================================================
   6) Pattern: 評價牆（gaia/reviews）— 標題 + 3×2 卡片 + CTA
   ============================================================ */
.site-main .gaia-reviews{max-width:1040px;margin-inline:auto;padding:var(--space-24) var(--space-6)}

/* 標題區 */
.site-main .gaia-reviews__head{text-align:center;margin-bottom:var(--space-16)}
.site-main .gaia-reviews__title{
  font-family:var(--font-jinxuan);font-weight:500;font-size:clamp(1.6rem,3vw,2rem);
  color:var(--main-02);letter-spacing:.2em;line-height:1.5;margin:0;
}
.site-main .gaia-reviews__divider{display:flex;align-items:center;gap:10px;justify-content:center;width:180px;margin:14px auto}
.site-main .gaia-reviews__divider span{flex:1;height:1px;background:var(--main-01);opacity:.7}
.site-main .gaia-reviews__divider i{width:4px;height:4px;border-radius:50%;background:var(--main-01)}
.site-main .gaia-reviews__sub{
  font-family:var(--font-jinxuan);font-size:1.25rem;color:var(--main-01);letter-spacing:.25em;margin:0;
}

/* 卡片網格 */
.site-main .gaia-reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.site-main .gaia-review-card{
  position:relative;aspect-ratio:310 / 396;border-radius:10px;overflow:hidden;background:#a79085;
}
.site-main .gaia-review-card__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site-main .gaia-review-card__panel{
  position:absolute;left:0;right:0;bottom:0;padding:20px 15px;color:#fff;
  background:linear-gradient(180deg,
    rgba(167,144,133,0) 0%,rgba(167,144,133,.5) 22%,
    rgba(167,144,133,.85) 45%,#a79085 70%);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.site-main .gaia-review-card__head{display:flex;gap:7px;align-items:flex-start;margin-bottom:12px}
.site-main .gaia-review-card__avatar{width:39px;height:39px;border-radius:50%;object-fit:cover;flex-shrink:0}
.site-main .gaia-review-card__meta{display:flex;flex-direction:column;min-width:0}
.site-main .gaia-review-card__name{font-weight:700;font-size:14px;line-height:1.2}
.site-main .gaia-review-card__headline{font-size:16px;line-height:1.3;margin-top:4px;text-align:justify}
.site-main .gaia-review-card__body{font-size:14px;line-height:1.55;text-align:justify;margin:0}

/* CTA（共用純連結品牌按鈕） */
.site-main .gaia-reviews__cta{text-align:center;margin-top:var(--space-16)}
.site-main .gaia-cta{
  display:inline-block;background:var(--main-02);color:#fff;border-radius:var(--radius);
  padding:10px 20px;font-weight:500;font-size:16px;letter-spacing:1.6px;
  text-decoration:none;transition:filter .2s ease;
}
.site-main .gaia-cta:hover{filter:brightness(1.08)}

/* 評價牆 RWD */
@media (max-width:900px){.site-main .gaia-reviews__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.site-main .gaia-reviews__grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}

/* ============================================================
   7) Pattern: 選擇蕙林的安心理由 · WHY（gaia/why）
   標題 + 分隔線 + 4 icon 卡 + CTA。滿版背景：中央米白徑向漸層 → 白邊。
   ============================================================ */
.site-main .gaia-why{
  position:relative;
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);   /* 滿版跳出 container */
  padding:var(--space-24) var(--space-6);
  background:radial-gradient(ellipse 74% 34% at 50% 50%,rgba(238,233,228,.6) 0%,#fff 100%);
}

/* 標題區（沿用 reviews 分隔線同款樣式，只是尺寸略大） */
.site-main .gaia-why__head{text-align:center;margin-bottom:var(--space-16)}
.site-main .gaia-why__title{
  font-family:var(--font-jinxuan);font-weight:500;
  font-size:clamp(1.6rem,3vw,2rem);
  color:var(--main-02);letter-spacing:.2em;line-height:1.5;margin:0;
}
.site-main .gaia-why__divider{display:flex;align-items:center;gap:10px;justify-content:center;width:180px;margin:10px auto}
.site-main .gaia-why__divider span{flex:1;height:1px;background:var(--main-01);opacity:.7}
.site-main .gaia-why__divider i{width:4px;height:4px;border-radius:50%;background:var(--main-01)}
.site-main .gaia-why__sub{
  font-family:var(--font-jinxuan);font-size:1.25rem;color:var(--main-01);
  letter-spacing:.25em;margin:0;
}

/* 4 卡網格 */
.site-main .gaia-why__grid{
  max-width:1200px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,270px);gap:40px;justify-content:center;
}
.site-main .gaia-why-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-8);
  width:270px;text-align:center;
}
.site-main .gaia-why-card__icon{width:150px;height:150px;display:block;object-fit:contain}
.site-main .gaia-why-card__title{
  font-family:var(--font-jinxuan);font-weight:800;
  font-size:1.125rem;color:var(--gray-01);
  letter-spacing:.2em;line-height:1.85;margin:0;
}
.site-main .gaia-why-card__body{
  font-family:var(--font-sans);font-size:1rem;color:var(--text-black);
  line-height:1.85;letter-spacing:.1em;text-align:justify;margin:0;padding-inline:10px;
}

.site-main .gaia-why__cta{text-align:center;margin-top:var(--space-16)}

/* WHY RWD */
@media (max-width:1100px){.site-main .gaia-why__grid{grid-template-columns:repeat(2,270px)}}
@media (max-width:600px){.site-main .gaia-why__grid{grid-template-columns:270px}}