/* ============================================================
   雅術牙醫 — 基礎樣式（共用檔）
   頁首／頁尾／版面基準。定案後**唯讀**：其他頁只新增自己的 page css，
   不改這支，才能自動保持一致（沐群方法）。

   所有數值都是從原站 www.artechdent.com 實測 computed style 照抄，
   非目測（knowledge_wp_to_static §12）。量測基準存於
   raw/rewrite_spec_header_footer.json 與 raw/home_spec.json。
   ============================================================ */

/* ---------- 基準 ---------- */
:root {
  --text: rgb(51, 51, 51);          /* 原站 body color */
  --text-strong: rgb(52, 52, 60);   /* 選單／內文深色 */
  --text-heading: rgb(56, 54, 53);  /* 大標 */
  --text-muted: rgb(28, 28, 28);
  --bg: #fff;
  --bg-alt: rgb(247, 248, 250);     /* 淺灰區塊底 */
  --footer-bg: #000;
  --content-max: 1110px;            /* 原站 .container 內容寬 */
  --header-h: 82px;
  --header-h-mobile: 72px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* ⚠️ 照抄原站原樣：Roboto, Arial, sans-serif —— **不要**自作主張補中文字型。
     原站沒指定 CJK 字型，中文交給瀏覽器預設字型算繪。
     我原本多加了 "PingFang TC"，結果同樣 12px 下 advance 寬度一樣（所以量測抓不出來），
     但字身比瀏覽器預設中文字型小 → 肉眼看選單就是小一號。Dennis 一眼看出來的就是這個。 */
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, blockquote, figure, dl, dd { margin: 0; }   /* blockquote 預設 margin:1em 40px 會讓卡片間距多 80px */
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 15px;   /* 原站 col 左右 padding */
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 頁首 ---------- */
/* 原站實測：桌機高 82px 白底；logo 200×52；選單 8 項 12px/400 rgb(52,52,60)
   左右 padding 15px；電話鈕 140×38 右對齊 14px/600 rgb(61,61,61) 透明底無圓角 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);   /* 用 min-height：窄桌機放不下時頁首要能長高 */
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.site-header__inner {
  min-height: var(--header-h);
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 0;      /* 原站實測 padding 0，logo 貼齊 x=0 */
  display: flex;
  align-items: center;
  flex-wrap: wrap;        /* 原站在 1000px 是兩排（頁首高 160）；放不下就讓電話鈕掉下一排 */
  gap: 12px;
}

.site-logo { flex: 0 0 auto; }
.site-logo img { width: 200px; height: 52px; object-fit: contain; }

.site-nav { margin-left: auto; }   /* 原站是「logo 貼左、選單+電話鈕靠右成一組」，非置中 */
.site-nav__list { display: flex; }
.site-nav__item { position: relative; }

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  padding-inline: 15px;
  /* Dennis 2026-07-30 指定放大主選單。
     原站在不同狀態量到兩組值：12px/字距2px（JS 初始化後）與 15px/字距0.5px（CSS 預設態）。
     採用 15px/0.5px —— 這是 Dennis 要的可讀尺寸，也是原站 CSS 的原始設定。 */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--text-strong);
  white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__item:hover > .site-nav__link { color: #000; }

/* 下拉子選單：hover 展開（原站行為） */
.site-nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px 0;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav__sub a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--text-strong);
}
.site-nav__sub a:hover { background: var(--bg-alt); color: #000; }

.header-tel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 寬度不寫死：原站是內容自然撐開（圖示14＋間距10＋文字90.2＋左右padding24＋框線2＝140.2）。
     寫死 140 會讓號碼被擠成兩行 */
  white-space: nowrap;
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(61, 61, 61);
  background: transparent;
  border: 1px solid rgba(61, 61, 61, .35);
  border-radius: 0;
  justify-content: center;
}
.header-tel__icon { flex: 0 0 auto; }
.header-tel:hover { background: rgba(0, 0, 0, .04); }

