/* ==========================================================================
   Tyler's Hope Blog Styles
   Custom CSS overrides for BeTheme (v28.0.6)
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom Properties
   -------------------------------------------------------------------------- */
:root {
    --th-navy:       #1a2744;
    --th-navy-light: #243256;
    --th-navy-dark:  #111b30;
    --th-gold:       #e8a825;
    --th-gold-hover: #d49a1f;
    --th-white:      #ffffff;
    --th-gray-50:    #f8f9fa;
    --th-gray-100:   #f1f3f5;
    --th-gray-200:   #e9ecef;
    --th-gray-300:   #dee2e6;
    --th-gray-400:   #adb5bd;
    --th-gray-500:   #868e96;
    --th-gray-600:   #6c757d;
    --th-gray-700:   #495057;
    --th-radius:     12px;
    --th-shadow:     0 2px 8px rgba(26, 39, 68, 0.08);
    --th-shadow-md:  0 4px 16px rgba(26, 39, 68, 0.12);
    --th-shadow-lg:  0 8px 32px rgba(26, 39, 68, 0.16);
    --th-transition: 0.25s ease;
    --th-font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --th-font-body:  'Lora', Georgia, 'Times New Roman', serif;
}

/* ==========================================================================
   2. BLOG LISTING PAGE (Category Archive / Blog Index)
   ========================================================================== */

/* --------------------------------------------------------------------------
   2a. Grid Layout
   -------------------------------------------------------------------------- */
.posts_group.lm_wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: start !important;
}

/* Reset BeTheme column widths and floats */
.posts_group.lm_wrapper .post-item {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   2b. Post Cards
   -------------------------------------------------------------------------- */
.posts_group .post-item {
    background: var(--th-white) !important;
    border-radius: var(--th-radius) !important;
    box-shadow: var(--th-shadow) !important;
    overflow: hidden !important;
    transition: transform var(--th-transition), box-shadow var(--th-transition) !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--th-gray-200) !important;
}

.posts_group .post-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--th-shadow-lg) !important;
}

/* --------------------------------------------------------------------------
   2c. Post Card Images
   -------------------------------------------------------------------------- */
