/* ===== 導覽列 (Navbar) ===== */
.navbar {
    position: fixed;                    /* 固定在頁面頂部 */
    top: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.35); /* 微透明白底 */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);     /* 淡淡的陰影 */
    backdrop-filter: blur(12px);          /* 模糊效果 對後方元素造成模糊 */
    -webkit-backdrop-filter: blur(10px);  /* Safari 支援 */
    z-index: 1000;                      /* 確保顯示在最上層 */
}

.sub-navbar {
    position: sticky;
    top: 60px;   /* 貼齊主 navbar 的下方 *//* 依你的主選單高度調整 */
    height: auto; /* 高度自適應 */
    z-index: 999;  
}


/* 導覽列內部區塊 */
.nav-content {
    display: flex;                      /* 橫向排列 */
    align-items: center;               /* 垂直置中 */
    justify-content: space-between;   /* 左右對齊分散 */
    padding: 1rem 10%;                /* 左右保留 10% 空白 */
    height: 55px;

}

.nav-left {
    display: flex;
    align-items: center;
    gap: 10px; /* .gap 設定元件間距。 ☰ 與 logo 之間間距 */
}

/* 網站標誌（品牌） */
.logo {  
    font-size: 2.2rem;
    color: #2563eb;                    /* 深藍色字體 */
    line-height: 1.2;                  /* 多行標誌用行距 */
}

.logo a {
    text-decoration: none;     /* 移除底線 */
    color: inherit;            /* 使用父元素的文字顏色 */
}

/* 可選：滑鼠懸停時也不要變色或加底線 */
.logo a:hover {
    text-decoration: none;
    color: inherit;
}

.logo-group {
    display: inline-flex;
    align-items: flex-end; /* ✅ ✅ 關鍵！底部對齊 */
    gap: 2px; /* logo 與文字之間的間距 */
}

.nav-text {
    font-size: 1rem;   /* 與導覽列連結同樣字體大小 */     
    color: #2563eb;                    /* 深藍色字體 */
  
}

/* 導覽連結樣式 */
.nav-links {
    display: flex;
    gap: 1.5rem;                       /* 每個連結間距 */
    list-style: none;                 /* 移除項目符號 */
}

/* 導覽連結內的超連結 */
.nav-links a {
    text-decoration: none;            /* 移除底線 */
    color: var(--color-text);                      /* 深灰文字 */
    font-size: 0.95rem;   
    /*transition: border-bottom 0.3s ease, color 0.3s ease; 補平視覺閃爍*/
}

/* 可選：滑鼠懸停時也不要變色或加底線 */
.nav-links a:hover {
    text-decoration: none;
    color: #1a73eb;
    border-bottom: 2px solid var(--color-active-link);
}

.nav-links a.active-link {
    border-bottom: 2px solid var(--color-active-link);
}

/* 導覽按鈕群組 */
.nav-buttons button {
    margin-TOP: 0.5rem;
    margin-left: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    color: white;
    background-color: var(--color_button); /* 按鈕背景色 */
    cursor: pointer;
}

.nav-buttons button:hover {
    background-color: #5d8ffa;   /* hover 更亮 */
}

/* 藍色 Book a Demo 按鈕 */
.demo-btn {
    background-color: #3366ff;
    color: white;
    border: none;
}

/* ===== sub-nav ===== */
.sub-navbar-content {
    display: flex;            /* 橫向排列 */ 
    flex-direction: column;   /* 子元素（form + nav-links）上下排列 */
    justify-content: center;  /* 水平置中 */
    align-items: center;      /* 垂直置中 */
    height: 90px;             /* 統一高度 */
    gap: 0.5rem;              /* form 與下方 nav-links 之間留空隙 */
    padding: 0 10%;
}

/* 🔧 讓 form + nav links 水平排成一列 */
.sub-navbar-row {
    width: 100%;              /* 撐滿父容器 .sub-navbar-content 寬度 */
    display: flex;    
    justify-content: center;  /* 水平置中 */
    align-items: center;     /* ✅ 垂直置中 */
    gap: 0.1rem;               /* ✅ form 和 nav-links 之間間距 */
}

/* ===== 案例區塊 (Case Study) ===== */