/* Targeted changes for specific UI elements */

/* 1. Hero section text size increases */
.hero-content h1 {
    font-size: 3.2rem !important; /* Larger header text */
}

/* Hero section sub heading - customized styling for cleaner look */
.hero-content p {
    font-size: 1.1rem !important; /* Smaller, more readable font size */
    line-height: 1.4 !important; /* Tighter line spacing for cleaner appearance */
    text-align: center !important; /* Center-aligned for better visual hierarchy */
    max-width: 600px; /* Maintain readable line length */
    margin-left: auto !important; /* Center the paragraph block */
    margin-right: auto !important; /* Center the paragraph block */
}

/* 2. Blog categories - ensure category-tag uses the same styling as category/tag */
.category-tag {
    background-color: #f8f9ff !important;
    color: #5B3AFF !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.category-tag:hover {
    background-color: #5B3AFF !important;
    color: white !important;
}

/* 3. Modern pagination styling */
.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    margin: 4rem 0 3rem 0 !important;
    padding: 2rem 0 !important;
}

/* Override default pagination link styles from blog.css */
.pagination a:not(.pagination-btn),
.pagination span:not(.pagination-btn):not(.pagination-info) {
    border-radius: 30px !important;
}

/* Active pagination buttons - more specific selectors to override default pagination styles */
.pagination .pagination-btn,
.pagination a.pagination-btn {
    background: linear-gradient(135deg, #5B3AFF 0%, #7C5EFF 100%) !important;
    color: white !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(91, 58, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.pagination .pagination-btn:hover,
.pagination a.pagination-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(91, 58, 255, 0.3) !important;
    background: linear-gradient(135deg, #4A2DE8 0%, #6B4DFF 100%) !important;
}

/* Disabled pagination buttons */
.pagination .pagination-btn.disabled,
.pagination span.pagination-btn.disabled {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    border: 2px solid #e9ecef !important;
    border-radius: 30px !important;
}

.pagination .pagination-btn.disabled:hover,
.pagination span.pagination-btn.disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* Page info styling */
.pagination .pagination-info,
.pagination span.pagination-info {
    background-color: #f8f9ff !important;
    color: #5B3AFF !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border: 2px solid #e8ebff !important;
    min-width: 120px !important;
    text-align: center !important;
}

/* Enhanced styling for arrow symbols */
.pagination-btn:contains("←"):before {
    margin-right: 0.25rem;
}

.pagination-btn:contains("→"):after {
    margin-left: 0.25rem;
}

/* 4. Blog header consistency - white text for main blog header */
.blog-post-header h1 {
    background: none !important; 
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #333 !important;
    background-clip: initial !important;
    text-fill-color: initial !important;
    color: #333 !important;
}

/* Main blog page header - white text on gradient background */
.blog-header h1,
.blog-header .blog-title {
    background: none !important; 
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
    text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* Blog header description - white text */
.blog-header p,
.blog-header .blog-description {
    color: #ffffff !important;
}