/* ==============================================
   SINGLE BLOG POST — single-blog-post.css
   Only enqueued on single post_blog pages.
   Reuses .tx-blog-* classes from blog-archive.css
   for the sidebar (Search/Popular Posts/Categories/Tags)
   so both pages stay visually consistent.
   ============================================== */

#singlePostBlog { padding: 50px 0 70px; }

/* ---------- Featured image + meta ---------- */
.tx-single-blog-thumb {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 22px;
}

.tx-single-blog-thumb img { display: block; max-height: 420px; object-fit: cover; }

.tx-single-blog-meta {
    display:       flex;
    flex-wrap:     wrap;
    gap:           18px;
    font-size:     0.82rem;
    color:         var(--color-muted, #6c757d);
    margin-bottom: 14px;
}

.tx-single-blog-meta i { color: var(--color-primary, #015285); margin-right: 4px; }

.tx-single-blog-title {
    font-family: 'Oswald', sans-serif;
    font-size:   clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    color:       var(--color-navy, #00406B);
    line-height: 1.3;
    margin-bottom: 22px;
}

/* ---------- Article content ---------- */
.tx-single-blog-content { margin-bottom: 24px; }

.tx-single-blog-content p {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.85;
    margin-bottom: 16px;
}

.tx-single-blog-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--color-navy, #00406B);
    margin-top:  32px;
    margin-bottom: 12px;
}

.tx-single-blog-content h2:first-child { margin-top: 0; }

.tx-single-blog-content h3 {
    font-family: 'Oswald', sans-serif;
    font-size:   1.08rem;
    font-weight: 700;
    color:       var(--color-navy, #00406B);
    margin-top:  22px;
    margin-bottom: 10px;
}

.tx-single-blog-content img {
    max-width:     100%;
    height:        auto;
    border-radius: 12px;
    margin:        18px 0;
}

.tx-single-blog-content ul,
.tx-single-blog-content ol {
    margin-bottom: 16px;
    padding-left: 22px;
}

.tx-single-blog-content ul li,
.tx-single-blog-content ol li {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 6px;
}

.tx-single-blog-content blockquote {
    border-left:   4px solid var(--color-primary, #015285);
    background:    var(--color-light-bg, #f7f9fb);
    padding:       16px 20px;
    margin:        20px 0;
    font-style:    italic;
    color:         #555;
    border-radius: 0 8px 8px 0;
}

/* ---------- Share row ---------- */
.tx-single-blog-share {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       18px 0;
    border-top:    1px solid var(--color-border, #e9ecef);
    border-bottom: 1px solid var(--color-border, #e9ecef);
    margin-bottom: 20px;
}

.tx-single-blog-share strong {
    font-family: 'Oswald', sans-serif;
    font-size:   0.85rem;
    color:       var(--color-navy, #00406B);
    margin-right: 4px;
}

.tx-share-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    color:            #fff;
    text-decoration:  none;
    font-size:        0.9rem;
    transition:       transform 0.2s ease, opacity 0.2s ease;
}

.tx-share-btn:hover { transform: translateY(-3px); opacity: 0.9; color: #fff; }

.tx-share-fb   { background: #1877f2; }
.tx-share-tw   { background: #1da1f2; }
.tx-share-li   { background: #0a66c2; }
.tx-share-pin  { background: #e60023; }
.tx-share-mail { background: #6c757d; }

/* ---------- Tags row ---------- */
.tx-single-blog-tags {
    margin-bottom: 30px;
    font-size: 0.85rem;
}

.tx-single-blog-tags i { color: var(--color-primary, #015285); margin-right: 6px; }

.tx-single-blog-tags a {
    display:          inline-block;
    background:       var(--color-light-bg, #f7f9fb);
    color:            var(--color-navy, #00406B);
    text-decoration:  none;
    font-size:        0.78rem;
    padding:          5px 12px;
    border-radius:    20px;
    margin:           0 6px 6px 0;
    transition:       background 0.2s ease, color 0.2s ease;
}

.tx-single-blog-tags a:hover { background: var(--color-primary, #015285); color: #fff; }

/* ---------- You May Also Like ---------- */
.tx-single-blog-related {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border, #e9ecef);
}

.tx-single-blog-related h3 {
    font-family: 'Oswald', sans-serif;
    font-size:   1.2rem;
    font-weight: 800;
    color:       var(--color-navy, #00406B);
    margin-bottom: 20px;
}

.tx-related-card {
    background:    #fff;
    border:        1px solid var(--color-border, #e9ecef);
    border-radius: 10px;
    overflow:      hidden;
    height:        100%;
    transition:    transform 0.2s ease, box-shadow 0.2s ease;
}

.tx-related-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }

.tx-related-img-wrap { display: block; height: 110px; overflow: hidden; }
.tx-related-img { width: 100%; height: 100%; object-fit: cover; }

.tx-related-body { padding: 12px; }

.tx-related-date {
    display: block;
    font-size: 0.68rem;
    color: var(--color-muted, #6c757d);
    margin-bottom: 6px;
}

.tx-related-date i { color: var(--color-primary, #015285); margin-right: 3px; }

.tx-related-body h4 {
    font-size:   0.83rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.tx-related-body h4 a { color: var(--color-navy, #00406B); text-decoration: none; }
.tx-related-body h4 a:hover { color: var(--color-primary, #015285); }

.tx-related-readmore {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary, #015285);
    text-decoration: none;
}

/* ---------- Need Help sidebar box ---------- */
.tx-single-blog-help {
    background:    linear-gradient(135deg, var(--color-navy, #00406B) 0%, var(--color-primary, #015285) 100%);
    border-radius: 12px;
    padding:       26px 22px;
    text-align:    center;
}

.tx-single-blog-help-icon {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            50px;
    height:           50px;
    border-radius:    50%;
    background:       rgba(255,255,255,0.15);
    color:            #fff;
    font-size:        1.3rem;
    margin-bottom:    14px;
}

.tx-single-blog-help h5 {
    font-family: 'Oswald', sans-serif;
    font-size:   1rem;
    font-weight: 700;
    color:       #fff;
    margin-bottom: 8px;
}

.tx-single-blog-help p {
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 18px;
}

.tx-single-blog-help-btn {
    display:          inline-block;
    background:       #e63946;
    color:            #fff;
    text-decoration:  none;
    font-family:      'Oswald', sans-serif;
    font-size:        0.82rem;
    font-weight:      700;
    text-transform:   uppercase;
    padding:          11px 24px;
    border-radius:    30px;
    transition:       background 0.2s ease;
}

.tx-single-blog-help-btn:hover { background: #c9303d; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .tx-single-blog-thumb img { max-height: 260px; }
}