/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ========================================================================== */
/* 目录索引 */
/* ========================================================================== */
/*
 * 1. 全局重置 & 基础样式
 * 2. 导航栏样式
 * 3. 首页横幅样式
 * 4. 功能卡片网格
 * 5. 内容区域基础样式
 * 6. 页脚样式
 * 7. 响应式适配
 * 8. 硬件页面样式
 * 9. 侧边栏文章目录样式
 * 10. 文章导航样式（上一篇/下一篇）
 */

/* ========================================================================== */
/* 1. 全局重置 & 基础样式 */
/* ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
    color: #333;
    background-color: #f9f9f9;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ========================================================================== */
/* 2. 导航栏样式 */
/* ========================================================================== */

/* 下拉菜单样式 */
.main-navigation .menu-item-has-children {
    position: relative;
}

.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    margin-top: 0;
    display: none;
    z-index: 1000;
}

.main-navigation .menu-item-has-children:hover .sub-menu {
    display: block;
}

.main-navigation .sub-menu li {
    display: block;
}

.main-navigation .sub-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.main-navigation .sub-menu a:hover {
    color: #667eea;
    background: #f7f8f9;
    padding-left: 20px;
}

/* ========================================================================== */
/* 3. 首页横幅样式 */
/* ========================================================================== */

.welcome-banner-container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 40px;
    padding: 0;
    position: relative;
    z-index: 1;
    clear: both;
    display: block;
    overflow: visible;
}

.welcome-banner {
    background: linear-gradient(90deg, #f0f4ff 0%, #e6f0ff 100%);
    color: #333;
    padding: 60px 20px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.welcome-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.welcome-banner-content {
    flex: 1;
    min-width: 300px;
}

.welcome-banner h1 {
    font-size: 3em;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.welcome-banner p {
    font-size: 1.1em;
    color: #666;
    max-width: 600px;
    line-height: 1.6;
}

.welcome-banner-icon {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    position: relative;
}

.welcome-banner-icon svg {
    width: 100%;
    height: 100%;
}

.chinese-knot {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: #e74c3c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    animation: sway 2s ease-in-out infinite;
}

@keyframes sway {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* ========================================================================== */
/* 4. 功能卡片网格 */
/* ========================================================================== */

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 20px;
    clear: both;
    position: relative;
    z-index: 2;
}

.feature-card-link {
    display: block;
}

.feature-card {
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
    text-align: center;
}

.feature-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: #f7f8f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #667eea;
}

.feature-card h3 {
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #333;
}

.feature-card p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
}

/* ========================================================================== */
/* 5. 内容区域基础样式 */
/* ========================================================================== */

#primary {
    width: 100%;
    max-width: none;
}

#main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* 移除 Astra 主题的默认容器限制 */
.inside-article,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
    padding: 0;
    margin: 0;
}

.separate-containers .site-main {
    margin: 0;
    padding: 0;
}

/* ========================================================================== */
/* 6. 页脚样式 */
/* ========================================================================== */

.site-footer {
    background: white;
    color: #1e3a8a;
    padding: 60px 0 30px;
    margin-top: 60px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-main {
    display: grid;
    grid-template-columns: 40% 15% 15% 15% 15%;
    gap: 0;
    margin-bottom: 40px;
}

/* 页脚左侧：网站介绍 */
.footer-about h3 {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #1e3a8a;
}

.footer-about p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #334155;
}

.footer-stats {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    color: #1e3a8a;
}

.stat-label {
    display: block;
    font-size: 0.9em;
    color: #475569;
    margin-top: 5px;
}

/* 页脚导航、社交、联系方式 */
.footer-nav,
.footer-social,
.footer-contact {
    width: 100%;
}

.footer-nav h4,
.footer-social h4,
.footer-contact h4 {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #1e3a8a;
    position: relative;
    padding-bottom: 8px;
}

.footer-nav h4::after,
.footer-social h4::after,
.footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #3b82f6;
}

.footer-nav ul,
.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li,
.footer-contact li {
    margin-bottom: 10px;
}

.footer-nav a,
.footer-contact a,
.footer-social a {
    color: #334155;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9em;
}

.footer-nav a:hover,
.footer-contact a:hover,
.footer-social a:hover {
    color: #1e40af;
}

.social-icons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.social-icon {
    display: block;
    color: #1e3a8a;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 5px 0;
}

.social-icon:hover {
    color: #1e40af;
}

/* 页脚底部：版权信息 */
.footer-bottom {
    border-top: 1px solid #e2e8f0;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-copyright p {
    color: #475569;
    font-size: 0.9em;
    margin: 0;
}

.footer-bottom-nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-bottom-nav a {
    color: #475569;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.footer-bottom-nav a:hover {
    color: #1e3a8a;
}

/* 备案信息样式 */
.footer-beian-info {
    text-align: center;
    margin-top: 10px;
}

.footer-beian-info a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #666;
    font-size: 14px;
    gap: 5px;
}

.footer-beian-info .beian-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.footer-beian-info .beian-number {
    vertical-align: middle;
}

