/**
 * void theme - 极简主义 Hugo 主题
 * 使用现代 CSS 特性：Nesting, @layer, oklch
 */

/* ==========================================================================
   层叠层声明 - 控制样式优先级
   ========================================================================== */

@layer base, layout, components;

/* ==========================================================================
   Base Layer - 基础样式
   ========================================================================== */

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

    /* 颜色系统 */
    :root {
        color-scheme: light dark;

        /* 语义化颜色 - 使用 light-dark() 自动适应 */
        --surface: light-dark(oklch(98% 0 0), oklch(8% 0 0));
        --surface-alt: light-dark(oklch(95% 0 0), oklch(12% 0 0));
        --text: light-dark(oklch(12% 0 0), oklch(95% 0 0));
        --text-muted: light-dark(oklch(40% 0 0), oklch(65% 0 0));
        --text-faint: light-dark(oklch(65% 0 0), oklch(50% 0 0));
        --border: light-dark(oklch(90% 0 0), oklch(30% 0 0));

        /* 间距 */
        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;

        /* 布局 */
        --sidebar-width: 220px;
        --content-max: 650px;
    }

    /* 基础元素 */
    body {
        font-family: system-ui, "Noto Sans SC", sans-serif;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--text);
        background: var(--surface);
        margin: 0;
    }

    a {
        color: inherit;
        text-decoration-color: var(--text-faint);
        text-underline-offset: 0.2em;

        &:hover {
            text-decoration-color: var(--text);
        }
    }

    img,
    svg,
    video {
        max-width: 100%;
        display: block;
    }
}

/* ==========================================================================
   Layout Layer - 布局
   ========================================================================== */

