/* Written by Constantine Heinrich CHEN (ConsHein CHEN) */
/* Last Updated: 2025-10-29 */

/* Mobile Styles | 移动设备样式 */
@media (max-width: 768px) {
    body {
        padding-top: 120px; /* 增加body的顶部内边距以适应更高的移动端导航栏 | Increase body top padding to accommodate taller mobile navigation bar */
    }
    
    header {
        width: 100vw;
        padding: 0;
    }
    
    .navbar {
        flex-direction: column;
        width: 100vw;
        padding: 1rem;
        gap: 1rem;
    }
    
    .logo {
        width: 100%;
        justify-content: center;
    }
    
    .nav-links {
        width: 100%;
        justify-content: center;
        gap: 1rem;
    }
    
    .nav-links a {
        outline: none;
        -webkit-outline: none;
        -moz-outline: none;
        -ms-outline: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
    }
    
    .nav-links a:focus {
        outline: none;
        -webkit-outline: none;
        -moz-outline: none;
        -ms-outline: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
    }
    
    .nav-links a:active {
        outline: none;
        -webkit-outline: none;
        -moz-outline: none;
        -ms-outline: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
    }
    
    /* Global link styles for mobile | 移动设备全局超链接样式 */
    a:active {
        color: var(--link-color);
        text-decoration: none;
    }
    
    .controls {
        width: 100%;
        justify-content: center;
        gap: 1rem;
    }
    
    .theme-switch, .language-switch {
        outline: none !important;
        -webkit-outline: none !important;
        -moz-outline: none !important;
        -ms-outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        -ms-box-shadow: none !important;
    }
    
    .theme-switch:focus, .language-switch:focus {
        outline: none !important;
        -webkit-outline: none !important;
        -moz-outline: none !important;
        -ms-outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        -ms-box-shadow: none !important;
    }
    
    .theme-switch:active, .language-switch:active {
        outline: none !important;
        -webkit-outline: none !important;
        -moz-outline: none !important;
        -ms-outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        -ms-box-shadow: none !important;
    }
    
    .main-container {
        padding: 1rem;
    }
    
    .content-section {
        margin-bottom: 1.5rem;
        padding: 1rem;
    }
    
    .section-content h2 {
        font-size: 1.5rem;
    }
    
    /* Home page mobile styles | 主页移动端样式 */
    .home-content-container {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .info-section {
        order: 1; /* 信息栏放在最上面 | Info section at the top */
        padding: 1rem;
    }
    
    .home-content-section {
        order: 2; /* 内容区域放在信息栏下方 | Content section below info section */
        gap: 1rem;
    }
    
    .intro-section {
        order: 1; /* 介绍区域放在内容区域的第一个位置 | Intro section first in content area */
        padding: 1rem;
    }
    
    .news-section {
        order: 2; /* 新闻区域放在内容区域的第二个位置 | News section second in content area */
        padding: 1rem;
    }
    
    .profile-photo {
        width: 120px;
        height: 120px;
    }
    
    /* 移动端模块容器样式 | Mobile Module Container Styles */
    .module-container {
        /* 固定宽度设置，确保中英文环境下宽度一致 | Fixed width settings to ensure consistency between Chinese and English */
        width: 320px !important; /* 设置固定宽度，适合大多数移动设备 | Set fixed width suitable for most mobile devices */
        max-width: 90vw !important; /* 在小屏幕上限制最大宽度 | Limit maximum width on small screens */
        min-width: 300px !important; /* 设置最小宽度 | Set minimum width */
        margin: 0 auto 20px auto !important; /* 居中并添加底部间距 | Center and add bottom margin */
        /* 确保左右边距完全一致 | Ensure left and right margins are completely consistent */
        left: 50% !important;
        transform: translateX(-50%) !important;
        position: relative !important;
        box-sizing: border-box !important; /* 确保内边距不会增加总宽度 | Ensure padding doesn't add to total width */
        word-wrap: break-word !important; /* 确保长文本能够换行 | Ensure long text can wrap */
        overflow-wrap: break-word !important; /* 现代浏览器的换行属性 | Modern browser word wrap property */
        hyphens: auto !important; /* 自动添加连字符 | Auto hyphenation */
        overflow: hidden !important; /* 防止内容溢出 | Prevent content overflow */
        /* 强制固定宽度，不受内容影响 | Force fixed width, unaffected by content */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    /* 移动端模块列布局 | Mobile Module Column Layout */
    .module-columns {
        flex-direction: column !important; /* 在移动端改为垂直布局 */
        width: 100% !important;
        max-width: 100% !important;
        gap: 15px !important; /* 减小间距 */
    }
    
    /* 移动端模块列 | Mobile Module Columns */
    .module-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important; /* 覆盖flex属性，确保列不会拉伸 */
    }
    
    /* 移动端教育信息列 | Mobile Education Info Column */
    .edu-info-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important; /* 覆盖flex属性 */
    }
    
    /* 移动端内容包装器 | Mobile Content Wrapper */
    .module-content-wrapper {
        padding: 15px !important; /* 减小内边距 */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 移动端内容样式 | Mobile Content Styles */
    .module-content {
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        box-sizing: border-box !important;
    }
    
    /* 移动端标签页容器 | Mobile Tab Container */
    .tabs-container {
        position: relative !important;
        width: 95% !important; /* 使用百分比宽度 */
        max-width: 100% !important;
        margin: 0.5rem auto !important; /* 居中显示 */
        align-items: initial !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }
    
    /* 隐藏传统标签页 | Hide traditional tabs */
    .tabs {
        display: none !important;
    }
    
    /* 显示紧凑型标签页 | Show compact tabs */
    .compact-tab-list {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        margin-bottom: 1rem;
        position: relative;
        order: 1; /* 确保标签页显示在内容上方 | Ensure tabs display above content */
    }
    
    .compact-tab-button {
        width: 100%;
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
        text-align: left;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-color);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .compact-tab-button:hover {
        background: var(--hover-bg);
    }
    
    .compact-tab-button.expanded {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
    }
    
    .compact-tab-button::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--text-color);
        transition: transform 0.3s ease;
    }
    
    .compact-tab-button.expanded::after {
        transform: rotate(180deg);
    }
    
    .compact-tab-options {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        max-height: 0;
        overflow: hidden;
        z-index: 10;
        transition: max-height 0.3s ease, box-shadow 0.3s ease;
        box-shadow: none;
        /* 确保选项展开时占据实际空间，将内容向下推 | Ensure options take up actual space when expanded, pushing content down */
        transform: translateZ(0); /* 启用硬件加速 | Enable hardware acceleration */
        margin-top: -1px; /* 与按钮边框对齐 | Align with button border */
        /* 移除下边框，避免收缩时显示线条 | Remove bottom border to avoid showing line when collapsed */
        border-bottom: none;
    }
    
    .compact-tab-options.show {
        max-height: 300px;
        overflow-y: auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* 展开时添加下边框 | Add bottom border when expanded */
        border-bottom: 1px solid var(--border-color);
    }
    
    .compact-tab-option {
        width: 100%;
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
        text-align: left;
        background: transparent;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-color);
        cursor: pointer;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    
    .compact-tab-option:last-child {
        border-bottom: none;
    }
    
    .compact-tab-option:hover {
        background: var(--hover-bg);
    }
    
    .compact-tab-option.active {
        background: var(--primary-color);
        color: white;
    }
    
    /* Tab content styling | 标签页内容样式 */
    .tab-content {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        position: relative;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 0; /* Remove padding here, add to tab-pane instead | 移除此处的内边距，添加到tab-pane */
        background: transparent; /* Make transparent | 设为透明 */
        border-radius: 0; /* Remove border radius | 移除圆角 */
        border: none; /* Remove border | 移除边框 */
        margin-bottom: 0; /* Remove margin | 移除外边距 */
        order: 2; /* 确保内容显示在标签页下方 | Ensure content displays below tabs */
    }
    
    /* Tab pane styling for mobile | 移动端标签页面板样式 */
    .tab-pane {
        padding: 1.5rem; /* Add padding inside content | 在内容内添加内边距 */
        background: rgba(255, 255, 255, 0.03); /* Subtle background | 微妙的背景 */
        border-radius: 8px; /* Rounded corners | 圆角 */
        border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border | 微妙的边框 */
        margin-bottom: 1rem; /* Space below content | 内容下方的间距 */
    }
    
    /* Hide all tab content by default | 默认隐藏所有标签页内容 */
    .tab-pane:not(.active) {
        display: none;
    }
    
    /* Show active tab content with animation | 带动画显示活动标签页内容 */
    .tab-pane.active {
        display: block;
        animation: fadeIn 0.3s ease-in-out;
    }
    
    /* Fade in animation | 淡入动画 */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

    /* 移动端文本元素换行 | Mobile Text Elements Wrapping */
    .module-container p,
    .module-container span,
    .module-container div,
    .module-container li,
    .module-container h1,
    .module-container h2,
    .module-container h3,
    .module-container h4,
    .module-container h5,
    .module-container h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 移动端链接和按钮 | Mobile Links and Buttons */
    .module-container a,
    .module-container button {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        white-space: normal !important; /* 允许换行 */
        box-sizing: border-box !important;
    }
    
    /* 移动端标签和链接容器 | Mobile Tags and Links Container */
    .module-tags,
    .module-links {
        display: flex !important;
        flex-wrap: wrap !important; /* 允许换行 */
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .module-tags .tag,
    .module-links .link {
        flex: 0 0 auto !important; /* 不拉伸，但允许收缩 */
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* 移动端亮色主题标签页面板样式 | Mobile Light Theme Tab Pane Styles */
    body.light-theme .tab-pane {
        background: var(--module-card-bg); /* 使用亮色主题的模块卡片背景色 */
        border: 1px solid var(--module-border-color); /* 使用亮色主题的模块边框色 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 添加轻微阴影效果 */
    }
    
    /* 移动端亮色主题紧凑型标签页按钮样式 | Mobile Light Theme Compact Tab Button Styles */
    body.light-theme .compact-tab-button {
        background: var(--module-card-bg);
        border: 1px solid var(--module-border-color);
        border-bottom: 1px solid var(--module-border-color); /* 确保下边框使用主题颜色 */
        color: var(--module-text-color);
    }
    
    body.light-theme .compact-tab-button:hover {
        background: var(--bg-secondary);
    }
    
    body.light-theme .compact-tab-button.expanded {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none; /* 确保展开时下边框不显示 */
    }
    
    /* 移动端亮色主题紧凑型标签页选项样式 | Mobile Light Theme Compact Tab Option Styles */
    body.light-theme .compact-tab-options {
        background: var(--module-card-bg);
        border: 1px solid var(--module-border-color);
        border-top: none; /* 确保上边框不重复显示 */
        border-bottom: none; /* 移除下边框，避免收缩时显示线条 */
        margin-top: -1px; /* 与按钮边框对齐 | Align with button border */
    }
    
    body.light-theme .compact-tab-options.show {
        box-shadow: none; /* 移除阴影效果，避免出现多余的线 */
        /* 展开时添加下边框 | Add bottom border when expanded */
        border-bottom: 1px solid var(--module-border-color);
    }
    
    body.light-theme .compact-tab-option {
        color: var(--module-text-color);
        border-bottom: 1px solid var(--module-border-color);
    }
    
    body.light-theme .compact-tab-option:hover {
        background: var(--bg-secondary);
    }
    
    body.light-theme .compact-tab-option.active {
        background: var(--primary);
        color: white;
    }

/* 桌面端样式 | Desktop Styles */
@media (min-width: 769px) {
    /* 隐藏紧凑型标签页 | Hide compact tabs */
    .compact-tab-list {
        display: none !important;
    }
    
    /* 显示传统标签页 | Show traditional tabs */
    .tabs {
        display: flex !important;
    }
}

/* 小屏幕移动设备样式 | Small Mobile Device Styles */
@media (max-width: 360px) {
    .module-container {
        width: 280px !important; /* 更小的固定宽度，适合小屏幕设备 | Smaller fixed width for small screen devices */
        max-width: 95vw !important; /* 在小屏幕上限制最大宽度 | Limit maximum width on small screens */
        min-width: 260px !important; /* 设置最小宽度 | Set minimum width */
        margin: 0 auto 20px auto !important; /* 居中并添加底部间距 | Center and add bottom margin */
        /* 确保左右边距完全一致 | Ensure left and right margins are completely consistent */
        left: 50% !important;
        transform: translateX(-50%) !important;
        position: relative !important;
    }
}

/* 超小屏幕移动设备样式 | Extra Small Mobile Device Styles */
@media (max-width: 320px) {
    .module-container {
        width: 260px !important; /* 更小的固定宽度，适合超小屏幕设备 | Even smaller fixed width for extra small screen devices */
        max-width: 98vw !important; /* 在超小屏幕上限制最大宽度 | Limit maximum width on extra small screens */
        min-width: 240px !important; /* 设置最小宽度 | Set minimum width */
        margin: 0 auto 20px auto !important; /* 居中并添加底部间距 | Center and add bottom margin */
        /* 确保左右边距完全一致 | Ensure left and right margins are completely consistent */
        left: 50% !important;
        transform: translateX(-50%) !important;
        position: relative !important;
    }
}