/* ============================================
   4-LAYOUT — 全站骨架（header / main / footer）
   數值來源：D:\figma-export\header|footer 實測
   ============================================ */

/* ── 頁首 ──────────────────────────────────
   設計稿 1920×60，紅底，內容區 1170 置中。
   sticky 是文章內頁左右欄 sticky 的定位基準（--header-h）。 */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-brand);
  min-height: var(--header-h);
  padding-block: 13px;
}

.site-header__inner {
  width: 100%;
  max-width: 1170px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  /* 圖 34 高，點擊區補到 44（外距抵銷，不影響頁首高度） */
  padding-block: 5px;
  margin-block: -5px;
}
.site-header__logo img {
  width: 168px;
  height: 34px;
}

.site-header__group {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 文字約 22px 高，點擊區用內距撐到 42 —— 外距抵銷，頁首高度與外觀不變。
   （桌機是滑鼠操作，但更大的點擊區對誰都好按。） */
.site-nav__link {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-normal);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--ease-base);
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: #fff;
  opacity: 0.75;
}
/* 目前所在的區塊：白色底線條。原本用 text-decoration，線太細、
   又跟 hover 的半透明混在一起，紅底白字下幾乎看不出來。 */
.site-nav__link.is-active {
  position: relative;
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.site-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}
.site-nav__link.is-active:hover,
.site-nav__link.is-active:focus-visible { opacity: 1; }

/* 漢堡鈕：桌機隱藏，≤1024 才出現 */
.site-header__toggle {
  display: none;
  width: 44px;
  height: 44px; /* 觸控友善 */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition:
    transform var(--ease-base),
    opacity var(--ease-base);
}
.site-header__toggle-bar {
  margin-inline: auto;
  position: relative;
}
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-header__toggle-bar::before {
  top: -8px;
}
.site-header__toggle-bar::after {
  top: 8px;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar {
  background: transparent;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before {
  top: 0;
  transform: rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-main {
  display: block;
}

/* ── 頁尾 ──────────────────────────────────
   設計稿 1920×589，三條橫帶：情境照 209 / 紅底 314 / 深紅版權列 66。 */
.site-footer {
  margin-top: 0;
  padding-block: 0;
  background: none;
}

.site-footer__media {
  line-height: 0;
}
.site-footer__media img {
  display: block;
  width: 100%;
  /* 設計稿 209。手機端這條情境照只是裝飾，收到 90 讓頁尾短一點。 */
  height: clamp(90px, 11vw, 209px);
  object-fit: cover;
}

.site-footer__main {
  background: var(--color-brand);
  padding-block: 66px;
}

.site-footer__inner {
  width: 100%;
  /* 設計稿 Frame 1078 的 1284 是「內容寬」，不含左右內距。
     原本寫 max-width: 1284px 會讓內容只剩 1284 − 2×48 = 1188，
     放不下 628（品牌）＋ 244（間距）＋ 412（導覽）＝ 1284，導覽整塊被擠到下一行。 */
  max-width: calc(1284px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-wrap: wrap; /* 極窄時的安全網，正常情況不會觸發 */
  align-items: flex-start;
  justify-content: space-between;
  /* 間距交給 space-between：內容寬 1284 − 628 − 412 = 244，正好是設計稿的值，
     視窗變窄時會自動收斂。原本用 12vw 會隨視窗長大而不管剩餘空間，反而撐爆。 */
  gap: var(--space-10);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 49px;
  /* 設計稿 Frame 1077 為 628×181 的固定高度框，logo 與文案在其中垂直置中。 */
  min-height: 181px;
}
.site-footer__logo {
  width: 206px;
  height: 94px;
  flex-shrink: 0;
}

.site-footer__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 20px */
  /* 設計稿此欄 373 寬，副標剛好單行；不給寬度會被 flex 壓窄而換行。 */
  width: 373px;
  max-width: 100%;
}
.site-footer__tagline {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.15; /* 20px → 23px */
  color: #fff;
}
.site-footer__rule {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid #fff;
}
.site-footer__lede {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.1875; /* 16px → 19px，設計稿為單行 */
  color: #fff;
}

.site-footer__nav {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--space-8), 5vw, 80px);
  flex-shrink: 0; /* 不讓 flex 壓窄導致欄內文字換行 */
}

.site-footer__legal {
  background: var(--color-brand-dark);
  min-height: 66px;
  display: flex;
  align-items: center;
  padding-block: var(--space-3);
}
/* 手機底部有固定的聯絡列，版權列再多墊一段，字才不會貼著它。
   墊在深紅色帶裡而不是 body —— 那樣會在紅色頁尾下方露出一條白。 */
@media (max-width: 768px) {
  .site-footer__legal { padding-bottom: var(--space-8); }
}
.site-footer__legal-inner {
  width: 100%;
  max-width: 1284px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: center; /* 整列置中 */
  gap: var(--space-8);
  text-align: center;
}
.site-footer__copyright,
.site-footer__policies {
  margin: 0;
  /* 設計稿是 14px；原本壓到 10～11px 是為了擠成一行，但手機端已改直向排列，
     不需要犧牲易讀性（中文 11px 以下在手機上很吃力）。 */
  font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem); /* 12 → 14px */
  line-height: 1.2; /* 設計稿 Inter AUTO，14px→17px（1.214） */
  color: #fff;
}
.site-footer__policy-link {
  color: #fff;
  text-decoration: none;
}
.site-footer__policy-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ── ≤1200：導覽收成漢堡 ──
   桌機列需要 logo 168 ＋ gap 36 ＋ 導覽 712 ＋ gap 36 ＋ LINE 鈕 90 ＝ 1042，
   加上左右內距共 1138。原本斷點設 1024，1025～1200 這段導覽會吃掉右內距、
   在沒有垂直捲軸的短頁面（例如 404）直接把整頁推寬。 */
