/* =================================================================== */
/* --- VITAL INSIGHT - MASTER STYLESHEET (v5 - Consolidated) --- */
/* =================================================================== */

/* --- 1. GENERAL ELEMENT STYLING --- */
body.single-post header h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #2c3e50 !important;
    border-bottom: 2px solid #a4c2d8 !important;
    padding-bottom: 15px !important;
    margin-bottom: 25px !important;
}
body.single-post .entry-content h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    border-bottom: 2px solid #a4c2d8 !important;
    padding-bottom: 8px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}
body.single-post div.disclaimer {
    background-color: #fff9e8 !important;
    border: 1px solid #f2e8c9 !important;
    padding: 20px !important;
    margin: 30px 0 !important;
    border-radius: 8px !important;
}
body.single-post div.disclaimer p,
body.single-post div.disclaimer small,
body.single-post div.disclaimer strong,
body.single-post div.disclaimer b {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #594f34 !important;
}
body.single-post div.disclaimer strong,
body.single-post div.disclaimer b {
    font-weight: 600;
}

/* --- 2. HOMEPAGE & LAYOUT SECTIONS --- */
.homepage-hero { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 60px 30px; text-align: center; border-radius: 12px; margin-bottom: 50px; border: 1px solid #e1e5e9; }
.homepage-hero h1 { color: #2c3e50; font-size: 36px; margin-bottom: 20px; font-weight: 700; }
.homepage-hero p { color: #6c757d; font-size: 18px; max-width: 600px; margin: 0 auto; line-height: 1.6; }

.category-sections, .subcategory-section { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.category-section { background: #ffffff; border: 1px solid #e1e5e9; border-radius: 12px; padding: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.category-section h2 { color: #2E8B57; font-size: 28px; margin-bottom: 10px; border-bottom: 3px solid #2E8B57; padding-bottom: 10px; }
.category-section > p { color: #6c757d; font-size: 16px; margin-bottom: 25px; font-style: italic; }

.mens-health-subsection { margin-top: 25px; padding-top: 15px; border-top: 1px solid #f0f0f0; }
.mens-health-subsection h3 { font-size: 1.4em; margin-bottom: 15px; }
.view-all-link-bottom { display: block; text-align: center; margin-top: 30px; font-weight: bold; font-size: 1.1em; padding: 10px; background-color: #f5f5f5; border-radius: 5px; }

.homepage-cta { background: linear-gradient(135deg, #2E8B57 0%, #236B43 100%); color: white; padding: 50px 30px; text-align: center; border-radius: 12px; margin-top: 50px; }
.homepage-cta h2 { color: white; font-size: 32px; margin-bottom: 20px; }
.homepage-cta p { font-size: 18px; margin-bottom: 30px; opacity: 0.9; }
.cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.cta-button { background: white; color: #2E8B57; padding: 15px 30px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.cta-button:hover { background: #f8f9fa; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* --- 3. RPWE & SEARCH RESULTS STYLING --- */
.rpwe-block ul, .subcategory-section .rpwe-ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.rpwe-block li, .subcategory-section .rpwe-li { padding: 15px; border: 1px solid #e9ecef; border-radius: 8px; margin-bottom: 15px; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.rpwe-block li:hover, .subcategory-section .rpwe-li:hover { background-color: #f8f9fa; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.rpwe-block h3, .rpwe-block h3 a, .subcategory-section .rpwe-title a { font-size: 1.2em; font-weight: 600; color: #2c3e50; text-decoration: none; }
.rpwe-block h3 a:hover, .subcategory-section .rpwe-title a:hover { color: #2E8B57 !important; }
.rpwe-block .rpwe-time, .subcategory-section .rpwe-time { display: block; font-size: 0.9em; color: #6c757d; margin-top: 5px; }
.rpwe-block .rpwe-summary, .rpwe-block .rpwe-readmore, .rpwe-block .rpwe-author { display: none !important; }
.rpwe-block:empty::after { content: "No articles yet. Coming soon!"; display: block; padding: 20px; background: #f8f9fa; border-radius: 8px; color: #6c757d; font-style: italic; text-align: center; border: 1px solid #e1e5e9; }
.rpwe-hide-results { display: none !important; }

/* --- 4. SEARCH WIDGET VISIBILITY (DESKTOP-FIRST) --- */
/* HIDE the mobile search area on desktops */
.mobile-search-widget-container {
    display: none;
}
/* SHOW the sidebar search on desktops */
.sidebar .widget_search {
    display: block;
}

/* =================================================================== */
/* --- 5. ALL MOBILE STYLES (Screens 768px wide or less) --- */
/* This single block at the end overrides all desktop styles. */
/* =================================================================== */
@media (max-width: 768px) {
    /* --- Layout & Font Adjustments --- */
    .homepage-hero { padding: 40px 20px; }
    .homepage-hero h1 { font-size: 28px; }
    .category-section { padding: 20px; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .rpwe-block h3, .rpwe-block h3 a { font-size: 18px !important; }
    body.single-post header h1 { font-size: 26px !important; }
    body.single-post .entry-content h2 { font-size: 22px !important; }

   /*
==============================================
Final Search Bar Visibility Logic (v2 - Block Targeting)
==============================================
*/

/* --- DESKTOP STYLES --- */

/* 1. HIDE the mobile-only search bar on desktops */
.mobile-search-widget-container {
    display: none;
}

/* 2. SHOW the sidebar search widget on desktops */
/* We target the search block specifically */
.widget-area .wp-block-search {
    display: block;
}


/* --- MOBILE STYLES (Screens 768px wide or less) --- */
@media (max-width: 768px) {

    /* 3. SHOW the mobile-only search bar */
    .mobile-search-widget-container {
        display: block;
    }

    /* 4. HIDE the sidebar search widget on mobile */
    /* This is the new, correct selector */
    .widget-area .wp-block-search {
        display: none !important;
    }
}
/*
==============================================
Layout Spacing Adjustments (Hide Empty Below Header Area)
==============================================
*/

/*
This rule targets the 'Below Header' widget area and hides it completely,
removing the empty space it creates.
*/
.header-widget-region {
    display: none !important;
}

/*
==============================================
Search Widget Highlight Style (Definitive Fix)
==============================================
*/

/* This targets the exact inner wrapper of the search block */
#block-36 > form > div {
    background-color: #f8f9fa; /* Light grey background */
    padding: 15px;             /* Padding around the input and button */
    border: 1px solid #e9ecef; /* Subtle border */
    border-radius: 8px;        /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Soft shadow */
}

/* Optional: Style the input field itself for better integration */
#block-36 > form > div .wp-block-search__input {
    border: 1px solid #ccc; /* Add a border to the input field */
    padding: 8px;           /* Add some padding inside the input field */
    width: calc(100% - 70px); /* Adjust width to fit button */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Optional: Style the button for better integration */
#block-36 > form > div .wp-block-search__button {
    padding: 8px 12px; /* Adjust button padding */
}

/*
==============================================
Force Product Recommendations on Mobile (Aggressive Fix)
==============================================
*/

@media (max-width: 768px) {
    
    /* Target all possible recommendation containers */
    .woocommerce-product-recommendations,
    .wc-prl-recommendations,
    .wc-prl-recommendations-container,
    .product-recommendations {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }