/* 启梦 (qiimeng) Typecho 主题基础样式
 * 设计令牌与原站点保持一致；header.php 会按后台「页面宽度 / 主题色」注入覆盖。 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

:root {
    --qm-accent: #F05C9A;
    /* 页面内容区最大宽度：header.php 按后台「页面宽度」设置注入覆盖 */
    --qm-page-width: 1200px;
    --qm-bg: #f4f5f7;
    --qm-bg-2: #e9ebef;
    --qm-surface: rgba(255, 255, 255, .64);
    --qm-border: rgba(17, 24, 39, .08);
    --qm-text: #1f2329;
    --qm-text-2: rgba(31, 35, 41, .62);
    --qm-hover: rgba(31, 35, 41, .07);
    --qm-shadow: 0 10px 34px rgba(20, 26, 40, .10);
    --qm-nav-h: 60px;
    --qm-logo-grad-end: #2b303b;
    --qm-grad-2: #7a5af8;
    --qm-popup-bg: rgba(255, 255, 255, .92);
    --qm-popup-solid: #ffffff;
    --qm-layout-line: rgba(31, 35, 41, .22);
    --qm-layout-empty-bg: color-mix(in srgb, var(--qm-bg-2) 40%, transparent);
    --qm-zone-gap: 18px;
    color-scheme: light;
}

body {
    min-height: 100vh;
    background: var(--qm-bg);
    color: var(--qm-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    transition: background-color .3s ease, color .3s ease;
}

/* 顶部悬浮导航占位：内容区避开悬浮胶囊 */
.qm-main {
    max-width: var(--qm-page-width, 1200px);
    min-height: calc(100vh - 120px);
    margin: 0 auto;
    padding: calc(var(--qm-nav-h) + 34px) 16px 0;
}

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

/* 轮播图：图片可点击跳转 */
.qm-carousel__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 轮播图：取消 app.css 的全屏突破，保持在 .qm-main 容器内 */
.qm-carousel.is-full {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.qm-carousel.is-full .qm-carousel__layout {
    height: clamp(280px, 42vh, 480px);
}

/* Typecho 后台富文本内容的兜底样式（app.css 中的 .qm-prose 为主） */
.qm-prose img {
    max-width: 100%;
    height: auto;
}

/* 无侧栏页面：内容区占满 */
.qm-page__body:not(.has-sidebar) {
    display: block;
}

/* app.css 后段把 has-sidebar 又写回 display:block，覆盖 grid，这里强行恢复 */
.qm-page__body.has-sidebar {
    display: grid !important;
}

/* 窄屏时退回 block（避免侧栏挤压） */
@media (width <= 860px) {
    .qm-page__body.has-sidebar {
        display: block !important;
    }

    .qm-page__body.has-sidebar .qm-page__sidebar {
        margin-top: 24px;
    }
}

/* 侧栏：多张卡片纵向堆叠（app.css 只给了 sticky，未定容器布局） */
.qm-page__sidebar {
    display: grid;
    gap: var(--qm-zone-gap);
    align-content: start;
}

/* ---------------------------------------------------------------
 * 显隐控制
 * 原站点由 Vue 的 v-if 控制以下浮层，CSS 中没有任何隐藏规则；
 * 本主题用 .is-open 类在服务端/JS 中切换。style.css 在 app.css
 * 之后加载，因此这里的 display 声明可以覆盖 app.css 的 display:grid/block。
 * --------------------------------------------------------------- */
.qm-nav__scrim,
.qm-nav__drop,
.qm-nav__drawer,
.qm-nav__more {
    display: none;
}

.qm-nav__drop.is-open,
.qm-nav__drawer.is-open,
.qm-nav__more.is-open {
    display: grid;
}

.qm-nav__scrim.is-open {
    display: block;
}

/* 桌面端悬停展开子分类下拉（原站由 JS mouseenter 控制，这里用纯 CSS 实现） */
@media (hover: hover) and (min-width: 1024px) {
    .qm-nav__item:hover > .qm-nav__drop,
    .qm-nav__item:focus-within > .qm-nav__drop {
        display: grid;
    }

    .qm-nav__item:hover .qm-nav__chevron,
    .qm-nav__item:focus-within .qm-nav__chevron {
        transform: rotate(180deg);
    }
}

/* 导航抽屉在窄屏始终可被展开 */
@media (width <= 860px) {
    .qm-nav__drawer {
        grid-template-columns: 1fr;
        gap: 2px;
        width: min(92vw, 420px);
        max-height: 70vh;
        padding: 12px;
        overflow: auto;
    }
}

/* ---------------------------------------------------------------
 * 分页兼容
 * app.css 的 .qmw-pager 只适配 <button>；Typecho 默认输出
 * <ol class="page-navigator"><li><a>/<span>，此处补齐。
 * --------------------------------------------------------------- */
.qmw-pager .page-navigator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qmw-pager .page-navigator li > a,
.qmw-pager .page-navigator li > span {
    display: inline-block;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--qm-surface);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--qm-text);
    font-size: 13px;
    line-height: 34px;
    text-align: center;
    text-decoration: none;
    transition: color .2s, background-color .2s;
}

