/* ==========================================================================
   layout.css — 共用版型：header、footer、頁面 banner、浮動聯絡按鈕
   ========================================================================== */

/* 自訂元素外殼不參與版面（內層 markup 才是版面本體） */
site-header,
site-footer {
  display: contents;
}

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.75) /* Figma #000@75% */; /* 半透明深棕，疊在照片上 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: 80px /* Figma */;
  gap: 32px;
}
.logo img {
  height: 44px;
  width: auto;
  border-radius: var(--r-pill);
}

.main-nav {
  display: flex;
  margin-inline: auto;
  gap: clamp(40px, 5.1vw, 74px); /* Figma gap 50 + item pad 12x2 */
}
.main-nav a {
  position: relative;
  color: #fff;
  font-size: 16px;
  padding-block: 8px;
  transition: color 0.2s;
}
.main-nav a:hover {
  color: var(--c-accent);
} /* Figma Menu Hover：#FE811E */
.main-nav a.is-active {
  color: #fff;
  font-weight: 700;
}
/* active 標記：橘＋米色雙愛心（同 footer slogan 上方的愛心） */
.main-nav a.is-active::before {
  content: '';
  position: absolute;
  top: 0px;
  left: -16px;
  width: 14px;
  height: 11px;
  background: url('../images/svg/heart.svg') no-repeat center / contain;
}

.btn-reserve {
  background: transparent;
  color: #d9d9d9;
  padding: 16px 24px; /* 146×56 */
  font-size: 16px;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}
.btn-reserve app-icon {
  color: #fff;
  transition: color 0.3s ease;
}
.btn-reserve:hover {
  background: #fff;
  color: var(--c-dark);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  opacity: 1;
}
.btn-reserve:hover app-icon {
  color: var(--c-dark);
}

/* 漢堡按鈕（桌機隱藏） */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
  transition:
    transform 0.3s,
    opacity 0.3s;
}

/* ---------- 手機版全螢幕選單 ---------- */
.mobile-menu {
  display: flex;
  position: fixed;
  inset: var(--header-h) 0 0 0; /* 蓋到視窗底，頁面內容不穿出 */
  background: rgba(0, 0, 0, 0.75);
  padding: 40px 20px;
  text-align: center;
  flex-direction: column;
  gap: 48px;
  overflow: auto;
  /* 進場動畫：淡入＋下滑 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition:
    opacity 0.28s ease,
    transform 0.32s ease,
    visibility 0s linear 0.32s;
}
/* 選單開啟時 header 一併固定在視窗頂端，避免捲動後上方露出頁面內容 */
.site-header.menu-open {
  position: fixed;
}
.mobile-menu {
  align-items: center; /* 連結縮成內容寬並置中，讓 active 愛心能定位在文字左上角 */
}
.mobile-menu a {
  position: relative;
  color: #fff;
  font-size: 16px;
}
.mobile-menu a.is-active {
  font-weight: 700;
}
.mobile-menu__social {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.mobile-menu__social .icon-circle {
  width: 32px;
  height: 32px;
  color: var(--c-dark);
}

/* 連結逐項浮入（stagger） */
.mobile-menu a,
.mobile-menu__social {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.mobile-menu a:nth-child(1) {
  transition-delay: 0.05s;
}
.mobile-menu a:nth-child(2) {
  transition-delay: 0.1s;
}
.mobile-menu a:nth-child(3) {
  transition-delay: 0.15s;
}
.mobile-menu a:nth-child(4) {
  transition-delay: 0.2s;
}
.mobile-menu a:nth-child(5) {
  transition-delay: 0.25s;
}
.mobile-menu__social {
  transition-delay: 0.32s;
}

.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.28s ease,
    transform 0.32s ease;
}
.menu-open .mobile-menu a,
.menu-open .mobile-menu__social {
  opacity: 1;
  transform: none;
}
.menu-open .main-nav,
.menu-open .btn-reserve {
  visibility: hidden;
}
.menu-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.menu-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 內頁 banner（PageHeader） ---------- */
/* banner 圖 = Figma Page_HeaderBG 元件的 2x 渲染（1440×400 構圖、含光暈疊層） */
.page-banner {
  position: relative;
  height: 400px;
  background: url('../images/banner-bg.jpg') center / cover no-repeat;
}
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 19, 15, 0.55) 0%,
    rgba(23, 19, 15, 0.15) 40%,
    rgba(23, 19, 15, 0) 70%
  );
}
.breadcrumb {
  position: absolute;
  top: 110px /* Figma 文字 y≈121 */;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 16px;
  z-index: 2;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
}
.breadcrumb svg {
  display: block;
}

