/**
 * Xion 主题 - 响应式样式
 * Version: 2.0 - 简约现代风格
 */

/* ========== Desktop (1200px) ========== */
@media (max-width: 1200px) {
    .posts-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .related-posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.875rem;
    }
}

/* ========== Tablet (768px) ========== */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .header-content {
        padding: 0.6rem 0;
        gap: 0.75rem;
    }
    
    .site-title {
        font-size: 1.25rem;
    }
    
    .site-icon {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    /* 移动端导航 */
    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all 0.25s ease;
        z-index: 999;
    }
    
    .main-navigation.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
    }
    
    .main-navigation li {
        border-bottom: none;
    }
    
    .main-navigation li:last-child {
        border-bottom: none;
    }
    
    .main-navigation a {
        display: block;
        padding: 0.7rem 1.25rem;
        text-align: left;
        border-radius: 0;
        font-size: 0.9rem;
        color: #555;
        transition: all 0.2s ease;
        border-left: 3px solid transparent;
    }
    
    .main-navigation a:hover {
        background: #f8f8f8;
        color: #333;
        border-left-color: #ddd;
    }
    
    .main-navigation a.current-menu-item,
    .main-navigation a.current_page_item,
    .main-navigation a.active,
    .main-navigation li.current-menu-item > a,
    .main-navigation li.current_page_item > a {
        background: #f5f5f5;
        color: #333;
        font-weight: 500;
        border-left-color: #333;
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .header-actions {
        gap: 0.4rem;
    }
    
    .search-toggle,
    .activate-button {
        width: 38px;
        height: 38px;
    }
    
    .search-icon,
    .activate-icon {
        width: 16px;
        height: 16px;
    }
    
    /* 搜索覆盖层 */
    .search-overlay {
        padding: 12px;
    }
    
    .search-container {
        max-height: 90vh;
        border-radius: 10px;
    }
    
    .search-container .search-header {
        padding: 1rem 1.25rem;
    }
    
    .search-container .search-header h3 {
        font-size: 1rem;
    }
    
    .search-form-overlay {
        padding: 1.25rem;
    }
    
    .search-input-group {
        gap: 0.5rem;
    }
    
    .search-field-overlay {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .search-submit-overlay {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .search-suggestions {
        padding: 0 1.25rem 1.25rem;
    }
    
    .trending-tag {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
    
    /* 文章网格 */
    .site-main {
        padding: 1rem 0;
    }
    
    .posts-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }
    
    .post {
        border-radius: 6px;
    }
    
    .post-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }
    
    .post-sticky-badge {
        top: 0.6rem;
        left: 0.6rem;
    }
    
    .post-category-badge {
        bottom: 0.6rem;
        left: 0.6rem;
    }
    
    .post-views-badge {
        bottom: 0.6rem;
        right: 0.6rem;
    }
    
    .post-rating-badge {
        top: 0.6rem;
        right: 0.6rem;
    }
    
    .category-icon,
    .views-icon,
    .rating-icon {
        width: 10px;
        height: 10px;
    }
    
    .post-content {
        padding: 0.6rem;
    }
    
    .post-title {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }
    
    .post-tags-info a {
        font-size: 0.6rem;
    }
    
    .post-tags-info .tag-separator {
        font-size: 0.6rem;
        margin: 0 0.2rem;
    }
    
    /* 分页 */
    .pagination {
        display: none;
    }
    
    .load-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 200px;
        margin: 1.5rem auto;
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    
    /* 相关文章 */
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .related-post h4 {
        padding: 0.5rem;
    }
    
    .related-post h4 a {
        font-size: 0.75rem;
    }
    
    /* 底部 */
    .site-footer {
        padding: 1.5rem 0;
    }
    
    .footer-bottom {
        padding: 1rem;
        font-size: 0.85rem;
    }
    
    /* 搜索页面 */
    .search .site-main .search-header {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .search .site-main .search-title {
        font-size: 1.25rem;
    }
    
    .no-posts {
        padding: 2rem 1.5rem;
    }
    
    .no-posts h2 {
        font-size: 1.5rem;
    }
    
    .no-posts .search-suggestions {
        padding: 1.25rem;
        margin: 1.5rem auto;
    }
    
    .search-again {
        padding: 1.25rem;
    }
    
    .search-again .search-form {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* 分类/标签页面 */
    .archive .archive-header,
    .category .archive-header,
    .tag .archive-header {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .archive .archive-title,
    .category .archive-title,
    .tag .archive-title {
        font-size: 1.25rem;
    }
    
    /* 文章页面布局 */
    .article-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .article-sidebar {
        position: static;
        order: 2;
    }
    
    /* 单篇文章 */
    .single-post {
        border-radius: 6px;
    }
    
    .breadcrumbs {
        padding: 0.6rem 1rem;
    }
    
    .breadcrumb-wrapper {
        font-size: 0.75rem;
    }
    
    .breadcrumb-icon {
        width: 12px;
        height: 12px;
    }
    
    .single-post .post-header {
        padding: 0 1rem;
    }
    
    .single-post .post-title {
        font-size: 1.25rem;
        margin: 1rem 0;
    }
    
    .single-post .post-meta {
        gap: 0.75rem;
        padding: 0.75rem 0;
    }
    
    .post-meta-item {
        font-size: 0.75rem;
    }
    
    .meta-icon {
        width: 14px;
        height: 14px;
    }
    
    .single-post .post-content {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .single-post .post-content h2 {
        font-size: 1.15rem;
        margin: 1.25rem 0 0.75rem;
    }
    
    .single-post .post-content h3 {
        font-size: 1rem;
    }
    
    .single-post .post-footer {
        padding: 1rem;
    }
    
    .single-post .post-tags {
        margin-bottom: 1rem;
    }
    
    .tags-label {
        font-size: 0.8rem;
        margin-bottom: 0.4rem;
    }
    
    .tags-list a {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
    
    /* 文章导航 */
    .nav-links {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .nav-item {
        min-height: 60px;
    }
    
    .nav-item a {
        padding: 0.75rem;
    }
    
    .nav-label {
        font-size: 0.7rem;
    }
    
    .nav-title {
        font-size: 0.8rem;
    }
    
    /* 侧边栏 */
    .sidebar-card {
        padding: 0.875rem;
        margin-bottom: 0.875rem;
    }
    
    .sidebar-title {
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
    }
    
    .stat-item {
        padding: 0.5rem;
    }
    
    .stat-label,
    .stat-value {
        font-size: 0.75rem;
    }
    
    .related-post-item {
        padding: 0.5rem;
    }
    
    .related-post-thumb {
        width: 45px;
        height: 45px;
    }
    
    .related-post-title {
        font-size: 0.75rem;
    }
    
    .related-post-meta {
        font-size: 0.65rem;
    }
    
    /* 评论 */
    .comments-area {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .comments-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .comment-body {
        padding: 0.75rem;
    }
    
    .comment-list .children {
        margin-left: 1rem;
    }
    
    .comment-respond {
        padding: 0.875rem;
    }
    
    .comment-reply-title {
        font-size: 0.9rem;
    }
    
    .comment-form input,
    .comment-form textarea {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    /* 页面 */
    .page-wrapper {
        padding: 0;
    }
    
    .page-content-wrapper {
        margin-bottom: 1rem;
    }
    
    .page-header {
        padding: 1.25rem 1rem;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .page-content {
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    .page-content h2 {
        font-size: 1.25rem;
    }
    
    /* 短代码页面 */
    .shortcode-page-wrapper {
        padding: 1rem 0;
    }
    
    .shortcode-header {
        padding: 1.25rem;
    }
    
    .shortcode-title {
        font-size: 1.5rem;
    }
    
    .shortcode-body {
        padding: 1.25rem;
        font-size: 0.9rem;
    }
}

/* ========== Mobile (480px) ========== */
@media (max-width: 480px) {
    .container {
        padding: 0 0.75rem;
    }
    
    .header-content {
        padding: 0.5rem 0;
    }
    
    .site-title {
        font-size: 1.1rem;
    }
    
    .site-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .menu-toggle,
    .search-toggle,
    .activate-button {
        width: 34px;
        height: 34px;
    }
    
    .search-icon,
    .activate-icon {
        width: 14px;
        height: 14px;
    }
    
    .menu-toggle-icon span {
        width: 14px;
    }
    
    .main-navigation ul {
        padding: 0.4rem 0;
    }
    
    .main-navigation a {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .main-navigation a.current-menu-item,
    .main-navigation a.current_page_item,
    .main-navigation a.active,
    .main-navigation li.current-menu-item > a,
    .main-navigation li.current_page_item > a {
        background: #f5f5f5;
        color: #333;
        font-weight: 500;
        border-left-color: #333;
    }
    
    /* 搜索 */
    .search-overlay {
        padding: 8px;
    }
    
    .search-container {
        border-radius: 8px;
    }
    
    .search-container .search-header {
        padding: 0.75rem 1rem;
    }
    
    .search-container .search-header h3 {
        font-size: 0.9rem;
    }
    
    .search-close {
        width: 28px;
        height: 28px;
    }
    
    .search-form-overlay {
        padding: 0.75rem 1rem;
    }
    
    .search-field-overlay {
        padding: 0.6rem 0.875rem;
        font-size: 0.9rem;
    }
    
    .search-submit-overlay {
        padding: 0.6rem 0.75rem;
    }
    
    .search-submit-overlay span {
        display: none;
    }
    
    .search-suggestions {
        padding: 0 1rem 0.75rem;
    }
    
    .trending-tag {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    
    /* 文章 */
    .posts-container {
        gap: 0.6rem;
    }
    
    .post-badge {
        padding: 0.2rem 0.4rem;
        font-size: 0.6rem;
    }
    
    .post-sticky-badge {
        top: 0.5rem;
        left: 0.5rem;
    }
    
    .post-category-badge {
        bottom: 0.5rem;
        left: 0.5rem;
    }
    
    .post-views-badge {
        bottom: 0.5rem;
        right: 0.5rem;
    }
    
    .post-rating-badge {
        top: 0.5rem;
        right: 0.5rem;
    }
    
    .post-content {
        padding: 0.5rem;
    }
    
    .post-title {
        font-size: 0.8rem;
    }
    
    .post-tags-info a,
    .post-tags-info .tag-separator {
        font-size: 0.55rem;
    }
    
    .load-more-btn {
        max-width: 180px;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        align-items: center;
        justify-content: center;
    }
    
    /* 相关文章 */
    .related-posts-grid {
        gap: 0.5rem;
    }
    
    .related-post h4 {
        padding: 0.4rem;
    }
    
    .related-post h4 a {
        font-size: 0.7rem;
    }
    
    /* 搜索页面 */
    .search .site-main .search-header {
        padding: 1.25rem;
    }
    
    .search .site-main .search-title {
        font-size: 1.1rem;
    }
    
    .no-posts {
        padding: 1.5rem 1rem;
    }
    
    .no-posts h2 {
        font-size: 1.25rem;
    }
    
    .no-posts .search-suggestions {
        padding: 1rem;
    }
    
    .search-again {
        padding: 1rem;
    }
    
    /* 分类/标签 */
    .archive .archive-header,
    .category .archive-header,
    .tag .archive-header {
        padding: 1.25rem;
    }
    
    .archive .archive-title,
    .category .archive-title,
    .tag .archive-title {
        font-size: 1.1rem;
    }
    
    /* 单篇文章 */
    .breadcrumbs {
        padding: 0.5rem 0.75rem;
    }
    
    .breadcrumb-wrapper {
        font-size: 0.7rem;
    }
    
    .single-post .post-header {
        padding: 0 0.75rem;
    }
    
    .single-post .post-title {
        font-size: 1.1rem;
        margin: 0.75rem 0;
    }
    
    .single-post .post-meta {
        gap: 0.5rem;
        padding: 0.6rem 0;
    }
    
    .post-meta-item {
        font-size: 0.7rem;
    }
    
    .meta-icon {
        width: 12px;
        height: 12px;
    }
    
    .single-post .post-content {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .single-post .post-content h2 {
        font-size: 1rem;
        margin: 1rem 0 0.6rem;
        padding-left: 0.6rem;
    }
    
    .single-post .post-content h3 {
        font-size: 0.9rem;
    }
    
    .single-post .post-footer {
        padding: 0.75rem;
    }
    
    .tags-label {
        font-size: 0.75rem;
    }
    
    .tags-list a {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }
    
    /* 导航 */
    .nav-item {
        min-height: 50px;
    }
    
    .nav-item a {
        padding: 0.6rem;
    }
    
    .nav-label {
        font-size: 0.65rem;
    }
    
    .nav-title {
        font-size: 0.75rem;
    }
    
    /* 侧边栏 */
    .sidebar-card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .sidebar-title {
        font-size: 0.8rem;
    }
    
    .stat-item {
        padding: 0.4rem;
    }
    
    .stat-label,
    .stat-value {
        font-size: 0.7rem;
    }
    
    .related-post-item {
        padding: 0.4rem;
    }
    
    .related-post-thumb {
        width: 40px;
        height: 40px;
    }
    
    .related-post-title {
        font-size: 0.7rem;
    }
    
    .related-post-meta {
        font-size: 0.6rem;
    }
    
    /* 评论 */
    .comments-area {
        padding: 0.75rem;
    }
    
    .comments-title {
        font-size: 0.9rem;
    }
    
    .comment-body {
        padding: 0.6rem;
        font-size: 0.85rem;
    }
    
    .comment-list .children {
        margin-left: 0.75rem;
    }
    
    .comment-respond {
        padding: 0.75rem;
    }
    
    .comment-reply-title {
        font-size: 0.85rem;
    }
    
    .comment-form input,
    .comment-form textarea {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    
    /* 页面 */
    .page-content-wrapper {
        margin-bottom: 0.75rem;
    }
    
    .page-header {
        padding: 1rem 0.75rem;
    }
    
    .page-title {
        font-size: 1.25rem;
    }
    
    .page-content {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    
    .page-content h2 {
        font-size: 1.1rem;
    }
    
    /* 短代码 */
    .shortcode-header {
        padding: 1rem;
    }
    
    .shortcode-title {
        font-size: 1.25rem;
    }
    
    .shortcode-body {
        padding: 1rem;
        font-size: 0.85rem;
    }
    
    .shortcode-pagination a {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
}