/* =============================================
   CLEAN BLOG STYLE - MINIMAL & SAFE
   Only hides post metadata, preserves all functionality
   ============================================= */

/* 1. SAFE SELECTORS - Only target post metadata */
body.single-post .entry-meta,
body.blog .entry-meta,
body.archive .entry-meta,
body.single-post .entry-footer,
body.blog .entry-footer,
body.archive .entry-footer {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. SPECIFIC METADATA ELEMENTS (GeneratePress/Common Themes) */
body.single-post .posted-on,
body.blog .posted-on,
body.archive .posted-on,
body.single-post .byline,
body.blog .byline,
body.archive .byline,
body.single-post .cat-links,
body.blog .cat-links,
body.archive .cat-links,
body.single-post .tags-links,
body.blog .tags-links,
body.archive .tags-links,
body.single-post .comments-link,
body.blog .comments-link,
body.archive .comments-link {
    display: none !important;
    visibility: hidden !important;
}

/* 3. PRESERVE ON PAGES & CUSTOM POST TYPES */
body.page .entry-meta,
body.page .entry-footer,
body.page .posted-on,
body.page .byline,
body.page .cat-links,
body.page .tags-links,
body.page .comments-link,
.post-type-page .entry-meta,
.post-type-page .entry-footer,
/* Keep for custom post types like courses, products */
.post-type-course .entry-meta,
.post-type-product .entry-meta,
/* Keep for WooCommerce product pages */
.woocommerce .product_meta,
/* Keep for LMS course pages */
.elms-course-meta,
.elms-course-details {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. KEEP SITE FOOTER & IMPORTANT ELEMENTS */
.site-info,
.site-footer,
.footer-widgets,
.copyright,
.widget-area,
.sidebar,
.navigation,
.pagination,
/* Keep breadcrumbs */
.breadcrumbs,
.woocommerce-breadcrumb,
.yoast-breadcrumbs,
/* Keep search forms */
.search-form,
/* Keep comment forms */
.comment-respond,
.comments-area,
/* Keep social sharing */
.sharedaddy,
.social-share,
/* Keep related posts */
.related-posts,
/* Keep author bio */
.author-bio,
/* Keep edit links for logged-in admins */
body.single-post .edit-link[href*="post.php"],
body.logged-in .edit-link {
    display: block !important;
    visibility: visible !important;
}

/* 5. LAYOUT & SPACING FIXES */
body.single-post .entry-header,
body.blog .entry-header,
body.archive .entry-header {
    margin-bottom: 0.8rem !important;
}

body.single-post .entry-content,
body.blog .entry-content,
body.archive .entry-content {
    margin-top: 1.2rem !important;
}

/* 6. FEATURED IMAGES - PRESERVE */
.post-thumbnail,
.entry-featured-image,
.featured-image,
.wp-post-image {
    display: block !important;
    margin-bottom: 1.5rem !important;
}

.post-thumbnail img,
.entry-featured-image img,
.featured-image img,
.wp-post-image {
    border-radius: 8px !important;
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
}

/* 7. BOX STYLING FOR ARCHIVE/BLOG PAGES */
body.blog .inside-article,
body.archive .inside-article,
body.search-results .inside-article {
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
    transition: all 0.25s ease !important;
}

body.blog .inside-article:hover,
body.archive .inside-article:hover,
body.search-results .inside-article:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* 8. TYPOGRAPHY & COLORS - NON-INTRUSIVE */
body.single-post,
body.blog,
body.archive {
    font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    line-height: 1.65 !important;
    color: #c9d6cc !important;
    background-color: #f9f9f9 !important;
}

body.single-post .entry-title,
body.blog .entry-title,
body.archive .entry-title {
    color: #e0d7d7 !important;
    margin-bottom: 0.5rem !important;
}

/* 9. DARK MODE COMPATIBILITY */
@media (prefers-color-scheme: dark) {
    body.blog .inside-article,
    body.archive .inside-article,
    body.search-results .inside-article {
        border-color: #444 !important;
        background: #1a1a1a !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    body.single-post,
    body.blog,
    body.archive {
        color: #e0e0e0 !important;
        background-color: #c6c5db !important;
    }
    
    body.single-post .entry-title,
    body.blog .entry-title,
    body.archive .entry-title {
        color: #ffffff !important;
    }
}

/* 10. RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    body.blog .inside-article,
    body.archive .inside-article,
    body.search-results .inside-article {
        padding: 8px !important;
        margin-bottom: 10px !important;
    }
    
    .post-thumbnail img,
    .entry-featured-image img {
        max-height: 300px !important;
    }
}

/* 11. EXCLUSIONS - DON'T AFFECT THESE */
/* Don't affect admin bar */
#wpadminbar,
/* Don't affect login page */
body.login,
/* Don't affect custom post type archives */
.post-type-archive-course .entry-meta,
.post-type-archive-product .entry-meta,
/* Don't affect WooCommerce shop */
.woocommerce-page .entry-meta,
/* Don't affect LMS pages */
.elms-lms-page .entry-meta,
/* Don't affect forums */
.bbpress .entry-meta,
/* Don't affect events */
.tribe-events .entry-meta {
    display: block !important;
    visibility: visible !important;
}

/* 12. ANIMATION FOR SMOOTH TRANSITION */
.entry-meta,
.entry-footer {
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease !important;
}

/* 13. PRINT STYLES - SHOW METADATA IN PRINT */
@media print {
    body.single-post .entry-meta,
    body.blog .entry-meta,
    body.archive .entry-meta,
    body.single-post .entry-footer,
    body.blog .entry-footer,
    body.archive .entry-footer {
        display: block !important;
        opacity: 1 !important;
        height: auto !important;
    }
    
    .posted-on,
    .byline {
        display: inline !important;
    }
}

/* =============================================
   SPECIFIC CHANGES REQUESTED:
   1. Category pages full width (desktop & mobile)
   2. Lightest red color for dark tiles
   3. Everything else remains exactly the same
   ============================================= */

/* 14. CATEGORY PAGES - FULL WIDTH */
body.category .content-area,
body.category .site-content,
body.category .content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

body.category .site-main,
body.category .posts-container,
body.category article {
    width: 100% !important;
    max-width: 100% !important;
}

/* 15. MODERN FULL-WIDTH GRID FOR CATEGORY PAGES */
body.category .posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 16. MAKE CATEGORY ARTICLE BOXES FULL WIDTH TOO */
body.category .inside-article {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

/* 17. MOBILE FULL WIDTH FOR CATEGORY PAGES */
@media (max-width: 768px) {
    body.category .posts {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 15px;
    }
    
    body.category .content-area,
    body.category .site-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 18. DARK MODE - LIGHTEST RED FOR DARK TILES */
@media (prefers-color-scheme: dark) {
    body.category .inside-article {
        background: #fff5f5 !important; /* Lightest red background */
        border-color: #ffcccc !important; /* Light red border */
        color: #333 !important; /* Dark text for contrast */
    }
    
    body.category .entry-title {
        color: #b30000 !important; /* Light red text for titles */
    }
    
    body.category {
        background-color: #ffe6e6 !important; /* Very light red background */
    }
    
    /* Override the general dark mode styles for category pages only */
    body.category.single-post .entry-title,
    body.category.blog .entry-title,
    body.category.archive .entry-title {
        color: #b30000 !important; /* Light red for titles */
    }
    
    body.category.single-post,
    body.category.blog,
    body.category.archive {
        color: #333 !important; /* Dark text for readability */
        background-color: #ffe6e6 !important; /* Very light red background */
    }
    
    /* Ensure text is readable on light red background */
    body.category .entry-content,
    body.category p,
    body.category li {
        color: #333 !important;
    }
}



/* =============================================
   FULL SCREEN LAYOUT
   Makes the entire page content full width
   ============================================= */

/* Make the entire site container full width */
body,
html,
.site,
.site-container,
.site-content,
#page,
#content,
.container,
.wrap,
.content-area,
.main-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}



/* Make main content take full width */

#main,
.content,
.entry-content,
.inside-article {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    box-sizing: border-box !important;
}

/* Remove any maximum width constraints */
.site-content > .container,
.site-content > .wrap,
.site-content > .container-fluid,
.content-area > .container,
.content-area > .wrap {
    max-width: 100% !important;
    width: 100% !important;
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .site-main,
    main,
    #main,
    .content,
    .entry-content,
    .inside-article,
    .posts,
    .posts-container {
      padding-left: 10px !important;
        padding-right: 10px !important;  
    }
}


/* =============================================
   SEARCH RESULTS - FIX TO APPEAR LIKE CATEGORY PAGES
   Make search results pages match category page styling
   ============================================= */

/* 19. SEARCH RESULTS - FULL WIDTH LIKE CATEGORY PAGES */
body.search-results .content-area,
body.search .content-area,
body.search-results .site-content,
body.search .site-content,
body.search-results .content,
body.search .content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

body.search-results .site-main,
body.search .site-main,
body.search-results .posts-container,
body.search .posts-container,
body.search-results article,
body.search article {
    width: 100% !important;
    max-width: 100% !important;
}

/* 20. SEARCH RESULTS GRID LAYOUT */
body.search-results .posts,
body.search .posts {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 25px !important;
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 21. SEARCH RESULTS ARTICLE BOXES */
body.search-results .inside-article,
body.search .inside-article {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 10px !important;
    transition: all 0.25s ease !important;
}

body.search-results .inside-article:hover,
body.search .inside-article:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* 22. MOBILE ADJUSTMENTS FOR SEARCH RESULTS */
@media (max-width: 768px) {
    body.search-results .posts,
    body.search .posts {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 15px !important;
    }
    
    body.search-results .content-area,
    body.search .content-area,
    body.search-results .site-content,
    body.search .site-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 23. DARK MODE FOR SEARCH RESULTS */
@media (prefers-color-scheme: dark) {
    body.search-results .inside-article,
    body.search .inside-article {
        background: #fff5f5 !important; /* Lightest red background */
        border-color: #ffcccc !important; /* Light red border */
        color: #333 !important; /* Dark text for contrast */
    }
    
    body.search-results .entry-title,
    body.search .entry-title {
        color: #b30000 !important; /* Light red text for titles */
    }
    
    body.search-results,
    body.search {
        background-color: #ffe6e6 !important; /* Very light red background */
    }
    
    body.search-results .entry-title,
    body.search .entry-title {
        color: #b30000 !important; /* Light red for titles */
    }
    
    body.search-results,
    body.search {
        color: #333 !important; /* Dark text for readability */
        background-color: #ffe6e6 !important; /* Very light red background */
    }
    
    /* Ensure text is readable on light red background */
    body.search-results .entry-content,
    body.search .entry-content,
    body.search-results p,
    body.search p,
    body.search-results li,
    body.search li {
        color: #333 !important;
    }
}

/* 24. SEARCH HEADER & PAGE TITLE STYLING */
body.search-results .page-header,
body.search .page-header,
body.search-results .page-title,
body.search .page-title {
    padding: 0 20px !important;
    margin: 30px 0 20px 0 !important;
    text-align: center !important;
    color: #b30000 !important;
    font-size: 1.8rem !important;
}

/* 25. NO RESULTS STYLING */
body.search-results .no-results,
body.search .no-results {
    padding: 40px 20px !important;
    text-align: center !important;
    background: #fff5f5 !important;
    border-radius: 10px !important;
    margin: 20px !important;
}

/* 26. SEARCH FORM IN RESULTS PAGE */
body.search-results .search-form,
body.search .search-form {
    max-width: 600px !important;
    margin: 30px auto !important;
    padding: 0 20px !important;
}

/* 27. PRESERVE METADATA IN SEARCH RESULTS (KEEP HIDDEN AS BEFORE) */
body.search-results .entry-meta,
body.search .entry-meta,
body.search-results .entry-footer,
body.search .entry-footer,
body.search-results .posted-on,
body.search .posted-on,
body.search-results .byline,
body.search .byline,
body.search-results .cat-links,
body.search .cat-links,
body.search-results .tags-links,
body.search .tags-links,
body.search-results .comments-link,
body.search .comments-link {
    display: none !important;
    visibility: hidden !important;
}

/* 28. ENSURE CONSISTENT SPACING */
body.search-results .entry-header,
body.search .entry-header {
    margin-bottom: 0.8rem !important;
}

body.search-results .entry-content,
body.search .entry-content {
    margin-top: 1.2rem !important;
}

/* 29. FEATURED IMAGES IN SEARCH RESULTS */
body.search-results .post-thumbnail,
body.search .post-thumbnail,
body.search-results .entry-featured-image,
body.search .entry-featured-image,
body.search-results .featured-image,
body.search .featured-image {
    display: block !important;
    margin-bottom: 1.5rem !important;
}

body.search-results .post-thumbnail img,
body.search .post-thumbnail img,
body.search-results .entry-featured-image img,
body.search .entry-featured-image img,
body.search-results .featured-image img,
body.search .featured-image img {
    border-radius: 8px !important;
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
}

/* 30. SPECIFIC OVERRIDE FOR SEARCH PAGES IN FULL SCREEN LAYOUT */
/* This ensures the full-width rules in section 19+ don't conflict */
body.search-results .site > .container,
body.search .site > .container,
body.search-results .site > .wrap,
body.search .site > .wrap {
    max-width: 100% !important;
    width: 100% !important;
}

/* 31. MAINTAIN EXISTING EXCLUSIONS FOR SEARCH PAGES */
body.search-results .site-info,
body.search .site-info,
body.search-results .site-footer,
body.search .site-footer,
body.search-results .footer-widgets,
body.search .footer-widgets,
body.search-results .copyright,
body.search .copyright,
body.search-results .widget-area,
body.search .widget-area,
body.search-results .sidebar,
body.search .sidebar,
body.search-results .navigation,
body.search .navigation,
body.search-results .pagination,
body.search .pagination {
    display: block !important;
    visibility: visible !important;
}