/* 基础重置（精简版） */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
img{max-width:100%;height:auto!important}
.clear{clear:both;}
strong {
  font-weight: bold; /* 标准加粗，浏览器兼容最好 */
  /* 可选：更粗效果可替换为 700（等价bold）、800、900 */
  /* font-weight: 700; */
}

/* 全局样式 */
body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    background:#f0f0f0; /* 边缘区背景色加深 */
    color: #333;
    /* 添加相对定位，让悬浮层基于body定位 */
    position: relative;
    min-height: 100vh;
}

/* 容器样式 - 基础宽度（默认19寸以下） */
.wrap{
    width:96%; /* 加宽容器宽度 */
    max-width:868px; /* 19寸以下默认值 */
    margin:0 auto;
}

/* 19寸以上显示器（分辨率≥1440px）的容器样式 */
@media only screen and (min-width: 1440px) {
    .wrap{
        max-width:1400px; /* 19寸以上最大值 */
    }
}

/* 导航样式 - 优化LOGO和导航同行布局 */
.header {
    padding: 15px 0;
    position: relative;
    background: #fff; /* 导航栏白色背景 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    display: flex; /* 弹性布局实现同行 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 两端对齐 */
}
.logo{
    margin: 0 20px; /* 去掉浮动，调整边距 */
}
.logo a h1 {
    font-size: 2.2em;
    color: #e8603c;
    font-weight: bold;
}
.logo a h1 span{
    color: #f3af9d;
}

/* 菜单样式 - 带图标 */
.menu {
    z-index: 999;
    margin-right: 20px;
    /* 去掉浮动和margin-top */
}
.menu ul.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.menu li {
    margin: 0 3px;
}
.menu li a {
    color: #333;
    font-size: 0.875em;
    padding: 8px 12px;
    display: block;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
    /* 链接下划线效果基础样式 */
    position: relative;
}
.menu li a i {
    margin-right: 6px;
    color: #e8603c;
}
.menu li a:hover, .menu li.active a {
    color: #e8603c;
    background-color: #fef0eb;
}

/* 响应式菜单 */
.toggleMenu {
    display: none;
    background:#e8603c;
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}
@media screen and (max-width:768px) {
    .toggleMenu {
        display: block;
        margin-right: 20px;
    }
    .header {
        flex-wrap: wrap; /* 移动端允许换行 */
    }
    .menu ul.nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        flex-direction: column;
        padding: 10px;
    }
    .menu ul.nav.show {
        display: flex;
    }
    .menu li {
        margin: 5px 0;
    }
}

/* 位置导航 - 去掉虚线边框 */
.location{
    width:100%;
    margin: 0 auto 15px;
    padding: 10px 0;
}
.location p{
    font-size: 1em;
    line-height: 1.5em;
    color: #e8603c;
    text-align: left;
    padding-left: 10px;
}

/* 标题栏 - 去掉背景色，美化样式 */
.top-heading {
    background: transparent; /* 去掉背景色 */
    padding: 10px 0;
    margin-bottom: 20px;
    border-radius: 8px;
    border-bottom: 2px solid #e8603c; /* 底部加装饰线 */
}

/* 内容区域 - 扩宽并加深背景色 */
.content {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* 增大间距 */
}
.grid-left {
    flex: 1;
    min-width: 350px; /* 加宽左侧内容区最小宽度 */
    /* 主体区背景色加深 */
    background: #fafafa; 
    padding: 25px; /* 增加内边距 */
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* WHY80分页容器基础样式 start*/
.page-article {
    margin: 10px 0 !important;
    padding: 15px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* 下面是空容器默认隐藏 */
    visibility: hidden !important; 
    height: 0 !important;         
    margin: 0 !important;         
    padding: 0 !important;        
}

/* 关键新增：有内容时恢复所有原有样式 */
.page-article:not(:empty) {
    visibility: visible !important;
    height: auto !important;
    margin: 10px 0 !important;
    padding: 15px !important;
}

.page-article select {
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    min-width: 200px !important;
    max-width: 300px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.page-article a,
.page-article b {
    display: inline-block !important;
    padding: 8px 12px !important;
    margin: 0 2px !important;
    box-sizing: border-box !important;
}

.page-article a {
    color: #0066cc !important;
    text-decoration: none !important;
    border-radius: 4px !important;
}

.page-article a:hover,
.page-article a:active {
    background-color: #e8f0fe !important;
    color: #0056b3 !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .page-article {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        padding: 10px !important; /* 移动端默认padding（空容器时会被清零） */
    }
    /* 下面是移动端有内容时恢复移动端padding */
    .page-article:not(:empty) {
        padding: 10px !important;
    }
    
    .page-article select {
        min-width: 100% !important;
        max-width: 100% !important;
        height: 44px !important;
    }
    
    .page-article > *:not(select) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        font-size: 15px !important;
    }
    
    .page-article a,
    .page-article b {
        padding: 10px 15px !important;
        margin: 0 3px !important;
    }
}

