/* ============================================================
   Blog pages - builds on the theme (style.css) variables
   ============================================================ */

/* Hero / breadcrumb */
.swt-blog-hero { padding: 70px 0 60px; background: linear-gradient(120deg, var(--title-color) 0%, #0B3E8F 60%, var(--theme-color) 100%); }
.swt-blog-hero .breadcumb-title { font-size: 42px; line-height: 1.25; text-transform: none; }
.swt-blog-hero .swt-blog-title { font-size: 38px; max-width: 980px; margin-left: auto; margin-right: auto; }
.swt-blog-hero .breadcumb-menu a, .swt-blog-hero .breadcumb-menu li { font-size: 16px; }
.swt-blog-hero .breadcumb-menu li:not(:last-child):after { content: "/"; font-family: var(--body-font); font-weight: 400; opacity: .6; }
.swt-blog-hero .breadcumb-menu li:last-child { opacity: .8; }
.swt-blog-intro { color: rgba(255, 255, 255, .82); max-width: 720px; margin: 18px auto 0; font-size: 17px; }
@media (max-width: 767px) {
    .swt-blog-hero { padding: 45px 0 40px; }
    .swt-blog-hero .breadcumb-title, .swt-blog-hero .swt-blog-title { font-size: 27px; }
}

.swt-blog-section { --section-space: 80px; }
@media (max-width: 991px) { .swt-blog-section { --section-space: 50px; } }

/* Listing cards */
.swt-blog-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.swt-blog-card:hover { box-shadow: 0 18px 40px rgba(10, 36, 75, .10); transform: translateY(-4px); }
.swt-blog-card .blog-img, .swt-blog-card .blog-img img { border-radius: 0; }
.swt-blog-card .blog-img img { aspect-ratio: 3 / 2; object-fit: cover; height: auto; }
.swt-blog-card:hover .blog-img img { transform: scale(1.05); }
.swt-blog-card .blog-content { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.swt-blog-card .blog-tags { margin-bottom: 14px; }
.swt-blog-card .blog-tags a { color: var(--theme-color); }
.swt-blog-card .blog-meta { margin-bottom: 10px; }
.swt-blog-card .blog-meta span { font-size: 13px; }
.swt-blog-card .box-title { font-size: 21px; line-height: 1.4; margin-bottom: 10px; }
.swt-blog-card .box-title a { color: var(--title-color); }
.swt-blog-card .blog-card_text { font-size: 15px; margin-bottom: 18px; }
.swt-read-more { margin-top: auto; font-weight: 600; color: var(--theme-color); display: inline-flex; align-items: center; gap: 8px; }
.swt-read-more i { transition: transform .3s; }
.swt-read-more:hover i { transform: translateX(4px); }
.swt-blog-noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--theme-color), var(--theme-color2)); color: #fff; font-size: 64px; font-weight: 700; font-family: var(--title-font); }
.swt-blog-empty { background: var(--smoke-color); border-radius: 20px; padding: 50px 30px; text-align: center; }

/* Single blog */
.swt-preview-bar { background: #fff4d6; color: #7a4b00; text-align: center; padding: 10px 15px; font-size: 14px; }
.swt-blog-single { margin-bottom: 30px; }
.swt-blog-single .blog-meta { margin-bottom: 22px; }
.swt-blog-single .blog-img { margin-bottom: 30px; border-radius: 20px; }
.swt-blog-single .blog-img img { height: auto; }

.blog-toc { background: var(--smoke-color); border: 1px solid #e3e8f5; border-radius: 14px; padding: 18px 24px; margin-bottom: 30px; }
.blog-toc summary { font-family: var(--title-font); font-weight: 700; font-size: 18px; color: var(--title-color); cursor: pointer; }
.blog-toc ol { margin: 14px 0 0; padding-left: 0; counter-reset: toc; }
.blog-toc li { list-style: none; }
.blog-toc li.toc-h2 { counter-increment: toc; }
.blog-toc li.toc-h2:before { content: counter(toc) ". "; color: var(--theme-color); font-weight: 600; }
.blog-toc li { margin: 6px 0; }
.blog-toc li.toc-h3 { margin-left: 22px; font-size: 15px; }
.blog-toc li.toc-h3:before { content: "– "; color: var(--theme-color); }
.blog-toc a { color: var(--body-color); }
.blog-toc a:hover { color: var(--theme-color); }

.blog-details-content { font-size: 17px; line-height: 1.8; color: #3d4250; overflow-wrap: break-word; }
.blog-details-content > *:first-child { margin-top: 0; }
.blog-details-content h2, .blog-details-content h3, .blog-details-content h4,
.blog-details-content h5, .blog-details-content h6 { color: var(--title-color); margin: 1.6em 0 .6em; line-height: 1.35; scroll-margin-top: 110px; }
.blog-details-content h2 { font-size: 30px; }
.blog-details-content h3 { font-size: 24px; }
.blog-details-content h4 { font-size: 20px; }
.blog-details-content p { margin-bottom: 1.2em; }
.blog-details-content a { color: var(--theme-color); text-decoration: underline; text-underline-offset: 3px; }
.blog-details-content ul, .blog-details-content ol { padding-left: 24px; margin-bottom: 1.3em; }
.blog-details-content ul li { list-style: disc; }
.blog-details-content ol li { list-style: decimal; }
.blog-details-content li { margin-bottom: .45em; }
.blog-details-content img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-details-content figure { margin: 1.6em 0; }
.blog-details-content figure.image { display: table; }
.blog-details-content figcaption { font-size: 14px; color: var(--body-color); text-align: center; margin-top: 8px; }
.blog-details-content blockquote { border-left: 4px solid var(--theme-color); background: var(--smoke-color); padding: 20px 26px; margin: 1.6em 0; border-radius: 0 12px 12px 0; font-style: italic; color: var(--title-color); }
.blog-details-content blockquote p:last-child { margin-bottom: 0; }
.blog-details-content table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; }
.blog-details-content .swt-table-wrap { overflow-x: auto; margin: 1.5em 0; }
.blog-details-content th, .blog-details-content td { border: 1px solid #e3e8f5; padding: 10px 14px; text-align: left; }
.blog-details-content th { background: var(--smoke-color); color: var(--title-color); font-weight: 600; }
.blog-details-content iframe, .blog-details-content video { max-width: 100%; border-radius: 12px; }
.blog-details-content iframe[src*="youtube"], .blog-details-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.blog-details-content hr { margin: 2em 0; border-color: #e3e8f5; opacity: 1; }
.blog-details-content code { background: #eef2fb; color: #c7254e; padding: 2px 6px; border-radius: 5px; font-size: .88em; }
.blog-details-content pre { position: relative; background: #0b1422; color: #e6edf3; padding: 20px; border-radius: 12px; overflow-x: auto; font-size: 14px; line-height: 1.6; margin: 1.5em 0; }
.blog-details-content pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.blog-details-content pre[class*="language-"] { margin: 1.5em 0; border-radius: 12px; }
.code-copy { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 6px; font-size: 12px; padding: 4px 10px; opacity: 0; transition: opacity .2s; }
.blog-details-content pre:hover .code-copy { opacity: 1; }
.blog-details-content .mce-accordion summary { font-weight: 600; cursor: pointer; color: var(--title-color); }

.swt-blog-gallery, .swt-blog-faq { margin-top: 40px; }
.swt-blog-gallery h2, .swt-blog-faq h2 { color: var(--title-color); margin-bottom: 18px; }
.swt-blog-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; transition: transform .3s, opacity .3s; }
.swt-blog-gallery a:hover img { opacity: .85; transform: scale(1.02); }
.swt-blog-faq .accordion-item { border: 1px solid #e3e8f5; border-radius: 12px !important; margin-bottom: 12px; overflow: hidden; }
.swt-blog-faq .accordion-button { font-weight: 600; color: var(--title-color); font-size: 17px; box-shadow: none; }
.swt-blog-faq .accordion-button:not(.collapsed) { background: var(--smoke-color); color: var(--theme-color); }
.swt-blog-faq .accordion-body { font-size: 16px; line-height: 1.7; }

.swt-blog-single .share-links { margin-top: 40px; padding-top: 25px; border-top: 1px solid #e3e8f5; }
.swt-blog-single .share-links-title { font-weight: 600; color: var(--title-color); margin-right: 10px; }
.swt-blog-single .share-links .tagcloud { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.swt-share { display: inline-flex; gap: 8px; }

.swt-post-nav { border-top: 1px solid #e3e8f5; border-bottom: 1px solid #e3e8f5; padding: 22px 0; margin-bottom: 50px; }
.swt-post-nav a { display: block; color: var(--title-color); font-weight: 600; font-family: var(--title-font); line-height: 1.4; }
.swt-post-nav a span { display: block; font-size: 13px; color: var(--theme-color); font-weight: 500; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.swt-post-nav a:hover { color: var(--theme-color); }
.swt-related h2 { color: var(--title-color); }

/* Sidebar */
.swt-blog-sidebar { position: sticky; top: 100px; }
@media (max-width: 991px) { .swt-blog-sidebar { position: static; margin-top: 50px; } }
.swt-blog-sidebar .search-form { position: relative; }
.swt-blog-sidebar .search-form input { width: 100%; height: 56px; border: 1px solid #e3e8f5; border-radius: 30px; padding: 0 60px 0 24px; background: #fff; }
.swt-blog-sidebar .search-form button { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--theme-color); color: #fff; }
.swt-blog-sidebar .widget_categories ul { padding: 0; margin: 0; }
.swt-blog-sidebar .widget_categories li a.active { color: var(--theme-color); font-weight: 600; }
.swt-blog-sidebar .recent-post .post-title { font-size: 16px; line-height: 1.4; }
.swt-blog-sidebar .recent-post .media-img img { width: 80px; height: 80px; object-fit: cover; }
.swt-blog-cta { background: linear-gradient(135deg, var(--title-color), var(--theme-color)); color: #fff; }
.swt-blog-cta .widget_title { color: #fff; }
.swt-blog-cta .widget_title:before, .swt-blog-cta .widget_title:after { background-color: #fff; }
.swt-blog-cta p { color: rgba(255, 255, 255, .85); }
.swt-blog-cta .th-btn { background: #fff; color: var(--title-color); }

.th-pagination span { cursor: default; }
.blog-details-content blockquote:before, .blog-details-content blockquote:after { display: none; }
.swt-blog-faq .accordion-button { padding: 16px 20px; background: #fff; width: 100%; text-align: left; border: 0; }
.swt-blog-faq .accordion-body { padding: 4px 20px 18px; }
.swt-blog-faq .accordion-header { margin: 0; }