/* sqyai_sitefix 视觉与体验优化补丁（brieflee 主题适配）
   原则：轻量、不破坏原主题布局，只做增强 */

:root {
    --sqyai-accent: #c8443d;       /* 站点主色（沿用顶部装饰线的朱红） */
    --sqyai-card-bg: #ffffff;
    --sqyai-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    --sqyai-shadow-hover: 0 6px 18px rgba(0, 0, 0, .12);
    --sqyai-radius: 10px;
}

/* ---------- 全局细节 ---------- */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

::selection {
    background: var(--sqyai-accent);
    color: #fff;
}

a {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* 键盘可达性：焦点可见 */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--sqyai-accent);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- 文章卡片（首页/列表） ---------- */
article.post,
article.first-post,
article.cms-cate {
    border-radius: var(--sqyai-radius);
    box-shadow: var(--sqyai-shadow);
    background: var(--sqyai-card-bg);
    transition: box-shadow .25s ease, transform .25s ease;
    overflow: hidden;
}

article.post:hover,
article.first-post:hover {
    box-shadow: var(--sqyai-shadow-hover);
    transform: translateY(-2px);
}

.post-thumb img {
    border-radius: 6px;
    transition: transform .3s ease, opacity .3s ease;
}

article.post:hover .post-thumb img {
    transform: scale(1.04);
}

/* 标题链接 hover 主色 */
.post-head h2 a:hover,
.post-head h1 a:hover {
    color: var(--sqyai-accent);
}

/* ---------- 侧栏模块 ---------- */
.sidebar-widget {
    border-radius: var(--sqyai-radius);
    box-shadow: var(--sqyai-shadow);
    background: var(--sqyai-card-bg);
    overflow: hidden;
}

/* ---------- 文章页排版 ---------- */
.single-content .entry,
.post .entry {
    line-height: 1.9;
    word-wrap: break-word;
}

.single-content .entry p {
    margin-bottom: 1.1em;
}

.single-content .entry img {
    border-radius: 6px;
    box-shadow: var(--sqyai-shadow);
}

.single-content .entry blockquote {
    border-left: 4px solid var(--sqyai-accent);
    background: rgba(200, 68, 61, .05);
    border-radius: 0 6px 6px 0;
    padding: .6em 1em;
}

/* 代码块可读性 */
.single-content .entry pre,
.single-content .entry code {
    border-radius: 6px;
}

/* ---------- 分页 ---------- */
.pagebar a,
.pagebar span {
    border-radius: 6px;
    transition: background-color .2s ease, color .2s ease;
}

.pagebar a:hover {
    background: var(--sqyai-accent);
    color: #fff;
}

/* ---------- 移动端细节 ---------- */
@media screen and (max-width: 768px) {
    article.post,
    article.first-post {
        border-radius: 8px;
    }

    .single-content .entry {
        font-size: 16px;
    }

    /* 缩小卡片内边距带来的拥挤感由主题自身 padding 决定，这里只保证图片不溢出 */
    .entry img {
        max-width: 100%;
        height: auto;
    }
}

/* ---------- 移动端顶部比例修复（2026-11-10 实测） ----------
   主题内联样式给 .header 同时设了 aspect-ratio:1920/720 与 min-height:240px（<=768px），
   浏览器据此反推出 header 的最小宽度为 240 * 1920/720 = 640px。
   后果：手机上整页被撑宽到 640px（可横向滚动）、横幅被 cover 裁掉一半、
   logo 按 640px 居中后跑出屏幕、右侧搜索按钮消失、导航下方多出 85px 空带。
   这里解除反推约束，改用 padding-top 按 1920:720 撑出横幅高度，
   背景图按宽度完整缩放（100% auto），不再被 cover 横向裁切。 */
@media screen and (max-width: 768px) {
    #header_content .header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        padding-top: 37.5vw !important;
        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-color: #fff !important;
    }
    #header_content .header-nav {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }
    /* logo 等比缩放：窄屏不裁切、不与左右菜单/搜索图标重叠 */
    #header_content .nav-sjlogo img {
        width: auto;
        height: auto !important;
        max-height: 40px;
        max-width: 62vw;
        padding-top: 0 !important;
        object-fit: contain;
    }
    /* 65px 是给「fixed 导航」预留的顶部空间，而导航已被内联样式改成相对定位，
       加上导航自身 20px 下边距，形成 85px 无内容的土黄色空带。 */
    .wrapper .container {
        padding-top: 12px !important;
    }
}

/* ---------- 打印友好 ---------- */
@media print {
    .sidebar, .footer, #header_content .search-form, .pagebar {
        display: none;
    }

    article.post, .sidebar-widget {
        box-shadow: none;
    }
}