/**
 * Sticky Header Styles
 * 滾動時 header 固定在頂部，背景變黑色
 */

/* 基本 sticky 設定 */
.site-header {
    position: relative;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}

/* 當滾動時添加 sticky 效果 */
.site-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #000000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease-out;
}

/* 滑下動畫 */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Sticky 狀態下的文字顏色調整 */
.site-header.sticky .site-branding,
.site-header.sticky .main-navigation a,
.site-header.sticky .site-header-account a,
.site-header.sticky .header-group-action a {
    color: #ffffff !important;
}

/* Sticky 狀態下的導航連結 hover 效果 */
.site-header.sticky .main-navigation a:hover {
    color: #cccccc !important;
}

/* 確保內容不被固定的 header 遮擋 */
body.header-is-sticky {
    padding-top: 0;
}

/* 當 header 變成 sticky 時，添加佔位空間 */
body.header-is-sticky .site-header {
    margin-bottom: 0;
}

/* 為 header 添加佔位元素 */
.header-spacer {
    display: none;
    height: 0;
}

body.header-is-sticky .header-spacer {
    display: block;
    /* 高度會由 JavaScript 動態設定 */
}

/* Logo 在 sticky 狀態下可以縮小（可選） */
.site-header.sticky .site-branding img {
    max-height: 50px;
    transition: max-height 0.3s ease;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .site-header.sticky {
        padding: 10px 0;
    }

    .site-header.sticky .site-branding img {
        max-height: 40px;
    }
}