/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* ==========================================================================
   JOB BOARD POST CONTENT 
   ========================================================================== */

.job-section {
    margin-bottom: 50px;
}

.job-section-title {
    color: #403e5a !important; /* RepuCare Navy */
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    font-family: 'Archivo', sans-serif;
}

.job-section-content p {
    line-height: 1.8;
    margin-bottom: 20px;
    color: #333333;
}

.job-section-content ul {
    padding-left: 20px;
    margin-bottom: 25px;
}

.job-section-content li {
    margin-bottom: 10px;
}


/* CORRECTED JOB CARD BADGE STYLING */
.job-card-tags .job-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    height: 24px !important; /* Forces uniform height */
    padding: 0 12px !important; /* Uniform side spacing */
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    line-height: 1 !important;
    margin-right: 8px;
    margin-bottom: 8px;
    color: #ffffff !important;
}

/* Maintain specific colors while controlling size */
.badge-hours { background-color: #79a1d5 !important; }
.badge-model { background-color: #b3b3b7 !important; }
.badge-engagement { background-color: #CB6CE6 !important; }
}

/* Hover state */
.sr-blog-listing-02 a:hover div.tag.small,
.sr-blog-listing-02 a:hover .tag.small {
  background-color: #322f4a !important;
}


/* Targeted Title Selector */
.related-posts-container .article-panel .article-content p.heading.h4,
.related-posts-container .article-panel .article-content .h4 {
    color: #33475b !important;
}

/* Change Author and Date color using the data class */
.related-posts-container .article-panel .article-content .article-meta .data {
    color: #33475b !important;
}

/* Specifically target the text within that container to ensure it overrides inherited white */
.related-posts-container .article-panel .article-content .article-meta .data span {
    color: #33475b !important;
}
/* Container styling: transparent background and layout */
.articles-list .article-content .tag.small {
    background: transparent !important; /* Removes the white/gray background block */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important; /* Space between individual pills */
    padding: 0 !important;
    margin-bottom: 15px !important;
    border: none !important;
}

/* Individual Pill Styling: Matches your brand style */
.custom-listing-pill {
    background-color: #79a1d5 !important; /* Brand Blue */
    color: #ffffff !important;           /* White text */
    padding: 4px 12px !important;
    border-radius: 20px !important;      /* Pill shape */
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    text-transform: lowercase;           /* Optional: to match your example */
}

/* Optional: Subtle hover effect if they aren't links */
.custom-listing-pill:hover {
    background-color: #33475b !important; /* Darker navy on hover */
    cursor: default;
}