/* 长沙新视界科技有限公司 - 优化导航样式文件 */
/* 合并了 main.css、templates.css、index-navigation.css 和 mobile-header.css 中的导航相关样式 */

/* ===== CSS变量定义 ===== */
:root {
    /* 主题色彩 */
    --theme-blue: #323b4e;
    --theme-blue-light: #007bff;
    --theme-blue-dark: #004085;
    --accent-red: #dc3545;
    --accent-red-light: #e74c3c;
    --accent-red-dark: #c82333;
    --bg-gray: #e8eef8;
    --sharp-red: #e11d48;
    
    /* 中性色彩 */
    --white: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-300: #ced4da;
    --gray-400: #adb5bd;
    --gray-500: #6c757d;
    --gray-600: #495057;
    --gray-700: #343a40;
    --gray-800: #212529;
    --gray-900: #000000;
    
    /* 渐变色 */
    --gradient-blue: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    --gradient-blue-reverse: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
    
    /* 字体 */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    
    /* 字体大小 */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* 间距 */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    
    /* 圆角 */
    --border-radius-sm: 0.125rem;
    --border-radius: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --border-radius-2xl: 1rem;
    --border-radius-full: 9999px;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* 过渡 */
    --transition-fast: 150ms ease-in-out;
    --transition: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* 断点 */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ===== 基础样式重置 ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* 添加滚动边距，确保标题不被导航栏遮挡 */
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--gray-800);
    background-color: var(--bg-gray);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ===== 通用工具类 ===== */
.bg-theme-blue {
    background-color: var(--theme-blue);
}

.bg-theme-blue-light {
    background-color: var(--theme-blue-light);
}

.bg-theme-blue-dark {
    background-color: var(--theme-blue-dark);
}

.bg-accent-red {
    background-color: var(--accent-red);
}

.bg-accent-red-light {
    background-color: var(--accent-red-light);
}

.bg-accent-red-dark {
    background-color: var(--accent-red-dark);
}

.bg-bg-gray {
    background-color: var(--bg-gray);
}

.text-theme-blue {
    color: var(--theme-blue);
}

.text-theme-blue-light {
    color: var(--theme-blue-light);
}

.text-theme-blue-dark {
    color: var(--theme-blue-dark);
}

.text-accent-red {
    color: var(--accent-red);
}

.text-accent-red-light {
    color: var(--accent-red-light);
}

.text-accent-red-dark {
    color: var(--accent-red-dark);
}

/* ===== 导航栏核心样式 ===== */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform var(--transition);
}

/* 导航栏滚动隐藏效果 */
.sticky-nav.hidden {
    transform: translateY(-100%);
}

/* 导航高亮样式 */
.nav-current {
    background-color: var(--accent-red) !important;
    color: white !important;
}

/* 导航链接样式 */
.nav-item {
    color: white;
    text-decoration: none;
    padding: 0.75rem 1rem;
    transition: all var(--transition);
    font-weight: bold;
    text-align: center;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-item.nav-current {
    background-color: var(--accent-red) !important;
    color: white !important;
}

/* ===== 移动端导航样式 ===== */
#mobileNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 80px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    overflow: hidden;
}

#mobileNav.collapsed {
    max-height: 0 !important;
}

#mobileNav.expanded {
    max-height: 100vh !important;
}

#mobileNav.active {
    opacity: 1;
    visibility: visible;
}

/* 移动端导航链接样式 */
.mobile-nav-item {
    color: white;
    text-decoration: none;
    padding: 0.75rem 1rem;
    transition: all var(--transition);
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.mobile-nav-item.bg-blue-800 {
    background-color: #1e40af;
}

/* ===== 导航按钮样式 ===== */
#navToggle {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 10000;
    position: relative;
    display: none;
}