@media (max-width: 375px) {
    .page-article a,
    .page-article b {
        padding: 8px 10px !important;
        font-size: 13px !important;
        margin: 0 1px !important;
    }
}
/* wh80分页容器基础样式 end*/

/* 右侧边栏 - 隐藏原右侧边栏，内容移到悬浮层 */
.grid-right {
    display: none; /* 隐藏原右侧边栏 */
}

/* 新增：跟随鼠标的悬浮侧边栏 - 优化底部遮挡问题 */
.floating-sidebar {
    position: fixed; /* 固定定位 */
    width: 300px;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999; /* 确保在最上层 */
    pointer-events: auto; /* 关键修复：允许悬浮层内元素被点击 */
    transition: transform 0.1s ease-out; /* 平滑跟随 */
    display: none; /* 初始隐藏 */
    /* 增加底部间距，避免遮挡内容 */
    max-height: 80vh; /* 限制最大高度 */
    overflow-y: auto; /* 内容超出时滚动 */
}

/* 悬浮层边界优化 - 增加底部间距 */
@media only screen and (min-width:769px) {
      
.floating-sidebar {
    position: fixed; 
    width: 300px;
    background: #f5f5f5;
    padding: 15px;
    margin-bottom: 50px; /* 底部预留间距 */
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;
    pointer-events: auto;
    transition: transform 0.1s ease-out;
    display: none;
    max-height: 80vh;
    overflow-y: auto;
      /* 新增兼容属性 */
    box-sizing: border-box; /* 修复Firefox宽度计算 */
    transform: translateZ(0); /* 启用硬件加速，修复Edge卡顿 */
    -moz-user-select: none; /* Firefox禁止文本选中干扰 */
    -ms-user-select: none; /* Edge禁止文本选中干扰 */
    }
}

/* 移动端隐藏悬浮层 */
@media only screen and (max-width:768px) {
    .floating-sidebar {
        display: none !important;
    }
}

/* 文章标题 - wd43.com美化样式 */
.grid-left h1 {
    color: #e8603c; /* 文字改为主题色 */
    font-size: 1.8em;
    background: transparent; /* 去掉背景色 */
    padding: 12px 15px;
    margin-bottom: 20px; /* 下边距 */
    font-weight: bold;
    border-radius: 4px;
    border-left: 4px solid #e8603c; /* 左侧装饰线 */
    border-bottom: 1px solid #eee; /* 底部分隔线 */
}

/* 文章信息 */
.grid-left > p:first-of-type {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 6px; /* .grid-left 下第一个p标签的底部间距 */
    padding: 0 5px;
}

/* 内容文本样式 */
/* 仅对 .grid-left 下的 .article-content 生效，强制覆盖样式 */
.grid-left .article-content {
    color: #000;
    font-size: 1.1em;
    line-height: 1.8;
    font-family: "Microsoft YaHei", "PingFang SC", serif;
    padding-top: 15px !important;   /* 上边距保持15px不变 */
    padding-bottom: 5px !important; /* 下边距改为5px */
    padding-left: 0 !important;
    padding-right: 0 !important;
	/* 下面控制wh80 article-content和下方article-nav的外部底部间距 */
    margin-bottom: 5px !important;
}

.grid-left .article-content p {
    text-indent: 2em;
    margin-bottom: 5px !important; 
}


/* 所有链接的动态下划线效果 */
a {
    position: relative;
    color: #e8603c;
    font-weight: 500;
}
/* 下划线动画效果 */
a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #e8603c;
    transition: width 0.3s ease;
}
a:hover::after {
    width: 100%; /* 鼠标移上时展开下划线 */
}
/* 特殊链接样式重置（避免冲突） */
.menu li a::after, 
.logo a::after, 
.toggleMenu::after {
    display: none; /* 导航和LOGO链接不需要下划线 */
}

/* 新增：您可能感兴趣区域的h2样式 */
.interest-item h2 {
    font-size: 1em !important;
    margin: 0 0 8px 0 !important;
    color: #e8603c;
    font-weight: bold !important;
    line-height: 1.4;
}

