/* 導覽列顏色設定 */
:root,
[data-bs-theme=dark] {
--bs-dark-rgb: 153, 204, 204;
}

/* 連結Google雲端字體，提供用戶一致體驗UX */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300..900&display=swap');

/* 利用根元素最為標籤選取器，改變整體頁面的文字大小 */
html {font-size: 20px;}

/* 依據windows mac自動出現適合的字體(因考慮到手機無微軟正黑體，可把微軟正黑體刪除，Noto Sans TC是mac字體) */
body {font-family: "微軟正黑體", "Noto Sans TC", sans-serif;}

/* 每一網頁統一底色 */
body {background-color: rgb(235, 236, 236);}

/* 個別指定網頁背景色，在[網頁文本]輸入指令class=bg-color-brow */
/* .bg-color-brown {background-color: brown;} */

/* 標題一級的文字大小 */
h1 {font-size: 2rem;}


/* 標題二級的文字設定，選取器是標籤，影響整體
h2 {font-size: 1.8rem;font-weight: 800;color: #32baaa;} */
/* 修改原有的 h2 設定，加入相對定位 */
h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #32baaa;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 25px;
  letter-spacing: 1px;
}
/* 讓圖示稍微浮起，並與文字拉開間距 */
h2 i {
  font-size: 30px !important;
  margin-right: 12px;
  color: #32baaa;
  opacity: 0.8;
}

/* 增加輕微的文字陰影，讓顏色更飽滿 */
h2 {
  text-shadow: 1px 1px 0px rgba(50, 186, 170, 0.1);
}