#navToggle:focus {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* 移动端导航关闭按钮样式 */
#closeMobileNav {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===== 头部响应式样式 ===== */
@media (max-width: 1024px) {
    header {
        height: auto !important;
        padding: 15px 0;
    }
    
    header .container .flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    header .container .flex > div {
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    header .container .flex > div:last-child {
        margin-bottom: 0;
    }
    
    header .container .flex > div:nth-child(2) {
        order: -1;
    }
}

/* ===== 横屏模式图片与文字高度匹配 ===== */
@media screen and (orientation: landscape) {
    /* 头部区域图片与标题文字高度匹配 - 增大一倍 */
    header .container .flex > div:first-child .logo-image,
    body header div.container div.flex div:first-child img.logo-image,
    body #header-component header div.container div.flex div:first-child img.logo-image,
    header#home div.container div.flex div:first-child img.logo-image,
    header div.container div.flex div:first-child img.logo-image,
    #header-component div.container div.flex div:first-child img.logo-image {
        /* 获取标题文字的行高并匹配 - 增大一倍 */
        height: 3em !important; /* 从1.5em增加到3em，匹配h1标题的行高 */
        width: auto !important;
        max-height: 4em !important; /* 从2em增加到4em，不超过标题的2倍行高 */
        max-width: 600px !important; /* 从300px增加到600px */
        object-fit: contain !important;
        display: inline-block !important;
        vertical-align: middle !important;
        /* 确保在所有情况下都生效 */
        min-height: 2.4em !important; /* 从1.2em增加到2.4em */
        min-width: auto !important;
    }
    
    /* 导航栏区域图片与导航文字高度匹配 - 增大一倍 */
    nav .container .flex > div:first-child .nav-logo-image,
    body nav div.container div.flex div:first-child img.nav-logo-image,
    body nav .container div.flex div:first-child img.nav-logo-image,
    .nav-logo-image {
        /* 获取导航文字的行高并匹配 - 增大一倍 */
        height: 5em !important; /* 从2.5em增加到5em，匹配导航菜单的行高 */
        width: auto !important;
        max-height: 6em !important; /* 从3em增加到6em，不超过导航文字的3倍行高 */
        max-width: 400px !important; /* 从200px增加到400px */
        object-fit: contain !important;
        display: inline-block !important;
        vertical-align: middle !important;
        /* 确保在所有情况下都生效 */
        min-height: 4em !important; /* 从2em增加到4em */
        min-width: auto !important;
    }
    
    /* 横屏模式下隐藏悬浮导航按钮 */
    .floating-nav {
        display: none !important;
    }
}

/* 横屏小屏幕优化 - 增大一倍 */
@media screen and (orientation: landscape) and (max-width: 768px) {
    header .container .flex > div:first-child .logo-image,
    body header div.container div.flex div:first-child img.logo-image,
    body #header-component header div.container div.flex div:first-child img.logo-image,
    header#home div.container div.flex div:first-child img.logo-image,
    header div.container div.flex div:first-child img.logo-image,
    #header-component div.container div.flex div:first-child img.logo-image {
        height: 2.6em !important; /* 从1.3em增加到2.6em */
        max-height: 3.6em !important; /* 从1.8em增加到3.6em */
        max-width: 500px !important; /* 从250px增加到500px */
    }
    
    nav .container .flex > div:first-child .nav-logo-image,
    body nav div.container div.flex div:first-child img.nav-logo-image,
    body nav .container div.flex div:first-child img.nav-logo-image,
    .nav-logo-image {
        height: 4.4em !important; /* 从2.2em增加到4.4em */
        max-height: 5.6em !important; /* 从2.8em增加到5.6em */
        max-width: 360px !important; /* 从180px增加到360px */
    }
}

/* 横屏大屏幕优化 - 增大一倍 */
@media screen and (orientation: landscape) and (min-width: 1200px) {
    header .container .flex > div:first-child .logo-image,
    body header div.container div.flex div:first-child img.logo-image,
    body #header-component header div.container div.flex div:first-child img.logo-image,
    header#home div.container div.flex div:first-child img.logo-image,
    header div.container div.flex div:first-child img.logo-image,
    #header-component div.container div.flex div:first-child img.logo-image {
        height: 3.6em !important; /* 从1.8em增加到3.6em */
        max-height: 5em !important; /* 从2.5em增加到5em */
        max-width: 700px !important; /* 从350px增加到700px */
    }
    
    nav .container .flex > div:first-child .nav-logo-image,
    body nav div.container div.flex div:first-child img.nav-logo-image,
    body nav .container div.flex div:first-child img.nav-logo-image,
    .nav-logo-image {
        height: 5.6em !important; /* 从2.8em增加到5.6em */
        max-height: 7em !important; /* 从3.5em增加到7em */
        max-width: 440px !important; /* 从220px增加到440px */
    }
}

