/* =========================================
   1. 基礎設定 (Base)
   ========================================= */
body {
  background-color: #F8F3ED; /* 奶茶白底 */
  font-family: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

footer {
  background: #FFFFFF;
}

/* 響應式 Footer 對齊設定 */
.footer-contact {
  gap: 0.5rem;
}

@media (max-width: 576px) {
  .footer-contact {
    flex-direction: column; /* 手機改成上下排列 */
    align-items: center;
    text-align: center;
  }
  .footer-contact div {
    margin-bottom: 4px;
  }
}
/* =========================================
   2. 品牌色工具類 (Brand Colors)
   ========================================= */
.text-brown { color: #5C4033 !important; }
.bg-brown   { background-color: #5C4033 !important; }
.btn-brown  { 
  background-color: #5C4033; 
  color: white; 
  border: 1px solid #5C4033;
}
.btn-brown:hover {
  background-color: #4E3629;
  color: white;
}

.text-gold  { color: #D4A373 !important; }
.bg-gold    { background-color: #D4A373 !important; }
.btn-outline-brown {
  color: #5C4033;
  border-color: #5C4033;
}
.btn-outline-brown:hover {
  background-color: #5C4033;
  color: white;
}

/* =========================================
   3. 元件樣式 (Components)
   ========================================= */
/* 導覽列品牌字 */
.navbar-brand {
  letter-spacing: 0.18em;
  font-size: 1.1rem;
}

/* 關鍵字標籤 (圓角框) */
.keyword-pill {
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.75);
  font-size: 0.8rem;
}

/* 區塊小標題 */
.section-title {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: #A58A6A;
}

/* 商品小卡片 (首頁用) */
.product-card-min {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 1rem;
  border: none;
}
.product-card-min:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}
.product-card-min .product-img {
  width: 100%;
  height: 300px;        /* 可依實際需求調整 180–230px */
  object-fit: cover;    /* 若希望完整不裁切可改為 contain */
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* 菜單預覽區：帶浮動背景圖 + 白色霧面遮罩，維持文字可讀性 */
.menu-preview-section {
  position: relative;
  overflow: hidden;
}

/* 背景圖層 */
.menu-preview-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero/hero-coffee-lineup2.jpg'); /* ← 換成您的圖片，例如 assets/img/products/menu-bg.jpg */
  background-size: cover;
  background-position: center;
  opacity: 0.35;                  /* 背景整體淡一點，避免搶戲 */
  filter: blur(2px);              /* 微微柔焦 */
  transform: scale(1.05);
  animation: menuBgFloat 20s ease-in-out infinite alternate;
  z-index: 0;
}

/* 上方加一層白色漸層霧面，讓文字更清楚 */
.menu-preview-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right,
              rgba(255, 255, 255, 0.92) 0%,
              rgba(255, 255, 255, 0.96) 40%,
              rgba(255, 255, 255, 0.98) 100%);
  z-index: 0;
}

/* 內容層：蓋在最上面 */
.menu-preview-inner {
  position: relative;
  z-index: 1;
}

/* 背景緩慢浮動 */
@keyframes menuBgFloat {
  0% {
    transform: scale(1.05) translateY(0);
  }
  100% {
    transform: scale(1.08) translateY(-12px);
  }
}

/* RWD：手機上再提升一點遮罩強度，確保小字可讀 */
@media (max-width: 576px) {
  .menu-preview-bg {
    opacity: 0.3;
    filter: blur(3px);
  }
  .menu-preview-section::before {
    background: rgba(255, 255, 255, 0.96);
  }
}


/* 柔和徽章 */
.badge-soft {
  background-color: rgba(230, 151, 104, 0.12);
  color: #B15D27;
}

/* 品質堅持 Icon */
.quality-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #FFF8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B0723E;
  margin-bottom: 0.5rem;
}

