/* =========================================
   澎湃數位 (Palmpile) - 官方網站樣式表
========================================= */

/* =========================================
   1. 基礎設定與排版 (Base & Typography)
========================================= */
/* 手機版預設基礎字體 */
html, body {
    font-size: 15px; 
    line-height: 1.6;
}

/* 電腦版與平板放大字體 */
@media (min-width: 768px) {
    html, body {
        font-size: 18px; 
    }
}

/* =========================================
   2. 導覽列 (Navbar)
========================================= */
/* 初始狀態：透明背景 */
.navbar-glass {
    background: transparent !important;
    padding: 20px 0; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: none;
}
.navbar-glass .brand-logo,
.navbar-glass .nav-link {
    color: #ffffff !important;
}

/* 捲動後的狀態：白底帶陰影 */
.navbar-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 10px 0; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.navbar-scrolled .brand-logo { color: #1e293b !important; }
.navbar-scrolled .nav-link { color: #475569 !important; }
.navbar-scrolled .nav-link:hover { color: #0ea5e9 !important; }

/* Logo 現代感排版 */
.brand-logo {
    font-weight: 800;
    font-size: 1.8rem;
    letter-spacing: 1px;
    transition: color 0.3s;
}
.brand-logo span { color: #0ea5e9; }

/* 導覽連結與滑動底線動畫 */
.nav-link {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0 15px;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 2px; 
    left: 0;
    background-color: #0ea5e9;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* 導覽列 CTA 按鈕 (預約展示) */
.btn-nav-cta {
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    border-radius: 50px;
    padding: 10px 36px !important; 
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}
.btn-nav-cta::after { display: none; } /* 取消底線動畫 */
.btn-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}
/* 強制導覽列按鈕文字永遠保持白色 */
.navbar-scrolled .nav-link.btn-nav-cta,
.navbar-scrolled .nav-link.btn-nav-cta:hover,
.nav-link.btn-nav-cta:hover,
.btn-nav-cta {
    color: #ffffff !important;
}

/* =========================================
   3. 首屏輪播視覺 (Hero Carousel)
========================================= */
.hero-carousel-section {
    height: 85vh; 
    position: relative;
    overflow: hidden; 
}
#heroCarousel, .carousel-inner, .carousel-item {
    height: 100%;
}
.carousel-image {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: zoomEffect 20s infinite alternate linear; 
}
.carousel-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55); 
    z-index: 1;
}
.carousel-caption {
    z-index: 2;
    bottom: auto; 
    top: 0;
    padding-top: 80px; 
}
@keyframes zoomEffect {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* 輪播圖文字與按鈕 - 響應式設定 (手機版預設) */
.carousel-caption h1.display-3 {
    font-size: 1.5rem !important;  
    margin-bottom: 1rem !important;
}
.carousel-caption p.lead {
    font-size: 0.8rem !important;  
    margin-bottom: 1.3rem !important;
}
.btn-hero-cta {
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    color: #ffffff !important;
    border-radius: 50px;
    padding: 10px 30px !important; 
    font-size: 1.1rem !important;  
    font-weight: 700;
    letter-spacing: 1px !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4); 
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.1); 
}
.btn-hero-cta:hover {
    transform: translateY(-3px) scale(1.03); 
    box-shadow: 0 12px 35px rgba(14, 165, 233, 0.6); 
}

/* 輪播圖文字與按鈕 - 電腦版恢復大氣尺寸 */
@media (min-width: 768px) {
    .carousel-caption h1.display-3 {
        font-size: 3.5rem !important; 
        margin-bottom: 1.5rem !important;
    }
    .carousel-caption p.lead {
        font-size: 1.5rem !important;
        margin-bottom: 3rem !important;
    }
    .btn-hero-cta {
        padding: 15px 45px !important; 
        font-size: 1.35rem !important; 
        letter-spacing: 2px !important;
    }
}