/* ---------- 浮動聯絡按鈕（固定於畫面右側、垂直置中，隨頁面捲動持續顯示） ---------- */
.float-contact {
  position: fixed;
  right: 80px /* Figma x=1316 */;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 50;
}
.float-contact .icon-circle {
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition:
    background-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.float-contact__top app-icon {
  transform: rotate(-90deg);
}
/* hover 態：深底白 icon（BtnFloat Property=Hover） */
.float-contact .icon-circle:hover {
  background: var(--c-dark);
  color: #fff;
}

/* ---------- Footer ---------- */
.prefooter {
  --curve-top: 180px; /* 白弧頂緣（峰頂）＝.prefooter 的 padding-top */
  position: relative;
  padding-top: var(--curve-top);
}
/* 線稿裝飾：貓＋左右花草，依 Figma Footer 定位。
   各素材原始尺寸，底部落在白弧峰頂附近（深淺依設計稿：左樹最高、貓略低、右樹最低），
   多出的底部被上層 .prefooter__curve 白弧蓋掉。 */
.prefooter__deco {
  position: absolute;
  pointer-events: none;
}
.prefooter__deco--cat {
  width: 120px;
  left: 77px;
  top: calc(var(--curve-top) - 98px);
}
.prefooter__deco--tree1 {
  width: 172px;
  left: 156px;
  top: calc(var(--curve-top) - 117px);
}
.prefooter__deco--tree2 {
  width: 242px;
  right: 40px;
  top: calc(var(--curve-top) - 78px);
}

.prefooter__curve {
  position: relative;
  background: var(--c-surface);
  border-top-left-radius: 100% 34px;
  border-top-right-radius: 100% 34px;
  text-align: center;
  padding: 28px 24px 40px;
}
.prefooter__slogan {
  position: relative;
  display: inline-block;
  margin-top: 42px;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
} /* Figma 24/34 */
.prefooter__heart {
  position: absolute;
  top: -38px;
  left: -34px;
  line-height: 0;
}
.prefooter__license {
  font-size: 14px;
  color: #000;
  margin-top: 20px;
}
.prefooter__nav {
  display: flex;
  justify-content: center;
  gap: clamp(40px, 5.1vw, 74px);
  margin-top: 48px;
}
.prefooter__nav a {
  color: var(--c-muted);
  font-size: 16px;
}
.prefooter__nav a:hover {
  color: var(--c-text);
}

.footer-bar {
  position: relative;
  background: var(--c-surface);
  padding: 24px 80px; /* Figma footer pad 80、資訊列 pad 24/0 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #171413;
}
/* 資訊列上框線只跨內容寬（Figma #D9E3EC，兩側內縮 80） */
.footer-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 80px;
  right: 80px;
  height: 1px;
  background: #d9e3ec;
}
.footer-bar__info,
.footer-bar__copyright {
  font-size: 16px;
  color: #171413;
}
.footer-bar__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px; /* Figma Frame 21121 */
}
.footer-bar__info li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-bar__info li > svg,
.footer-bar__info li > app-icon {
  flex: none;
  color: #7b7b7b;
}
.footer-bar__social a {
  color: #7b7b7b;
}
/* 項目間豎線（Figma Line：#7B7B7B 高 10） */
.footer-bar__info li + li::before {
  content: '';
  width: 1px;
  height: 10px;
  background: #7b7b7b;
  margin-right: 18px;
}
.footer-bar__social {
  gap: 10px;
}
.footer-bar__social a {
  display: inline-flex;
}

@media (min-width: 821px) {
  .mobile-menu {
    display: none;
  }
}

/* ==========================================================================
   RWD — 手機版（設計稿 390px）
   ========================================================================== */
@media (max-width: 820px) {
  :root {
    --header-h: 80px;
  } /* Figma Header_m 高 80 */

  .container {
    padding-inline: 20px;
  }

  .header-inner {
    padding-inline: 20px; /* Figma 手機 */
  }
  .main-nav,
  .btn-reserve {
    display: none;
  }
  .menu-open .main-nav {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }

  /* 手機選單：active 雙愛心標記（文字左上角） */
  .mobile-menu a.is-active::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -14px;
    width: 14px;
    height: 11px;
    background: url('../images/svg/heart.svg') no-repeat center / contain;
  }

  /* 內頁 banner：高 290、麵包屑貼近底部（Figma PageHeader_m） */
  .page-banner {
    height: 290px;
  }
  .breadcrumb {
    top: auto;
    bottom: 22px;
    left: 20px;
  }

  .prefooter {
    --curve-top: 140px; /* 手機裝飾為原尺寸，需要較高的白弧上緣容納 */
  }
  .prefooter__deco--tree2 {
    display: none; /* 手機版無右側花草（Figma Home_M footer） */
  }
  .prefooter__slogan {
    font-size: 20px;
    line-height: 28px;
  } /* Figma 手機 20/28 */
  .prefooter__license {
    font-size: 14px;
  }
  .prefooter__nav {
    display: none;
  } /* 手機版 footer 沒有導覽列 */

  /* footer 資訊列：置中兩欄、無社群 icon、Copyright 置中（Figma Footer_m） */
  .footer-bar {
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 28px;
    gap: 20px;
  }
  .footer-bar::before {
    left: 20px;
    right: 20px;
  }
  .footer-bar__info {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column; /* 直排：地址/時間一欄、電話/LINE 一欄（Figma Footer_m） */
    justify-content: center;
    gap: 18px 24px;
  }
  .footer-bar__info li + li::before {
    content: none;
  }
  .footer-bar__info li {
    font-size: 14px;
    white-space: nowrap;
  }
  .footer-bar__info li.footer-bar__social {
    display: none;
  }
  .footer-bar__copyright {
    font-size: 14px;
    text-align: center;
  }
}