/* 五等分欄位：桌機寬度時維持五欄 */
@media (min-width: 992px) {
  .col-lg-5th {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
.store-bg {
  background: linear-gradient(to bottom, #EFEAE6 0%, #E2D0C2 100%);
}
/* 原有的卡片樣式保持 */
.store-pill {
  background: #fff;
  border: 1px solid #F0E5DA;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  transition: all 0.2s ease;
  height: 100%;
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}

.store-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  border-color: #D4A373;
}
.hover-underline:hover {
  text-decoration: underline;
}
.text-brown {
  color: #5C4033 !important;
}
.hover-link-btn {
  border-color: #D4A373;
  transition: all 0.2s ease;
}

.hover-link-btn:hover {
  background-color: #D4A373;
  color: #fff !important;
  border-color: #D4A373;
  text-decoration: none;
}
/* =========================================
   4. 特殊區塊 (Sections)
   ========================================= */

/* 深色區塊 (加盟預告用) */
.dark-section {
  background: #222222;
  color: #F5F1E8;
}
.dark-section .section-title {
  color: #E3C48C;
}

/* 優惠活動區塊 (週三限定) */
.promo-section {
  background-color: #5C4033; /* 品牌深咖 */
  color: white;
  position: relative;
  overflow: hidden;
}
.promo-badge {
  background-color: #D4A373;
  color: #3e2723;
  font-weight: bold;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  display: inline-block;
  margin-bottom: 1rem;
}

/* =========================================
   5. Hero 首屏專用樣式 (新版)
   ========================================= */
.hero-section {
  /* 90% 視窗高度，引導視覺向下 */
  min-height: 90vh; 
  padding-top: 100px;
  padding-bottom: 60px;
  /* 柔和晨光漸層背景 */
  background: linear-gradient(135deg, #F8F3ED 0%, #FFFCF8 60%, #FFFFFF 100%);
  position: relative;
  overflow: hidden;
}

/* 背景裝飾光暈 */
.hero-bg-circle {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 163, 115, 0.1) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  z-index: 0;
}

/* 圖片容器與懸浮動畫 */
.hero-image-container {
  position: relative;
  z-index: 1;
  animation: floatImage 6s ease-in-out infinite;
}

.hero-image-container img {
  width: 100%;
  max-width: 550px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(92, 64, 51, 0.15);
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
}

.hero-image-container img:hover {
  transform: rotate(0deg) scale(1.02);
}

/* 舊版 Hero 樣式 (保留以防萬一，或用於其他圓形圖) */
.hero-image {
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 定義懸浮動畫關鍵影格 */
@keyframes floatImage {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* =========================================
   6. 響應式調整 (Responsive)
   ========================================= */
@media (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 80px;
    text-align: center;
  }
  .hero-image-container {
    margin-top: 40px;
  }
  .d-flex.gap-2 {
    justify-content: center;
  }
}

/* =========================================
   關於我們 (雜誌敘事風格) - custom.css
   ========================================= */

/* 1. 頁首 Hero：極簡大氣 */

/* 裝飾性副標題 (小字) */
.section-subtitle {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #D4A373; /* 品牌金 */
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* 2. 故事區塊：雜誌排版 */
.story-section {
  padding: 80px 0;
  position: relative;
}

/* 圖片容器：增加質感陰影與圓角 */
.story-img-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(92, 64, 51, 0.1); /* 深咖啡色柔和陰影 */
  transition: transform 0.4s ease;
}

.story-img-container:hover {
  transform: translateY(-5px); /* 滑鼠移過微微浮起 */
}

.story-img-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 3. 創辦人語錄區塊：深色沉浸感 */
.founder-quote {
  background-color: #5C4033; /* 品牌深咖 */
  color: white;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* 背景巨大的引號裝飾 */
.quote-icon {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10rem;
  color: rgba(255, 255, 255, 0.05); /* 極淡的浮水印效果 */
  font-family: serif;
  line-height: 1;
  pointer-events: none;
}

/* 創辦人頭像邊框優化 */
.founder-avatar {
  width: 160px; 
  height: 160px; 
  margin: 0 auto; 
  border-radius: 50%; 
  overflow: hidden; 
  border: 4px solid #D4A373;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* 4. 通用文字優化 */
.text-brown {
  color: #5C4033 !important;
}
.text-gold {
  color: #D4A373 !important;
}
p.lead {
  font-weight: 400;
  line-height: 1.8;
}
/* --- 關於我們 (敘事版) 專用樣式 --- */

/* 1. 頁首 Hero：簡潔留白 */
.about-hero {
  /* 設定高度與背景圖 */
  min-height: 60vh; /* 讓高度夠高，展現氣勢 */
  /* 使用 about 頁面預載的 LCP 圖片以確保一致性 */
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/hero/hero-coffee-lineup3.jpg');
  background-size: cover;
  /* desktop: 置中；mobile: 以上方為重點，避免主要內容被裁切 */
  background-position: center center;
  background-attachment: scroll; /* 避免 mobile 上 fixed 帶來裁切/性能問題 */
  color: white;
}

/* 更精細的響應式裁切：手機優先顯示上半部，並降低 padding 以容納視窗 */
@media (max-width: 576px) {
  .about-hero {
    min-height: 48vh;
    padding-top: 80px;
    padding-bottom: 40px;
    background-position: center 25%; /* 向上移動構圖，讓主題與視覺重點更可見 */
  }
}

@media (min-width: 577px) and (max-width: 991.98px) {
  .about-hero {
    min-height: 56vh;
    background-position: center 40%;
  }
}

/* 2. 故事區塊：圖文交錯 */
.story-section {
  padding: 80px 0;
}

.section-subtitle {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 2px;
  color: #D4A373; /* 品牌金 */
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* =========================================
   行動裝置置底 CTA（Sticky CTA）
   僅在小螢幕顯示，避免干擾桌面版
   ========================================= */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1080;
  padding: 0.5rem 0;
  background: linear-gradient(90deg, rgba(92,64,51,0.98), rgba(141,110,90,0.98));
  box-shadow: 0 -8px 20px rgba(0,0,0,0.12);
  display: none;
}
.sticky-cta .btn {
  font-weight: 700;
  border-radius: 0.6rem;
}
.sticky-cta .btn .bi { vertical-align: -0.08em; }

@media (max-width: 767.98px) {
  .sticky-cta { display: block; }
  .sticky-cta .container { padding-left: 0.5rem; padding-right: 0.5rem; }
  .sticky-cta .btn { padding-top: 0.55rem; padding-bottom: 0.55rem; }
}

/* 圖片容器：增加質感陰影與圓角 */
.story-img-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(92, 64, 51, 0.15); /* 深咖色柔和陰影 */
}

.story-img-container img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.story-img-container:hover img {
  transform: scale(1.03); /* 滑鼠移過微放大 */
}

/* 3. 創辦人語錄區塊：深色背景突顯 */
.founder-quote {
  background-color: #5C4033; /* 品牌深咖 */
  color: white;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* 背景巨大的引號裝飾 */
.quote-icon {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15rem;
  color: rgba(255, 255, 255, 0.05); /* 極淡的透明度 */
  pointer-events: none;
}

/* 時間軸樣式 */
.timeline-step {
  position: relative;
  padding-left: 2rem;
  border-left: 3px solid #E0E0E0;
  padding-bottom: 2.5rem;
}
.timeline-step::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #D4A373; /* 品牌金 */
  border: 3px solid white;
  box-shadow: 0 0 0 1px #E0E0E0;
}
.timeline-step:last-child {
  border-left: 3px solid transparent;
}

/* 圖片圓角與陰影 */
.img-rounded-custom {
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}
.img-rounded-custom:hover {
  transform: translateY(-5px);
}

/* === Welcome Video Modal 外觀調整（整段可貼）=== */

/* Dialog 寬度 */
.welcome-video-modal .modal-dialog {
  max-width: 900px;
}

@media (max-width: 576px) {
  .welcome-video-modal .modal-dialog {
    margin: 1rem;
  }
}

/* VIDEO_Modal 本體：深色 + 帶透明感 */
.welcome-video-modal .modal-content {
  /* 建議把 HTML 裡的 bg-dark 拿掉，改由這裡統一控制 */
  background: rgba(15, 15, 15, 0.5);  /* 0.88 可調小一點會更透明 */
  color: #fff;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 影片外框：置中 + 固定在視窗高度內 */
.video-wrapper {
  position: relative;
  width: 100%;
  max-height: 75vh;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.11); /* 半透明黑，可調 0.3~0.5 */
  border-radius: 12px;
  overflow: hidden;
}

/* 影片：不裁切，16:9 / 9:16 都完整顯示 */
.welcome-video {
  max-width: 100%;
  max-height: 75vh;
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: rgba(0, 0, 0, 0.11); /* 半透明黑，可調 0.3~0.5 */
}

.video-sound-btn {
  font-size: 0.8rem;
  border-color: rgba(255,255,255,0.4);
}
.video-sound-btn:hover {
  background-color: #ffffff;
  color: #000;
}

/* 小螢幕（手機）全螢幕顯示，並調整影片高度 */
@media (max-width: 576px) {
  .welcome-video-modal .modal-dialog {
    margin: 0;                 /* 取消四週預設外距，貼齊畫面 */
    max-width: 100%;
  }

  .welcome-video-modal .modal-content {
    border-radius: 0;          /* 讓內容貼齊螢幕邊緣 */
    min-height: 100vh;         /* modal 本體撐滿整個視窗高度 */
    display: flex;
    flex-direction: column;
  }

  .video-wrapper {
    flex: 1 1 auto;            /* 影片區自動吃掉中間可用空間 */
    max-height: calc(100vh - 140px); 
    /* 上下還要預留標題 + 說明文字空間，可視實際再微調 140 這個值 */
    min-height: 45vh;
  }

  .welcome-video {
    max-height: 100%;          /* 在 wrapper 裡最大化顯示 */
  }
}

/* === 背景遮罩：帶透明感（全站所有 Modal 共用）=== */
/* 若站上還有其他 Modal 也會用同樣效果，通常是 OK 的 */
.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.11); /* 半透明黑，可調 0.3~0.5 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================================
   通用卡片與互動樣式（跨頁面工具類）
   ========================================= */

/* 卡片通用懸浮效果 */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid #f0f0f0;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(92, 64, 51, 0.08);
  border-color: #D4A373;
}

/* 徽章樣式統一 */
.badge-highlight {
  background-color: #FF9800;
  color: #fff;
}
.badge-new {
  background-color: #4CAF50;
  color: #fff;
}
.badge-hot {
  background-color: #F44336;
  color: #fff;
}
.badge-promo {
  background-color: #E91E63;
  color: #fff;
}
.badge-info {
  background-color: #607D8B;
  color: #fff;
  font-size: 0.7rem;
}
.badge-soft {
  background-color: rgba(230, 151, 104, 0.12);
  color: #B15D27;
}

/* 邊框裝飾 */
.border-left-thick {
  border-left: 4px solid #D4A373;
  padding-left: 1rem;
}

/* 文字截斷（2 行） */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 通用陰影懸浮 */
.shadow-hover:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}

/* 三路徑定位卡片 */
.path-card {
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  height: 100%;
}
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(92, 64, 51, 0.12);
  border-color: #D4A373;
}

