/*
Theme Name: KnowledgeNexus
Theme URI: https://example.com/knowledgenexus
Author: Trae AI
Author URI: https://example.com
Description: A modern Knowledge Payment Platform theme converted from a React application.
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: knowledgenexus
Tags: blog, modern, tailwind, dark-mode
*/

/* 
 * This theme uses Tailwind CSS via CDN for demonstration purposes.
 * For production, please set up a build process to compile Tailwind CSS.
 */

body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    transition: background-color 0.3s ease;
}

.dark body {
    background-color: #020617;
    color: #f1f5f9;
}

.site-container {
    max-width: 1200px;
    margin: 0 auto;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #1e293b; }

.glass-block {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
}

.dark .glass-block {
    background: rgba(15, 23, 42, 0.7);
}

.current-menu-item > a {
    position: relative;
}

.current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -34px; /* Adjust based on header height (90px) and menu item vertical center */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #7c3aed; /* Violet-600 */
    border-radius: 3px 3px 0 0;
}

.hero-swiper .swiper-pagination-bullet {
    width: 4px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    opacity: 1;
    transition: all 0.3s;
    display: block;
    margin: 6px 0 !important;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #6366f1;
    height: 40px;
}

.prose blockquote {
    font-style: normal !important;
    font-weight: normal !important;
    color: inherit;
}
.prose blockquote p:first-of-type::before {
    content: none !important;
}
.prose blockquote p:last-of-type::after {
    content: none !important;
}

/* Editor Button Normalization */
.editor-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}
.editor-btn:hover {
    background-color: #f3f4f6; /* zinc-100 */
}
.dark .editor-btn:hover {
    background-color: #27272a; /* zinc-800 */
}

/* Fix HR Style */
.prose hr {
    margin-top: 2em;
    margin-bottom: 2em;
    border-top-width: 1px;
    border-color: #e5e7eb; /* zinc-200 */
}
.dark .prose hr {
    border-color: #3f3f46; /* zinc-700 */
}

.prose iframe {
    max-width: 100%;
    width: 100%;
    border-radius: 0.75rem;
}

/* Pagination Styles */
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    margin: 0 0.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #71717a; /* zinc-500 */
    background-color: transparent;
    transition: all 0.2s;
}
.pagination .page-numbers:hover {
    color: #059669; /* emerald-600 */
    background-color: #ecfdf5; /* emerald-50 */
}
.pagination .page-numbers.current {
    color: #fff;
    background-color: #059669; /* emerald-600 */
    box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.3);
}
.dark .pagination .page-numbers {
    color: #a1a1aa; /* zinc-400 */
}
.dark .pagination .page-numbers:hover {
    color: #34d399; /* emerald-400 */
    background-color: rgba(6, 95, 70, 0.3); /* emerald-900/30 */
}
.dark .pagination .page-numbers.current {
    color: #fff;
    background-color: #059669; /* emerald-600 */
}

/* Pagination Styles */
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
}
.nav-links .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 9999px; /* Rounded full */
    font-size: 0.875rem;
    font-weight: 600;
    color: #71717a; /* zinc-500 */
    background-color: transparent;
    transition: all 0.2s;
}
.dark .nav-links .page-numbers {
    color: #a1a1aa; /* zinc-400 */
}
.nav-links .page-numbers:hover {
    background-color: #f4f4f5; /* zinc-100 */
    color: #10b981; /* emerald-600 */
}
.dark .nav-links .page-numbers:hover {
    background-color: #27272a; /* zinc-800 */
    color: #34d399; /* emerald-400 */
}
.nav-links .page-numbers.current {
    background-color: #10b981; /* emerald-500 */
    color: white;
}
.nav-links .page-numbers.dots {
    min-width: auto;
    background-color: transparent !important;
}

/* Pagination Styles */
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #71717a; /* zinc-500 */
    background-color: transparent;
    transition: all 0.2s;
}
.nav-links .page-numbers:hover {
    color: #10b981; /* emerald-500 */
    background-color: #ecfdf5; /* emerald-50 */
}
.nav-links .page-numbers.current {
    color: white;
    background-color: #10b981; /* emerald-500 */
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
}
.nav-links .dots {
    min-width: auto;
    background-color: transparent !important;
    color: #a1a1aa; /* zinc-400 */
    box-shadow: none !important;
}
.dark .nav-links .page-numbers {
    color: #a1a1aa; /* zinc-400 */
}
.dark .nav-links .page-numbers:hover {
    color: #34d399; /* emerald-400 */
    background-color: rgba(16, 185, 129, 0.1);
}
.dark .nav-links .page-numbers.current {
    color: white;
    background-color: #059669; /* emerald-600 */
}

/* Load More Button (AJAX) */
#ajax-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    background-color: #f4f4f5; /* zinc-100 */
    color: #52525b; /* zinc-600 */
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
    cursor: pointer;
}
#ajax-load-more-btn:hover {
    background-color: #e4e4e7; /* zinc-200 */
    color: #18181b; /* zinc-900 */
}
.dark #ajax-load-more-btn {
    background-color: #27272a; /* zinc-800 */
    color: #a1a1aa; /* zinc-400 */
}
.dark #ajax-load-more-btn:hover {
    background-color: #3f3f46; /* zinc-700 */
    color: #f4f4f5; /* zinc-100 */
}
#ajax-load-more-btn i {
    margin-right: 0.5rem;
}