.qmw-pager .page-navigator li > a:hover {
    color: var(--qm-accent);
    background: color-mix(in srgb, var(--qm-accent) 10%, transparent);
}

.qmw-pager .page-navigator li.is-active > a,
.qmw-pager .page-navigator li > a.is-active,
.qmw-pager .page-navigator li.current > a,
.qmw-pager .page-navigator li > a.current {
    background: color-mix(in srgb, var(--qm-accent) 14%, transparent);
    color: var(--qm-accent);
    font-weight: 700;
}

/* Typecho pageNav 默认给「上一页/下一页」输出文本而非箭头，收紧内边距 */
.qmw-pager .page-navigator li.prev > a,
.qmw-pager .page-navigator li.next > a {
    padding: 0 14px;
}

/* ---------------------------------------------------------------
 * 页脚底栏：app.css 只给了 flex-wrap/gap/padding，未定 display，
 * 这里补上让「版权 + 备案信息」两端对齐。
 * --------------------------------------------------------------- */
.qm-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ---------------------------------------------------------------
 * 模块入场动画
 * app.css 约定：元素带 .qm-anim-wait + [data-anim=fade|zoom] +
 * 内联 --qm-anim-delay，JS 滚入视口后加 .qm-anim-in 触发过渡。
 * 无 JS 时由 header.php 的 <noscript> 直接放开。
 * --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .qm-anim-wait {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .qm-anim-in {
        transition: none;
    }
}

/* ---------------------------------------------------------------
 * 浮层显隐：用户菜单 / 弹窗 / 登录框
 * --------------------------------------------------------------- */
.qm-nav__umenu {
    /* app.css 只给了尺寸与定位，未定 display */
    display: none;
}

.qm-nav__umenu.is-open {
    display: block;
}

.qm-popup-mask,
.qm-login-mask {
    display: none;
}

.qm-popup-mask.is-open,
.qm-login-mask.is-open {
    display: flex;
}

/* 空 toast 不占位 */
.qm-nav__toast:empty {
    display: none;
}

/* ---------------------------------------------------------------
 * 导航搜索态：搜索框与菜单互斥显示
 * app.css 用 .qm-nav.is-search 作为开关类
 * --------------------------------------------------------------- */
.qm-nav:not(.is-search) .qm-nav__search {
    display: none;
}

.qm-nav.is-search .qm-nav__menu {
    display: none;
}

/* 下拉面板与「更多」面板顶部补一块透明热区，避免鼠标移入时丢失 hover */
.qm-nav__drop::before,
.qm-nav__more::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.qm-nav__more::before {
    top: -10px;
    height: 10px;
}

/* 访客菜单里的「立即登录」在参考站是 button，本主题改为 a */
a.qm-uguest-login {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* ---------------------------------------------------------------
 * 手机端首页文章卡片：一行两篇
 * app.css 在 (width<=639.9px) 把卡片网格压成单列，这里改回两列，
 * 并同步收紧字号与内边距，避免两列时拥挤换行。
 * --------------------------------------------------------------- */
@media (width <= 639.9px) {
    .qmw-posts--cards .qmw-posts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .qmw-posts--cards .qmw-post-card__body {
        padding: 10px 11px 12px;
    }

    .qmw-posts--cards .qmw-post-card__title {
        margin: 5px 0 7px;
        font-size: 13px;
    }

    .qmw-posts--cards .qmw-post-card__excerpt {
        margin-bottom: 8px;
        font-size: 11.5px;
        line-height: 1.5;
    }

    .qmw-posts--cards .qmw-post-card__category,
    .qmw-posts--cards .qmw-post-card__date {
        font-size: 11px;
    }

    .qmw-posts--cards .qmw-post-card__meta {
        gap: 8px;
        font-size: 11px;
    }

    /* 瀑布流样式同步改为两列 */
    .qmw-posts--masonry .qmw-posts__grid {
        columns: 2 auto;
        column-gap: 10px;
    }

    .qmw-posts--masonry .qmw-post-card {
        margin-bottom: 10px;
    }
}