/**
 * Blog Page - V2 Theme Overrides
 * Fortune Academy
 */

/* ============================
   Category Filter
   ============================ */
.blog-category-filter {
    max-width: 300px;
}

.blog-category-filter .form-select {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 15px;
    color: #333;
    transition: border-color 0.3s ease;
}

.blog-category-filter .form-select:focus {
    border-color: #173C97;
    box-shadow: 0 0 0 0.2rem rgba(23, 60, 151, 0.15);
}

/* ============================
   Industry Badge
   ============================ */
.entry-content .industry-badge {
    display: inline-block;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    margin-bottom: 10px;
    color: #ffffff;
    background-color: #173C97;
}

/* ============================
   Blog Post Card Enhancements
   ============================ */
.blog-archive .post {
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
}

.blog-archive .post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.blog-archive .post .feature-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-archive .post:hover .feature-image img {
    transform: scale(1.05);
}

.blog-archive .post .feature-image {
    overflow: hidden;
}

.blog-archive .post .entry-content {
    padding: 20px;
}

.blog-archive .post .entry-content h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-archive .post .entry-content h3 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-archive .post .entry-content h3 a:hover {
    color: #173C97;
}

.blog-archive .post .entry-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-archive .post .entry-meta {
    margin-bottom: 10px;
    font-size: 13px;
    color: #999;
}

.blog-archive .post .entry-meta a {
    color: #999;
    text-decoration: none;
}

.blog-archive .post .entry-meta .byline::after {
    content: '|';
    margin: 0 8px;
    color: #ccc;
}

.blog-archive .post .button-text {
    font-size: 13px;
    font-weight: 700;
    color: #173C97;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.blog-archive .post .button-text:hover {
    color: #ff6f00;
}

/* ============================
   Single Post Enhancements
   ============================ */
.single-post-section {
    padding: 60px 0 80px;
    background: #f8f9fa;
}

.single-content-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.single-content-wrap p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.single-content-wrap .lead {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    line-height: 1.7;
}

.single-content-wrap h3 {
    font-size: 24px;
    font-weight: 700;
    color: #173C97;
    margin: 35px 0 15px;
}

.single-content-wrap h4 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 25px 0 12px;
}

.single-content-wrap ul,
.single-content-wrap ol {
    margin: 15px 0 20px;
    padding-left: 25px;
}

.single-content-wrap ul li,
.single-content-wrap ol li {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 8px;
}

.single-content-wrap blockquote {
    border-left: 4px solid #173C97;
    background: #f8f9fc;
    margin: 25px 0;
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
}

.single-content-wrap blockquote p {
    font-style: italic;
    font-size: 17px;
    color: #444;
    margin-bottom: 0;
}

.single-content-wrap img {
    max-width: 100%;
    /* CKEditor content images carry inline fixed dimensions
       (e.g. style="height:467px; width:800px"). max-width:100% caps the
       width on mobile, but the inline pixel height would otherwise stick,
       breaking the aspect ratio (stretched images). !important lets the
       stylesheet beat the inline height so the ratio is preserved. */
    height: auto !important;
    border-radius: 8px;
}

/* Wide content tables (e.g. the salary table in some posts carries an
   inline width:712px) overflow on mobile. Let them scroll horizontally
   instead of distorting the page width. */
.single-content-wrap table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Meta / Tags */
.meta-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 20px 30px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.tag-links a {
    display: inline-block;
    padding: 6px 16px;
    background: #f0f2f5;
    color: #173C97;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.tag-links a:hover {
    background: #173C97;
    color: #fff;
}

/* ============================
   Sidebar Enhancements
   ============================ */
.blog-archive .sidebar,
.single-post-section .sidebar {
    position: sticky;
    top: 100px;
}

.sidebar .widget {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.sidebar .widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #173C97;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #173C97;
}

/* Recent/Related Posts Widget */
.widget-post-thumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-post-thumb ul li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.widget-post-thumb ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.widget-post-thumb .post-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    margin-right: 15px;
    border-radius: 6px;
    overflow: hidden;
}

.widget-post-thumb .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.widget-post-thumb .post-content h5 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.widget-post-thumb .post-content h5 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.widget-post-thumb .post-content h5 a:hover {
    color: #173C97;
}

.widget-post-thumb .post-content .entry-meta {
    font-size: 12px;
}

.widget-post-thumb .post-content .entry-meta a {
    color: #999;
    text-decoration: none;
}

/* Social Share Widget */
.widget_social .social-icon-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.widget_social .social-icon {
    flex: 1 0 calc(50% - 5px);
}

.widget_social .social-icon a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.widget_social .social-icon a:hover {
    opacity: 0.85;
}

.widget_social .social-icon a i {
    margin-right: 8px;
    font-size: 15px;
}

.social-facebook a { background: #3b5998; }
.social-pinterest a { background: #bd081c; }
.social-whatsapp a { background: #25d366; }
.social-linkedin a { background: #0077b5; }
.social-twitter a { background: #1da1f2; }
.social-google a { background: #dd4b39; }

/* ============================
   Inner Banner - Blog Detail
   ============================ */
.blog-detail-page .inner-banner-content .entry-meta {
    margin-top: 10px;
}

.blog-detail-page .inner-banner-content .entry-meta a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.blog-detail-page .inner-banner-content .entry-meta .byline::after {
    content: '|';
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.5);
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 991px) {
    .blog-archive .sidebar,
    .single-post-section .sidebar {
        position: static;
        margin-top: 40px;
    }

    .single-content-wrap {
        padding: 30px;
    }

    .single-content-wrap h3 {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .single-post-section {
        padding: 40px 0 50px;
    }

    .single-content-wrap {
        padding: 25px 20px;
    }

    .single-content-wrap p {
        font-size: 15px;
    }

    .single-content-wrap h3 {
        font-size: 20px;
    }

    .single-content-wrap h4 {
        font-size: 18px;
    }

    .blog-archive .post .entry-content {
        padding: 15px;
    }

    .blog-archive .post .entry-content h3 {
        font-size: 16px;
    }

    .widget_social .social-icon {
        flex: 1 0 100%;
    }
}