.posts_group .post-item .image_frame.post-photo-wrapper {
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.posts_group .post-item .image_frame.post-photo-wrapper .image_wrapper {
    height: 220px !important;
    overflow: hidden !important;
    position: relative !important;
}

.posts_group .post-item .image_frame.post-photo-wrapper .image_wrapper img.wp-post-image {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.posts_group .post-item:hover .image_frame.post-photo-wrapper .image_wrapper img.wp-post-image {
    transform: scale(1.05) !important;
}

/* Mask overlay on hover */
.posts_group .post-item .image_frame .image_wrapper .mask {
    background: rgba(26, 39, 68, 0.3) !important;
    border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   2d. Posts without images - navy gradient placeholder
   -------------------------------------------------------------------------- */
.posts_group .post-item .no-img {
    height: 220px !important;
    background: linear-gradient(135deg, var(--th-navy) 0%, var(--th-navy-light) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --------------------------------------------------------------------------
   2e. Post Description Wrapper
   -------------------------------------------------------------------------- */
.posts_group .post-item .post-desc-wrapper,
.photo2 .post-desc-wrapper,
.photo2 .post .post-desc-wrapper {
    padding: 20px 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background-color: #fff !important;
}

.posts_group .post-item .post-desc,
.photo2 .post-desc-wrapper .post-desc {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   2f. Category Badge — overlaid on the image
   -------------------------------------------------------------------------- */

/* Position card for absolute-positioned children */
.posts_group .post-item {
    position: relative !important;
}

/* --------------------------------------------------------------------------
   2g. Post Title
   -------------------------------------------------------------------------- */
.posts_group .post-item .post-title h4.entry-title,
.posts_group .post-item .post-title .entry-title {
    font-family: var(--th-font-ui) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.posts_group .post-item .post-title .entry-title a {
    color: var(--th-navy) !important;
    text-decoration: none !important;
    transition: color var(--th-transition) !important;
}

.posts_group .post-item .post-title .entry-title a:hover {
    color: #2a5db5 !important;
}

/* --------------------------------------------------------------------------
   2h. Post Excerpt
   -------------------------------------------------------------------------- */
.posts_group .post-item .post-excerpt,
.posts_group .post-item .post-excerpt p {
    font-family: var(--th-font-ui) !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    color: var(--th-gray-600) !important;
    margin: 0 0 0 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   2i. Post Footer (Author + Read link)
   -------------------------------------------------------------------------- */
.posts_group .post-item .post-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid var(--th-gray-200) !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    font-family: var(--th-font-ui) !important;
    font-size: 0.8rem !important;
    color: var(--th-gray-500) !important;
}

.posts_group .post-item .post-footer .vcard.author {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Replace the generic gravatar with a styled navy circle */
.posts_group .post-item .post-footer .vcard.author img.avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    /* Make it look like the mockup navy circle - hide the default img */
    filter: brightness(0) !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* Create initials avatar via CSS pseudo-element on author wrapper */
.posts_group .post-item .post-footer .vcard.author {
    position: relative !important;
    padding-left: 42px !important;
}

.posts_group .post-item .post-footer .vcard.author::before {
    content: attr(data-initials) !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--th-navy) 0%, var(--th-navy-light) 100%) !important;
    color: var(--th-white) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0.02em !important;
}

.posts_group .post-item .post-footer .vcard.author a,
.posts_group .post-item .post-footer .vcard.author .fn a {
    color: var(--th-gray-700) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Hide the date in footer (it's shown in the card body area) */
.posts_group .post-item .post-footer .date {
    display: none !important;
}

/* Hide clock icon */
.posts_group .post-item .post-footer .date .icon-clock {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2j. Date label & love button
   -------------------------------------------------------------------------- */

/* Show the date label — style it like the mockup */
.posts_group .post-item .date_label {
    display: none !important;  /* We use the footer date instead */
}

.posts_group .post-item .button-love {
    display: none !important;
}

/* Hide the author-date section in the post-head (redundant with footer) */
.posts_group .post-item .post-meta .author-date {
    display: none !important;
}

/* Show date from the footer instead */
.posts_group .post-item .post-footer .date {
    font-family: var(--th-font-ui) !important;
    font-size: 0.8rem !important;
    color: var(--th-gray-400) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    order: -1 !important;
}

/* --------------------------------------------------------------------------
   2k. Post-head meta area — only keep the category badge (moved to image overlay)
   -------------------------------------------------------------------------- */
/* Hide the labels like "Published by", "on" */
.posts_group .post-item .post-meta .author-date .label,
.posts_group .post-item .post-meta .author-date i {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2l. Filter / Pagination cleanup
   -------------------------------------------------------------------------- */
.pager .pages a,
.pager .pages span {
    font-family: var(--th-font-ui) !important;
    border-radius: 6px !important;
    transition: all var(--th-transition) !important;
}

.pager .pages a:hover,
.pager .pages span.current {
    background: var(--th-navy) !important;
    color: var(--th-white) !important;
}

/* Filters bar */
.filters_buttons .categories a,
.blog-filters a {
    font-family: var(--th-font-ui) !important;
    font-size: 0.85rem !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    transition: all var(--th-transition) !important;
    margin: 0 4px 8px !important;
}

.filters_buttons .categories a.current,
.blog-filters a.active {
    background: var(--th-navy) !important;
    color: var(--th-white) !important;
}

/* "Read More" link inside cards */
.posts_group .post-item .post-excerpt a,
.posts_group .post-item a.post-more {
    color: var(--th-gold) !important;
    font-family: var(--th-font-ui) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color var(--th-transition) !important;
}

.posts_group .post-item .post-excerpt a:hover,
.posts_group .post-item a.post-more:hover {
    color: var(--th-gold-hover) !important;
}

/* --------------------------------------------------------------------------
   2m. JS-enhanced card elements
   -------------------------------------------------------------------------- */

/* Category badge overlaid on image (injected by JS) */
.thbs-card-cat {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
    background: rgba(232, 168, 37, 0.95) !important;
    color: #fff !important;
    font-family: var(--th-font-ui) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
}

/* Date shown in card body (injected by JS) */
.thbs-card-date {
    font-family: var(--th-font-ui) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--th-gray-400) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 8px !important;
}

/* "Read →" link in footer (injected by JS) */
.thbs-card-read {
    margin-left: auto !important;
    font-family: var(--th-font-ui) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--th-navy-light) !important;
    text-decoration: none !important;
    transition: color var(--th-transition) !important;
}

.thbs-card-read:hover {
    color: var(--th-gold) !important;
}

/* When JS has enhanced cards, hide the original post-head */
.thbs-cards-enhanced .posts_group .post-item .post-head {
    display: none !important;
}

/* Also hide the original date_label since JS adds its own */
.thbs-cards-enhanced .posts_group .post-item .date_label {
    display: none !important;
}

/* Hide BeTheme image hover overlay icons */
.posts_group .post-item .image_links {
    display: none !important;
}

/* Hide the mask overlay on hover too */
.posts_group .post-item .image_frame .image_wrapper .mask {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2n. Featured (latest) post — full-width horizontal layout
   -------------------------------------------------------------------------- */
.posts_group .post-item.thbs-featured {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
}

.posts_group .post-item.thbs-featured .image_frame.post-photo-wrapper {
    width: 50% !important;
    flex-shrink: 0 !important;
}

.posts_group .post-item.thbs-featured .image_frame.post-photo-wrapper .image_wrapper {
    height: 100% !important;
    min-height: 320px !important;
}

.posts_group .post-item.thbs-featured .image_frame.post-photo-wrapper .image_wrapper img.wp-post-image {
    height: 100% !important;
    min-height: 320px !important;
}

.posts_group .post-item.thbs-featured .post-desc-wrapper {
    width: 50% !important;
    padding: 32px !important;
    justify-content: center !important;
}

.posts_group .post-item.thbs-featured .post-title h4.entry-title,
.posts_group .post-item.thbs-featured .post-title .entry-title {
    font-size: 1.75rem !important;
}

.posts_group .post-item.thbs-featured .post-excerpt,
.posts_group .post-item.thbs-featured .post-excerpt p {
    -webkit-line-clamp: 4 !important;
    font-size: 0.95rem !important;
}

/* Featured card responsive */
@media (max-width: 768px) {
    .posts_group .post-item.thbs-featured {
        flex-direction: column !important;
    }
    .posts_group .post-item.thbs-featured .image_frame.post-photo-wrapper {
        width: 100% !important;
    }
    .posts_group .post-item.thbs-featured .image_frame.post-photo-wrapper .image_wrapper {
        min-height: 220px !important;
        height: 220px !important;
    }
    .posts_group .post-item.thbs-featured .image_frame.post-photo-wrapper .image_wrapper img.wp-post-image {
        min-height: 220px !important;
        height: 220px !important;
    }
    .posts_group .post-item.thbs-featured .post-desc-wrapper {
        width: 100% !important;
        padding: 20px 24px 20px !important;
    }
    .posts_group .post-item.thbs-featured .post-title .entry-title {
        font-size: 1.35rem !important;
    }
}


/* ==========================================================================
   3. SINGLE POST PAGE
   ========================================================================== */

/* --------------------------------------------------------------------------
   3a. Post Title
   -------------------------------------------------------------------------- */
.single-post .post-header h1.entry-title {
    font-family: var(--th-font-ui) !important;
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--th-navy) !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.02em !important;
}

/* --------------------------------------------------------------------------
   3b. Post Meta
   -------------------------------------------------------------------------- */
.single-post .post-header .post-meta {
    font-family: var(--th-font-ui) !important;
    font-size: 0.9rem !important;
    color: var(--th-gray-500) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--th-gray-200) !important;
    margin-bottom: 32px !important;
}

.single-post .post-header .post-meta .author-date {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.single-post .post-header .post-meta .author-date a {
    color: var(--th-navy) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.single-post .post-header .post-meta .author-date .date {
    color: var(--th-gray-500) !important;
}

/* Hide dropdown chevrons on category/tag meta */
.single-post .post-header .post-meta .category .icon-down-open-mini,
.single-post .post-header .post-meta .category .icon-down-open,
.single-post .post-header .post-meta .category i[class*="icon-down"],
.single-post .post-header .post-meta .meta-categories .icon-down-open-mini,
.single-post .post-header .post-meta .mata-tags .icon-down-open-mini,
.single-post .post-header .post-meta .meta-categories i[class*="icon-down"],
.single-post .post-header .post-meta .mata-tags i[class*="icon-down"] {
    display: none !important;
}

/* Show categories/tags inline instead of dropdown */
.single-post .post-header .post-meta .category,
.single-post .post-header .post-meta .meta-categories,
.single-post .post-header .post-meta .mata-tags {
    position: relative !important;
}

.single-post .post-header .post-meta .category ul,
.single-post .post-header .post-meta .meta-categories ul,
.single-post .post-header .post-meta .mata-tags ul {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.single-post .post-header .post-meta .category ul li,
.single-post .post-header .post-meta .meta-categories ul li,
.single-post .post-header .post-meta .mata-tags ul li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.single-post .post-header .post-meta .category ul li a,
.single-post .post-header .post-meta .meta-categories ul li a,
.single-post .post-header .post-meta .mata-tags ul li a {
    display: inline-block !important;
    background: var(--th-gray-100) !important;
    color: var(--th-navy) !important;
    font-family: var(--th-font-ui) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background var(--th-transition), color var(--th-transition) !important;
}

.single-post .post-header .post-meta .category ul li a:hover,
.single-post .post-header .post-meta .meta-categories ul li a:hover,
.single-post .post-header .post-meta .mata-tags ul li a:hover {
    background: var(--th-gold) !important;
    color: var(--th-white) !important;
}

/* Category/tag label text */
.single-post .post-header .post-meta .category > a,
.single-post .post-header .post-meta .meta-categories > a,
.single-post .post-header .post-meta .mata-tags > a {
    font-family: var(--th-font-ui) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--th-gray-500) !important;
    text-decoration: none !important;
    cursor: default !important;
}

/* --------------------------------------------------------------------------
   3c. Featured Image
   -------------------------------------------------------------------------- */
.single-post .single-photo-wrapper .image_frame {
    border-radius: var(--th-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--th-shadow-md) !important;
    border: none !important;
    margin-bottom: 40px !important;
}

.single-post .single-photo-wrapper .image_frame .image_wrapper img.wp-post-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: var(--th-radius) !important;
}

/* --------------------------------------------------------------------------
   3d. Post Content - Serif body text
   -------------------------------------------------------------------------- */
.single-post .the_content,
.single-post .the_content p,
.single-post .the_content li,
.single-post .the_content dd {
    font-family: var(--th-font-body) !important;
    font-size: 1.125rem !important;
    line-height: 1.85 !important;
    color: var(--th-gray-700) !important;
}

.single-post .the_content h2,
.single-post .the_content h3,
.single-post .the_content h4,
.single-post .the_content h5,
.single-post .the_content h6 {
    font-family: var(--th-font-ui) !important;
    color: var(--th-navy) !important;
    font-weight: 700 !important;
    margin-top: 2em !important;
    margin-bottom: 0.75em !important;
    line-height: 1.3 !important;
}

.single-post .the_content h2 {
    font-size: 1.75rem !important;
}

.single-post .the_content h3 {
    font-size: 1.4rem !important;
}

.single-post .the_content h4 {
    font-size: 1.15rem !important;
}

.single-post .the_content a {
    color: var(--th-gold) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color var(--th-transition) !important;
}

.single-post .the_content a:hover {
    color: var(--th-gold-hover) !important;
}

.single-post .the_content blockquote {
    border-left: 4px solid var(--th-gold) !important;
    background: var(--th-gray-50) !important;
    padding: 20px 24px !important;
    margin: 2em 0 !important;
    border-radius: 0 8px 8px 0 !important;
    font-style: italic !important;
}

.single-post .the_content blockquote p {
    color: var(--th-navy-light) !important;
    font-size: 1.15rem !important;
}

.single-post .the_content img {
    border-radius: 8px !important;
    max-width: 100% !important;
    height: auto !important;
}

.single-post .the_content ul,
.single-post .the_content ol {
    padding-left: 1.5em !important;
    margin: 1.25em 0 !important;
}

.single-post .the_content li {
    margin-bottom: 0.5em !important;
}

/* --------------------------------------------------------------------------
   3e. Drop Cap
   -------------------------------------------------------------------------- */
.single-post .the_content > p:first-of-type::first-letter {
    font-family: var(--th-font-body) !important;
    font-size: 3.5em !important;
    font-weight: 700 !important;
    float: left !important;
    line-height: 0.85 !important;
    margin: 0.05em 0.12em 0 0 !important;
    color: var(--th-navy) !important;
}

/* --------------------------------------------------------------------------
   3f. Post Navigation (Prev/Next)
   -------------------------------------------------------------------------- */
.single-post .post-nav {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

.single-post .post-nav a {
    color: var(--th-gray-400) !important;
    font-size: 1.2rem !important;
    transition: color var(--th-transition) !important;
    text-decoration: none !important;
}

.single-post .post-nav a:hover {
    color: var(--th-navy) !important;
}

/* --------------------------------------------------------------------------
   3g. Author Bio Section
   -------------------------------------------------------------------------- */
.single-post .section-post-about {
    background: var(--th-gray-50) !important;
    border-radius: var(--th-radius) !important;
    padding: 32px !important;
    margin: 48px 0 !important;
    border: 1px solid var(--th-gray-200) !important;
}

.single-post .section-post-about .author-wrapper,
.single-post .section-post-about .author_info {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
}

.single-post .section-post-about img.avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 3px solid var(--th-white) !important;
    box-shadow: var(--th-shadow) !important;
}

.single-post .section-post-about h5,
.single-post .section-post-about .author-name {
    font-family: var(--th-font-ui) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--th-navy) !important;
    margin-bottom: 8px !important;
}

.single-post .section-post-about p,
.single-post .section-post-about .author-desc {
    font-family: var(--th-font-ui) !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    color: var(--th-gray-600) !important;
}

/* --------------------------------------------------------------------------
   3h. Related Posts
   -------------------------------------------------------------------------- */
.single-post .section-post-related {
    margin-top: 48px !important;
    padding-top: 40px !important;
    border-top: 1px solid var(--th-gray-200) !important;
}

.single-post .section-post-related .section-related-adjustment {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.single-post .section-post-related .post-item,
.single-post .section-post-related article {
    background: var(--th-white) !important;
    border-radius: var(--th-radius) !important;
    box-shadow: var(--th-shadow) !important;
    overflow: hidden !important;
    border: 1px solid var(--th-gray-200) !important;
    transition: transform var(--th-transition), box-shadow var(--th-transition) !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.single-post .section-post-related .post-item:hover,
.single-post .section-post-related article:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--th-shadow-md) !important;
}

.single-post .section-post-related .post-item .image_frame,
.single-post .section-post-related article .image_frame {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.single-post .section-post-related .post-item img,
.single-post .section-post-related article img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
}

.single-post .section-post-related .post-item h4,
.single-post .section-post-related article h4,
.single-post .section-post-related .post-item .entry-title,
.single-post .section-post-related article .entry-title {
    font-family: var(--th-font-ui) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding: 16px !important;
    margin: 0 !important;
}

.single-post .section-post-related .post-item h4 a,
.single-post .section-post-related article h4 a,
.single-post .section-post-related .entry-title a {
    color: var(--th-navy) !important;
    text-decoration: none !important;
    transition: color var(--th-transition) !important;
}

.single-post .section-post-related .post-item h4 a:hover,
.single-post .section-post-related article h4 a:hover,
.single-post .section-post-related .entry-title a:hover {
    color: #2a5db5 !important;
}

/* Related posts heading */
.single-post .section-post-related h4:first-child,
.single-post .section-post-related .title {
    font-family: var(--th-font-ui) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--th-navy) !important;
    margin-bottom: 24px !important;
    grid-column: 1 / -1 !important;
}

/* --------------------------------------------------------------------------
   3i. Share Section
   -------------------------------------------------------------------------- */
.single-post .section-post-intro-share {
    padding: 24px 0 !important;
    margin: 32px 0 !important;
    border-top: 1px solid var(--th-gray-200) !important;
    border-bottom: 1px solid var(--th-gray-200) !important;
}

.single-post .section-post-intro-share a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--th-gray-100) !important;
    color: var(--th-gray-600) !important;
    margin-right: 8px !important;
    transition: background var(--th-transition), color var(--th-transition) !important;
    text-decoration: none !important;
    font-size: 1rem !important;
}

.single-post .section-post-intro-share a:hover {
    background: var(--th-navy) !important;
    color: var(--th-white) !important;
}

/* --------------------------------------------------------------------------
   3j. Post Footer Section
   -------------------------------------------------------------------------- */
.single-post .section-post-footer {
    font-family: var(--th-font-ui) !important;
    font-size: 0.85rem !important;
    color: var(--th-gray-500) !important;
}

.single-post .section-post-footer a {
    color: var(--th-navy) !important;
    text-decoration: none !important;
    transition: color var(--th-transition) !important;
}

.single-post .section-post-footer a:hover {
    color: var(--th-gold) !important;
}


/* ==========================================================================
   4. SIDEBAR
   ========================================================================== */
.sidebar .widget {
    background: var(--th-white) !important;
    border-radius: var(--th-radius) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--th-shadow) !important;
    border: 1px solid var(--th-gray-200) !important;
}

.sidebar .widget h3,
.sidebar .widget .widget-title {
    font-family: var(--th-font-ui) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--th-navy) !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--th-gold) !important;
}

.sidebar .widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar .widget ul li {
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--th-gray-100) !important;
    font-family: var(--th-font-ui) !important;
    font-size: 0.85rem !important;
}

