/*
 * WordPress单篇文章页面内容溢出修复样式
 * 修复长单词、长URL、代码块、表格等内容溢出问题
 */

/* ===== 基础容器溢出修复 ===== */
.article-content,
.article-main,
.article-body {
    /* 确保容器不会被内容撑开 */
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    box-sizing: border-box;
}

/* ===== 文章正文内容修复 ===== */
.article-body {
    /* 强制内容在容器内换行 */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}

/* 段落文本处理 */
.article-body p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    white-space: normal;
}

/* 标题处理 */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* ===== 链接和URL处理 ===== */
.article-body a {
    /* 长URL自动断行 */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all; /* 对URL使用更激进的断行 */
    hyphens: none; /* URL不使用连字符 */
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
}

/* ===== 图片处理 ===== */
.article-body img {
    /* 图片自适应容器宽度 */
    max-width: 100% !important;
    height: auto !important;
    width: auto;
    display: block;
    margin: var(--spacing-md, 1rem) auto;
    box-sizing: border-box;
}

/* WordPress图片对齐类 */
.article-body .alignleft,
.article-body .alignright,
.article-body .aligncenter {
    max-width: 100% !important;
    height: auto !important;
}

.article-body .alignleft {
    float: left;
    margin: 0 var(--spacing-md, 1rem) var(--spacing-md, 1rem) 0;
}

.article-body .alignright {
    float: right;
    margin: 0 0 var(--spacing-md, 1rem) var(--spacing-md, 1rem);
}

.article-body .aligncenter {
    display: block;
    margin: var(--spacing-md, 1rem) auto;
}

/* ===== 代码块处理 ===== */
.article-body code {
    /* 行内代码处理 */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
}

.article-body pre {
    /* 代码块容器 */
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    box-sizing: border-box;
    /* 添加滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.article-body pre::-webkit-scrollbar {
    height: 8px;
}

.article-body pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.article-body pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.article-body pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.article-body pre code {
    /* 代码块内的代码 */
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: none;
    display: block;
}

/* ===== 表格处理 ===== */
.article-body table {
    /* 表格容器 */
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
    border-collapse: collapse;
    margin: var(--spacing-lg, 1.5rem) 0;
    box-sizing: border-box;
}

/* 表格响应式包装器 */
.article-body table {
    display: table;
    width: 100%;
    table-layout: fixed; /* 固定表格布局 */
}

/* 为表格添加滚动容器 */
.article-body table {
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

.article-body table thead,
.article-body table tbody,
.article-body table tfoot {
    display: table-header-group;
}

.article-body table tr {
    display: table-row;
}

.article-body table th,
.article-body table td {
    display: table-cell;
    padding: 0.75rem;
    border: 1px solid #ddd;
    vertical-align: top;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 200px; /* 限制单元格最大宽度 */
    min-width: 100px; /* 设置最小宽度 */
}

/* 表格响应式处理 */
@media (max-width: 768px) {
    .article-body table {
        font-size: 0.9rem;
    }
    
    .article-body table th,
    .article-body table td {
        padding: 0.5rem;
        max-width: 150px;
        min-width: 80px;
    }
}

/* ===== 列表处理 ===== */
.article-body ul,
.article-body ol {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.article-body li {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* ===== 引用块处理 ===== */
.article-body blockquote {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.article-body blockquote p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* ===== 嵌入内容处理 ===== */
.article-body iframe,
.article-body embed,
.article-body object,
.article-body video {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}

/* WordPress嵌入内容 */
.article-body .wp-block-embed,
.article-body .wp-block-embed__wrapper {
    max-width: 100% !important;
    overflow: hidden;
}

/* ===== 特殊WordPress块处理 ===== */
.article-body .wp-block-image,
.article-body .wp-block-gallery,
.article-body .wp-block-media-text {
    max-width: 100% !important;
    overflow: hidden;
    box-sizing: border-box;
}

.article-body .wp-block-code {
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* ===== 移动端特殊处理 ===== */
@media (max-width: 768px) {
    .article-body {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .article-body h1,
    .article-body h2,
    .article-body h3,
    .article-body h4,
    .article-body h5,
    .article-body h6 {
        word-break: break-word;
        hyphens: auto;
    }
    
    .article-body pre {
        font-size: 0.85rem;
        padding: var(--spacing-sm, 0.75rem);
    }
    
    .article-body code {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .article-body {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .article-body pre {
        font-size: 0.8rem;
        padding: var(--spacing-xs, 0.5rem);
    }
    
    .article-body table th,
    .article-body table td {
        font-size: 0.8rem;
        padding: 0.4rem;
        max-width: 120px;
        min-width: 60px;
    }
}

/* ===== 调试样式（可选，用于开发时检查溢出） ===== */
/*
.article-body * {
    outline: 1px solid rgba(255, 0, 0, 0.1);
}

.article-body {
    outline: 2px solid rgba(0, 255, 0, 0.3);
}
*/