/* 漢堡鈕：原站實測 25×25 @(15,18)，色 rgb(58,58,68)，桌機隱藏 */
.nav-toggle {
  display: none;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(58, 58, 68);
  cursor: pointer;
  /* 用 flex + gap 排三條線：2px 線 ＋ 6px 間距 ＝ 18px，塞得進 25px 的鈕
     （原本用 margin: 5px 0 的寫法三條線共 36px，會溢出 25px 導致 X 變形歪掉） */
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
/* 收合成 X：線距 8px（2px 線高 + 6px gap），所以上移／下移各 8px 才會交會於中心 */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 頁尾 ---------- */
/* 原站實測：黑底 #000000，白字 19px 置中，區段高 75px（pad 20/10） */
.site-footer {
  padding: 20px 0 10px;
  background: var(--footer-bg);
  color: #fff;
  text-align: center;
}
.site-footer__copy { font-size: 19px; line-height: 30.4px; margin-bottom: 15px; }  /* 原站實測：30.4 行高 + 15px 下邊距 → 區段共 75px */

/* ---------- 側邊快捷（原站右／左側浮動鈕） ---------- */
.quick-actions {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quick-actions a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 72px;         /* 14px×4字＝56 ＋ 左右 padding，不夠會溢出方塊 */
  padding: 8px 8px;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;     /* 原站是單行；不加會被擠成「預約掛／號」兩行 */
  color: #fff;
  background: rgba(0, 0, 0, .55);
}
.quick-actions a:hover { background: rgba(0, 0, 0, .75); }
.quick-actions svg { width: 24px; height: 24px; fill: currentColor; }

/* 窄桌機（992~1200）：選單放大到 15px 後，logo+選單+電話鈕擠不進一排
   → 收窄選單左右 padding 讓它留在同一排，而不是掉成三排 */
@media (min-width: 992px) and (max-width: 1200px) {
  .site-nav__link { padding-inline: 11px; }
  /* 放大選單後電話鈕會被擠到第二排（掉到 logo 下方很怪）→ 窄桌機收起來，
     側邊浮動的「立即來電」已提供同樣功能 */
  .header-tel { display: none; }
}

/* ---------- 手機（原站斷點 <992px 收成漢堡） ---------- */
@media (max-width: 991px) {
  .site-header { height: var(--header-h-mobile); }
  .site-header__inner { justify-content: space-between; padding-inline: 15px; }  /* 原站手機漢堡 x=15 */
  .site-nav { margin-left: 0; }

  /* 原站手機實測：漢堡靠左 @(15,18)，logo 162×42 置中 */
  .nav-toggle { display: flex; order: 1; }
  /* logo 要對「視窗」置中，不是對「漢堡右側的剩餘空間」置中
     （原站實測 logo x=114、寬 162 → 中心 195 = 390 的正中）
     漢堡佔左側 25px 卻無對稱配重，所以用絕對定位置中 */
  .site-logo {
    order: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .site-logo img { width: 162px; height: 42px; }
  .header-tel { display: none; }

  .site-nav {
    order: 4;
    position: absolute;
    top: var(--header-h-mobile);
    left: 0;
    right: 0;
    margin: 0;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    max-height: 0;
    overflow: hidden auto;
    transition: max-height .28s ease;
  }
  .site-nav.is-open { max-height: calc(100vh - var(--header-h-mobile)); }
  .site-nav__list { flex-direction: column; }
  .site-nav__link {
    height: auto;
    padding: 13px 20px;
    font-size: 15px;
    border-bottom: 1px solid #eee;
  }
  /* 手機不用 hover，改為展開全部子項（避免觸控裝置點不開） */
  .site-nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0;
    background: var(--bg-alt);
  }
  .site-nav__sub a { padding: 11px 34px; font-size: 14px; }

  .site-footer__copy { font-size: 15px; }

  /* 原站手機版：快捷鈕不是左側直立條，而是**貼底的橫排三格**
     （實測 y=738/視窗 800、每格約 108×49、14px）。
     沿用桌機的直立條會蓋住表單欄位 —— Dennis 截圖就是被蓋住 */
  .quick-actions {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    gap: 1px;
  }
  .quick-actions a {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    height: 49px;
    padding: 6px;
    font-size: 14px;
    background: rgba(0, 0, 0, .72);
  }
  .quick-actions img { width: 24px; }
  /* 底部固定條不要蓋住頁尾 */
  body { padding-bottom: 49px; }

  .quick-actions a { padding: 6px; font-size: 12px; }
}