@charset "utf-8";
/**
 * 长者版样式
 * 为老年用户提供更大的字体、更清晰的布局、更高的对比度
 * 参考黑龙江政府网站适老化设计标准
 */

/* ==================== 长者版基础样式 ==================== */
body.elder-mode {
    font-size: 18px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.5px !important;
}

/* ==================== 标题字体放大 ==================== */
body.elder-mode h1 {
    font-size: 32px !important;
}

body.elder-mode h2 {
    font-size: 28px !important;
}

body.elder-mode h3 {
    font-size: 24px !important;
}

body.elder-mode h4 {
    font-size: 20px !important;
}

body.elder-mode h5,
body.elder-mode h6 {
    font-size: 18px !important;
}

/* ==================== 导航栏样式优化 ==================== */
body.elder-mode .header-nav {
    font-size: 20px !important;
    background: linear-gradient(90deg, #001f3f 0%, #003366 50%, #001f3f 100%) !important;
}

body.elder-mode .nav li {
    padding: 0 20px !important;
}

/* 导航链接 - 保持白色以与深蓝背景形成对比 */
body.elder-mode .nav li a {
    font-size: 20px !important;
    padding: 18px 0 !important;
    line-height: 1.8 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 导航链接悬停和激活状态 */
body.elder-mode .nav li a:hover,
body.elder-mode .nav li.active a,
body.elder-mode .nav li.open a {
    color: #ffeb3b !important;
    background-color: transparent !important;
    background-image: none !important;
    text-decoration: none !important;
    border-bottom: 3px solid #ffeb3b !important;
}

/* 下拉菜单背景 */
body.elder-mode .dropdown-box {
    font-size: 18px !important;
    background-color: #001f3f !important;
    border: 2px solid #ffeb3b !important;
}

body.elder-mode .dropdown-box p {
    padding: 12px 20px !important;
}

/* 下拉菜单链接 */
body.elder-mode .dropdown-box p a {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #fff !important;
    text-decoration: none !important;
}

body.elder-mode .dropdown-box p a:hover {
    color: #ffeb3b !important;
    background-color: transparent !important;
    text-decoration: underline !important;
}

/* ==================== 头部搜索区域 ==================== */
body.elder-mode .header-search {
    font-size: 18px !important;
}

body.elder-mode .search-input {
    font-size: 18px !important;
    height: 48px !important;
    padding: 12px 20px !important;
}

body.elder-mode .search-btn {
    font-size: 18px !important;
    height: 48px !important;
    padding: 12px 24px !important;
}

body.elder-mode .search-text {
    font-size: 18px !important;
}

/* 无障碍和长者版链接 */
body.elder-mode .accessibility-links {
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

body.elder-mode .accessibility-links a {
    font-size: 16px !important;
    padding: 8px 12px !important;
    color: #000 !important;
    text-decoration: none !important;
    border: 2px solid #000 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    margin: 0 5px !important;
    display: inline-block !important;
    transition: all 0.3s !important;
}

body.elder-mode .accessibility-links a:hover {
    background-color: #0158b4 !important;
    color: #fff !important;
    border-color: #0158b4 !important;
}

/* 激活状态的按钮（当模式开启时） */
body.elder-mode .accessibility-links a[style*="color: rgb(1, 88, 180)"],
body.elder-mode .accessibility-links a[style*="color: #0158b4"] {
    background-color: #0158b4 !important;
    color: #fff !important;
    border-color: #0158b4 !important;
}

/* ==================== 按钮和链接增强 ==================== */
/* 内容区域链接 - 蓝色 */
body.elder-mode a {
    text-decoration: underline !important;
    color: #0158b4 !important;
    font-weight: normal !important;
}

body.elder-mode a:hover {
    color: #003d82 !important;
    text-decoration: underline !important;
}

/* 头部区域链接 - 覆盖为黑色，与白色背景对比 */
body.elder-mode .header a {
    color: #000 !important;
    text-decoration: none !important;
}

body.elder-mode .header a:hover {
    color: #0158b4 !important;
}

body.elder-mode button,
body.elder-mode .btn {
    font-size: 18px !important;
    padding: 12px 24px !important;
    min-height: 44px !important;
    border-radius: 4px !important;
}

/* ==================== 内容区域样式 ==================== */
body.elder-mode .section {
    padding: 40px 0 !important;
}

body.elder-mode .title,
body.elder-mode .section-title {
    font-size: 28px !important;
    margin-bottom: 30px !important;
}

body.elder-mode .subtitle {
    font-size: 20px !important;
}

body.elder-mode p {
    font-size: 18px !important;
    line-height: 2 !important;
    margin-bottom: 16px !important;
}

body.elder-mode li {
    font-size: 18px !important;
    line-height: 2 !important;
    margin-bottom: 10px !important;
}

/* ==================== 新闻列表样式 ==================== */
body.elder-mode .news-list {
    font-size: 18px !important;
}

body.elder-mode .news-list li {
    padding: 16px 0 !important;
    margin-bottom: 12px !important;
}

body.elder-mode .news-list a {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

body.elder-mode .news-date,
body.elder-mode .date {
    font-size: 16px !important;
}

body.elder-mode .news-title {
    font-size: 20px !important;
    line-height: 1.8 !important;
}

body.elder-mode .news-content {
    font-size: 18px !important;
    line-height: 2 !important;
}

/* ==================== 栏目卡片样式 ==================== */
body.elder-mode .news-column-header {
    font-size: 22px !important;
    padding: 16px 20px !important;
}

body.elder-mode .news-column-title {
    font-size: 22px !important;
}

body.elder-mode .news-more-link {
    font-size: 18px !important;
    padding: 8px 16px !important;
}

body.elder-mode .news-column-content {
    padding: 20px !important;
}

body.elder-mode .news-item {
    padding: 14px 0 !important;
    margin-bottom: 12px !important;
}

body.elder-mode .news-item-title {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

body.elder-mode .news-item-date {
    font-size: 16px !important;
}

/* ==================== 表单元素样式 ==================== */
body.elder-mode input[type="text"],
body.elder-mode input[type="password"],
body.elder-mode input[type="email"],
body.elder-mode input[type="tel"],
body.elder-mode textarea,
body.elder-mode select {
    font-size: 18px !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
    border: 2px solid #ccc !important;
    border-radius: 4px !important;
}

body.elder-mode input:focus,
body.elder-mode textarea:focus,
body.elder-mode select:focus {
    border-color: #0158b4 !important;
    outline: 2px solid #0158b4 !important;
    outline-offset: 2px !important;
}

body.elder-mode label {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* ==================== 分页样式 ==================== */
body.elder-mode .pagination,
body.elder-mode .page {
    font-size: 18px !important;
}

body.elder-mode .pagination a,
body.elder-mode .page a,
body.elder-mode .pagination span,
body.elder-mode .page span {
    font-size: 18px !important;
    padding: 10px 16px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    line-height: 1.5 !important;
    margin: 0 6px !important;
}

/* ==================== 面包屑导航 ==================== */
body.elder-mode .breadcrumb {
    font-size: 18px !important;
    padding: 16px 0 !important;
}

body.elder-mode .breadcrumb a,
body.elder-mode .breadcrumb span {
    font-size: 18px !important;
    padding: 6px 10px !important;
}

/* ==================== 侧边栏样式 ==================== */
body.elder-mode .sidebar {
    font-size: 18px !important;
}

body.elder-mode .sidebar-title {
    font-size: 22px !important;
    padding: 16px 20px !important;
}

body.elder-mode .sidebar-list li {
    font-size: 18px !important;
    padding: 12px 20px !important;
}

body.elder-mode .sidebar-list a {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

/* ==================== 底部区域 ==================== */
body.elder-mode .footer,
body.elder-mode footer {
    font-size: 18px !important;
    padding: 30px 0 !important;
}

body.elder-mode .footer p,
body.elder-mode footer p,
body.elder-mode .footer a,
body.elder-mode footer a {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

body.elder-mode .footer-link {
    font-size: 18px !important;
    padding: 8px 12px !important;
}

/* ==================== 对比度增强 ==================== */
body.elder-mode {
    color: #000 !important;
    background: #fff !important;
}

/* 头部背景 - 保持浅色 */
body.elder-mode .header {
    background: #f8f8f8 !important;
    border-bottom: 3px solid #ddd !important;
}

/* 头部顶部区域 */
body.elder-mode .header-top {
    background: #fff !important;
}

/* 导航栏背景 - 加深以提高对比 */
body.elder-mode .header-nav {
    background: linear-gradient(90deg, #001f3f 0%, #003366 50%, #001f3f 100%) !important;
    border-top: 2px solid #ffeb3b !important;
}

/* 确保文字与背景有足够对比度 */
body.elder-mode .dark-bg,
body.elder-mode .dark-section {
    background: #1a1a1a !important;
    color: #fff !important;
}

body.elder-mode .light-bg,
body.elder-mode .light-section {
    background: #f9f9f9 !important;
    color: #000 !important;
}

/* ==================== 图片和图标优化 ==================== */
body.elder-mode img {
    border: 1px solid #ddd !important;
}

body.elder-mode .icon {
    width: 24px !important;
    height: 24px !important;
}

body.elder-mode .iconfont {
    font-size: 22px !important;
}

/* ==================== 表格样式 ==================== */
body.elder-mode table {
    font-size: 18px !important;
    border: 2px solid #333 !important;
}

body.elder-mode th {
    font-size: 20px !important;
    padding: 14px 16px !important;
    background: #f0f0f0 !important;
    border: 2px solid #333 !important;
}

body.elder-mode td {
    font-size: 18px !important;
    padding: 12px 16px !important;
    border: 1px solid #666 !important;
}

/* ==================== 间距优化 ==================== */
body.elder-mode .row {
    margin-bottom: 30px !important;
}

body.elder-mode .col {
    padding: 15px !important;
}

/* ==================== 焦点可见性增强 ==================== */
body.elder-mode *:focus {
    outline: 3px solid #0158b4 !important;
    outline-offset: 2px !important;
}

body.elder-mode a:focus,
body.elder-mode button:focus {
    background-color: #e6f2ff !important;
}

/* ==================== Banner轮播区域 ==================== */
body.elder-mode .banner {
    min-height: 400px !important;
}

body.elder-mode .swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
}

body.elder-mode .swiper-pagination-bullet-active {
    width: 44px !important;
}

/* ==================== 特定页面元素调整 ==================== */
/* 首页专题栏目 */
body.elder-mode .special-columns-section .news-column-header {
    padding: 18px 20px !important;
}

body.elder-mode .special-columns-section .news-item {
    padding: 16px 0 !important;
}

/* 列表页面 */
body.elder-mode .list-page .article-title {
    font-size: 20px !important;
    line-height: 1.8 !important;
}

body.elder-mode .list-page .article-meta {
    font-size: 16px !important;
}

/* 详情页面 */
body.elder-mode .article-detail .article-title {
    font-size: 30px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

body.elder-mode .article-detail .article-info {
    font-size: 16px !important;
    margin-bottom: 20px !important;
}

body.elder-mode .article-detail .article-content {
    font-size: 20px !important;
    line-height: 2.2 !important;
}

body.elder-mode .article-detail .article-content p {
    font-size: 20px !important;
    line-height: 2.2 !important;
    margin-bottom: 20px !important;
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 768px) {
    body.elder-mode {
        font-size: 16px !important;
    }
    
    body.elder-mode h1 {
        font-size: 26px !important;
    }
    
    body.elder-mode h2 {
        font-size: 22px !important;
    }
    
    body.elder-mode h3 {
        font-size: 20px !important;
    }
    
    body.elder-mode .nav li a {
        font-size: 18px !important;
    }
    
    body.elder-mode .search-input,
    body.elder-mode .search-btn {
        font-size: 16px !important;
        height: 44px !important;
    }
    
    body.elder-mode p,
    body.elder-mode li {
        font-size: 16px !important;
    }
    
    body.elder-mode .article-detail .article-content {
        font-size: 18px !important;
    }
}

/* ==================== 打印样式优化 ==================== */
@media print {
    body.elder-mode {
        font-size: 14pt !important;
    }
    
    body.elder-mode h1 {
        font-size: 20pt !important;
    }
    
    body.elder-mode h2 {
        font-size: 18pt !important;
    }
    
    body.elder-mode p {
        font-size: 14pt !important;
        line-height: 1.8 !important;
    }
}

/* ==================== 动画和过渡效果简化 ==================== */
body.elder-mode * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
}

body.elder-mode .wow {
    animation: none !important;
}

/* ==================== 提示信息样式 ==================== */
body.elder-mode .alert,
body.elder-mode .message,
body.elder-mode .notice {
    font-size: 20px !important;
    padding: 16px 24px !important;
    line-height: 1.8 !important;
    border-width: 3px !important;
}

/* ==================== 工具栏兼容 ==================== */
body.elder-mode.accessibility-mode .accessibility-toolbar {
    font-size: 16px !important;
}

body.elder-mode.accessibility-mode .toolbar-buttons button {
    font-size: 14px !important;
    min-width: 55px !important;
    height: 55px !important;
}

/* ==================== Logo 和 品牌元素 ==================== */
body.elder-mode .logo {
    padding: 15px 0 !important;
}

body.elder-mode .logo img {
    max-height: 80px !important;
}

/* ==================== 视频和多媒体 ==================== */
body.elder-mode video,
body.elder-mode iframe {
    border: 2px solid #ddd !important;
}

body.elder-mode .video-player {
    min-height: 400px !important;
}

/* ==================== 回到顶部按钮 ==================== */
body.elder-mode .back-to-top,
body.elder-mode .gotop {
    width: 60px !important;
    height: 60px !important;
    font-size: 24px !important;
}