@media (max-width: 768px) {
    header {
        height: auto !important;
        padding: 10px 0;
    }
    
    header .container .flex {
        flex-direction: row;
        align-items: center;
    }
    
    header .container .flex > div {
        margin-bottom: 0;
    }
    
    header .container .flex > div:nth-child(2) {
        order: 0;
        flex: 1;
        min-width: 0;
        /* 确保标题区域在移动端始终显示 */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 强制确保标题和副标题在移动端显示 */
    header .container .flex > div:nth-child(2) h1,
    header .container .flex > div:nth-child(2) p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header h1 {
        font-size: 1.2rem !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        /* 强制显示标题 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header p {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        /* 强制显示副标题 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header .bg-white {
        width: 60px !important;
        height: 45px !important;
        padding: 8px !important;
    }
    
    header .text-xs {
        font-size: 0.65rem !important;
    }
    
    header button {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
    
    header input {
        font-size: 0.8rem !important;
    }
    
    header .text-gray-300 {
        font-size: 0.7rem !important;
    }
    
    .nav-current {
        background-color: var(--accent-red) !important;
    }
    
    /* 导航按钮在移动端显示 */
    #navToggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 8px;
        cursor: pointer;
        transition: all var(--transition);
        min-width: 44px;
        min-height: 44px;
    }
    
    #navToggle:hover {
        background: rgba(255, 255, 255, 0.2);
    }
}

