/* Blog single post category pills */
.blog-post-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.blog-post-category-badge {
    display: inline-block;
    padding: 4px 16px;
    background-color: #e8f8f2;
    color: #007b5e;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: none;
}

.blog-post-category-badge:hover,
.blog-post-category-badge:focus {
    color: #005a45;
    background-color: #d4f0e6;
    text-decoration: none;
}

/* Blog single post meta bar (author + category) */
.blog-post-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}

.blog-post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-post-meta-icon {
    color: #28a745;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.blog-post-meta-text {
    color: #95979d;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Emphasis / callout in post body (HTML from editor) */
.blog-single-post .content-holder em {
    display: block;
    font-style: italic;
    background-color: #f0fbf5;
    border-left: 6px solid #10b981;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 18px 25px;
    color: #4b5563;
    line-height: 1.6;
    margin: 20px 0;
}

/* Major section heading in post body */
.blog-single-post .content-holder h2 {
    font-weight: 700;
    font-size: 1.65rem;
    color: #1a202c;
    line-height: 1.35;
    margin: 1.35em 0 0.6em;
    padding-left: 16px;
    border-left: 4px solid #10b981;
}

/* Section headings in post body */
.blog-single-post .content-holder h3 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 700;
    color: #212529;
    margin: 1.25em 0 0.5em;
    line-height: 1.35;
    font-size: 1.4rem;
}

.blog-single-post .content-holder h3::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 0.35em;
    background-color: #28a745;
    border-radius: 50%;
}

/* Subsection label in post body */
.blog-single-post .content-holder h4 {
    display: inline-block;
    max-width: 100%;
    font-weight: 700;
    color: #13834f;
    background-color: #f0fdf6;
    border-radius: 6px;
    padding: 6px 16px;
    margin: 1em 0 0.5em;
    line-height: 1.4;
    font-size: 1rem;
}

/*
 * Bordered lists — any top-level ul (may sit inside div/span/etc.).
 * Nested ul ul is reset so only the outermost ul per branch gets the card.
 */
.blog-single-post .content-holder ul {
    list-style: none;
    padding: 0;
    margin: 1.25em 0;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.blog-single-post .content-holder ul > li {
    position: relative;
    padding: 20px 20px 20px 46px;
    border-bottom: 1px solid #e0e0e0;
    color: #374151;
    line-height: 1.6;
}

.blog-single-post .content-holder ul > li:last-child {
    border-bottom: none;
}

.blog-single-post .content-holder ul > li::before {
    content: "";
    position: absolute;
    left: 22px;
    top: calc(20px + 0.35em);
    width: 8px;
    height: 8px;
    background-color: #10a37f;
    border-radius: 50%;
}

/* Nested ul (inside another ul) — plain list, no card */
.blog-single-post .content-holder ul ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 12px 0 0;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.blog-single-post .content-holder ul ul > li {
    position: static;
    padding: 0.35em 0;
    border-bottom: none;
    color: #374151;
    line-height: 1.6;
}

.blog-single-post .content-holder ul ul > li:last-child {
    border-bottom: none;
}

.blog-single-post .content-holder ul ul > li::before {
    content: none;
    display: none;
}

/*
 * Numbered lists — green index column + white content (outermost ol per branch).
 * Nested ol ol / ul ol: default decimal list, no card.
 */
.blog-single-post .content-holder ol {
    counter-reset: blog-ol;
    list-style: none;
    padding: 0;
    margin: 1.25em 0;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.blog-single-post .content-holder ol > li {
    counter-increment: blog-ol;
    position: relative;
    padding: 18px 20px 18px 72px;
    border-bottom: 1px solid #e0e0e0;
    color: #555555;
    line-height: 1.6;
    background: #fff;
}

.blog-single-post .content-holder ol > li:last-child {
    border-bottom: none;
}

.blog-single-post .content-holder ol > li::before {
    content: counter(blog-ol);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    box-sizing: border-box;
    background-color: #19a35e;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.blog-single-post .content-holder ol > li:first-child::before {
    border-top-left-radius: 9px;
}

.blog-single-post .content-holder ol > li:last-child::before {
    border-bottom-left-radius: 9px;
}

.blog-single-post .content-holder ol ol,
.blog-single-post .content-holder ul ol {
    counter-reset: blog-ol;
    list-style: decimal;
    list-style-position: outside;
    padding-left: 1.5em;
    margin: 12px 0 0;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.blog-single-post .content-holder ol ol > li,
.blog-single-post .content-holder ul ol > li {
    position: static;
    padding: 0.35em 0;
    padding-left: 0;
    border-bottom: none;
    background: transparent;
    color: #555555;
}

.blog-single-post .content-holder ol ol > li::before,
.blog-single-post .content-holder ul ol > li::before {
    content: none;
    display: none;
}

.blog-single-post .content-holder ol ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 12px 0 0;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.blog-single-post .content-holder ol ul > li {
    position: static;
    padding: 0.35em 0;
    border-bottom: none;
    color: #374151;
}

.blog-single-post .content-holder ol ul > li::before {
    content: none;
    display: none;
}