/* ===== Suoyi integration patch (append-only) ============================= */

/* 1) 修正無效選擇器：提供可控的置底空間類名 */
.has-sticky-cta-spacing { padding-bottom: 72px; }

@media (max-width: 767.98px) {
  body.has-sticky-cta-spacing { padding-bottom: 72px; }
}

/* 2) 可存取性：鍵盤焦點可視化 */
a:focus, button:focus, [role="button"]:focus {
  outline: 2px solid #D4A373;
  outline-offset: 2px;
}

/* 3) 超連結下劃線控制（補上 base 狀態；您原本已有 :hover） */
.hover-underline { text-decoration: none; }
.hover-underline:hover { text-decoration: underline; }

/* 4) 按鈕描邊棕：統一版本（本段位於檔尾，將覆蓋前文重複定義） */
.btn-outline-brown {
  color: #5C4033;
  border-color: #D4A373;
  background-color: #fff;
}
.btn-outline-brown:hover,
.btn-outline-brown:focus {
  color: #fff;
  background-color: #5C4033;
  border-color: #5C4033;
}

/* 5) 週三優惠（可選）：今日加強顯示用的輔助類名 */
.promo-section .is-today {
  box-shadow: 0 0 0 3px rgba(212,163,115,0.35) inset;
  border-radius: 8px;
}

/* 6) 影像：若未指定則提供保守 lazy/async（與 JS 配合） */
img[loading="lazy"] { content-visibility: auto; }