.sidebar .widget ul li:last-child {
    border-bottom: none !important;
}

.sidebar .widget ul li a {
    color: var(--th-gray-700) !important;
    text-decoration: none !important;
    transition: color var(--th-transition) !important;
}

.sidebar .widget ul li a:hover {
    color: var(--th-gold) !important;
}

/* Archives widget - limit height and scroll */
.sidebar .widget_archive ul,
.sidebar .widget.archives ul {
    max-height: 280px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--th-gray-300) transparent !important;
}

.sidebar .widget_archive ul::-webkit-scrollbar,
.sidebar .widget.archives ul::-webkit-scrollbar {
    width: 5px !important;
}

.sidebar .widget_archive ul::-webkit-scrollbar-thumb,
.sidebar .widget.archives ul::-webkit-scrollbar-thumb {
    background: var(--th-gray-300) !important;
    border-radius: 3px !important;
}

/* Search widget */
.sidebar .widget_search input[type="text"],
.sidebar .widget_search input[type="search"] {
    font-family: var(--th-font-ui) !important;
    border-radius: 8px !important;
    border: 1px solid var(--th-gray-300) !important;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    transition: border-color var(--th-transition) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sidebar .widget_search input[type="text"]:focus,
.sidebar .widget_search input[type="search"]:focus {
    border-color: var(--th-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(232, 168, 37, 0.15) !important;
}


/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 960px) {
    .posts_group.lm_wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .single-post .post-header h1.entry-title {
        font-size: 2.15rem !important;
    }

    .single-post .section-post-related .section-related-adjustment {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .single-post .section-post-about {
        padding: 24px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .posts_group.lm_wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .posts_group .post-item .image_frame.post-photo-wrapper .image_wrapper,
    .posts_group .post-item .image_frame.post-photo-wrapper .image_wrapper img.wp-post-image {
        height: 200px !important;
    }

    .posts_group .post-item .post-desc-wrapper {
        padding: 20px !important;
    }

    .single-post .post-header h1.entry-title {
        font-size: 1.75rem !important;
        letter-spacing: -0.01em !important;
    }

    .single-post .the_content,
    .single-post .the_content p,
    .single-post .the_content li {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }

    .single-post .the_content > p:first-of-type::first-letter {
        font-size: 2.75em !important;
    }

    .single-post .section-post-related .section-related-adjustment {
        grid-template-columns: 1fr !important;
    }

    .single-post .section-post-related .post-item img,
    .single-post .section-post-related article img {
        height: 160px !important;
    }

    .single-post .section-post-about .author-wrapper,
    .single-post .section-post-about .author_info {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .single-post .post-header .post-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .single-post .section-post-intro-share a {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    /* Sidebar goes full width on mobile */
    .sidebar .widget {
        padding: 20px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .single-post .post-header h1.entry-title {
        font-size: 1.5rem !important;
    }

    .posts_group .post-item .post-title h4.entry-title,
    .posts_group .post-item .post-title .entry-title {
        font-size: 1.1rem !important;
    }

    .posts_group .post-item .post-desc-wrapper {
        padding: 16px !important;
    }
}

/* ==========================================================================
   6. SINGLE POST HERO (JS-injected)
   ========================================================================== */

/* Hero container — extends behind the navigation */
.thbs-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: -200px;       /* Pull up behind the nav/header */
    padding-top: 0;
    min-height: 520px;
    height: 70vh;
    max-height: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0;
    background: #0e1a2f;      /* Fallback color while images load */
}

/* Blurred background — fills the entire hero, covers any gaps */
.thbs-hero-blur {
    position: absolute;
    inset: -30px;             /* Extend past edges to hide blur fringe */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(25px) saturate(1.1);
    transform: scale(1.1);   /* Extra insurance against blur fringe */
    z-index: 0;
}

/* Contained foreground image — shows the entire photo */
.thbs-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
}

/* Dark overlay with stronger gradient at top (nav) and bottom (text) */
.thbs-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.2) 20%,
        rgba(0, 0, 0, 0.05) 40%,
        rgba(26, 39, 68, 0.4) 70%,
        rgba(26, 39, 68, 0.92) 100%
    );
    z-index: 2;
}

/* Content positioned inside hero */
.thbs-hero-content {
    position: relative;
    z-index: 3;
    max-width: 820px;
    width: 100%;
    padding: 0 2rem 3.5rem;
    text-align: center;
}

/* Category badge */
.thbs-hero-cat {
    display: inline-block;
    background: var(--th-gold);
    color: #fff;
    font-family: var(--th-font-ui);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .4rem .85rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Title */
.thbs-hero-title {
    color: #fff !important;
    font-family: var(--th-font-ui) !important;
    font-size: 3.25rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
}

/* Meta row */
.thbs-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: rgba(255,255,255,.85);
    font-family: var(--th-font-ui);
    font-size: .9rem;
    font-weight: 500;
}

.thbs-hero-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.thbs-hero-author {
    font-weight: 600;
    color: #fff;
}

.thbs-hero-dot {
    color: rgba(255,255,255,.4);
}

/* Bounce chevron */
.thbs-hero-chevron {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255,255,255,.5);
    animation: thbs-bounce 2s ease-in-out infinite;
}

