/* * This CSS block targets the HTML output generated by WordPress's 
 * the_posts_pagination() function to apply the desired Tailwind aesthetic.
 * You should add this to your theme's main stylesheet (e.g., style.css).
 */

/* 1. CONTAINER STYLING: Applies Flexbox layout and spacing */
.pagination-bar {
    /* The .pagination-bar class was added in category.php to wrap the navigation. 
       We already have the Tailwind classes in the PHP, but this ensures centering and spacing. */
    display: flex;
    justify-content: center;
    align-items: center;
    
    gap: 0.5rem; /* equivalent to space-x-2 */
}

/* 2. NAVIGATION WRAPPER (The <ul> or <nav> element) */
.pagination-links {
    /* WordPress adds .pagination-links to the <nav> element */
    display: flex;
    gap: 0.5rem; /* Re-apply space-x-2 */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 3. INDIVIDUAL PAGE LINKS (The <a> tags inside <li>) */
.page-numbers {
    /* Base styling for ALL links: numbers, prev, next
       New design requires w-10 h-10, rounded-full, flex, items-center, justify-center */
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    padding: 0; /* Remove padding since width/height are fixed */
    border-radius: 9999px; /* rounded-full */
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.875rem; /* text-sm, for better consistency */
    line-height: 1; /* Ensure text sits correctly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500; /* font-semibold for numbers */
}

/* Default state for number pages (text-slate-600, dark:text-slate-300) */
.pagination-bar .page-numbers:not(.prev):not(.next) {
    color: #475569; /* slate-600 */
}
.dark .pagination-bar .page-numbers:not(.prev):not(.next) {
    color: #cbd5e1; /* slate-300 */
}

/* Hover state for number pages */
.pagination-bar .page-numbers:not(.prev):not(.next):hover,
.pagination-bar .page-numbers:not(.prev):not(.next):focus {
    background-color: #e2e8f0; /* slate-200 */
}
.dark .pagination-bar .page-numbers:not(.prev):not(.next):hover,
.dark .pagination-bar .page-numbers:not(.prev):not(.next):focus {
    background-color: #334155; /* slate-700 */
}


/* 4. CURRENT PAGE STYLING (The highlighted link) */
.pagination-bar .current {
    /* bg-primary, text-white, font-semibold */
    /* background-color: #3b82f6; */
    color: #ffffff !important;
    font-weight: 600; /* font-semibold */
    /* Prevent hover color change on current page */
    pointer-events: none;
}

/* 5. ELLIPSIS STYLING */
.pagination-bar .dots {
    /* Handles the "..." spacing and color (text-slate-500) */
    color: #64748b; /* slate-500 */
    padding: 0 0.5rem; /* Adjust padding for visual spacing */
    pointer-events: none; /* Make sure it's not clickable */
}

/* 6. PREV/NEXT BUTTONS (Arrows) */
.pagination-bar .prev,
.pagination-bar .next {
    /* Background for arrows: bg-slate-200, dark:bg-slate-700 */
    background-color: #e2e8f0; /* slate-200 */
    color: #475569 !important; /* text-slate-600 */
}
.dark .pagination-bar .prev,
.dark .pagination-bar .next {
    background-color: #334155; /* slate-700 */
    color: #cbd5e1 !important; /* dark:text-slate-300 */
}
/* Hover state for arrows */
.pagination-bar .prev:hover,
.pagination-bar .next:hover {
    background-color: #cbd5e1; /* slate-300 */
}
.dark .pagination-bar .prev:hover,
.dark .pagination-bar .next:hover {
    background-color: #1e293b; /* slate-600 */
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center ;
    gap: 0.5rem; /* equivalent to space-x-2 */
}