/**
 * 头部布局系统 - 响应式CSS优化
 * 用于优化头部拖拽布局的显示效果和交互体验
 */

/* 去掉头部区域交互元素的聚焦蓝框 */
.site-header.header-layout-system a:focus,
.site-header.header-layout-system button:focus,
.site-header.header-layout-system input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   全局样式优化
   ======================================== */

/* 确保头部布局系统不与原有样式冲突 */
.site-header.header-layout-system {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.site-header.header-layout-system * {
    box-sizing: border-box;
}

/* 头部容器 */
.header-container {
    position: relative;
    width: 100%;
}

/* 布局行 */
.header-layout-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

/* 布局列 */
.header-layout-column {
    display: flex;
    align-items: center;
    padding: 0;
}

/* 单列布局 */
.header-layout-single {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

/* ========================================
   组件通用样式
   ======================================== */

/* 组件包装器 */
.header-section-wrapper {
    display: inline-block;
    vertical-align: middle;
}

/* 组件内部不要有额外的margin */
.header-section-wrapper > div {
    margin: 0;
}

/* ========================================
   响应式断点
   ======================================== */

/* 超大屏幕 (>=1200px) */
@media (min-width: 1200px) {
    .header-container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* 大屏幕 (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-container {
        max-width: 970px;
        margin: 0 auto;
    }
}

/* 中等屏幕 (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .header-container {
        max-width: 750px;
        margin: 0 auto;
        padding: 0 15px !important;
    }
    
    .header-layout-column {
        padding: 0 10px;
    }
}

/* 小屏幕 (<768px) - 移动端 */
@media (max-width: 767px) {
    /* 头部不固定 */
    .site-header.header-layout-system {
        position: relative !important;
        top: auto !important;
    }
    
    /* 容器全宽 */
    .header-container {
        width: 100%;
        padding: 10px !important;
    }
    
    /* 布局行垂直排列 */
    .header-layout-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    /* 布局列占满宽度 */
    .header-layout-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0;
        margin-bottom: 10px;
    }
    
    /* 单列布局垂直排列 */
    .header-layout-single {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .header-section-wrapper {
        width: 100%;
        display: block;
    }
}

/* ========================================
   组件特定优化
   ======================================== */

/* Logo组件移动端优化 */
@media (max-width: 767px) {
    .header-logo-component {
        text-align: center;
        padding: 10px 0;
    }
    
    .header-logo-component .logo-wrapper {
        text-align: center !important;
    }
    
    .header-logo-component img {
        max-width: 150px !important;
        max-height: 60px !important;
    }
}

/* 搜索框组件移动端优化 */
@media (max-width: 767px) {
    .header-search-component {
        width: 100%;
    }
    
    .header-search-box {
        width: 100% !important;
    }
    
    .hot-keywords {
        display: none;
    }
}

/* 购物车组件移动端优化 */
@media (max-width: 767px) {
    .header-cart-component {
        text-align: center;
    }
    
    .header-cart-component .cart-text {
        display: none;
    }
    
    .cart-preview-dropdown {
        right: 0 !important;
        left: 0 !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* 语言货币组件移动端优化 */
@media (max-width: 767px) {
    .header-lang-currency-component {
        text-align: center;
    }
    
    .lang-currency-trigger {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .lang-currency-dropdown {
        right: 0 !important;
        left: 0 !important;
        min-width: 100% !important;
    }
}

/* 快捷链接组件移动端优化 */
@media (max-width: 767px) {
    .quick-links-list {
        justify-content: center;
        gap: 10px !important;
    }
    
    .quick-link {
        font-size: 12px !important;
    }
}

/* 用户账号组件移动端优化 */
@media (max-width: 767px) {
    .header-user-account-component {
        text-align: center;
    }
    
    .user-dropdown {
        right: 0 !important;
        left: 0 !important;
        min-width: 100% !important;
    }
    
    .user-menu-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* 产品分类组件移动端优化 */
@media (max-width: 767px) {
    .header-category-menu-component {
        text-align: center;
    }
    
    .category-dropdown {
        left: 0 !important;
        right: 0 !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    .category-submenu {
        position: relative !important;
        left: 0 !important;
        margin-left: 15px !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* 导航菜单组件移动端优化 */
@media (max-width: 767px) {
    .header-navigation-component {
        display: none; /* 移动端通常隐藏主导航 */
    }
}

/* ========================================
   性能优化
   ======================================== */

/* 使用will-change提示浏览器优化 */
.site-header.header-layout-system {
    will-change: transform;
}

/* 优化滚动性能 */
.site-header.header-layout-system.scrolled {
    transition: box-shadow 0.3s ease;
}

/* ========================================
   打印样式
   ======================================== */

@media print {
    .site-header.header-layout-system {
        position: relative !important;
        box-shadow: none !important;
        border-bottom: 1px solid #000;
    }
    
    /* 打印时隐藏某些组件 */
    .header-cart-component,
    .header-user-account-component,
    .header-lang-currency-component {
        display: none !important;
    }
}

/* ========================================
   无障碍优化
   ======================================== */

/* 键盘焦点可见 */
.header-layout-system a:focus,
.header-layout-system button:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 跳过导航链接 */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: #007bff;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 10001;
}

.skip-to-main:focus {
    top: 0;
}

/* ========================================
   浏览器兼容性
   ======================================== */

/* IE11兼容 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .header-layout-row {
        display: -ms-flexbox;
    }
    
    .header-layout-column {
        -ms-flex: 1;
    }
}

/* Safari兼容 */
@supports (-webkit-appearance: none) {
    .site-header.header-layout-system {
        -webkit-transform: translateZ(0);
    }
}