@keyframes thbs-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* When hero is active, hide the original header and push content up */
.thbs-has-hero .section-post-header {
    display: none !important;
}

/* Hide BeTheme subheader/breadcrumbs when hero is present */
.thbs-has-hero .subheader {
    display: none !important;
}

/* Remove extra top margin/padding on content area when hero is present */
.thbs-has-hero #Content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.thbs-has-hero article.post {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.thbs-has-hero .content_wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.thbs-has-hero .sections_group {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* The content should have nice breathing room under the hero */
.thbs-has-hero .post-wrapper-content {
    max-width: 780px;
    margin: 0 auto;
    padding-top: 2.5rem !important;
}

/* Hide sidebar on ALL single posts for full-width feel */
.single-post .sidebar {
    display: none !important;
}
.single-post .content_wrapper > .sections_group,
.single-post .content_wrapper > main {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   6b. SINGLE POST — NO HERO FALLBACK (posts without featured image)
   ========================================================================== */

/* Hide post-nav arrows */
.single-post .post-nav {
    display: none !important;
}

/* Clean up the header area */
.single-post .section-post-header {
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 2.5rem 1.5rem 0 !important;
}

/* Style the title consistently */
.single-post .post-header .entry-title {
    font-family: var(--th-font-ui) !important;
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    color: var(--th-heading) !important;
    margin-bottom: 1rem !important;
}

/* Style the meta line (author, categories, tags) */
.single-post .post-header .author_date {
    font-family: var(--th-font-ui) !important;
    font-size: .9rem !important;
    color: #64748b !important;
}
.single-post .post-header .author_date a {
    color: var(--th-blue) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Hide the BeTheme subheader breadcrumb on single posts */
.single-post .subheader {
    display: none !important;
}

/* Content area for non-hero posts */
.single-post .post-wrapper-content {
    max-width: 780px !important;
    margin: 0 auto !important;
    padding-top: 2rem !important;
}

/* Body text styling for ALL single posts */
.single-post .the_content,
.single-post .the_content p {
    font-family: var(--th-font-body, 'Lora', Georgia, serif) !important;
    font-size: 1.15rem !important;
    line-height: 1.85 !important;
    color: #334155 !important;
}

/* Featured image in non-hero posts — make it full-width and clean */
.single-post .single-photo-wrapper {
    max-width: 780px !important;
    margin: 0 auto 2rem !important;
}
.single-post .single-photo-wrapper img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
}

/* When hero IS present, override the non-hero fallback header */
.thbs-has-hero .section-post-header {
    display: none !important;
}

/* Hero responsive */
@media (max-width: 960px) {
    .thbs-hero {
        min-height: 400px;
        height: 55vh;
        margin-top: -150px;
    }
    .thbs-hero-title {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 600px) {
    .thbs-hero {
        min-height: 350px;
        height: 50vh;
        margin-top: -120px;
    }
    .thbs-hero-title {
        font-size: 1.75rem !important;
    }
    .thbs-hero-content {
        padding: 0 1.25rem 2.5rem;
    }
    .thbs-hero-meta {
        flex-wrap: wrap;
        font-size: .8rem;
        gap: .5rem;
    }
}

/* ==========================================================================
   7. RELATED POSTS (single post bottom)
   ========================================================================== */

/* Container */
.section-post-related {
    background: var(--th-bg) !important;
    padding: 3rem 0 3.5rem !important;
    margin-top: 2rem !important;
    border-top: 1px solid #e2e8f0 !important;
}

.section-post-related .section_wrapper {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
}

/* Heading */
.section-post-related .section-related-adjustment h4 {
    font-family: var(--th-font-ui) !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: var(--th-heading) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

/* Reset BeTheme grid on adjustment wrapper */
.section-post-related .section-related-adjustment {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

/* Card grid */
.section-post-related .section-related-ul,
.section-post-related .section-related-ul.col-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.75rem !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Individual card — override BeTheme .column and .col-3 .post-related width */
.section-post-related .post-related,
.section-post-related .col-3 .post-related,
.section-post-related .column.post-related,
.section-post-related .section-related-ul .post-related {
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
}

.section-post-related .post-related:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.1) !important;
}

.section-post-related .post-related .mcb-column-inner {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Card image */
.section-post-related .post-related .single-photo-wrapper,
.section-post-related .post-related .image_frame {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.section-post-related .post-related .image_frame .image_wrapper {
    border-radius: 0 !important;
}

.section-post-related .post-related .single-photo-wrapper img,
.section-post-related .post-related .image_frame img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* No-image placeholder */
.section-post-related .post-related.no-img .single-photo-wrapper,
.section-post-related .post-related.no-img .image_frame {
    width: 100% !important;
    height: 180px !important;
    background: linear-gradient(135deg, #1a2744, #2d4a8a) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.section-post-related .post-related.no-img .image_frame::after {
    content: '' !important;
    width: 50px !important;
    height: 50px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,.25)' stroke-width='1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Date label */
.section-post-related .post-related .date_label {
    font-family: var(--th-font-ui) !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    padding: 1.25rem 1.25rem .5rem !important;
    margin: 0 !important;
    background: none !important;
}

/* Title */
.section-post-related .post-related .desc {
    padding: 0 1.25rem 1.25rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.section-post-related .post-related .desc h4 {
    font-family: var(--th-font-ui) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--th-heading) !important;
    margin: 0 0 .75rem !important;
    padding: 0 !important;
    letter-spacing: -0.01em !important;
}

.section-post-related .post-related .desc h4 a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
}

.section-post-related .post-related .desc h4 a:hover {
    color: var(--th-blue) !important;
}

/* Hide the BeTheme hr divider */
.section-post-related .post-related .desc hr {
    display: none !important;
}

/* Read more button */
.section-post-related .post-related .button,
.section-post-related .post-related a.button {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    font-family: var(--th-font-ui) !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--th-blue) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 1.25rem 1.5rem !important;
    margin: auto 0 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
    transition: color .2s ease !important;
}

.section-post-related .post-related .button:hover,
.section-post-related .post-related a.button:hover {
    color: var(--th-gold) !important;
    background: none !important;
}

/* Hide the button icon BeTheme adds */
.section-post-related .post-related .button .button_icon {
    display: none !important;
}

/* "Comments are closed" notice — clean it up */
.section-post-related + .section .mcb-column-inner .respond-no-comments,
.post-wrapper-content .respond-no-comments,
#comments .comments-closed {
    font-family: var(--th-font-ui) !important;
    font-size: .85rem !important;
    color: #94a3b8 !important;
    text-align: center !important;
    padding: 1rem 0 !important;
}

/* Responsive — related posts */
@media (max-width: 767px) {
    .section-post-related .section-related-ul {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
}

@media (max-width: 960px) and (min-width: 768px) {
    .section-post-related .section-related-ul {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}