/* ===================================================================
   seo-content.css — Blocksy Child Theme Visual System
   部署位置: wp-content/themes/blocksy-child/seo-content.css
   依赖: blocksy-styles-css（先加载）
   版本: 1.0

   所有 .seo-* 类由 gutenberg_formatter.py 分块输出，
   不需要额外 JS，纯 CSS 渲染。支持 prefers-reduced-motion。
   =================================================================== */

/* === Palette 覆盖（优先级高于 Blocksy CSS 变量） === */
:root {
    --theme-palette-color-1: #d1540e !important;
    --theme-palette-color-2: #e8753f !important;
    --theme-palette-color-3: #3c4a50 !important;
    --theme-palette-color-4: #0d1a24 !important;
    --theme-palette-color-5: #d4d8db !important;
    --theme-palette-color-6: #edf0f2 !important;
    --theme-palette-color-7: #f4f6f8 !important;
    --theme-palette-color-8: #ffffff !important;
}

/* === 正文增强 === */
.wp-block-html p {
    font-size: 1.0625rem;
    line-height: 1.8;
    margin-bottom: 1.2em;
    color: var(--theme-palette-color-3, #3c4a50);
}

/* === 链接 === */
.wp-block-html a {
    color: var(--theme-palette-color-1, #d1540e);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.wp-block-html a:hover {
    color: var(--theme-palette-color-2, #e8753f);
}
.wp-block-html a:focus-visible {
    outline: 2px solid var(--theme-palette-color-1, #d1540e);
    outline-offset: 2px;
}

/* === 标题层级 === */
.wp-block-html h2 {
    font-size: 1.35rem;
    line-height: 1.35;
    margin-top: 2rem;
    margin-bottom: 0.6em;
    color: var(--theme-palette-color-4, #0d1a24);
    font-weight: 700;
}
.wp-block-html h3 {
    font-size: 1.15rem;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.3em;
    color: var(--theme-palette-color-4, #0d1a24);
    font-weight: 600;
}

/* === Infobox 系统 ===
   WCAG AA 对比度已验证:
   info    #1e3a5f on #eff6ff = 9.0:1
   warning #92400e on #fffbeb = 8.5:1
   danger  #991b1b on #fef2f2 = 9.2:1
   success #166534 on #f0fdf4 = 8.8:1
   所有 > 7:1 Pagesafe ✅
*/
.seo-infobox {
    padding: 1em 1.2em;
    margin: 1.2em 0;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 1rem;
    line-height: 1.6;
}
.seo-infobox strong {
    display: block;
    margin-bottom: 0.3em;
    font-size: 1.05rem;
}
.seo-infobox.seo-info    { background: #eff6ff; color: #1e3a5f; border-color: #3b82f6; }
.seo-infobox.seo-warning { background: #fffbeb; color: #92400e; border-color: #f59e0b; }
.seo-infobox.seo-danger  { background: #fef2f2; color: #991b1b; border-color: #ef4444; }
.seo-infobox.seo-success { background: #f0fdf4; color: #166534; border-color: #22c55e; }
.seo-infobox a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; }

/* === 脉冲入场 === */
.seo-infobox {
    animation: seoInfoboxIn 0.35s ease-out;
}
@keyframes seoInfoboxIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .seo-infobox { animation: none; }
}

/* === Pullquote === */
.wp-block-pullquote {
    background: #f0f5ff;
    border-left: 4px solid #3b82f6;
    padding: 1em 1.5em;
    margin: 1.5em 0;
    font-size: 1.2rem;
    font-style: italic;
    color: #1e3a5f;
    border-radius: 0 8px 8px 0;
    line-height: 1.7;
}

/* === 对比表 ===
   WCAG AA: #3c4a50 on #ffffff = 10.4:1 ✅
   隔行: #3c4a50 on #edf0f2 = 8.3:1 ✅
   表头: #0d1a24 on #f4f6f8 = 14.2:1 ✅
*/
.seo-compare-hover {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--theme-palette-color-5, #d4d8db);
    margin: 1.2em 0;
    font-size: 0.95rem;
}
.seo-compare-hover th {
    background: var(--theme-palette-color-7, #f4f6f8);
    color: var(--theme-palette-color-4, #0d1a24);
    font-weight: 600;
    padding: 0.6em 0.8em;
    text-align: left;
    border-bottom: 2px solid var(--theme-palette-color-5, #d4d8db);
}
.seo-compare-hover td {
    padding: 0.6em 0.8em;
    border-bottom: 1px solid var(--theme-palette-color-5, #d4d8db);
    color: var(--theme-palette-color-3, #3c4a50);
    transition: background 0.15s ease;
}
.seo-compare-hover tr:nth-child(even) td {
    background: var(--theme-palette-color-6, #edf0f2);
}
.seo-compare-hover tr:hover td {
    background: #eff6ff;
}
@media (max-width: 600px) {
    .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* === 步骤列表（GSAP 动画前初始状态） === */
.seo-steps-animated li {
    opacity: 0;
    transform: translateY(8px);
    margin-bottom: 0.8em;
    line-height: 1.7;
    font-size: 1rem;
    color: var(--theme-palette-color-3, #3c4a50);
}

/* === 手风琴 (accordion / details) === */
.seo-accordion {
    border: 1px solid var(--theme-palette-color-5, #d4d8db);
    border-radius: 8px;
    margin: 0.5em 0;
    padding: 0.5em 1em;
    background: var(--theme-palette-color-8, #ffffff);
    transition: box-shadow 0.15s ease;
}
.seo-accordion:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.seo-accordion summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.5em 0;
    color: var(--theme-palette-color-4, #0d1a24);
    font-size: 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.seo-accordion summary::-webkit-details-marker { display: none; }
.seo-accordion[open] summary {
    border-bottom: 1px solid var(--theme-palette-color-5, #d4d8db);
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
}
.seo-accordion[open] .accordion-icon { transform: rotate(45deg); }
.seo-accordion .accordion-icon {
    transition: transform 0.2s ease;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--theme-palette-color-3, #3c4a50);
}

/* === 图片 === */
.wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.wp-block-image figcaption {
    font-size: 0.875rem;
    color: var(--theme-palette-color-3, #3c4a50);
    text-align: center;
    margin-top: 0.3em;
    line-height: 1.5;
}

/* === 代码块 === */
pre.wp-block-code {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* === 分隔线 === */
hr.wp-block-separator {
    border: none;
    border-top: 1px solid var(--theme-palette-color-5, #d4d8db);
    margin: 2em 0;
}

/* === 视频 === */
.wp-block-video video {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* === YouTube iframe === */
.wp-block-embed iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
}

/* === 无样式列表 === */
.wp-block-html ul,
.wp-block-html ol {
    padding-left: 1.5em;
    margin-bottom: 1.2em;
}
.wp-block-html li {
    margin-bottom: 0.4em;
    line-height: 1.7;
}