/**
 * BFHD Search Component & Listing Styling Improvements
 * December 7, 2025 - User Requested Enhancements
 */

/* ===================================
   1. SEARCH LABEL IMPROVEMENTS
   Make "Search" label bigger, blue, and closer to search field
   FIXED: Only target main "Search" word, NOT dropdown item labels
   =================================== */

/* SPECIFIC: Only style the main "Search" word, not dropdown labels */
.bfhd_s_wrapper>.bfhd_s_label {
    font-size: 24px !important;
    /* Bigger (was 18px) */
    font-weight: 600 !important;
    /* Bolder */
    color: #5B8FE5 !important;
    /* Blue instead of gray */
    margin-right: 8px !important;
    /* Tighter spacing - reduced from 20px */
    white-space: nowrap !important;
    align-self: center !important;
    /* Better vertical alignment */
}

/* Search wrapper - Cleaner layout */
.bfhd_s_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    /* Tighter spacing - reduced from 20px */
    width: 100% !important;
    max-width: 1200px !important;
    justify-content: center !important;
}

/* Advanced Search Link - Cleaner positioning */
.bfhd_s_advanced {
    /*margin-left: 20px !important;*/
    /* Consistent with left spacing */
    color: #5B8FE5 !important;
    /* Match Search label color */
    white-space: nowrap !important;
    align-self: center !important;
    /* Better vertical alignment */
}

/* ===================================
   2. LISTING CARD IMPROVEMENTS
   Make them more professional, compact, and modern
   =================================== */

.bfhd-card-pro1 {
    padding: 1.5rem !important;
    /* Less padding (was 2rem) */
    border-radius: 1rem !important;
    /* Slightly less rounded */
    max-width: 100% !important;
    /* Control max size */
}

/* Logo - Smaller for professional look */
.bfhd-card-logo,
.bfhd-card-logo-placeholder {
    width: 70px !important;
    /* Smaller (was 100px) */
    height: 70px !important;
    margin-bottom: 1rem !important;
    /* Less space below */
}

/* Card Title - More compact */
.bfhd-card-title {
    font-size: 1.25rem !important;
    /* Smaller (was 1.5rem) */
    margin-bottom: 0.5rem !important;
    /* Less space */
}

/* Card Description - More compact */
.bfhd-card-description {
    font-size: 0.875rem !important;
    /* Smaller (was 0.95rem) */
    margin-bottom: 1rem !important;
    /* Less space */
    line-height: 1.5 !important;
}

/* Category Badge - Smaller */
.bfhd-category-badge {
    font-size: 0.7rem !important;
    /* Smaller */
    padding: 0.3rem 0.75rem !important;
    /* More compact */
}

/* ===================================
   3. LISTING GRID SPACING 
   Add 30px padding below each card
   =================================== */

.bfhd-directory-grid {
    display: grid !important;
    /* Responsive columns: 1 on mobile, 2 on tablet, 3 on desktop */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 30px !important;
    /* 30px space between columns AND rows */
    grid-gap: 30px !important;
    /* Legacy */
    row-gap: 30px !important;
    /* Explicit vertical */
    column-gap: 30px !important;
    /* Explicit horizontal */
    grid-auto-rows: auto !important;
    /* Ensure content fits */
    align-items: start !important;
    /* Prevent vertical stretching issues */
    margin-bottom: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Individual card bottom spacing */
.bfhd-card-pro1 {
    margin-bottom: 30px !important;
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {

    /* Main Search label only */
    .bfhd_s_wrapper>.bfhd_s_label {
        font-size: 20px !important;
        margin-right: 12px !important;
    }

    .bfhd-card-pro1 {
        padding: 1.25rem !important;
    }

    .bfhd-card-logo,
    .bfhd-card-logo-placeholder {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ===================================
   4. CONTAINER ADJUSTMENTS
   Remove padding to match header/footer width
   =================================== */
.bfhd-pro1-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Also target the specific class referenced in screenshot */
/* Also target the specific class referenced in screenshot */
.bfhd-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 1360px !important;
    /* Fixed width from user reference */
    margin-left: auto !important;
    /* Center it */
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}