/* ✅ Wash 模板 - 全局响应式优化补丁 */
/* 解决窄屏 UI 错位问题 */

/* === 文章容器自适应 === */
.NewArticleWrap.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media screen and (max-width: 768px) {
  .NewArticleWrap.container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .article_content {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* === 导航栏宽度完整性修复 === */
.NewArticleWrap.header-nav-main {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media screen and (min-width: 992px) {
  .NewArticleWrap.header-nav-main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 991px) {
  .NewArticleWrap.header-nav-main {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* === 侧边栏响应式重构 === */
.wash-home-sidebar {
  width: 100%;
  flex-shrink: 0;
  margin-top: 20px;
  clear: both;
}

@media screen and (min-width: 992px) {
  .wash-home-layout {
    display: flex;
  }
  
  .wash-home-sidebar {
    width: 300px;
    flex-shrink: 0;
    margin-top: 0;
    margin-left: 30px;
    clear: none;
  }
}

@media screen and (max-width: 991px) {
  .wash-home-sidebar {
    width: 100%;
    max-width: none;
  }
}

/* === 图片自适应 - 防止溢出 === */
.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 4px;
}

.article-content p img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  margin: 5px;
}

@media screen and (max-width: 768px) {
  .article-content img {
    margin-left: -15px;
    margin-right: -15px;
    max-width: calc(100vw + 30px);
  }
}

/* === 响应式列表专项修复（高优先级覆盖）=== */
@media screen and (max-width: 600px) {
  /* ✅ 提升选择器权重至 0-3-1 以覆盖 home-polish.css */
  .article_content .left .article-content ol li,
  .article_content .left .article-content ul li {
    padding-left: 20px !important;
    font-size: 14px !important;
  }
  
  .article_content .left .article-content ol > li::before,
  .article_content .left .article-content ul > li::before {
    min-width: 20px !important;
    font-size: 14px !important;
  }
}

/* === 标题和段落窄屏防护 === */
@media screen and (max-width: 768px) {
  .article_content .left .article-content h1,
  .article_content .left .article-content h2,
  .article_content .left .article-content h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;          /* ✅ 启用自动断字 */
  }
  
  .article_content .left .article-content p {
    padding-left: 0 !important;     /* ✅ 清除潜在 padding 累加 */
    margin-left: 0 !important;      /* ✅ 清除潜在 margin 累加 */
  }
}

/* === 超小屏优化 === */
@media screen and (max-width: 400px) {
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .article-content p {
    line-height: 1.6;
    font-size: 14px;
  }
  
  h1, h2, h3 {
    word-wrap: break-word;
  }
}