/* ==========================================================================
   layout.css — 版面結構：頁首、頁尾、主內容
   ========================================================================== */

/* ===== 頁首（依設計稿：固定貼頂、半透明黑遮罩疊在內容上） ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  width: 100%;
  max-width: var(--container-max-width);
  min-height: 6.125rem; /* 98px，依設計稿 */
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-xl);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
}

/* Logo：設計稿 260×50（含「凱旋國際」中文字 svg） */
.site-header__logo {
  display: block;
  width: auto;
  height: 3.125rem; /* 50px */
}

/* ===== 主導航（白字 20px、gap 32px、靠右） ===== */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  position: relative;
  color: var(--text-color-inverse);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xl);
  white-space: nowrap;
  padding-bottom: var(--spacing-sm);
  transition: color var(--transition-base);
}

/* 點綴：底部紅色底線，hover 時由中間往兩側展開，current 維持滿底線 */
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: var(--border-radius-full);
  transform: translateX(-50%);
  transition: width var(--transition-base);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
  color: var(--color-accent);
}

.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after {
  width: 100%;
}

/* ===== RWD 漢堡按鈕（桌機隱藏，行動裝置顯示） ===== */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  height: 28px;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-color-inverse);
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

/* ===== 主內容（header 為絕對定位，main 不需補留白；Hero 自己處理頂部留白） ===== */
.site-main {
  min-height: 50vh;
}

/* ==========================================================================
   頁尾（依設計稿：黑底白字，三大區）
   ========================================================================== */
.site-footer {
  background-color: var(--bg-color-darker);
  color: var(--text-color-inverse);
}

.site-footer__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-md);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "brand . social"
    "divider divider divider"
    "cols cols cols";
  gap: var(--spacing-lg) var(--spacing-md);
  align-items: center;
}

.site-footer__brand {
  grid-area: brand;
}

.site-footer__social {
  grid-area: social;
}

.site-footer__divider {
  grid-area: divider;
}

.site-footer__cols {
  grid-area: cols;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
}

.site-footer__logo {
  display: block;
  width: auto;
  height: 3.125rem; /* 50px，含「凱旋國際」文字 */
}

/* 社群圓圖示：47×45（依設計稿） */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 1.75rem; /* 28px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9375rem; /* 47px */
  height: 2.8125rem; /* 45px */
  transition: opacity var(--transition-base);
}

.site-footer__social a:hover {
  opacity: 0.7;
}

.site-footer__social img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== 細灰分隔線 ===== */
.site-footer__divider {
  margin: var(--spacing-xl) 0 var(--spacing-2xl);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== 三欄：聯絡 / 雙店 / 地圖 ===== */
.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 261px) minmax(0, 1fr) 301px;
  gap: var(--spacing-2xl);
  align-items: flex-start;
}

/* --- 左：聯絡資訊 --- */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-color-inverse);
  font-size: var(--font-size-base);
}

.site-footer__contact-item a {
  color: var(--text-color-inverse);
}

.site-footer__contact-item a:hover {
  color: var(--color-accent);
}

/* footer icon 統一尺寸 */
.site-footer__icon {
  flex-shrink: 0;
  width: auto;
  height: 1.25rem;
}

/* LINE 標籤「記得加小老鼠」：紅色漸層膠囊（左濃 → 右淡，依設計稿） */
.site-footer__line-note {
  margin-left: var(--spacing-sm);
  padding: 2px var(--spacing-md);
  background-image: linear-gradient(
    to left,
    rgba(131, 6, 6, 0.2) 8.4%,
    #830606 101.9%
  );
  color: var(--text-color-inverse);
  font-size: var(--font-size-sm);
}

/* --- 中：雙店地址 --- */
.site-footer__stores {
  display: flex;
  gap: var(--spacing-2xl);
}

.site-footer__store {
  flex: 1;
  min-width: 0;
}

.site-footer__store-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

/* 店名膠囊：白邊框、無底色 */
.site-footer__store-name {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--text-color-inverse);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
}

.site-footer__store-address {
  margin: 0;
  color: var(--text-color-inverse);
  font-size: var(--font-size-base);
}

/* --- 右：地圖輪播（301×120 容器） --- */
.site-footer__map {
  position: relative;
  width: 100%;
  max-width: 18.8125rem;
  aspect-ratio: 301 / 120;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.05); /* iframe 載入前的 placeholder */
}

.site-footer__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.site-footer__map-frame.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 分頁點 */
.site-footer__map-dots {
  position: absolute;
  left: 50%;
  bottom: var(--spacing-sm);
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-xs);
  z-index: 2;
}

.site-footer__map-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-full);
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.site-footer__map-dot.is-active {
  background-color: var(--text-color-inverse);
}

/* ===== Copyright（置中） ===== */
.site-footer__copyright {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-xl);
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-base);
}

.site-footer__copyright a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}

.site-footer__copyright a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* 桌機：兩段同一行（之間以空白分隔） */
.site-footer__copyright-line {
  display: inline;
}

.site-footer__copyright-line + .site-footer__copyright-line::before {
  content: " ";
  white-space: pre;
}