/* =========================================
   4. 區塊與組件細節 (Sections & Components)
========================================= */
/* 產品卡片 */
.card-body p, 
.product-card ul {
    font-size: 1.05rem; 
}

/* 聯絡表單 */
.form-control, 
.form-select {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
}

/* =========================================
   5. 手機版導覽列 (Mobile Navbar) 展開優化
========================================= */

/* Bootstrap 的 navbar-expand-lg 會在螢幕小於 992px 時變成手機版漢堡選單 */
@media (max-width: 991px) {
    
    /* 1. 讓導覽列在手機上更貼齊頂部，不要留太多空白 */
    .navbar-glass {
        padding: 10px 0; 
    }

    /* 2. 為展開的選單加上「白底微透的卡片」背景 */
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98); /* 幾乎純白，確保閱讀清晰 */
        backdrop-filter: blur(10px); /* 輕微毛玻璃質感 */
        border-radius: 12px; /* 現代感圓角 */
        padding: 15px 20px;
        margin-top: 15px; /* 和上方的 Logo 稍微拉開距離 */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* 加上陰影讓選單浮出來 */
    }

    /* 3. 將展開選單內的文字強制轉為深色，並拉大點擊範圍 */
    .navbar-glass .navbar-collapse .nav-link {
        color: #475569 !important; /* 深灰色文字 */
        padding: 12px 0; /* 增加上下間距，讓大拇指更好點擊 */
        border-bottom: 1px solid rgba(0,0,0,0.05); /* 加上淡淡的水平分隔線 */
        margin: 0; /* 清除電腦版的左右邊距 */
    }

    /* 4. 針對「預約展示」按鈕特別微調排版 */
    .navbar-glass .navbar-collapse .nav-link.btn-nav-cta {
        color: #ffffff !important; /* 按鈕文字維持白色 */
        text-align: center;
        margin-top: 20px; /* 和上方的常規連結拉開距離 */
        border-bottom: none; /* 拿掉分隔線 */
        display: block; /* 讓按鈕在手機上可以撐滿寬度 */
    }
}

/* =========================================
   6. 頁尾 (Footer) 響應式字體微調
========================================= */
.footer-text {
    font-size: 14px; /* 電腦版維持適中大小 */
}

/* 當螢幕寬度小於 576px (大部分手機) 時 */
@media (max-width: 575px) {
    .footer-text {
        font-size: 11px; /* 大幅縮小字體以防換行 */
        letter-spacing: -0.2px; /* 稍微縮減字距，爭取更多單行空間 */
        transform: scale(0.9); /* 如果字體 11px 還是太擠，可以用 transform 整體微縮 */
    }
}

/* =========================================
   合作客戶卡片 (Client Boxes) 互動特效
========================================= */
.client-box {
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03); /* 極淡的邊框增加立體感 */
}
.client-box:hover {
    transform: translateY(-5px); /* 往上浮起 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; /* 加深陰影 */
}

/* =========================================
   合作客戶 Logo 圖片特效
========================================= */
.client-logo {
    max-height: 60px; /* 限制 Logo 的最大高度，確保四家廠商看起來一樣大 */
    width: auto;
    object-fit: contain; /* 確保圖片比例正常不變形 */
    filter: grayscale(100%) opacity(60%); /* 預設變成灰色且稍微透明，統一視覺質感 */
    transition: all 0.4s ease; /* 平滑的變色動畫 */
}

/* 當滑鼠滑過卡片時，Logo 恢復原本的彩色與亮度，並微微放大 */
.client-box:hover .client-logo {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.08); 
}

/* =========================================
   合作廠商區塊：手機版副標題微調
========================================= */
@media (max-width: 767px) {
    .clients-subtitle {
        font-size: 0.9rem; /* 字體縮小，讓它在手機上看起來精緻不過大 */
        margin-bottom: 2rem !important; /* 原本的 mb-5 在手機上留白太多，把它縮減一點 */
        padding: 0 10px; /* 左右稍微往內縮一點，不要死死貼著螢幕邊緣 */
    }
}