/* SIDE BAR BACKGROUND COLOR */
.sidebar-background {
    background-color: #f0f0f0; /* Light grey */
    padding: 20px; /* Add some padding for better appearance */
    margin-bottom: 20px; /* Space between blocks */
}

/*SCREEN WHEN MAIN MENU DISSAPEARS*/
@media screen and (max-width: 1090px) {
    .sp-megamenu-parent {display: none !important;}
    #offcanvas-toggler {display: flex !important;}
}

/*---REDUCE SPACE BETWEEN MENU ITEMS---*/
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 8px;
                                }

/*MAKE SIGN IN LINK A BUTTON*/
.sp-sign-in {
  padding: 12px 12px;
  border-radius: 6px;
  background: #0074AE;
  color: #ffffff;}
.sp-sign-in:hover, .sp-sign-in:focus {background: #0074AE;}

/*CHANGE SUB MENU ITEMS TO LOWER CASE*/
.sp-megamenu-parent .sp-mega-group>li>a {
    text-transform: capitalize;
    font-weight: normal;
    color: #273e06;
}

/* CHANGE COLOR OF READ MORE LINKS */
.readmore a, 
.more-link, 
a.readmore,
.btn.readmore {
    color: #0074af !important;
}

/* Optional: Change color when hovering */
.readmore a:hover, 
.more-link:hover {
    color: #005a87 !important; 
    text-decoration: underline;
}

/* CHANGE COLOR OR PREVIOUS/NEXT NAVIVGATION BUTTONS */
.pagenavigation .pagination a.btn-secondary.previous, 
.pagenavigation .pagination a.btn-secondary.next {
    background-color: #0074af !important;
    border-color: #0074af !important;
    color: #ffffff !important;
    box-shadow: none; /* Removes any default Bootstrap shadows */
}

/* Ensure the hover state also matches your primary color */
.pagenavigation .pagination a.btn-secondary.previous:hover, 
.pagenavigation .pagination a.btn-secondary.next:hover,
.pagenavigation .pagination a.btn-secondary.previous:focus,
.pagenavigation .pagination a.btn-secondary.next:focus {
    background-color: #636363 !important;
    border-color: #636363 !important;
    color: #ffffff !important;
}

/* LINE UP BOTTOM OF ARTICLE BOXES ON HOME PAGE SCROLLER */
 .sppb-articles-carousel-content{
   height: 300px !important;
 }

/* HIDE THE MONTH, YEAR, AND LIMIT FILTERS ON THE ARCHIVE PAGE */
form#adminForm .filters, 
.com-content-archive__filters {
    display: none !important;
}

/* CREATE A RESPONSIVE 3-COLUMN LAYOUT FOR THE JOOMLA ARCHIVE PAGE */
#adminForm .com-content-archive__items,
#adminForm [class*="archive-items"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important; /* Adjusts the spacing between the columns and rows */
    align-items: start;
}

/* Ensure individual article items stretch nicely inside the grid */
.com-content-archive__item, 
div[class*="archive-item"] {
    margin-bottom: 0 !important;
    padding: 15px;
    background: transparent; /* Add a background color here if you want cards! */
}

/* Responsive fix: Switch to 2 columns on tablets, 1 column on mobile */
@media (max-width: 991px) {
    #adminForm .com-content-archive__items,
    #adminForm [class*="archive-items"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    #adminForm .com-content-archive__items,
    #adminForm [class*="archive-items"] {
        grid-template-columns: 1fr !important;
    }
}


/* FORCE ARTICLE TITLE LINKS TO USE YOUR TEMPLATE HEADING BLUE */
h2 > a {
    color: #0074ae !important;
}

/* Optional: Choose a color for when a user hovers over the title link */
h2 > a:hover {
    color: #005682 !important; /* A slightly darker blue for the hover effect */
    text-decoration: underline;
}


/* 1. Make the Joomla blog rows behave like Flexbox containers */
.com-content-category-blog .article-list .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 2. Force the standard Bootstrap layout columns to stretch to full height */
.com-content-category-blog .article-list .row > div[class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Force the main article block to fill the entire column space */
.com-content-category-blog .article {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    margin-bottom: 30px !important;
    
    /* Optional: Adds card layout framing so boxes are clearly visible */
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #eef2f5;
    border-radius: 4px;
}

/* 4. Force the internal article body element to stretch right to the bottom */
.com-content-category-blog .article-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* 5. Force the text wrapper to stretch out and absorb any empty white space */
.com-content-category-blog .article-introtext {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* 6. Push the 'Read More' buttons so they align nicely on the exact same baseline */
.com-content-category-blog .readmore {
    margin-top: auto !important;
    padding-top: 15px;
}



/*CONVERT MAILCHIMP SIGN UP FORM TO HORIZONTAL*/
/* 1. Center the entire form container and constrain its max width */
#mc_embed_signup {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* 2. Turn the inner scroll area into a flex container */
#mc_embed_signup_scroll {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 15px; /* Spacing between fields */
}

/* 3. Style the introductory paragraph to span the full width at the top */
#mc_embed_signup_scroll > p:first-child {
    width: 100%;
    margin-bottom: 10px;
}

/* 4. Hide the redundant email label text since placeholder or context is clear, 
      or style individual fields to line up horizontally */
#mc_embed_signup .mc-field-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 0;
}

/* 5. Style inputs and submit button for a uniform height */
#mc_embed_signup .mc-field-group input,
#mc_embed_signup .button {
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
}

#mc_embed_signup .button {
    cursor: pointer;
}

/* 6. Clean up error/hidden response alignment */
#mc_embed_signup #mce-responses {
    width: 100%;
}


/* Hides the category item in Smart Search results */
li.result__taxonomy--Category {
    display: none !important;
}
/* Hides the category and type items in Smart Search results */
li.result__taxonomy--Category,
li.result__taxonomy--Type {
    display: none !important;
}


/* Hides the Featured badge on articles */
span.featured-article-badge {
    display: none !important;
}


/* Forces the slideshow text column to full width on mobile screens */
@media (max-width: 768px) {
    .sppb-addon-slideshow .sppb-row .sppb-col-sm-9,
    .sppb-addon-slideshow .sppb-row .sppb-col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}



/* Force JBusinessDirectory view details button inside SP Page Builder to blue */
.sppb-addon-content .latestbusiness .btn.btn-success,
.sp-module .latestbusiness.list-view2 a.btn.btn-success {
    background-color: #0074ae !important;
    border-color: #0074ae !important;
    color: #ffffff !important;
}

.sppb-addon-content .latestbusiness .btn.btn-success:hover,
.sp-module .latestbusiness.list-view2 a.btn.btn-success:hover,
.sppb-addon-content .latestbusiness .btn.btn-success:focus,
.sp-module .latestbusiness.list-view2 a.btn.btn-success:focus {
    background-color: #005f8d !important;
    border-color: #005f8d !important;
    color: #ffffff !important;
}

/* Global override for the JBusinessDirectory search button */
button.search-dir-button,
.search-dir-button.btn-success {
    background-color: #0074ae !important;
    border-color: #0074ae !important;
    color: #ffffff !important;
}

button.search-dir-button:hover,
button.search-dir-button:focus,
.search-dir-button.btn-success:hover,
.search-dir-button.btn-success:focus {
    background-color: #005f8d !important;
    border-color: #005f8d !important;
    color: #ffffff !important;
}