@media (max-width: 480px) {
    header .container .flex > div:nth-child(2) {
        padding: 0 8px;
        /* 确保标题区域在超小屏幕上始终显示 */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 强制确保标题和副标题在超小屏幕上显示 */
    header .container .flex > div:nth-child(2) h1,
    header .container .flex > div:nth-child(2) p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header h1 {
        font-size: 1rem !important;
        line-height: 1.1 !important;
        /* 强制显示标题 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header p {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
        /* 强制显示副标题 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header .bg-white {
        width: 50px !important;
        height: 40px !important;
        padding: 6px !important;
    }
    
    header .text-xs {
        font-size: 0.6rem !important;
        line-height: 1 !important;
    }
    
    header button {
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
    }
    
    header input {
        font-size: 0.7rem !important;
        padding: 8px 12px !important;
    }
    
    header .text-gray-300 {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 360px) {
    /* 确保标题区域在极小屏幕上始终显示 */
    header .container .flex > div:nth-child(2) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 4px !important;
    }
    
    /* 强制确保标题和副标题在极小屏幕上显示 */
    header .container .flex > div:nth-child(2) h1,
    header .container .flex > div:nth-child(2) p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header h1 {
        font-size: 0.9rem !important;
        /* 强制显示标题 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    header p {
        font-size: 0.65rem !important;
        /* 强制显示副标题 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== 竖屏模式悬浮导航显示和拖拽功能 ===== */
@media screen and (orientation: portrait) {
    /* 竖屏模式下显示悬浮导航按钮 */
    .floating-nav {
        display: block !important;
        position: fixed !important;
        top: 80px !important;
        right: 20px !important;
        z-index: 9999 !important;
        cursor: move !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        touch-action: none !important;
    }
    
    /* 悬浮按钮拖拽时的样式 */
    .floating-nav.dragging {
        opacity: 0.8 !important;
        transform: scale(1.1) !important;
        transition: none !important;
    }
    
    /* 悬浮按钮拖拽后的位置保持 */
    .floating-nav.dragged {
        transition: all 0.3s ease !important;
    }
}

/* ===== 竖屏触摸屏专用头部样式 ===== */
@media screen and (orientation: portrait) {
    
    /* 头部基础样式重置 */
    header {
        height: auto !important;
        min-height: 60px !important;
        padding: 8px 0 !important;
    }
    
    header .container {
        padding: 0 12px !important;
    }
    
    /* 头部主容器 - 改为垂直布局 */
    header .container .flex {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: auto !important;
    }
    
    /* 第一行：Logo和汉堡菜单 */
    header .container .flex > div:first-child {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        order: 1 !important;
        margin-bottom: 0 !important;
    }
    
    /* Logo样式调整 - 使用最高优先级的选择器确保尺寸限制生效 */
    body header div.container div.flex div:first-child img.logo-image,
    body #header-component header div.container div.flex div:first-child img.logo-image,
    header#home div.container div.flex div:first-child img.logo-image,
    header div.container div.flex div:first-child img.logo-image,
    #header-component div.container div.flex div:first-child img.logo-image {
        /* 添加合理的尺寸限制，保持图片比例 */
        height: 64px !important;
        width: auto !important;
        max-height: 96px !important;
        max-width: 300px !important;
        object-fit: contain !important;
        /* 保持适当的比例和响应式 */
        display: block !important;
        /* 确保在所有情况下都生效 */
        min-height: 32px !important;
        min-width: auto !important;
    }
    
    /* 导航栏Logo样式 - 使用最高优先级的选择器确保尺寸限制生效 */
    body header div.container div.flex div:first-child img.nav-logo-image,
    body #header-component header div.container div.flex div:first-child img.nav-logo-image,
    header#home div.container div.flex div:first-child img.nav-logo-image,
    header div.container div.flex div:first-child img.nav-logo-image,
    #header-component div.container div.flex div:first-child img.nav-logo-image,
    .nav-logo-image {
        /* 添加合理的尺寸限制，保持图片比例 */
        height: 40px !important;
        width: auto !important;
        max-height: 60px !important;
        max-width: 200px !important;
        object-fit: contain !important;
        /* 保持适当的比例和响应式 */
        display: block !important;
        /* 确保在所有情况下都生效 */
        min-height: 20px !important;
        min-width: auto !important;
    }
    
    /* 汉堡按钮样式优化 */
    header #navToggle {
        display: flex !important;
        padding: 8px !important;
        border-radius: 8px !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        transition: all var(--transition) !important;
    }
    
    header #navToggle:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    header #navToggle svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* 第二行：标题区域 - 占用全部宽度 */
    header .container .flex > div:nth-child(2) {
        width: 100% !important;
        order: 2 !important;
        text-align: center !important;
        padding: 4px 8px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: auto !important;
    }
    
    /* 标题文字样式 - 强制显示 */
    header .container .flex > div:nth-child(2) h1 {
        color: white !important;
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin: 0 0 4px 0 !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* 副标题文字样式 */
    header .container .flex > div:nth-child(2) p {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        margin: 0 !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* 第三行：占位元素 - 隐藏 */
    header .container .flex > div:nth-child(3) {
        display: none !important;
    }
    
    /* 导航菜单样式 - 确保在竖屏模式下正确显示 */
    header nav {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.95) !important;
        z-index: 9999 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 80px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all var(--transition) !important;
    }
    
    /* 导航菜单激活状态 */
    header nav.active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 导航链接样式 */
    header nav a {
        color: white !important;
        text-decoration: none !important;
        padding: 15px 20px !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: 100% !important;
        text-align: center !important;
        transition: all var(--transition) !important;
    }
    
    header nav a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    header nav a:last-child {
        border-bottom: none !important;
    }
    
    /* 确保导航按钮在竖屏模式下始终可见 */
    #navToggle,
    body header #navToggle,
    #header-component header #navToggle,
    #header-component #navToggle.md\:hidden,
    .mobile-nav-toggle,
    button#navToggle.md\:hidden,
    header button#navToggle.md\:hidden,
    .bg-gradient-to-r button#navToggle.md\:hidden {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10000 !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        padding: 8px !important;
        cursor: pointer !important;
        transition: all var(--transition) !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    header #navToggle:hover,
    body header #navToggle:hover,
    #header-component header #navToggle:hover,
    .mobile-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.05) !important;
    }
    
    header #navToggle:active,
    body header #navToggle:active,
    #header-component header #navToggle:active,
    .mobile-nav-toggle:active {
        transform: scale(0.95) !important;
    }
    
    /* 导航按钮图标样式 */
    header #navToggle svg,
    body header #navToggle svg,
    #header-component header #navToggle svg,
    .mobile-nav-toggle svg {
        width: 24px !important;
        height: 24px !important;
        fill: white !important;
        stroke: white !important;
    }
}