.article-content img {
    display: block;
    margin: 20px auto; /* 增加图片间距 */
    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 上下篇导航 */
.article-nav {
    margin: 5px 0 25px 0;
    padding: 12px;
    background-color: #f8f8f8;
    border-radius: 4px;
    border-left: 3px solid #e8603c;
}

/* 右侧栏样式 - 带图标 */
.grid-right-headings {
    margin-bottom: 20px; /* 增加下边距 */
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
/* H2样式 - 加粗并设置间距 */
h2 {
    font-weight: bold !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
    font-size: 1.2em !important;
}
.grid-right-headings h2 a {
    color: #e8603c;
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.grid-right-headings h2 a i {
    margin-right: 8px;
    font-size: 1.2em;
}

/* 侧边栏链接 - 新增：多列布局 */
.seach-links {
    padding: 10px 0;
    margin-bottom: 25px; /* 增加模块间距 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 15px;
}
.seach-links p {
    margin-bottom: 0; /* 重置间距 */
}
.seach-links p a {
    color: #333;
    font-size: 1em;
    line-height: 1.6;
    transition: all 0.3s;
    display: block;
    padding: 6px 0; /* 增加链接内边距 */
}
.seach-links p a:hover {
    color: #e8603c;
    padding-left: 5px;
}

/* 您可能感兴趣区域 */
.interest-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #e8603c;
    margin: 25px 0 15px; /* 调整间距 */
    display: flex;
    align-items: center;
}
.interest-title i {
    margin-right: 8px;
}
.three-grids {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 增大间距 */
    margin-bottom: 25px; /* 增加下边距 */
}
.three-grids .interest-item {
    flex: 1;
    min-width: 200px;
    padding: 15px; /* 增加内边距 */
    background-color: #f8f8f8;
    border-radius: 8px;
    border-left: 3px solid #e8603c;
}
.three-grids .interest-item p {
    color: #666;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 0;
    text-indent: 0 !important; /* 取消段落缩进 */
}

/* 页脚样式 - 修改背景色为浅色调 */
.footer {
    background: #f8f8f8; /* 改为浅灰色背景 */
    margin-top: 40px;
    color: #666; /* 修改文字颜色 */
    padding: 30px 0 15px;
    border-radius: 8px 8px 0 0;
}
.footer-main {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 20px;
}
.fgrid {
    flex: 1;
    min-width: 250px;
}
/* H3样式 - 加粗并设置间距 */
h3 {
    font-weight: bold !important;
    margin-top: 20px !important;
    margin-bottom: 15px !important;
    font-size: 1.4em !important;
}
.fgrid h3 {
    font-size: 1.4em;
    margin-bottom: 15px;
    font-weight: bold;
    position: relative;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8603c; /* 修改边框颜色 */
    display: flex;
    align-items: center;
}
/* 页脚标题添加图标 */
.fgrid h3 i {
    margin-right: 10px;
    font-size: 1.2em;
}
.fgrid p {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
/* 页脚段落添加图标 */
.fgrid p i {
    margin-right: 8px;
    width: 18px;
    text-align: center;
}
.fgrid a {
    color: #e8603c; /* 修改链接颜色 */
}
.fgrid a:hover {
    color: #d8502c;
    text-decoration: none; /* 由下划线动画替代 */
}
.fgrid img {
    max-width: 120px;
    border-radius: 4px;
}

/* H4样式 - 加粗并设置间距 */
h4 {
    font-weight: bold !important;
    margin-top: 18px !important;
    margin-bottom: 12px !important;
    font-size: 1.1em !important;
}

/* 版权信息 */
.copy-right {
    background: #fff;
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid #e8603c; /* 修改边框颜色 */
}
.copy-right-left p {
    color: #666;
    font-size: 0.9em;
}

/* 移动端适配 */
@media only screen and (max-width:768px) {
    .content {
        flex-direction: column;
    }
    .footer-main {
        gap: 20px;
    }
    .fgrid {
        min-width: 100%;
    }
    .grid-left h1 {
        font-size: 1.5em;
    }
    .article-content {
        font-size: 1em;
        padding: 10px 0;
    }
    .wrap {
        width: 95%;
    }
    /* 移动端恢复单列布局 */
    .seach-links {
        grid-template-columns: 1fr;
    }
    .three-grids .interest-item {
        min-width: 100%;
    }
}

@media only screen and (max-width:480px) {
    .logo a h1 {
        font-size: 1.8em;
    }
    .wrap {
        width: 95%;
    }
    .three-grids {
        flex-direction: column;
    }
    .grid-left {
        min-width: unset;
        padding: 15px;
    }
}

/* 自定义blockquote样式优化 */
blockquote p{
    width: 99%; 
    max-width: 736px;
    margin-left:auto;
    margin-right:auto; 
    padding-left:25px;
    padding-right:10px;
    font-size: 16px; 
    line-height: 31px;
    background:#F2F6FA url(/img/blockquote.gif) 5px 3px no-repeat;
    text-indent:10px;
    text-align:justify;
    text-justify:inter-ideograph;
    color:#2A2A2A;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px; /* 增加blockquote间距 */
}

/* 热门图文表格样式优化 */
.floating-sidebar table {
    width: 100%;
    margin-bottom: 25px; /* 增加表格底部间距 */
}
.floating-sidebar table td {
    padding: 5px; /* 增加单元格内边距 */
}
.floating-sidebar table img {
    border-radius: 4px; /* 图片圆角 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 图片阴影 */
    pointer-events: auto; /* 确保图片可点击 */
}