/* ========================================================================== */
/* 7. 响应式适配 */
/* ========================================================================== */

/* 平板端 (max-width: 992px) */
@media (max-width: 992px) {
    .main-navigation ul {
        gap: 15px;
    }

    .main-navigation a {
        font-size: 14px;
        padding: 4px 8px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-stats {
        justify-content: space-around;
    }

    .hardware-hero-title {
        font-size: 2.5em;
    }
}

/* 移动端 (max-width: 768px) */
@media (max-width: 768px) {
    /* 导航栏 */
    .header-container {
        flex-direction: column;
        gap: 15px;
        padding: 10px 20px;
    }

    .header-left {
        order: 1;
    }

    .header-right {
        order: 2;
        width: 100%;
        justify-content: center;
    }

    .main-navigation ul {
        justify-content: center;
    }

    .main-navigation a {
        font-size: 13px;
        padding: 4px 8px;
    }

    /* 横幅 */
    .welcome-banner {
        padding: 40px 20px;
    }

    .welcome-banner h1 {
        font-size: 2.5em;
    }

    /* 卡片 */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* 页脚 */
    .site-footer {
        padding: 40px 0 20px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .footer-bottom-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    /* 硬件页面 */
    .hardware-hero {
        padding: 60px 20px;
    }

    .hardware-hero-title {
        font-size: 2em;
    }

    .hardware-hero-subtitle {
        font-size: 1em;
    }

    .hardware-sections-grid {
        grid-template-columns: 1fr;
    }

    .hardware-section-card {
        padding: 20px;
    }
}

/* ========================================================================== */
/* 8. 硬件页面样式 */
/* ========================================================================== */

.hardware-hero {
    background: linear-gradient(90deg, #f0f4ff 0%, #e6f0ff 100%);
    color: #333;
    padding: 60px 20px;
    text-align: center;
}

.hardware-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hardware-hero-title {
    font-size: 3em;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.hardware-hero-subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
}

.hardware-sections {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.hardware-section-title {
    font-size: 2em;
    text-align: center;
    margin-bottom: 40px;
    color: #1e3a8a;
}

.hardware-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.hardware-section-card {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.hardware-section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.hardware-section-icon {
    width: 60px;
    height: 60px;
    background: #f7f8f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #667eea;
    margin-bottom: 20px;
}

.hardware-section-card h3 {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: #1e3a8a;
}

.hardware-section-card p {
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.hardware-section-link {
    display: inline-block;
    padding: 8px 16px;
    background: #667eea;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.hardware-section-link:hover {
    background: #5a6fd8;
    transform: translateX(5px);
}

/* ========================================================================== */
/* 9. 侧边栏文章目录样式 */
/* ========================================================================== */
/*
 * 配合 functions.php 中的 [current_subcat_posts] 短代码使用
 * 显示当前二级分类下的文章列表
 */

.km-subcat-sidebar {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.km-subcat-sidebar__title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.km-subcat-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}

.km-subcat-sidebar__item {
    margin: 0;
    padding: 0;
    border-bottom: 1px dashed #f0f0f0;
}

.km-subcat-sidebar__item:last-child {
    border-bottom: none;
}

.km-subcat-sidebar__item a {
    display: block;
    padding: 10px 6px;
    color: #333;
    text-decoration: none;
    line-height: 1.6;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.km-subcat-sidebar__item a:hover {
    background: #f7f9fc;
    color: #0b57d0;
}

/* 当前文章高亮样式 */
.km-subcat-sidebar__item.is-current a {
    background: #eef4ff;
    color: #0b57d0;
    font-weight: 600;
}

/* 文章编号标签样式 */
.km-order-label {
    display: inline-block;
    min-width: 28px;
    margin-right: 6px;
    font-size: 12px;
    line-height: 1.2;
    color: #666;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 1px 4px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.km-post-title {
    vertical-align: middle;
}

/* 桌面端侧边栏吸附效果 */
@media (min-width: 922px) {
    .sidebar-main {
        position: sticky;
        top: 90px;
        align-self: flex-start;
    }
}

/* ========================================================================== */
/* 10. 文章导航样式（上一篇/下一篇） */
/* ========================================================================== */
/*
 * 配合 functions.php 中的 km_get_custom_post_navigation_html() 使用
 * 隐藏默认导航，显示同分类导航
 */

/* 隐藏 Astra 默认的文章导航 */
.single-post .post-navigation:not(.km-custom-post-navigation) {
    display: none !important;
}

/* 自定义文章导航样式 */
.single-post .km-custom-post-navigation {
    display: block !important;
    margin-top: 40px;
}

.single-post .km-custom-post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.single-post .km-custom-post-navigation .nav-previous,
.single-post .km-custom-post-navigation .nav-next {
    width: 48%;
}

.single-post .km-custom-post-navigation .nav-next {
    text-align: right;
}

.single-post .km-custom-post-navigation a {
    text-decoration: none;
}

.single-post .km-custom-post-navigation p {
    margin: 6px 0 0;
}