/* 小屏竖屏设备优化 */
@media screen and (orientation: portrait) and (max-width: 480px) {
    
    header {
        padding: 6px 0 !important;
        min-height: 50px !important;
    }
    
    header .container {
        padding: 0 8px !important;
    }
    
    /* Logo更小 - 使用更具体的选择器 */
    body header div.container div.flex div:first-child img.logo-image,
    body #header-component header div.container div.flex div:first-child img.logo-image,
    header#home div.container div.flex div:first-child img.logo-image,
    header div.container div.flex div:first-child img.logo-image,
    #header-component div.container div.flex div:first-child img.logo-image {
        height: 48px !important;
        max-height: 72px !important;
        max-width: 240px !important;
    }
    
    body header div.container div.flex div:first-child img.nav-logo-image,
    body #header-component header div.container div.flex div:first-child img.nav-logo-image,
    header#home div.container div.flex div:first-child img.nav-logo-image,
    header div.container div.flex div:first-child img.nav-logo-image,
    #header-component div.container div.flex div:first-child img.nav-logo-image,
    .nav-logo-image {
        height: 32px !important;
        max-height: 48px !important;
        max-width: 160px !important;
    }
    
    /* 标题字体更小 */
    header .container .flex > div:nth-child(2) h1 {
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
    }
    
    header .container .flex > div:nth-child(2) p {
        font-size: 0.7rem !important;
    }
    
    /* 汉堡按钮更小 */
    header #navToggle {
        padding: 6px !important;
    }
    
    header #navToggle svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* 导航按钮调整 */
    #navToggle,
    body header #navToggle,
    #header-component header #navToggle,
    .mobile-nav-toggle {
        padding: 6px !important;
    }
    
    #navToggle svg,
    body header #navToggle svg,
    #header-component header #navToggle svg,
    .mobile-nav-toggle svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    header nav a {
        font-size: 1rem !important;
        padding: 12px 16px !important;
    }
}

/* 超小屏竖屏设备优化 */
@media screen and (orientation: portrait) and (max-width: 360px) {
    
    header {
        padding: 4px 0 !important;
        min-height: 45px !important;
    }
    
    header .container {
        padding: 0 6px !important;
    }
    
    /* Logo最小化 - 使用更具体的选择器 */
    body header div.container div.flex div:first-child img.logo-image,
    body #header-component header div.container div.flex div:first-child img.logo-image,
    header#home div.container div.flex div:first-child img.logo-image,
    header div.container div.flex div:first-child img.logo-image,
    #header-component div.container div.flex div:first-child img.logo-image {
        height: 40px !important;
        max-height: 60px !important;
        max-width: 200px !important;
    }
    
    body header div.container div.flex div:first-child img.nav-logo-image,
    body #header-component header div.container div.flex div:first-child img.nav-logo-image,
    header#home div.container div.flex div:first-child img.nav-logo-image,
    header div.container div.flex div:first-child img.nav-logo-image,
    #header-component div.container div.flex div:first-child img.nav-logo-image,
    .nav-logo-image {
        height: 28px !important;
        max-height: 42px !important;
        max-width: 140px !important;
    }
    
    /* 标题字体最小化 */
    header .container .flex > div:nth-child(2) h1 {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }
    
    header .container .flex > div:nth-child(2) p {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
    }
    
    /* 减少间距 */
    header .container .flex {
        gap: 4px !important;
    }
    
    header .container .flex > div:nth-child(2) {
        padding: 2px 4px !important;
    }
    
    /* 导航按钮调整 */
    #navToggle,
    body header #navToggle,
    #header-component header #navToggle {
        padding: 4px !important;
    }
    
    #navToggle svg,
    body header #navToggle svg,
    #header-component header #navToggle svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    header nav a {
        font-size: 0.9rem !important;
        padding: 10px 12px !important;
    }
}

