/* ====================================================================
   公共页脚样式（components/footer.html 专用）
   ——————————————————————————————————————————————————————————
   说明：原 .lp-footer* 样式写在 home.css 中，依赖 landing page
   作用域定义的 --lp-* 变量；公开页面（skills/prompts/resources
   /help/mcp/community 等）通过 layouts/public_left_sidebar.html
   布局并未引入 home.css，会导致 footer 颜色/布局错乱。
   本文件把 footer 所需变量+规则独立收敛在 .lp-footer 作用域内，
   任何页面只需引入本 css 即可获得统一页脚外观。
   ==================================================================== */

.lp-footer {
    /* 局部 CSS 变量：仅在 footer 作用域生效，避免与外层主题冲突 */
    --lp-text:        #ffffff;
    --lp-text-muted:  rgba(255, 255, 255, 0.55);
    --lp-text-dim:    rgba(255, 255, 255, 0.35);
    --lp-border:      rgba(255, 255, 255, 0.08);

    position: relative;
    z-index: 1;
    width: 100%;
    border-top: 1px solid var(--lp-border);
    /* 防止在 flex column 父容器（main-content-right-layout）中被压缩，
       确保 footer 保持完整高度、父容器 overflow-y:auto 正常产生滚动条 */
    flex-shrink: 0;
}

.lp-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}

.lp-footer-top {
    display: flex;
    justify-content: space-between;
    padding: 56px 0 40px;
    gap: 48px;
    flex-wrap: wrap;
}

.lp-footer-brand {
    max-width: 280px;
}

.lp-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    color: var(--lp-text);
    text-decoration: none;
}

.lp-footer-logo .lp-footer-logo-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    /* 动态主题色渐变（由 theme-engine.js 实时驱动） */
    background: linear-gradient(135deg, var(--nav-accent-from, var(--color-light, #22c55e)), var(--nav-accent-to, #439BE6));
    -webkit-mask: url("/static/icons/lightning.f09df6e83a91.svg") no-repeat center / contain;
    mask: url("/static/icons/lightning.f09df6e83a91.svg") no-repeat center / contain;
    transition: background 0.3s ease;
}

.lp-footer-slogan {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--lp-text-dim);
    line-height: 1.7;
}

.lp-footer-links {
    display: flex;
    gap: 56px;
    flex-wrap: wrap;
}

.lp-footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-footer-col h5 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lp-text);
}

.lp-footer-col a {
    font-size: 13px;
    color: var(--lp-text-dim);
    text-decoration: none;
    transition: color 0.2s;
}

.lp-footer-col a:hover {
    color: var(--lp-text-muted);
}

.lp-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--lp-border);
    flex-wrap: wrap;
    gap: 12px;
}

.lp-footer-bottom p {
    margin: 0;
    font-size: 12px;
    color: var(--lp-text-dim);
}

.lp-footer-bottom-links {
    display: flex;
    gap: 20px;
}

.lp-footer-bottom-links a {
    font-size: 12px;
    color: var(--lp-text-dim);
    text-decoration: none;
    transition: color 0.2s;
}

.lp-footer-bottom-links a:hover {
    color: var(--lp-text-muted);
}