/**
 * Lemonx Compatibility Styles
 * 确保 Lemonx 编辑的内容在前端完美呈现
 */

/* ========================================
   Lemonx 内容包装器
   ======================================== */

/* 确保 Lemonx 编辑的内容正确继承主题样式 */
.lemonx-visual-root,
.lx-lemonx-content {
    width: 100%;
}

/* Lemonx 块级内容 */
.lemonx-visual-root > * {
    margin-bottom: 1rem;
}

/* Lemonx 标题兼容 */
.lemonx-visual-root h1,
.lemonx-visual-root h2,
.lemonx-visual-root h3,
.lemonx-visual-root h4,
.lemonx-visual-root h5,
.lemonx-visual-root h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lx-gray-900);
}

.lemonx-visual-root h1 { font-size: 2.5rem; }
.lemonx-visual-root h2 { font-size: 2rem; }
.lemonx-visual-root h3 { font-size: 1.75rem; }
.lemonx-visual-root h4 { font-size: 1.5rem; }
.lemonx-visual-root h5 { font-size: 1.25rem; }
.lemonx-visual-root h6 { font-size: 1rem; }

/* Lemonx 段落兼容 */
.lemonx-visual-root p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* Lemonx 列表兼容 */
.lemonx-visual-root ul,
.lemonx-visual-root ol {
    margin: 0 0 1.5rem var(--lx-space-lg);
    padding: 0;
}

.lemonx-visual-root li {
    margin-bottom: 0.5rem;
}

/* Lemonx 图片兼容 */
.lemonx-visual-root img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--lx-radius-lg);
}

.lemonx-visual-root figure {
    margin: 1.5rem 0;
    text-align: center;
}

.lemonx-visual-root figcaption {
    font-size: 0.875rem;
    color: var(--lx-gray-500);
    margin-top: 0.5rem;
}

/* Lemonx 链接兼容 */
.lemonx-visual-root a {
    color: var(--lx-primary);
    text-decoration: none;
    transition: var(--lx-transition);
}

.lemonx-visual-root a:hover {
    color: var(--lx-primary-hover);
    text-decoration: underline;
}

/* Lemonx 按钮兼容 */
.lemonx-visual-root button,
.lemonx-visual-root .lx-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    border: none;
    border-radius: var(--lx-radius-md);
    cursor: pointer;
    transition: var(--lx-transition);
    background-color: var(--lx-primary);
    color: white;
}

.lemonx-visual-root button:hover,
.lemonx-visual-root .lx-btn:hover {
    background-color: var(--lx-primary-hover);
}

/* Lemonx 代码块兼容 */
.lemonx-visual-root code {
    background-color: var(--lx-gray-100);
    padding: 0.2rem 0.4rem;
    border-radius: var(--lx-radius-sm);
    font-family: var(--lx-font-mono);
    font-size: 0.875rem;
}

.lemonx-visual-root pre {
    background-color: var(--lx-gray-900);
    color: #e5e7eb;
    padding: var(--lx-space-md);
    border-radius: var(--lx-radius-md);
    overflow-x: auto;
    margin: 1.5rem 0;
}

.lemonx-visual-root pre code {
    background-color: transparent;
    padding: 0;
    color: #e5e7eb;
}

/* Lemonx 引用块兼容 */
.lemonx-visual-root blockquote {
    margin: 2rem 0;
    padding: var(--lx-space-md) var(--lx-space-lg);
    border-left: 4px solid var(--lx-primary);
    background-color: var(--lx-gray-50);
    font-style: italic;
    color: var(--lx-gray-700);
}

/* Lemonx 表格兼容 */
.lemonx-visual-root table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.lemonx-visual-root table th,
.lemonx-visual-root table td {
    border: 1px solid var(--lx-gray-300);
    padding: 0.75rem;
    text-align: left;
}

.lemonx-visual-root table th {
    background-color: var(--lx-gray-100);
    font-weight: 600;
    color: var(--lx-gray-900);
}

/* Lemonx 分隔线兼容 */
.lemonx-visual-root hr {
    border: none;
    border-top: 1px solid var(--lx-gray-300);
    margin: 2rem 0;
}

/* Lemonx 卡片组件兼容 */
.lemonx-card {
    background: white;
    border: 1px solid var(--lx-gray-200);
    border-radius: var(--lx-radius-lg);
    padding: var(--lx-space-lg);
    margin-bottom: var(--lx-space-lg);
    box-shadow: var(--lx-shadow-sm);
    transition: var(--lx-transition);
}

.lemonx-card:hover {
    box-shadow: var(--lx-shadow-md);
    transform: translateY(-2px);
}

.lemonx-card__header {
    margin-bottom: var(--lx-space-md);
    padding-bottom: var(--lx-space-md);
    border-bottom: 1px solid var(--lx-gray-200);
}

.lemonx-card__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lx-gray-900);
}

.lemonx-card__content {
    color: var(--lx-gray-700);
    line-height: 1.6;
}

/* Lemonx 网格布局兼容 */
.lemonx-grid {
    display: grid;
    gap: var(--lx-space-lg);
}

.lemonx-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.lemonx-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .lemonx-grid--2,
    .lemonx-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* Lemonx 排版变量兼容 */
.lemonx-text-primary { color: var(--lx-gray-900); }
.lemonx-text-secondary { color: var(--lx-gray-500); }
.lemonx-text-tertiary { color: var(--lx-gray-400); }

.lemonx-bg-primary { background-color: var(--lx-gray-50); }
.lemonx-bg-secondary { background-color: var(--lx-gray-100); }

.lemonx-border { border: 1px solid var(--lx-gray-200); }

/* Lemonx 间距变量兼容 */
.lemonx-p-xs { padding: var(--lx-space-xs); }
.lemonx-p-sm { padding: var(--lx-space-sm); }
.lemonx-p-md { padding: var(--lx-space-md); }
.lemonx-p-lg { padding: var(--lx-space-lg); }
.lemonx-p-xl { padding: var(--lx-space-xl); }

.lemonx-m-xs { margin: var(--lx-space-xs); }
.lemonx-m-sm { margin: var(--lx-space-sm); }
.lemonx-m-md { margin: var(--lx-space-md); }
.lemonx-m-lg { margin: var(--lx-space-lg); }
.lemonx-m-xl { margin: var(--lx-space-xl); }

/* Lemonx 动画兼容 */
.lemonx-fade-in {
    animation: lemonx-fade-in 0.3s ease-in-out;
}

@keyframes lemonx-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lemonx-slide-in {
    animation: lemonx-slide-in 0.3s ease-in-out;
}

@keyframes lemonx-slide-in {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Lemonx 响应式兼容 */
@media (max-width: 768px) {
    .lemonx-visual-root h1 { font-size: 2rem; }
    .lemonx-visual-root h2 { font-size: 1.75rem; }
    .lemonx-visual-root h3 { font-size: 1.5rem; }
    .lemonx-visual-root h4 { font-size: 1.25rem; }
    .lemonx-visual-root h5 { font-size: 1.125rem; }
    .lemonx-visual-root h6 { font-size: 1rem; }
}