/* ============================================================
 * 取代 fullPage.js 由 JS 動態產生的版面規則
 * （舊站 .section 的高度與垂直置中原本是 fullpage.js 用
 *   .fp-section / .fp-table / .fp-tableCell 加上去的）
 * ============================================================ */
html, body { margin: 0; padding: 0; }

#fullpage .section {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  align-items: center;   /* 等同 fp-tableCell 的 vertical-align: middle */
  width: 100%;
}
#fullpage .section > .container-fluid { width: 100%; }

/* 底部箭頭可點擊 */
.bottom-icon_arrow { cursor: pointer; }

/* .fixed-bottom 是整條固定在視窗底的橫列（z-index 1030），空白處會攔截點擊，
   蓋住下方的 reCAPTCHA 與送出鈕，導致「點不到、按不動」。
   讓容器本身穿透點擊，只有實際的圖示（箭頭／LINE）可點。 */
.row.fixed-bottom { pointer-events: none; }
.row.fixed-bottom .bottom-icon_arrow,
.row.fixed-bottom .bottom-icon_line,
.row.fixed-bottom a { pointer-events: auto; }

/* 手機／平板：不強制滿版高度，讓內容自然流動 */
@media (max-width: 991px) {
  #fullpage .section {
    min-height: auto;
    display: block;
    padding-top: 90px;
    padding-bottom: 60px;
  }
  /* 聯絡表單在最後一頁，底部要留白，讓送出鈕不被固定底列蓋住 */
  #fullpage #section4 { padding-bottom: 110px; }
  /* .section4-box 的 margin-bottom:-15% 是桌機的版面手法，在手機會把表單往下拉、
     吃掉上面那段留白，送出鈕又被固定底列壓住。手機不需要這個負邊距。 */
  #fullpage #section4 .section4-box { margin-bottom: 0; }
}

/* ============================================================
 * 修正 Tailwind 與 Bootstrap 的 class 撞名
 * Tailwind 的 .collapse = visibility:collapse（會讓選單隱形），
 * Bootstrap 的 .collapse 只是「可收合區塊」，靠 display 控制。
 * 這裡把 visibility 搶回來，收合行為仍交給 Bootstrap 的 display 規則。
 * ============================================================ */
.full-img .collapse,
#navbarNav.collapse {
  visibility: visible !important;
}

/* 手機版：選單預設收起，點漢堡才展開（.show 由 JS 切換） */
@media (max-width: 991px) {
  #navbarNav.collapse:not(.show) { display: none; }
  #navbarNav.collapse.show { display: block; }

  /* 舊站手機選單的底色是 rgba(0,0,0,.1) 半透明黑，疊在淺色 hero 上會變成一塊
     灰濁、難讀的方框。改成乾淨的白色圓角面板＋陰影，深色字才看得清楚。 */
  #navbarNav.collapse.show {
    background: rgba(255, 255, 255, 0.97) !important;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(32, 21, 14, 0.2);
    padding: 8px 4px !important;
  }
  #navbarNav.collapse.show .navbar-nav a {
    border-radius: 10px;
    transition: background 0.15s ease;
  }
  #navbarNav.collapse.show .navbar-nav a:hover {
    background: #f7f1e8;
  }
}

/* ---------- 聯絡表單：送出按鈕 ---------- */
/* 舊站的按鈕只吃 .form-bg 的灰漸層，尺寸是瀏覽器預設值，
   跟上方一整排寬版欄位擺在一起比例明顯不對。這裡把它撐成正常的按鈕，
   並沿用同一套視覺語言（灰漸層 + 2px 邊框 + 圓角 + 陰影）。 */
.kl-submit-btn {
    min-width: 168px;
    padding: 12px 34px;
    margin-top: 6px;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 3px;
    color: #20150e;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.kl-submit-btn:hover:not(:disabled) {
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 4px 5px 16px gray;
}
.kl-submit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 2px 2px 8px gray;
}
.kl-submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* reCAPTCHA 版位：與表單欄位左緣對齊 */
.kl-recaptcha-row {
    margin-top: 14px;
    margin-bottom: 4px;
}
/* 手機版視窗較窄時把 reCAPTCHA 等比縮小，避免超出表單寬度 */
@media (max-width: 400px) {
    .kl-recaptcha-row .g-recaptcha {
        transform: scale(0.86);
        transform-origin: 0 0;
    }
}