@charset "UTF-8";

/* =========================================================
   Header / Nav / Mobile Menu（最終版）
   ✅ 斷點策略：
   - 桌機 + 平板橫向：顯示完整主選單
   - 平板直向 + 手機：顯示漢堡抽屜（<= 980px）
   ---------------------------------------------------------
   注意：
   - 顏色（背景漸層、品牌色）請到 base.css 調整
   - 這支檔案只管 Header / Nav / Mobile Menu 的排版與互動結構
   ========================================================= */

/* ---------- Header 基本（只管結構，不管背景色） ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(255,255,255,0.04);

  /* 高度與留白（可微調） */
  padding: 6px 0;
}

/* Header 內的 container：跟全站 gutter 同步 */
.site-header .container{
  max-width: var(--container-max);
  margin: 0 auto;

  /* ✅ 優先吃全站 --wt-gutter（base.css 你有定義），沒有才 fallback */
  padding-left: var(--wt-gutter, var(--container-gutter, 24px));
  padding-right: var(--wt-gutter, var(--container-gutter, 24px));
}

/* ---------- 桌機：LOGO + 主選單 置中 ---------- */
.nav-bar{
  height: 80px;                 /* 桌機 header 高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: relative;
}

.site-header .logo{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header .logo img{
  max-height: 64px;             /* LOGO 高度 */
  width: auto;
  display: block;
}

/* 主選單（桌機 / 平板橫向） */
.main-nav{
  display: flex;
  align-items: flex-end;
  gap: 24px;

  /* 清掉舊版殘留的置中 hack（保險） */
  position: static;
  left: auto; right: auto; top: auto;
  transform: none;
  padding: 0;
  margin: 0;
  flex: none;
}

.site-header .nav-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 9px 0;

  color: rgba(255,255,255,0.90);
  white-space: nowrap;
}

/* 中文 */
.site-header .nav-label-zh{
  font-size: 19px;
  letter-spacing: .14em;
  font-weight: 600;
}

/* 分隔線 */
.site-header .nav-divider{
  width: 84px;
  height: 2px;
  margin: 5px 0;
  background: rgba(255,255,255,0.28);
  transition: background-color .22s ease, height .22s ease, transform .22s ease;
}

/* 英文 */
.site-header .nav-label-en{
  font-size: 13px;
  letter-spacing: .14em;
  color: rgba(255,255,255,0.70);
  transition: color .22s ease;
}

/* Hover / Active */
.site-header .nav-item:hover .nav-label-zh,
.site-header .nav-item.active .nav-label-zh{
  color: var(--wt-gold-500);
}

.site-header .nav-item:hover .nav-label-en,
.site-header .nav-item.active .nav-label-en{
  color: rgba(232,217,168,0.90);
}

.site-header .nav-item:hover .nav-divider,
.site-header .nav-item.active .nav-divider{
  background: linear-gradient(90deg, var(--wt-gold-700), var(--wt-gold-500));
  transform: translateY(-1px);
}

/* ✅ CTA（預約重建諮詢）目前先停用 */
.site-header .nav-item.nav-cta{
  display: none !important;
}

/* =========================================================
   漢堡按鈕（預設桌機不顯示）
   ========================================================= */
.mobile-menu-toggle{
  display: none;               /* ✅ 桌機 / 平板橫向：不顯示 */
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
}

.mobile-menu-toggle span{
  display: block;
  height: 3.5px;
  width: 28px;
  border-radius: 999px;
  background-color: var(--wt-gold-700);
  margin-left: auto;
  box-shadow: 0 0 2px rgba(0,0,0,0.35);
}

.mobile-menu-toggle:hover span{
  background-color: var(--wt-gold-500);
}

/* =========================================================
   手機/平板直向：抽屜式漢堡選單（面板本體）
   ========================================================= */

/* 遮罩 */
.mobile-menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  z-index: 3900; /* ✅ 高於 header */
}

/* 側邊面板 */
.mobile-menu-panel{
  position: fixed;
  inset: 0 auto 0 0;
  width: 80%;
  max-width: 340px;
  background: #f7f7f7;
  box-shadow: 4px 0 16px rgba(0,0,0,.2);
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 4000; /* ✅ 高於 header */
  display: flex;
  flex-direction: column;
}

.mobile-menu-topbar{
  background: var(--wt-gold-700);
  height: 56px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px;
}

