/**
 * Astra Child - Header 滚动效果样式
 *
 * 定义页面滚动时 Header 的样式变化
 * 使用 CSS 过渡实现平滑的动画效果
 *
 * @package Astra_Child
 * @since 1.0.0
 */

/* =====================================================
   基础 Header 样式
   ===================================================== */

/**
 * 为 Header 添加过渡效果
 * 确保样式变化时有平滑的动画
 */
.site-header {
    transition: all 0.3s ease-in-out;
}

/* =====================================================
   滚动状态样式 (.header-scrolled)
   ===================================================== */

/**
 * 当页面向下滚动时，Header 获得此 class
 * 在此定义滚动后的样式变化
 */

/* 滚动后固定在顶部，带阴影和背景色 */
.site-header.header-scrolled {
    /* 固定定位 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    /* 背景色 - 避免内容透过 header 显示 */
    background-color: #ffffff;

    /* 阴影效果 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 示例：缩小 Header 高度（可选，根据需要启用） */
/*
.site-header.header-scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
}
*/

/* 示例：半透明背景 + 毛玻璃效果（可选，替代纯白背景） */
/*
.site-header.header-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
*/

/* =====================================================
   Logo 样式变化
   ===================================================== */

/**
 * 滚动时缩小 Logo（可选）
 */
/*
.site-header.header-scrolled .site-logo img,
.site-header.header-scrolled .custom-logo {
    max-height: 40px;
    transition: max-height 0.3s ease-in-out;
}
*/

/* =====================================================
   导航菜单样式变化
   ===================================================== */

/**
 * 滚动时调整导航菜单样式（可选）
 */
/*
.site-header.header-scrolled .main-navigation {
    font-size: 14px;
}
*/

/* =====================================================
   移动端适配
   ===================================================== */

/**
 * 移动端设备上的滚动样式
 * 可根据需要调整或禁用某些效果
 */
@media (max-width: 768px) {
    .site-header.header-scrolled {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    }
}

/* =====================================================
   深色模式支持（可选）
   ===================================================== */

/**
 * 如果网站支持深色模式，可以在此添加相应样式
 */
/*
@media (prefers-color-scheme: dark) {
    .site-header.header-scrolled {
        background-color: rgba(30, 30, 30, 0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
}
*/

/* =====================================================
   自定义样式区域
   ===================================================== */

/**
 * 在此添加您的自定义滚动效果样式
 * 以下是一些常用的效果示例，可根据需要启用或修改
 */

/* 示例：透明 Header 滚动后变为实色 */
/*
.site-header {
    background-color: transparent;
}

.site-header.header-scrolled {
    background-color: #ffffff;
}
*/

/* 示例：改变文字颜色 */
/*
.site-header.header-scrolled .site-title a,
.site-header.header-scrolled .main-navigation a {
    color: #333333;
}
*/