/* 選取器識類別，影響個別，需要手動套用 */
.h2-custom-red {font-size: 2rem;font-weight: 800;color: #fe3737;}

/* 段落間距 */

/* 指定特定文字顏色(span class=) */
.text-danger {color: #fe3737;}

/* 夜間模式 */
body{
background:#ffffff;
color:#000000;
}
.dark-mode{
background:#121212;
color:#ffffff;
}

/* 讓<.text-muted>字體在夜間模式變成白色 */
.dark-mode .text-muted{
color:#ffffff !important;
}

/* 滑鼠停留圖片上方會放大 */
.img-hover{
  transition: transform .4s;
}

.img-hover:hover{
  transform: scale(1.1);
}

/* 導覽列下拉選單外觀設定 */
.dropdown-menu{
  background-color:#222222;
  border-radius:10px;
}

.dropdown-item{
  color:white;
}

.dropdown-item:hover{
  background-color:#ff6b6b;
  color:white;
}


/* 導覽列下拉選單"夜間模式"外觀設定 */
body.dark-mode .dropdown-menu {
    background-color: #ffffff; /* 深灰色，與 bg-dark 接近 */
    border-color: rgba(255,255,255,.15);
}

body.dark-mode .dropdown-item {
    color: #000000;
}

body.dark-mode .dropdown-item:hover {
    background-color: #ff6b6b; /* 滑鼠移過時的顏色 */
    color: #fff;
}


/* style.css */
.product-img {
    transition: transform 0.3s ease;/* 讓變化過程變平滑 */
    cursor: zoom-in;/* 鼠標移上去會變成「放大鏡」圖示 */
}

.product-img:hover {
    transform: scale(1.05); /* 懸停時稍微放大 */
}

.month-label {
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
    letter-spacing: 1px;
}

/* order指定次數 */
.sort-first {
    order: 10;
}


/* 瀑布流容器 */
.masonry-container {
    display: columns;
    column-count: 3; /* 電腦版顯示 3 列 */
    column-gap: 1.5rem;
    width: 100%;
}

/* 確保卡片不會被切斷 */
.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem; /* 作品上下間距 */
}

/* 讓圖片保持原比例並填滿卡片寬度 */
.masonry-img {
    width: 100%;
    height: auto; /* 重點：保留原畫比例 */
    display: block;
}

/* 手機版調整為 1 或 2 列 */
@media (max-width: 768px) {
    .masonry-container {
        column-count: 2;
    }
}
@media (max-width: 576px) {
    .masonry-container {
        column-count: 1;
    }
}

/* 至頂按鈕-平滑捲動 */
html { scroll-behavior: smooth; }


/* 針對「回到頁面頂端」按鈕的長方形細邊框設計 */
.footer-top-btn {
    /* 維持長方形：將 Bootstrap 預設的微圓角歸零 */
    border-radius: 0px !important; 
    
    /* 設定細邊框：1px 實線，顏色可自訂（這裡使用淺灰色作為預設） */
    border: 1px solid #dee2e6; 
    
    /* 背景改為透明或純色，讓邊框更顯眼 */
    background-color: transparent;
    color: #6c757d;
    
    /* 動態過渡效果 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 10px 25px;
    text-decoration: none;
    display: inline-block;
}

/* 滑鼠移上去的狀態 (Hover) */
.footer-top-btn:hover {
    /* 變換邊框顏色 */
    border: 1px solid #000000; 
    
    /* 背景與文字顏色變換 */
    background-color: #64fff7;
    color: #000000 !important;
    
    /* 微微的位移感，讓長方形看起來有種「浮起來」的重量感 */
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(115, 142, 145, 0.1);
}

/* 按下的瞬間 (Active) */
.footer-top-btn:active {
    transform: translateY(-1px);
}

/* 夜間模式下的卡片外觀設定 */
body.dark-mode .service-card {
    /* 背景變深黑 */
    background-color: #1a1a1a !important; 
    
    /* 文字變白色 */
    color: #ffffff !important;
    
    /* 設定白色細邊框 (1px) */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* 移除原本在白天的陰影，或改為更深、更柔和的陰影 */
    box-shadow: none !important;
}

/* 確保夜間模式下卡片內的輔助文字（如 text-muted）也能看清楚 */
body.dark-mode .service-card .text-muted,
body.dark-mode .service-card .text-secondary {
    color: #bbbbbb !important;
}

/* 調整報價區間的小標籤，讓它在深色背景下不要太突兀 */
body.dark-mode .service-card .badge.bg-light {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 針對卡片左側的裝飾線 (border-start) 在夜間模式下的亮度微調 */
body.dark-mode .service-card .card-title {
    border-left-color: #ffffff !important; /* 讓左側裝飾線變亮 */
}

/* 確保夜間模式下，Bootstrap 的次要文字類別會變亮 */
body.dark-mode .text-secondary,
body.dark-mode .lead.text-secondary {
    color: #adb5bd !important; /* 淺灰色，比純白溫潤，適合大段落閱讀 */
}

/* 確保標題 h2 在夜間模式下也能保持清晰或調整顏色 */
body.dark-mode h2 {
    color: #4ed9c1 !important; /* 稍微調亮你原本的 #32baaa，在黑底上會更亮眼 */
}

/* 針對「視覺接案服務」這段引言的專屬微調 */
body.dark-mode .lead {
    color: #f8f9fa !important;
}


/* --- 手繪作品頁面專用修正 --- */

/* 1. 按鈕顏色切換 */
body.dark-mode .btn-outline-dark {
    color: #f8f9fa !important;
    border-color: #f8f9fa !important;
}
body.dark-mode .btn-outline-dark:hover,
body.dark-mode .btn-outline-dark.active {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* 2. 卡片圓角與溢出處理 */
.service-card {
    overflow: hidden !important;
    border-radius: 12px !important; /* 調整你喜歡的圓潤度 */
    transition: transform 0.3s ease; /* 順便加個小動畫，質感加分 */
}

.service-card:hover {
    transform: translateY(-5px); /* 滑鼠移上去稍微浮起來 */
}

.category-header {
  border-left: 3px solid #333; /* 左側俐落線條 */
  padding-left: 15px;
  display: flex;
  flex-direction: column;
}
.en-title {
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: #888;
  text-transform: uppercase;
}
.zh-title {
  font-weight: 700;
  margin: 0;
  color: #222;
}




/* 強制攝影作品卡片產生間距 */
.row {
  margin-left: -15px;  /* 抵消外層邊距 */
  margin-right: -15px;
}

.col-lg-6 {
  padding-left: 15px !important;  /* 手動設定左間距 */
  padding-right: 15px !important; /* 手動設定右間距 */
  margin-bottom: 30px;            /* 垂直間距 */
}

/* 確保卡片內部不會溢出 */
.service-card {
  width: 100%;
  margin: 0 auto;
}


/* 讓攝影分類標題在夜間模式變色 */
body.dark-mode .zh-title {
    color: #ffffff !important; /* 中文標題變純白 */
}

body.dark-mode .en-title {
    color: #adb5bd !important; /* 英文標題變淺灰，保持層次感 */
}

/* 如果你的分類標題左邊那條線也要變色 */
body.dark-mode .category-header {
    border-left-color: #ffffff !important;
}


/* 解決手機版內容被置頂導覽列遮住的問題 */
body {
    /* 根據你導覽列的高度來設定，通常手機版導覽列約 56px - 70px */
    padding-top: 70px; 
}

/* 如果你希望更精準一點，只針對手機版做調整 */
@media (max-width: 991px) {
    body {
        padding-top: 60px; /* 手機版導覽列通常比較矮一點點 */
    }
}



/* --- 諮詢區塊：單純色塊設計 (日間模式) --- */
.contact-card {
    text-align: center;
    padding: 30px 10px;       /* 增加上下內距，讓色塊看起來更大器 */
    background-color: #f0f2f2; /* 妳原本圖二那種淡淡的青灰色 */
    color: #000000;
    
    /* 關鍵修改：取消圓角、寬度滿版、取消邊框 */
    border-radius: 0px !important; 
    width: 100%;
    max-width: none !important; /* 強制取消最大寬度限制 */
    border: none !important;    /* 移除邊框線條 */
    
    /* 外部間距調整 */
    margin: 40px 0 40px 0;    /* 左右設為 0，確保色塊貼齊邊緣 */
    transition: all 0.3s ease;
}

.contact-btn {
    background-color: #ff4d4d;
    color: white !important;
    padding: 15px 35px;
    text-decoration: none;
    border-radius: 4px; /* 按鈕可以保有一點點小圓角，比較好點擊 */
    font-weight: bold;
    display: inline-block;
}

/* --- 諮詢區塊：夜間模式色塊 --- */
body.dark-mode .contact-card {
    background-color: #222222 !important; /* 變成深色背景塊 */
    color: #ffffff !important;
}

/* --- 導覽列按鈕基礎樣式 --- */
.nav-btn-collab {
    background-color: #ff4d4d; /* 統一使用妳的品牌紅 */
    color: white !important;   /* 強制文字白色 */
    padding: 8px 20px !important; /* 調整按鈕內距 */
    border-radius: 5px;        /* 微圓角，與妳的設計風格一致 */
    margin-left: 15px;         /* 與前一個選單項目拉開距離 */
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: center;
}

/* 滑鼠移上去的效果 */
.nav-btn-collab:hover {
    background-color: #e64444; /* 深一點的紅 */
    transform: translateY(-2px); /* 輕微浮起感 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- 手機版調整 (當導覽列收合時) --- */
@media (max-width: 991px) {
    .nav-btn-collab {
        margin-left: 0;
        margin-top: 10px;      /* 手機版改為上下間距 */
        display: block;        /* 讓按鈕在手機選單中撐滿寬度 */
    }
}

/* --- 夜間模式微調 (如果需要) --- */
body.dark-mode .nav-btn-collab {
    /* 如果夜間模式需要不同顏色可以改這裡，目前維持紅色通常效果最好 */
    box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3);
}

/* --- 導覽列組件統一化樣式 --- */

/* 1. 搜尋按鈕修正 */
.btn-outline-success, /* Bootstrap 預設搜尋按鈕類別 */
#search-button {      /* 或是妳自定義的 ID */
    border-radius: 5px !important;
    border: none !important;
    background-color: #5a9b9b !important; /* 建議換成比導覽列深一點的青色，才不會太突兀 */
    color: white !important;
    padding: 8px 15px !important;
    transition: all 0.3s ease !important;
    font-weight: bold;
}

/* 2. 合作洽談按鈕 (延用並微調) */
.nav-btn-collab {
    background-color: #ff4d4d !important;
    border-radius: 5px !important;
    padding: 8px 20px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

/* 3. 夜間模式切換按鈕 (讓月亮也變成按鈕感) */
.dark-mode-toggle, /* 假設這是妳切換鈕的 class */
#darkModeBtn {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 5px !important;
    padding: 8px 12px !important;
    margin-left: 10px;
    transition: all 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- 統一所有按鈕的 Hover 效果 --- */
.btn-outline-success:hover,
.nav-btn-collab:hover,
.dark-mode-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    opacity: 0.9;
}

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 這會讓所有按鈕自動保持固定間距 */
}


/* FAQ 專屬樣式 */
.faq-section .accordion-button {
    padding: 1.5rem;
    background-color: transparent;
    transition: all 0.3s ease;
}

.faq-section .accordion-button:not(.collapsed) {
    color: #32baaa; /* 你的品牌色 */
    box-shadow: none;
}

.faq-section .accordion-body {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.05rem; /* 增加字距讓閱讀更舒服 */
}

.faq-section .accordion-item {
    border: 1px solid #eee !important;
    background-color: #fff;
    transition: transform 0.3s ease;
}

.faq-section .accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* 夜間模式適配 */
.dark-mode .faq-section .accordion-item {
    background-color: #1e1e1e;
    border-color: #333 !important;
}

.dark-mode .faq-section .accordion-button {
    color: #eee;
}

.dark-mode .faq-section .accordion-body {
    color: #bbb;
}

.dark-mode .bg-light {
    background-color: #2a2a2a !important;
}