.mobile-menu-close{
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 2px;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/* 清單 */
.mobile-menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-list > li{
  margin: 0;
  padding: 0;
  background: #f1f1f1;
  border-bottom: 1px solid #e0e0e0;
}

.mobile-menu-list > li > a{
  display: block;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 700;
  color: #333;
}

/* 有子選單的一列 */
.mobile-menu-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
}

.mobile-menu-main-link{
  font-size: 17px;
  font-weight: 700;
  color: #333;
  flex: 1;
}

.submenu-toggle{
  border: none;
  background: none;
  padding: 0 4px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--wt-gold-700);
}

/* 子選單 */
.mobile-submenu{
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

.has-submenu.is-open > .mobile-submenu{
  display: block;
}

.mobile-submenu li a{
  display: block;
  padding: 12px 40px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-submenu li a:hover{
  background: #f5f5f5;
}

/* 底部聯絡列 */
.mobile-menu-bottom-bar{
  background: var(--wt-gold-700);
  padding: 10px 18px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom-icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.bottom-icon-btn:hover,
.bottom-icon-btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  filter: brightness(1.03);
  outline: none;
}

.bottom-icon-btn:active{
  transform: translateY(0) scale(.98);
}

/* LINE 圖示（如果你有用 class="icon-line"） */
.mobile-menu-bottom-bar .bottom-icon-btn.icon-line{
  background-image: url("/images/line-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72%;
  color: transparent;
}

/* 開啟狀態（由 JS 加 class） */
.mobile-menu-panel.is-open{ transform: translateX(0); }
.mobile-menu-backdrop.is-open{ opacity: 1; visibility: visible; }

/* =========================================================
   ✅ 唯一斷點：980px 以下進漢堡（平板直向/手機）
   - iPad 直向：768  → 進漢堡 ✅
   - iPad 橫向：1024 → 保持完整選單 ✅
   ========================================================= */
:root{
  --wt-mobile-header-h: 52px; /* 手機/平板直向 header 高度 */
  --wt-mobile-topbar-h: 56px; /* mobile-menu-topbar 高度 */
}

@media (max-width: 980px){
  .nav-bar{
    height: 52px;
    justify-content: space-between; /* 左 LOGO 右 漢堡 */
    gap: 0;
  }

  .site-header .logo img{
    max-height: 44px;
  }

  /* ✅ 切到漢堡 */
  .main-nav{ display: none; }
  .mobile-menu-toggle{ display: flex; }

  /* ✅ 面板從 header 底下開始（避免第一列被蓋） */
  .mobile-menu-panel{
    top: calc(var(--wt-mobile-header-h) + env(safe-area-inset-top, 0px));
    height: calc(100vh - var(--wt-mobile-header-h) - env(safe-area-inset-top, 0px));
  }

  /* ✅ 清單可捲動：扣掉 topbar + bottom bar */
  .mobile-menu-list{
    max-height: calc(
      100vh
      - var(--wt-mobile-header-h)
      - var(--wt-mobile-topbar-h)
      - var(--wt-bottom-bar-h, 72px)
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    );
  }
}

/* ✅ 桌機 / 平板橫向：完全不顯示抽屜組件（對齊 980 的切換點） */
@media (min-width: 981px){
  .mobile-menu-panel,
  .mobile-menu-backdrop{
    display: none;
  }
}


/* =========================================================
   Desktop dropdown (Luxury) — About submenu
   只在桌機啟用
   ========================================================= */
@media (min-width: 981px){

  /* 讓 wrapper 像 nav-item 一樣排版 */
  .site-header .main-nav .nav-item-wrap{
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }

  /* 下拉面板：霧面、淡金邊、柔陰影 */
  .site-header .main-nav .nav-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);

    min-width: 220px;
    padding: 10px;
    border-radius: 16px;

    background: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(201,151,0,.22);
    box-shadow: 0 22px 60px rgba(0,0,0,.14);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 1000;
  }

  /* 小三角（精品感） */
  .site-header .main-nav .nav-dropdown::before{
    content:"";
    position:absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;

    background: rgba(255,255,255,.78);
    border-left: 1px solid rgba(201,151,0,.18);
    border-top: 1px solid rgba(201,151,0,.18);
    rotate: 45deg;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* 顯示條件：hover 或鍵盤 focus-within（可無障礙） */
  .site-header .main-nav .nav-item-wrap.has-dropdown:hover .nav-dropdown,
  .site-header .main-nav .nav-item-wrap.has-dropdown:focus-within .nav-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  /* 子項目：左對齊、細節高級 */
  .site-header .main-nav .nav-dd-item{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 12px;
    border-radius: 12px;

    text-decoration: none;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .04em;

    color: rgba(17,24,39,.86);
    border: 1px solid transparent;

    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    white-space: nowrap;
  }

  /* hover：極淡金框＋微浮起 */
  .site-header .main-nav .nav-dd-item:hover{
    background: rgba(201,151,0,.10);
    border-color: rgba(201,151,0,.22);
    transform: translateY(-1px);
  }

  /* 讓下拉面板離開時不要太難離開：留一點 hover 緩衝區 */
  .site-header .main-nav .nav-item-wrap.has-dropdown{
    padding-bottom: 12px; /* 增加 hover hit area */
    margin-bottom: -12px;
  }
}

/* 手機不顯示桌機 dropdown（手機你已經有側欄子選單） */
@media (max-width: 980px){
  .site-header .main-nav .nav-dropdown{ display:none; }
}


/* 讓下拉可以超出容器，不被裁切 */
.site-header,
.site-header .container,
.site-header .nav-bar{
  overflow: visible !important;
}

@media (min-width: 981px){

  .site-header .main-nav .nav-item-wrap{
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }

  /* 下拉面板：改成貼住，不留縫隙 */
  .site-header .main-nav .nav-dropdown{
    position: absolute;
    top: 100%;               /* ✅ 貼住 */
    left: 50%;
    transform: translateX(-50%) translateY(8px);

    min-width: 220px;
    padding: 10px;
    margin-top: 10px;        /* ✅ 用 margin 做距離（不會造成 hover 縫隙） */
    border-radius: 16px;

    background: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(201,151,0,.22);
    box-shadow: 0 22px 60px rgba(0,0,0,.14);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 9999;
  }

  /* ✅ hover 橋接區：用透明區把滑鼠路徑「鋪平」 */
  .site-header .main-nav .nav-item-wrap.has-dropdown::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;           /* 這段就是橋 */
    background: transparent;
  }

  .site-header .main-nav .nav-item-wrap.has-dropdown:hover .nav-dropdown,
  .site-header .main-nav .nav-item-wrap.has-dropdown:focus-within .nav-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  .site-header .main-nav .nav-dd-item{
    display: block;
    padding: 10px 12px;
    border-radius: 12px;

    text-decoration: none;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .04em;

    color: rgba(17,24,39,.86);
    border: 1px solid transparent;

    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    white-space: nowrap;
  }

  .site-header .main-nav .nav-dd-item:hover{
    background: rgba(201,151,0,.10);
    border-color: rgba(201,151,0,.22);
    transform: translateY(-1px);
  }
}

@media (max-width: 980px){
  .site-header .main-nav .nav-dropdown{ display:none; }
}




/*--------------------------------------------------------------------------*/

/* =========================================================
   Footer（企業版：清楚層級 + RWD）
   ========================================================= */
/* =========================================================
   Footer（極簡版：公司名稱 + 3按鈕 + 版權）
   ========================================================= */



/* 3區塊：左（品牌）/ 中（按鈕）/ 右（版權） */
.footer-simple{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

/* 左側：公司 */
.fs-title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255,255,255,0.95);
}
.fs-sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.66);
  letter-spacing: .04em;
}