@layer layout {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .layout {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        height: 100dvh;
    }

    .sidebar {
        padding: var(--space-md);
        padding-right: 0;
        display: flex;
        flex-direction: column;
        background: light-dark(#f3f4f6, oklch(12% 0 0));
    }

    .sidebar-inner {
        padding: var(--space-sm);
        display: flex;
        flex-direction: column;
        flex: 1;
        padding-bottom: var(--space-sm);
    }

    .main {
        padding: var(--space-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        background: light-dark(#f3f4f6, oklch(12% 0 0));
        overflow: hidden;
    }

    .card {
        background: light-dark(#f9fafb, oklch(8% 0 0));
        border: 0.5px solid var(--border);
        border-radius: 8px;
        padding: var(--space-md);
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 移动端菜单按钮 */
    .menu-toggle {
        display: none;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        margin-right: var(--space-sm);

        &:hover {
            color: var(--text);
        }

        @media (width <= 1024px) {
            display: block;
        }
    }

    .menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 999;
    }

    .menu-open .menu-overlay {
        display: block;
    }

    /* 响应式 */
    @media (width <= 1024px) {
        .layout {
            grid-template-columns: 1fr;
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: var(--sidebar-width);
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            flex-direction: column;
            border-right: 1px solid var(--border);
        }

        .menu-open .sidebar {
            transform: translateX(0);
        }
    }
}

/* ==========================================================================
   Components Layer - 组件
   ========================================================================== */

@layer components {
    /* ----- 面包屑 ----- */

    .breadcrumb {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: 0.8125rem;
        color: var(--text-muted);
        padding: var(--space-sm);
        padding-left: var(--space-md);
        margin: calc(-1 * var(--space-md));
        margin-bottom: 0;
        border-bottom: 0.5px solid var(--border);
        position: sticky;
        top: calc(-1 * var(--space-md));
        background: light-dark(#f9fafb, oklch(8% 0 0));
        z-index: 10;
    }

    .breadcrumb-item {
        color: var(--text-muted);
        text-decoration: none;

        &:hover {
            color: var(--text);
        }

        &.active {
            color: var(--text);
        }
    }

    .has-parent::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        border-top: 1px solid var(--text-faint);
        border-right: 1px solid var(--text-faint);
        transform: rotate(45deg);
        margin-right: var(--space-sm);
        vertical-align: middle;
        position: relative;
        top: -1px;
    }

    /* ----- Tags 页面头部 ----- */

    .tags-header {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .tags-header #pagefind {
        margin-bottom: var(--space-md);
    }

    /* ----- 侧边栏 ----- */

    .profile {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        text-decoration: none;
    }

    .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        object-fit: cover;
    }

    .name {
        font-size: 0.9rem;
        font-weight: 400;
    }

    .bio {
        color: var(--text-muted);
        font-size: 0.875rem;
        margin-block: var(--space-sm) var(--space-xl);
    }

    .nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        margin-top: var(--space-xl);
        margin-bottom: auto;

        a {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.875rem;
            padding: var(--space-xs) var(--space-sm);
            margin-left: calc(-1 * var(--space-sm));
            border-radius: 4px;

            svg {
                flex-shrink: 0;
            }

            &:hover,
            &.active {
                background: light-dark(#e6e7eb, oklch(20% 0 0));
                color: var(--text);
            }
        }
    }

    .sidebar-footer {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        margin-top: auto;

        svg {
            width: 18px;
            height: 18px;
        }
    }

    .social {
        display: flex;
        gap: var(--space-md);
        padding-left: var(--space-md);
        border-left: 1px solid var(--border);

        a {
            color: var(--text-faint);
            text-decoration: none;

            &:hover {
                color: var(--text);
            }
        }
    }

    .theme-toggle {
        padding: 0;
        background: none;
        border: none;
        color: var(--text-faint);
        cursor: pointer;

        &:hover {
            color: var(--text);
        }
    }

    .icon-sun {
        display: none;
    }
    .icon-moon {
        display: block;
    }
    [data-theme="dark"] .icon-sun {
        display: block;
    }
    [data-theme="dark"] .icon-moon {
        display: none;
    }

    /* ----- 首页精选文章 ----- */

    .featured-post {
        max-width: var(--content-max);
        margin-inline: auto;
        padding-bottom: var(--space-xl);
        margin-bottom: var(--space-lg);
        border-bottom: 0.5px solid var(--border);
        font-family: "Noto Serif", "Noto Serif SC", Georgia, serif;
    }

    .featured-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: var(--space-sm);

        a {
            text-decoration: none;
        }
    }

    .featured-meta {
        font-size: 0.8125rem;
        color: var(--text-faint);
        margin-bottom: var(--space-md);
    }

    .featured-summary {
        font-size: 1.125rem;
        line-height: 1.8;
        color: var(--text-muted);
    }

    .featured-more {
        display: inline-block;
        margin-top: var(--space-sm);
        font-size: 0.875rem;
        color: var(--text-faint);
        text-decoration: none;

        &:hover {
            color: var(--text-muted);
        }
    }

    .home-list {
        max-width: var(--content-max);
        margin-inline: auto;
        list-style: none;
        padding: 0;
        font-family: "Noto Serif", "Noto Serif SC", Georgia, serif;

        li {
            margin-bottom: var(--space-lg);
        }

        a {
            font-size: 1.25rem;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
                text-decoration-color: var(--text-faint);
                text-underline-offset: 0.2em;
            }
        }
    }

    .home-more {
        margin-top: var(--space-sm);

        a {
            font-size: 0.875rem;
            color: var(--text-faint);

            &:hover {
                color: var(--text-muted);
            }
        }
    }

    /* ----- 文章列表 ----- */

    .post-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-family: "Noto Serif", "Noto Serif SC", Georgia, serif;
    }

    .post-year {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-muted);
        padding: var(--space-sm) var(--space-md);
        margin-inline: calc(-1 * var(--space-md));
        border-bottom: 1px solid var(--border);
        background: light-dark(#f3f4f6, #161616);
    }

    .post-item {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-sm) var(--space-md);
        margin-inline: calc(-1 * var(--space-md));
        border-bottom: 1px solid var(--border);
        position: relative;
        flex-wrap: nowrap;

        &:hover {
            background: light-dark(#f3f4f6, #161616);
        }

        @media (width <= 1024px) {
            gap: var(--space-xs);
        }
    }

    .post-date {
        color: var(--text-faint);
        font-size: 0.75rem;
        font-variant-numeric: tabular-nums;
        width: 5rem;
        flex-shrink: 0;
    }

    .post-title {
        flex: 1;
        min-width: 0;
        font-size: 0.8125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        a {
            text-decoration: none;
            cursor: default;

            &::after {
                content: "";
                position: absolute;
                inset: 0;
            }
        }
    }

    .post-tags {
        display: flex;
        gap: 0.375rem;
        margin-left: auto;
        position: relative;
        z-index: 1;
        flex-shrink: 0;

        .tag {
            font-size: 0.6875rem;
            color: var(--text-faint);
            padding: 0.125rem 0.375rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: default;
        }

        @media (width <= 1024px) {
            display: none;
        }
    }

    /* ----- 页面标题 ----- */

    .page-header {
        margin-bottom: var(--space-xl);
    }

    .page-title {
        font-size: 1.25rem;
    }

    /* ----- 文章页 ----- */

    .article-header {
        max-width: var(--content-max);
        margin-inline: auto;
        margin-bottom: var(--space-xl);
    }

    .article-title {
        font-size: 2.25rem;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 0.025em;
        margin-bottom: var(--space-md);
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        color: var(--text-faint);
        font-size: 0.8125rem;
    }

    .article-tags a {
        color: var(--text-muted);
        margin-right: var(--space-sm);
    }

    /* ----- 文章正文 ----- */

    .article-content {
        max-width: var(--content-max);
        font-family: "Noto Serif", "Noto Serif SC", Georgia, serif;
        font-size: 1.125rem;
        line-height: 1.8;
        margin-inline: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        > * + * {
            margin-top: var(--space-lg);
        }

        :is(h1, h2, h3, h4) {
            margin-top: var(--space-xl);
            line-height: 1.3;
        }

        pre {
            background: var(--surface-alt);
            padding: var(--space-md);
            border-radius: 6px;
            overflow-x: auto;
            font-size: 0.875rem;
        }

        :not(pre) > code {
            background: var(--surface-alt);
            padding: 0.125rem 0.375rem;
            border-radius: 4px;
            font-size: 0.875em;
        }

        blockquote {
            border-left: 2px solid var(--border);
            padding-left: var(--space-lg);
            color: var(--text-muted);
            margin-left: 0;
        }

        img {
            border-radius: 6px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
        }

        :is(th, td) {
            border: 1px solid var(--border);
            padding: var(--space-sm);
            text-align: left;
        }

        th {
            background: var(--surface-alt);
        }
    }

    /* ----- 评论 ----- */

    .comments {
        max-width: var(--content-max);
        margin-inline: auto;
        margin-top: var(--space-xl);
        padding-top: var(--space-xl);
        border-top: 1px solid var(--border);
    }

    /* ----- 404 ----- */

    .not-found {
        display: grid;
        place-items: center;
        min-height: 60vh;
        text-align: center;
    }

    .not-found-code {
        font-size: 4rem;
        font-weight: 700;
        color: var(--text-faint);
    }

    .not-found-text {
        color: var(--text-muted);
    }

    /* ----- Media 页面 ----- */

    .media-page {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .media-section-title {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-faint);
        margin-bottom: var(--space-md);
    }

    .cover-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: var(--space-sm);
        max-width: 960px;

        @media (width <= 768px) {
            grid-template-columns: repeat(5, 1fr);
        }

        @media (width <= 480px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .cover-item {
        display: block;

        img {
            width: 100%;
            aspect-ratio: 2 / 3;
            object-fit: cover;
            border-radius: 4px;
            transition: opacity 0.2s ease;
        }

        &:hover img {
            opacity: 0.8;
        }
    }

    /* ----- NeoDB 卡片 ----- */

    .db-card {
        background: var(--surface-alt);
        border: 1px solid var(--border);
        border-radius: 8px;
    }

    .review-grid .db-card {
        margin: 0;
        transition: border-color 0.2s ease;

        &:hover {
            border-color: var(--text-faint);
        }
    }

    .db-card-subject {
        display: flex;
        gap: var(--space-md);
        padding: var(--space-md);
        position: relative;
    }

    .db-card-post {
        flex-shrink: 0;
    }

    .db-card-post img {
        width: 80px;
        min-width: 80px;
        height: 120px;
        border-radius: 4px;
        object-fit: cover;
    }

    .db-card-title {
        font-weight: 500;
    }

    .db-card-abstract {
        font-size: 0.8125rem;
        color: var(--text-muted);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .db-card-cate {
        position: absolute;
        top: 0;
        right: 0;
        background: var(--text-faint);
        color: var(--surface);
        padding: 2px 8px;
        font-size: 0.75rem;
        border-radius: 0 8px 0 8px;
    }

    .rating {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: 0.8125rem;
        margin-block: var(--space-xs);

        .allstardark {
            position: relative;
            height: 14px;
            width: 70px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23404040'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E")
                repeat-x;
            background-size: auto 100%;
        }

        .allstarlight {
            position: absolute;
            left: 0;
            height: 14px;
            overflow: hidden;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E")
                repeat-x;
            background-size: auto 100%;
        }
    }

    /* ----- 搜索页 ----- */

    .search-page {
        max-width: var(--content-max);
        margin-inline: auto;
    }

    #pagefind {
        margin-bottom: var(--space-xl);
    }

    .tag-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);

        .tag {
            font-size: 0.75rem;
            color: var(--text-muted);
            padding: 0.25rem 0.5rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            text-decoration: none;

            &:hover {
                background: light-dark(#e6e7eb, oklch(20% 0 0));
            }

            &.active {
                background: light-dark(#e6e7eb, oklch(20% 0 0));
                color: var(--text);
            }
        }
    }

    /* ----- Builds 项目卡片 ----- */

    .builds-page {
        margin-inline: var(--space-lg);
        padding-top: var(--space-lg);
    }

    .builds-intro {
        margin-bottom: var(--space-xl);
        font-family: "Noto Serif", "Noto Serif SC", Georgia, serif;
        line-height: 1.8;
    }

    .project-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);

        @media (width <= 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (width <= 640px) {
            grid-template-columns: 1fr;
        }
    }

    .project-card {
        padding: var(--space-md);
        border: 1px solid var(--border);
        border-radius: 8px;
        background: light-dark(#f3f4f6, #161616);
    }

    .project-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        margin-bottom: var(--space-md);
    }

    .project-title {
        font-size: 0.9rem;
        font-weight: 350;
        margin: 0;
        color: var(--text);
    }

    .project-desc {
        font-size: 0.875rem;
        color: var(--text-faint);
        line-height: 1.6;
        margin: 0;
    }

    .project-link {
        color: var(--text-faint);
        flex-shrink: 0;

        &:hover {
            color: var(--text);
        }
    }
}