/* ===== 触摸设备优化 ===== */
@media (pointer: coarse) and (orientation: portrait) {
    
    /* 增大触摸目标 */
    header #navToggle {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 确保标题区域可点击 */
    header .container .flex > div:nth-child(2) {
        min-height: 44px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* ===== 高分辨率屏幕优化 ===== */
@media screen and (orientation: portrait) and (min-resolution: 2dppx) {
    
    header .container .flex > div:nth-child(2) h1,
    header .container .flex > div:nth-child(2) p {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* ===== 动画效果 ===== */
@media screen and (orientation: portrait) {
    
    header .container .flex {
        transition: all var(--transition) !important;
    }
    
    header .container .flex > div:nth-child(2) {
        transition: all var(--transition) !important;
    }
    
    header #navToggle {
        transition: all var(--transition) !important;
    }
    
    /* 汉堡菜单动画 */
    header #navToggle:active {
        transform: scale(0.95) !important;
    }
}

/* ===== 确保在所有情况下都强制显示标题的终极样式 ===== */
@media screen and (orientation: portrait) {
    
    /* 使用最高优先级的选择器 */
    body header div.container div.flex div:nth-child(2) h1,
    body header div.container div.flex div:nth-child(2) p,
    header#home div.container div.flex div:nth-child(2) h1,
    header#home div.container div.flex div:nth-child(2) p,
    #header-component div.container div.flex div:nth-child(2) h1,
    #header-component div.container div.flex div:nth-child(2) p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
    }
    
    /* 确保容器可见 */
    body header div.container div.flex div:nth-child(2),
    header#home div.container div.flex div:nth-child(2),
    #header-component div.container div.flex div:nth-child(2) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== 确保头部组件中的标题颜色不被覆盖 ===== */
body header h1.text-white,
body #header-component h1.text-white,
body #header-component .text-white h1,
body .bg-gradient-to-r h1.text-white {
    color: white !important;
}

/* 特别针对首页标题的额外保护 */
body #header-component .flex-col h1.text-white {
    color: white !important;
}

/* ===== 头部导航栏样式 ===== */
.bg-gradient-to-r {
    background: linear-gradient(to right, #1e3a8a, #1e40af);
}

.bg-blue-600 {
    background-color: #2563eb;
}

.bg-blue-700 {
    background-color: #1d4ed8;
}

.bg-blue-800 {
    background-color: #1e40af;
}

.hover\:bg-blue-700:hover {
    background-color: #1d4ed8;
}

.hover\:bg-blue-800:hover {
    background-color: #1e40af;
}

/* ===== 锚点样式 ===== */
.anchor-point {
    display: block;
    position: relative;
    top: -80px; /* 与scroll-padding-top相同的值 */
    visibility: hidden;
}

/* ===== 响应式布局 ===== */
.container {
    width: 100%;
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* ===== 响应式工具类 ===== */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

@media (min-width: 576px) {
    .d-sm-none {
        display: none !important;
    }
    
    .d-sm-block {
        display: block !important;
    }
    
    .d-sm-inline {
        display: inline !important;
    }
    
    .d-sm-inline-block {
        display: inline-block !important;
    }
    
    .d-sm-flex {
        display: flex !important;
    }
    
    .d-sm-inline-flex {
        display: inline-flex !important;
    }
}

@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
    
    .d-md-block {
        display: block !important;
    }
    
    .d-md-inline {
        display: inline !important;
    }
    
    .d-md-inline-block {
        display: inline-block !important;
    }
    
    .d-md-flex {
        display: flex !important;
    }
    
    .d-md-inline-flex {
        display: inline-flex !important;
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
    
    .d-lg-block {
        display: block !important;
    }
    
    .d-lg-inline {
        display: inline !important;
    }
    
    .d-lg-inline-block {
        display: inline-block !important;
    }
    
    .d-lg-flex {
        display: flex !important;
    }
    
    .d-lg-inline-flex {
        display: inline-flex !important;
    }
}

@media (min-width: 1200px) {
    .d-xl-none {
        display: none !important;
    }
    
    .d-xl-block {
        display: block !important;
    }
    
    .d-xl-inline {
        display: inline !important;
    }
    
    .d-xl-inline-block {
        display: inline-block !important;
    }
    
    .d-xl-flex {
        display: flex !important;
    }
    
    .d-xl-inline-flex {
        display: inline-flex !important;
    }
}

/* ===== 打印样式 ===== */
@media print {
    .d-print-none {
        display: none !important;
    }
    
    .d-print-block {
        display: block !important;
    }
    
    .d-print-inline {
        display: inline !important;
    }
    
    .d-print-inline-block {
        display: inline-block !important;
    }
    
    .d-print-flex {
        display: flex !important;
    }
    
    .sticky-nav {
        position: static;
    }
}