/* 中間：按鈕 */
.fs-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.fs-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.fs-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.18);
}

.fs-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,168,93,0.22);
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  letter-spacing: .08em;
}

.fs-text{
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 右側：版權 */
.fs-copy{
  text-align: right;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* RWD：平板/手機改成上下堆疊 */
@media (max-width: 900px){
  .footer-simple{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .fs-copy{
    text-align: center;
  }
}


/* =========================
   Footer（Mobile Slim）
   ========================= */
@media (max-width: 600px){

  /* 1) 整體上下變薄 */
  

  /* 2) 容器改成直向、間距縮小 */
  .footer-simple{
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    align-items: center;
    text-align: center;
  }

  /* 3) 公司名稱縮一點（不要佔高度） */
  .fs-title{
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* 4) 三顆按鈕：高度/間距是最大元兇 */
  .fs-actions{
    display: flex;
    justify-content: center;
    gap: 10px !important;
    margin: 0 !important;
  }

  /* 按鈕本體變薄 + 字不要太大 */
  .fs-btn{
    padding: 8px 10px !important;
    border-radius: 999px;
    font-size: 13px !important;
    line-height: 1 !important;
    min-height: 40px;          /* ✅ 仍保留好點擊（iOS 建議至少 40px） */
    display: inline-flex;
    align-items: center;
    gap: 6px !important;
  }

  /* icon 縮小一點 */
  .fs-ico{
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* 5) 版權行距縮小 */
  .fs-copy{
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    opacity: .9;
  }
}



/* =========================================================
   頁尾 LINE 圖示修正
   ========================================================= */

/* 讓 fs-ico 容器能顯示背景圖 */
.fs-btn .fs-ico.icon-line {
    display: inline-block;
    width: 20px;              /* 調整圖示寬度 */
    height: 20px;             /* 調整圖示高度 */
    background-image: url(../images/line-logo.png); /* 複用手機版的白色 LINE 圖示 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0;          /* 移除原本 emoji 可能帶有的邊距 */
}

/* 確保按鈕內的文字與圖示垂直居中對齊 */
.fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;                 /* 圖示與文字的間距 */
}

/* 如果你的頁尾按鈕背景太淺，看不清白色圖示，可以單獨幫 LINE 按鈕加深背景 */
.fs-actions a[href*="lin.ee"] {
    background-color: #06c755; /* LINE 官方綠色 */
    color: #fff;               /* 文字改白色 */
    border: none;
}



/* =========================================================
   頁尾聯絡按鈕顏色強化 (fs-actions)
   ========================================================= */

/* 1. 撥打電話：使用品牌深藍 */
.fs-actions a[href^="tel:"] {
    background-color: #0d3b66 !important; /* 武泰深藍 */
    color: #ffffff !important;
    border: none !important;
}

/* 2. E-mail：使用品牌金色 (與 Logo 呼應) */
.fs-actions a[href^="mailto:"] {
    background-color: #c9a85d !important; /* 武泰金 */
    color: #ffffff !important;
    border: none !important;
}

/* 3. LINE：使用官方綠色 */
.fs-actions a[href*="lin.ee"] {
    background-color: #06c755 !important; 
    color: #ffffff !important;
    border: none !important;
}

/* 讓按鈕內的文字與 Emoji/圖示 更好看 */
.fs-btn {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 增加一點陰影，讓按鈕跳出來 */
    white-space: nowrap;                   /* 拯救字體：禁止換行 */
    flex: 1;                               /* 讓三顆按鈕在手機版等寬 (選用) */
    justify-content: center;
    font-weight: 600 !important;           /* 字體加粗更好讀 */
}

/* 針對 Emoji 的微調：讓它大一點點 */
.fs-ico {
    font-size: 16px;
    margin-right: 4px;
}


/* =========================================================
   電腦版薄型 Footer (Desktop Slim)
   ========================================================= */
.site-footer {
    padding: 6px 0;          /* 大幅縮減上下間距 */
   
}

.footer-simple {
    display: flex;
    justify-content: space-between; /* 讓 左、中、右 分散排列 */
    align-items: center;            /* 垂直置中對齊 */
}

/* 左：公司名稱 */
.fs-title {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    margin: 0;
}

/* 中：聯絡按鈕組 */
.fs-actions {
    display: flex;
    gap: 10px;                /* 按鈕之間的距離 */
    margin: 0;
}

/* 讓按鈕在 Footer 裡變小、變薄 */
.fs-actions .fs-btn {
    padding: 3px 6px !important; /* 縮小按鈕內距 */
    font-size: 13px !important;   /* 稍微縮小字體 */
    min-height: 34px !important;  /* 強制縮減高度 */
    border-radius: 99px;           /* 稍微方正一點點，看起來更精鍊 */
}

/* 右：版權宣告 */
.fs-copy {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.02em;
}

/* =========================================================
   RWD：平板與手機自動適應
   ========================================================= */
@media (max-width: 1024px) {
    .footer-simple {
        flex-direction: column;   /* 空間不足時轉為垂直 */
        gap: 15px;
        text-align: center;
    }
}