@media (max-width: 1200px) {
  .site-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 讓選單面板「從 header 後方滑下來」：
     面板往上位移自身高度後會落在 header 那一列與更上方，
     用 ::before 把紅底獨立成一層疊在面板之上，遮住那一段。

     注意：面板是 .site-header__inner 的子元素，所以 inner 不能有 z-index ——
     一旦它建立堆疊脈絡，面板就被關在裡面，紅底那層蓋不到，
     收合時整塊會從紅色列前面掃過去。改成只把 logo 與漢堡鈕抬到紅底之上，
     三層就都在 .site-header 同一個脈絡裡比較：面板 0 ＜ 紅底 1 ＜ logo／漢堡 2。 */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-brand);
    z-index: 1;
  }
  .site-header__logo,
  .site-header__toggle {
    position: relative;
    z-index: 2;
  }

  /* 手機選單：白底面板，用 transform 做進出場。
     面板「全程保持算繪」——不用 visibility／display 切換：瀏覽器不會對從未
     算繪過的元素跑轉場，那正是初次開啟直接跳出來、第二次之後才有動畫的原因。
     收起時改由 JS 上 inert 屬性擋掉 Tab 與無障礙樹。 */
  .site-header__group {
    position: absolute;
    /* 用 100% 而不是 --header-h：頁首實際高度會被 logo／漢堡鈕（44）＋ 上下內距
       撐得比 60 高，寫死 60 會讓面板的上內距被藏在紅列後面。 */
    inset: 100% 0 auto 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* 上內距原本只有 8px，第一個項目（最新優惠）幾乎貼著紅色列，放寬到 20。 */
    padding: var(--space-5) var(--container-pad) var(--space-6);
    background: #fff;
    border-bottom: 3px solid var(--color-brand);

    /* 整塊藏到 header 後方；多退 2px 讓次像素捨入不會把白邊露在紅列下緣 */
    transform: translateY(calc(-100% - 2px));
    /* 陰影收起時用透明色：面板永遠算繪，實色陰影會一直漏在頁首下方 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0);
    will-change: transform;
    transition:
      transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 240ms ease;
  }
  .site-header__group.is-open {
    transform: translateY(0);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }

  /* 項目依序淡入：整塊一起落下太生硬，錯開 24ms 讓進場有層次。
     收起時不給 delay，整批一起收，關閉才不會拖泥帶水。 */
  .site-header__group .site-nav__item,
  .site-header__group .btn-line {
    opacity: 0;
    translate: 0 -6px;
    transition:
      opacity 180ms ease,
      translate 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .site-header__group.is-open .site-nav__item,
  .site-header__group.is-open .btn-line {
    opacity: 1;
    translate: 0;
  }
  .site-header__group.is-open .site-nav__item:nth-child(1) {
    transition-delay: 90ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(2) {
    transition-delay: 114ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(3) {
    transition-delay: 138ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(4) {
    transition-delay: 162ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(5) {
    transition-delay: 186ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(6) {
    transition-delay: 210ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(7) {
    transition-delay: 234ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(8) {
    transition-delay: 258ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(9) {
    transition-delay: 282ms;
  }
  .site-header__group.is-open .site-nav__item:nth-child(10) {
    transition-delay: 306ms;
  }
  .site-header__group.is-open .btn-line {
    transition-delay: 300ms;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__item + .site-nav__item {
    border-top: 1px solid var(--color-border);
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    padding-block: var(--space-3);
    min-height: 48px;
    color: var(--color-heading); /* 白底改深棕字 */
    font-size: var(--fs-base);
  }
  .site-nav__link:hover,
  .site-nav__link:focus-visible {
    color: var(--color-brand);
    opacity: 1;
  }
  /* 白底面板上不用白線，改回紅字；底線條也要關掉。 */
  .site-nav__link.is-active {
    color: var(--color-brand);
    text-decoration: none;
  }
  .site-nav__link.is-active::after { display: none; }

  /* 白底面板上的 LINE 鈕需要邊框才看得出範圍 */
  .site-header__group .btn-line {
    margin-top: var(--space-4);
    align-self: flex-start;
    border: 1px solid var(--color-brand);
    min-height: 44px;
    padding-inline: var(--space-5);
  }
}

/* ── ≤1200：頁尾左右兩區已擠不下（988 的固定寬度 ＋ 間距），改直向 ── */
@media (max-width: 1200px) {
  .site-footer__inner {
    flex-direction: column;
    gap: var(--space-10);
  }
}

/* ── ≤768：頁尾品牌區改直向 ── */
@media (max-width: 768px) {
  .site-footer__main {
    padding-block: var(--space-10);
  }
  .site-footer__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    min-height: 0;
  }
  /* 桌機用設計稿的 373 固定寬讓副標單行；手機視窗只有 375，
     固定寬會連同左右內距一起超出 → 右側出現白條，這裡改回滿版。 */
  .site-footer__pitch {
    width: 100%;
  }
  .site-footer__legal-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
  }
}

/* ── ≤640：手機 ──
   三組導覽原本是直向堆疊，11 個連結 × 45 高 ≈ 500px，頁尾長到誇張。
   改成兩欄並排（快速導覽／服務地區），只有兩個項目的「申辦與方案諮詢」
   跨滿整列、項目橫排 —— 高度大約砍掉四成。 */
@media (max-width: 640px) {
  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .footer-nav:last-child {
    grid-column: 1 / -1;
  }

  /* 手機頁尾整體再收一階：logo 縮小、上下內距與區塊間距各收 8。 */
  .site-footer__main {
    padding-block: var(--space-8);
  }
  .site-footer__inner {
    gap: var(--space-8);
  }
  .site-footer__logo {
    width: 160px;
    height: auto;
  }
  .site-footer__brand {
    gap: var(--space-4);
  }
  .site-footer__pitch {
    gap: var(--space-3);
  }
}

/* ── 觸控目標 ──
   頁尾的連結在桌機是 18～20px 高，手指點不準（建議 ≥44）。
   用內距把點擊區撐開、同時把列表間距收掉，整體節奏才不會變鬆散。
   斷點取 1200 —— 本站在 1200 就切換成漢堡選單，那之下都當成觸控版型。 */
@media (max-width: 1200px) {
  .site-footer__policies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--space-4);
  }
  .site-footer__policy-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================
   Mega menu
   設計稿沒有這一塊，依主題既有語彙設計：
   白底面板、紅色標題、淡黃分隔線，與 header 的紅底形成對比。
   ============================================ */

.site-nav__item--mega {
  position: relative;
}

.site-nav__caret {
  display: none;
} /* 桌機用 hover / focus-within，不需要按鈕 */

.mega {
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 0;
  z-index: var(--z-dropdown);
  width: max-content;
  min-width: 260px;
  max-width: min(360px, calc(100vw - var(--space-8)));
  margin-top: 13px; /* 對齊 header 的下內距，讓面板貼齊紅底下緣 */
  padding-top: 10px; /* 留給指向箭頭 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* visibility 是離散屬性：寫 180ms 會在一半（90ms）就跳成 hidden，
     淡出永遠播不完。改成 0s＋延遲，收起時等淡出結束才真的藏起來。 */
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
}

/* 滑鼠移入或鍵盤 focus 進入項目時開啟。
   用 :focus-within 讓 Tab 鍵也能展開，不必額外寫 JS。 */
.site-nav__item--mega:hover .mega,
.site-nav__item--mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s;
}

/* 指向該選單項目的小三角。原本是紅色（配合已移除的紅色標頭），
   現在面板頂端就是白底清單，三角要跟著改成面板色才接得上。 */
.mega::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  translate: -50% 0;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: var(--color-bg);
}

.mega__inner {
  overflow: hidden;
  background: var(--color-bg);
  border-radius: 12px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
}

.mega__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
}
/* 每一項左側一顆紅點，滑過時整列淡紅底、文字轉紅、紅點放大 */
.mega__link {
  position: relative;
  display: block;
  padding: 10px var(--space-3) 10px 26px;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--ease-base);
}
.mega__link::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 19px;
  width: 6px;
  height: 6px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  transition: scale var(--ease-base);
}
.mega__link:hover,
.mega__link:focus-visible {
  background: var(--color-brand-soft);
}
.mega__link:hover::before,
.mega__link:focus-visible::before {
  scale: 1.5;
}

.mega__label {
  display: block;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--color-text);
  white-space: nowrap;
  transition: color var(--ease-base);
}
.mega__link:hover .mega__label,
.mega__link:focus-visible .mega__label {
  color: var(--color-brand);
}
/* 目前正在看的那一頁：淡紅底、紅字、紅點放大並補一圈外光暈，
   跟 hover 用同一套語彙，但 hover 會退掉、這個不會。 */
.mega__link.is-current {
  background: var(--color-brand-soft);
}
.mega__link.is-current .mega__label {
  font-weight: var(--fw-medium);
  color: var(--color-brand);
}
.mega__link.is-current::before {
  scale: 1.5;
  box-shadow: 0 0 0 3px rgba(230, 67, 62, .22);
}
.mega__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* ── ≤1200：改為手風琴，收在漢堡選單內（與上面的漢堡斷點一致） ── */
@media (max-width: 1200px) {
  .site-nav__item--mega {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  /* 展開鈕。箭頭原本是白色 —— 但手機選單面板是白底，六顆按鈕等於隱形，
     使用者完全看不到可以進子頁的入口。改成紅色箭頭＋淡紅圓底，一眼看得出可以點。 */
  .site-nav__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* 觸控友善 */
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--ease-base);
  }
  .site-nav__caret span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-brand-soft);
    border-radius: var(--radius-full);
    transition:
      background var(--ease-base),
      rotate var(--ease-base);
  }
  .site-nav__caret span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-brand);
    border-bottom: 2px solid var(--color-brand);
    rotate: 45deg;
    translate: 0 -2px;
  }
  .site-nav__caret[aria-expanded="true"] span {
    background: var(--color-brand);
    rotate: 180deg;
  }
  .site-nav__caret[aria-expanded="true"] span::before {
    border-right-color: #fff;
    border-bottom-color: #fff;
  }

  .mega {
    position: static;
    translate: none;
    grid-column: 1 / -1;
    /* 桌機是浮動小面板（max-content 寬、有上箭頭）；手風琴要撐滿選單欄寬。 */
    width: auto;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    transform: none;
    opacity: 1;
    /* 展開動畫：grid-template-rows 0fr → 1fr。
       子選單的高度會隨項目數變動，用 max-height 得先猜一個數字 ——
       猜小了會切掉、猜大了收合會「延遲一段才開始動」。 */
    display: grid;
    grid-template-rows: 0fr;
    /* 收起狀態不用 visibility: hidden ——
       瀏覽器不會替「從未算繪過」的元素跑轉場，第一次展開會直接跳到終點（突然出現）。
       面板全程保持算繪，改由 JS 上 inert 屬性擋掉 Tab 與無障礙樹。 */
    transition: grid-template-rows 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* grid 子層必須能被壓到 0，否則內容會把列撐開。
     只靠外框長高的話，內容是「整塊已經畫好、被裁切逐漸露出」，
     第一次展開看起來會像突然蹦出來 —— 讓內容自己也淡入並往下帶一點位移，
     視覺上才是「滑出來」而不是「出現」。 */
  .mega__inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    translate: 0 -10px;
    transition:
      opacity 200ms ease,
      translate 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* 手機只由 .is-open 控制，不跟著 hover / focus-within 開 */
  .site-nav__item--mega.is-open .mega {
    grid-template-rows: 1fr;
  }
  /* 內容比外框晚一點點起步，先長出空間再把內容送進來 */
  .site-nav__item--mega.is-open .mega__inner {
    opacity: 1;
    translate: 0;
    transition-delay: 60ms;
  }

  .mega::before {
    display: none;
  } /* 手風琴沒有指向對象，不要三角 */
  .mega__inner {
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: none;
  }
  .mega__list {
    padding: var(--space-2) var(--space-3);
  }
  .mega__desc {
    display: none;
  } /* 手機收起說明，只留項目名稱 */
}