/*
Theme Name:   ListingHive Child
Theme URI:    https://shilpsathi.com/
Description:  Child theme for ListingHive
Author:       AI
Template:     listinghive
Version:      1.0.0
*/


/* Restores the background color across all pages */
body, .site-content, .hp-page {
     background-color: #F7F5F0 !important;
}

/* Keep the homepage flush but give all inner pages breathing room */
body.home .site-content,
body.home .hp-page {
     margin-bottom : 0 !important ; 
     padding-bottom : 0 !important ; 
}

body:not(.home) .site-content {
     padding-bottom : 80px !important ;
}
/* Ensure the main site area has no bottom margins pushing the footer away */
.site-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* Change the background color of the footer */
.footer-wrap, #colophon, .site-footer {
    background-color: #1E2A4A
 !important;
    margin-top: 0 !important;
}

/* 1. Force the main tagline to white */
.site-footer p, 
#colophon p,
.site-footer em,
.site-footer i {
    color: #ffffff !important;
}

/* 2. Universal override for ALL headers and layout titles */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
#colophon h1, #colophon h2, #colophon h3, #colophon h4,
.widget-title, .widget__title, .widget-title a {
    color: #ffffff !important;
}

/* 3. Turn the stubborn accent lines white */
.site-footer .widget-title::before, 
#colophon .widget-title::before, 
.widget-title::before {
    background-color: #ffffff !important;
}

/* 4. Target all standard layout links in one clean swoop */
.site-footer a, 
#colophon a {
    color: #cbd5e1 !important;
}

/* 5. Force the specific widget headers to REMAIN white over standard link rules */
.site-footer .widget-title a, 
#colophon .widget-title a {
    color: #ffffff !important;
}

/* 6. Brighten standard footer links on hover */
.site-footer a:hover, 
#colophon a:hover {
    color: #ffffff !important;
}
/* 1. Scale down the overall category block height to keep it compact */
.hp-listing-category--view-block {
    height: 180px !important; /* Forces the block to stay small */
    min-height: 180px !important;
    overflow: hidden !important;
    border-radius: 12px !important; /* Matches your mockup's smooth corners */
}

/* 2. Control how the dynamic plugin image fills the smaller block */
.hp-listing-category--view-block .hp-listing-category__image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; /* Prevents stretching/distortion */
}

/* 3. Re-align the plugin text so it sits neatly in the smaller card */
.hp-listing-category--view-block .hp-listing-category__content {
    padding: 16px !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important; /* Soft dark gradient so white text is readable over any dynamic image */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

/* 4. Fine-tune text sizing inside the small block */
.hp-listing-category__name {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

.hp-listing-category__count {
    font-size: 0.8rem !important;
    opacity: 0.85;
}
/* Target the Featured Artisans section wrapper directly on the homepage */
body.home .hp-section__content {
     margin-bottom: 0 !important;
     padding-bottom: 0 !important;
}

body.home .hp-section {
     margin-bottom: 0 !important;
     padding-bottom: 0 !important;
}
/* Force the About section to appear at the top of the sidebar */
.hp-template--vendor-view-page .hp-page__sidebar {
    display: flex;
    flex-direction: column;
}

/* Find the specific CSS class for your About block (usually contains 'about') */
/* You may need to right-click the About box in Chrome and select 'Inspect' to get the exact class name if 'vendor_about' isn't working */
.hp-vendor__attribute--about {
    order: -1; /* This pushes it to the very top */
    margin-bottom: 20px;
}
.hp-vendor__attribute--about {
    display: none !important;
}
/* Test to see if CSS is even loading */
.hp-template--vendor-view-page {
    border: 10px solid red !important;
}