/*====================================
            BLOG PAGE
====================================*/

.page-header{

    background:#F4F9FF;

    text-align:center;

    padding:70px 20px;

}

.page-header h1{

    font-size:48px;

    color:#2E3A59;

    margin-bottom:15px;

}

.page-header p{

    max-width:700px;

    margin:auto;

    font-size:18px;

    color:#666;

    line-height:1.8;

}

/*====================================
        BLOG LIBRARY
====================================*/

.blog-library{

    padding:70px 20px;

}

.blog-library .container{

    max-width:1200px;

    margin:auto;

}

#resultsCount{

    font-size:24px;

    color:#2E3A59;

    margin-bottom:35px;

}

/*====================================
        BLOG ROW
====================================*/

.blog-row{

    display:flex;

    align-items:center;

    gap:30px;

    background:#ffffff;

    border-radius:18px;

    padding:25px;

    margin-bottom:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.blog-row:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.blog-thumb{

    width:240px;

    flex-shrink:0;

}

.blog-thumb img{

    width:100%;

    height:170px;

    object-fit:cover;

    border-radius:15px;

    display:block;

}

.blog-details{

    flex:1;

}

.blog-details h2{

    font-size:32px;

    color:#2E3A59;

    margin-bottom:12px;

}

.blog-meta{

    font-size:15px;

    color:#777;

    margin-bottom:15px;

    font-weight:600;

}

.blog-details p{

    color:#666;

    font-size:17px;

    line-height:1.8;

}

.blog-action{

    width:220px;

    text-align:right;

}

.blog-btn{

    display:inline-block;

    background:#4DA8FF;

    color:#fff;

    text-decoration:none;

    padding:15px 28px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.blog-btn:hover{

    background:#2E8BFF;

    transform:translateY(-2px);

}

/*====================================
        EMPTY STATE
====================================*/

.empty-state{

    background:#fff;

    padding:70px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.empty-state h2{

    color:#2E3A59;

    margin-bottom:15px;

}

.empty-state p{

    color:#666;

}

/*====================================
        PAGINATION
====================================*/

#pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:50px;

}

#pagination button{

    padding:12px 18px;

    border:none;

    border-radius:10px;

    background:#EDF5FF;

    cursor:pointer;

    font-weight:700;

    transition:.3s;

}

#pagination button:hover{

    background:#4DA8FF;

    color:#fff;

}

#pagination button.active{

    background:#4DA8FF;

    color:#fff;

}

.page-info{

    font-weight:700;

    color:#2E3A59;

    margin-right:20px;

}

/*====================================
        MOBILE
====================================*/

@media(max-width:900px){

.blog-row{

    flex-direction:column;

    text-align:center;

}

.blog-thumb{

    width:100%;

}

.blog-thumb img{

    height:auto;

}

.blog-action{

    width:100%;

    text-align:center;

    margin-top:15px;

}

.blog-details h2{

    font-size:26px;

}

}
/*====================================
        SINGLE BLOG PAGE
====================================*/

.blog-single{

    padding:70px 20px;

}

.blog-single .container{

    max-width:950px;

    margin:auto;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.blog-featured-image{

    width:100%;

    height:500px;

    object-fit:cover;

    display:block;

}

.article-header{

    padding:45px 60px 25px;

}

.blog-single h1{

    font-size:42px;

    color:#2E3A59;

    line-height:1.3;

    margin-bottom:15px;

}

.blog-meta{

    color:#888;

    font-size:15px;

    margin-bottom:25px;

}

.blog-excerpt{

    font-size:22px;

    color:#555;

    line-height:1.8;

    font-weight:600;

}

.article-divider{

    border:none;

    border-top:1px solid #ececec;

    margin:0;

}

.blog-content{

    padding:50px 60px;

    color:#444;

    font-size:19px;

    line-height:2;

}

.blog-content h2{

    margin-top:40px;

    margin-bottom:20px;

    color:#2E3A59;

}

.blog-content p{

    margin-bottom:28px;

}

.blog-content img{

    width:100%;

    border-radius:16px;

    margin:35px 0;

}

.article-footer{

    padding:0 60px 60px;

}

.blog-btn{

    display:inline-block;

    background:#4DA8FF;

    color:#fff;

    text-decoration:none;

    padding:15px 30px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.blog-btn:hover{

    background:#2F8EE5;

}

/* ========================================
   BLOG — V2 DARK THEME
   SOFT DARK / SOOTHING
======================================== */

[data-theme="dark"] .blog-posts {

    background: var(--background);

}


/* ========================================
   BLOG PAGE HEADER
======================================== */

[data-theme="dark"] .page-header {

    background:
        linear-gradient(
            135deg,
            #182235,
            #1B2B3A
        );

    border-bottom-color: var(--border);

}


[data-theme="dark"] .page-header h1 {

    color: #F3F6FA;

}


[data-theme="dark"] .page-header p {

    color: #B8C3D4;

}


/* ========================================
   BLOG SECTION HEADING
======================================== */

[data-theme="dark"] .blog-posts h2 {

    color: #DCE5F0;

}


/* ========================================
   BLOG CARD
======================================== */

[data-theme="dark"] .blog-card {

    background: #1B2638;

    border-color: #34445C;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);

    color: var(--text);

}


/* ========================================
   BLOG CARD HOVER
======================================== */

[data-theme="dark"] .blog-card:hover {

    background: #202E43;

    border-color: #415570;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.30);

}


/* ========================================
   BLOG CARD TITLE
======================================== */

[data-theme="dark"] .blog-card h3 {

    color: #F3F6FA;

}


/* ========================================
   BLOG META
======================================== */

[data-theme="dark"] .blog-card .blog-meta,
[data-theme="dark"] .blog-card .meta {

    color: #AEBCCE;

}


/* ========================================
   BLOG DESCRIPTION
======================================== */

[data-theme="dark"] .blog-card p {

    color: #B8C3D4;

}


/* ========================================
   BLOG READ BUTTON
======================================== */

[data-theme="dark"] .blog-card .blog-btn {

    background: #5AAFFF;

    color: #FFFFFF;

}


[data-theme="dark"] .blog-card .blog-btn:hover {

    background: #79BCFF;

}


/* ========================================
   BLOG IMAGE AREA
======================================== */

[data-theme="dark"] .blog-card img {

    border-color: #34445C;

}


/* ========================================
   BLOG EMPTY / COMING SOON
======================================== */

[data-theme="dark"] .coming-soon {

    background: #1B2638;

    border-color: #34445C;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);

}


[data-theme="dark"] .coming-soon h2 {

    color: #F3F6FA;

}


[data-theme="dark"] .coming-soon p {

    color: #B8C3D4;

}

/* ========================================
   BLOG CARDS — V2 THEME
======================================== */

#blogLibrary {
    display: flex;
    flex-direction: column;
    gap: 35px;
}


/* ========================================
   BLOG CARD
======================================== */

#blogLibrary .blog-card {

    width: 100%;

    display: grid;

    grid-template-columns: 300px 1fr auto;

    align-items: center;

    gap: 35px;

    padding: 30px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    box-shadow: var(--shadow-card);

    color: var(--text);

    box-sizing: border-box;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


/* ========================================
   CARD HOVER
======================================== */

#blogLibrary .blog-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-hover);

}


/* ========================================
   BLOG IMAGE
======================================== */

#blogLibrary .blog-thumb {

    width: 300px;

    height: 200px;

    overflow: hidden;

    border-radius: var(--radius-small);

    flex-shrink: 0;

}


#blogLibrary .blog-thumb img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* ========================================
   BLOG DETAILS
======================================== */

#blogLibrary .blog-details {

    min-width: 0;

}


#blogLibrary .blog-details h2 {

    margin: 0 0 12px;

    color: var(--heading);

    font-size: 30px;

    line-height: 1.3;

}


#blogLibrary .blog-meta {

    margin-bottom: 18px;

    color: var(--text-muted);

    font-size: 16px;

    font-weight: 600;

}


#blogLibrary .meta-separator {

    margin: 0 5px;

}


#blogLibrary .blog-details p {

    margin: 0;

    color: var(--text-muted);

    font-size: 17px;

    line-height: 1.7;

}


/* ========================================
   BUTTON
======================================== */

#blogLibrary .blog-action {

    flex-shrink: 0;

}


#blogLibrary .blog-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 28px;

    background: var(--primary);

    color: #ffffff !important;

    text-decoration: none;

    border-radius: var(--radius-pill);

    font-size: 17px;

    font-weight: 800;

    white-space: nowrap;

    box-shadow: var(--shadow-small);

    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}


#blogLibrary .blog-btn:hover {

    background: var(--primary-dark);

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: var(--shadow-hover);

}


/* ========================================
   DARK MODE
======================================== */

[data-theme="dark"] #blogLibrary .blog-card {

    background: #18243A;

    border-color: #34445C;

    color: #DCE5F0;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.20);

}


[data-theme="dark"] #blogLibrary .blog-card:hover {

    background: #1C2942;

    border-color: #405572;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.28);

}


[data-theme="dark"] #blogLibrary .blog-details h2 {

    color: #F3F6FA;

}


[data-theme="dark"] #blogLibrary .blog-meta {

    color: #AFC0D6;

}


[data-theme="dark"] #blogLibrary .blog-details p {

    color: #C2CFDF;

}


[data-theme="dark"] #blogLibrary .blog-btn {

    background: #4DA8FF;

    color: #ffffff !important;

}


[data-theme="dark"] #blogLibrary .blog-btn:hover {

    background: #79BCFF;

    color: #111827 !important;

}


/* ========================================
   RESULTS COUNT
======================================== */

#resultsCount {

    color: var(--heading);

    font-weight: 800;

}


/* ========================================
   DARK MODE — RESULTS COUNT
======================================== */

[data-theme="dark"] #resultsCount {

    color: #F3F6FA;

}


/* ========================================
   EMPTY STATE
======================================== */

#blogLibrary .blog-empty-state {

    text-align: center;

    padding: 70px 20px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    color: var(--text);

}


#blogLibrary .blog-empty-state h2 {

    color: var(--heading);

    margin-bottom: 12px;

}


#blogLibrary .blog-empty-state p {

    color: var(--text-muted);

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 900px) {

    #blogLibrary .blog-card {

        grid-template-columns: 220px 1fr;

        gap: 25px;

    }


    #blogLibrary .blog-thumb {

        width: 220px;

        height: 160px;

    }


    #blogLibrary .blog-action {

        grid-column: 1 / -1;

        text-align: center;

    }

}


@media (max-width: 768px) {

    #blogLibrary {

        gap: 25px;

    }


    #blogLibrary .blog-card {

        display: flex;

        flex-direction: column;

        text-align: center;

        padding: 22px;

        gap: 18px;

    }


    #blogLibrary .blog-thumb {

        width: 100%;

        max-width: 300px;

        height: 190px;

    }


    #blogLibrary .blog-details {

        width: 100%;

    }


    #blogLibrary .blog-details h2 {

        font-size: 24px;

    }


    #blogLibrary .blog-details p {

        font-size: 16px;

    }


    #blogLibrary .blog-action {

        width: 100%;

    }


    #blogLibrary .blog-btn {

        width: auto;

        max-width: 100%;

    }

}


@media (max-width: 480px) {

    #blogLibrary .blog-card {

        padding: 18px;

    }


    #blogLibrary .blog-thumb {

        height: 170px;

    }


    #blogLibrary .blog-details h2 {

        font-size: 21px;

    }


    #blogLibrary .blog-meta {

        font-size: 14px;

    }


    #blogLibrary .blog-details p {

        font-size: 15px;

    }


    #blogLibrary .blog-btn {

        width: 100%;

        box-sizing: border-box;

    }

}
/* ========================================
   BLOG PAGE STRIP — COMPACT
   MATCH WORKSHEETS / CATEGORIES
======================================== */

.page-header,
.blog-hero {

    width: 100% !important;

    height: 190px !important;

    min-height: 190px !important;

    max-height: 190px !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    padding: 20px !important;

    margin: 0 !important;

}


.page-header .container,
.blog-hero .container {

    width: 100% !important;

    max-width: 1200px !important;

    margin: 0 auto !important;

}


.page-header h1,
.blog-hero h1 {

    margin: 0 0 8px !important;

    padding: 0 !important;

    font-size: 44px !important;

    line-height: 1.15 !important;

}


.page-header p,
.blog-hero p {

    max-width: 900px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    font-size: 18px !important;

    line-height: 1.5 !important;

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

    .page-header,
    .blog-hero {

        height: 175px !important;

        min-height: 175px !important;

        max-height: 175px !important;

        padding: 15px !important;

    }


    .page-header h1,
    .blog-hero h1 {

        font-size: 32px !important;

    }


    .page-header p,
    .blog-hero p {

        font-size: 16px !important;

        line-height: 1.45 !important;

    }

}


@media (max-width: 480px) {

    .page-header,
    .blog-hero {

        height: 160px !important;

        min-height: 160px !important;

        max-height: 160px !important;

    }


    .page-header h1,
    .blog-hero h1 {

        font-size: 29px !important;

    }


    .page-header p,
    .blog-hero p {

        font-size: 15px !important;

    }

}
/* ========================================
   BLOG POST — V2 FINAL THEME OVERRIDE
======================================== */


/* ========================================
   SINGLE BLOG PAGE
======================================== */

.blog-single {

    background: var(--background);

    color: var(--text);

    transition:
        background-color var(--transition),
        color var(--transition);
}


/* ========================================
   ARTICLE CONTAINER
======================================== */

.blog-single .container {

    background: var(--surface);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


/* ========================================
   ARTICLE TITLE
======================================== */

.blog-single h1 {

    color: var(--heading);

    transition:
        color var(--transition);
}


/* ========================================
   ARTICLE META
======================================== */

.blog-single .blog-meta {

    color: var(--text-muted);

}


/* ========================================
   ARTICLE EXCERPT
======================================== */

.blog-single .blog-excerpt {

    color: var(--text);

}


/* ========================================
   DIVIDER
======================================== */

.blog-single .article-divider {

    border-top-color: var(--border);

}


/* ========================================
   ARTICLE CONTENT
======================================== */

.blog-single .blog-content {

    color: var(--text);

}


/* ========================================
   CONTENT HEADINGS
======================================== */

.blog-single .blog-content h2,
.blog-single .blog-content h3,
.blog-single .blog-content h4 {

    color: var(--heading);

}


/* ========================================
   CONTENT LINKS
======================================== */

.blog-single .blog-content a {

    color: var(--primary);

}


.blog-single .blog-content a:hover {

    color: var(--primary-dark);

}


/* ========================================
   ARTICLE FOOTER
======================================== */

.blog-single .article-footer {

    color: var(--text);

}


/* ========================================
   BLOG BUTTON
======================================== */

.blog-single .blog-btn {

    background: var(--primary);

    color: #ffffff !important;

    box-shadow: var(--shadow-small);

}


.blog-single .blog-btn:hover {

    background: var(--primary-dark);

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: var(--shadow-hover);

}


/* ========================================
   LIGHT MODE
======================================== */

html[data-theme="light"] .blog-single {

    background: var(--background);

}


html[data-theme="light"] .blog-single .container {

    background: var(--surface);

    border-color: var(--border);

}


/* ========================================
   DARK MODE
======================================== */

html[data-theme="dark"] .blog-single {

    background: var(--background);

}


html[data-theme="dark"] .blog-single .container {

    background: var(--surface);

    border-color: var(--border);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.28);

}


html[data-theme="dark"] .blog-single h1 {

    color: var(--heading);

}


html[data-theme="dark"] .blog-single .blog-meta {

    color: var(--text-muted);

}


html[data-theme="dark"] .blog-single .blog-excerpt {

    color: var(--text);

}


html[data-theme="dark"] .blog-single .blog-content {

    color: var(--text);

}


html[data-theme="dark"] .blog-single .blog-content h2,
html[data-theme="dark"] .blog-single .blog-content h3,
html[data-theme="dark"] .blog-single .blog-content h4 {

    color: var(--heading);

}


html[data-theme="dark"] .blog-single .article-divider {

    border-top-color: var(--border);

}


/* ========================================
   BLOG CONTENT IMAGES
======================================== */

.blog-single .blog-content img {

    max-width: 100%;

    height: auto;

    display: block;

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

    .blog-single {

        padding: 45px 15px;

    }


    .blog-single .container {

        border-radius:
            var(--radius-card);

    }


    .blog-single .article-header {

        padding:
            35px 25px 20px;

    }


    .blog-single h1 {

        font-size: 32px;

        line-height: 1.25;

    }


    .blog-single .blog-excerpt {

        font-size: 18px;

        line-height: 1.7;

    }


    .blog-single .blog-content {

        padding:
            35px 25px;

        font-size: 17px;

        line-height: 1.8;

    }


    .blog-single .article-footer {

        padding:
            0 25px 35px;

    }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 480px) {

    .blog-single {

        padding:
            35px 12px;

    }


    .blog-single .article-header {

        padding:
            30px 20px 18px;

    }


    .blog-single h1 {

        font-size: 28px;

    }


    .blog-single .blog-content {

        padding:
            30px 20px;

        font-size: 16px;

    }


    .blog-single .article-footer {

        padding:
            0 20px 30px;

    }

}
/* ========================================
   RELATED BLOGS — V2 THEME FIX
======================================== */


/* LIGHT MODE */

html[data-theme="light"] .blog-row {

    background: var(--surface);

    border: 1px solid var(--border);

    color: var(--text);

    box-shadow: var(--shadow-card);

}


html[data-theme="light"] .blog-row:hover {

    box-shadow: var(--shadow-hover);

}


/* RELATED BLOG TITLE */

html[data-theme="light"] .blog-row .blog-details h2 {

    color: var(--heading);

}


/* RELATED BLOG META */

html[data-theme="light"] .blog-row .blog-meta {

    color: var(--text-muted);

}


/* RELATED BLOG DESCRIPTION */

html[data-theme="light"] .blog-row .blog-details p {

    color: var(--text-muted);

}


/* ========================================
   DARK MODE
======================================== */

html[data-theme="dark"] .blog-row {

    background: var(--surface);

    border: 1px solid var(--border);

    color: var(--text);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);

}


html[data-theme="dark"] .blog-row:hover {

    background: var(--surface);

    border-color: var(--border);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.30);

}


/* RELATED BLOG TITLE */

html[data-theme="dark"] .blog-row .blog-details h2 {

    color: var(--heading);

}


/* RELATED BLOG META */

html[data-theme="dark"] .blog-row .blog-meta {

    color: var(--text-muted);

}


/* RELATED BLOG DESCRIPTION */

html[data-theme="dark"] .blog-row .blog-details p {

    color: var(--text-muted);

}


/* RELATED BLOG BUTTON */

html[data-theme="dark"] .blog-row .blog-btn {

    background: var(--primary);

    color: #ffffff !important;

}


html[data-theme="dark"] .blog-row .blog-btn:hover {

    background: var(--primary-dark);

    color: #ffffff !important;

}


/* ========================================
   RELATED BLOG IMAGE
======================================== */

.blog-row .blog-thumb {

    background: var(--surface);

}


.blog-row .blog-thumb img {

    display: block;

}


/* ========================================
   TRANSITION
======================================== */

.blog-row {

    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);

}
/* ========================================
   BLOG CATEGORY FILTERS
======================================== */

.blog-category-section {
    width: 100%;
    padding: 25px 20px;
    box-sizing: border-box;
}

.blog-category-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-category-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* CATEGORY BUTTON */

.blog-category-btn {
    appearance: none;
    -webkit-appearance: none;

    border: 1px solid var(--border);

    background: var(--surface);

    color: var(--text);

    padding: 10px 20px;

    border-radius: var(--radius-pill);

    font-family: "Nunito", sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.2;

    cursor: pointer;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


/* HOVER */

.blog-category-btn:hover {

    background: var(--primary);

    color: #ffffff;

    border-color: var(--primary);

    transform: translateY(-2px);

    box-shadow: var(--shadow-small);
}


/* ACTIVE */

.blog-category-btn.active {

    background: var(--primary);

    color: #ffffff;

    border-color: var(--primary);

    box-shadow: var(--shadow-small);
}


/* ACTIVE HOVER */

.blog-category-btn.active:hover {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

    color: #ffffff;

}


/* ========================================
   DARK MODE
======================================== */

html[data-theme="dark"] .blog-category-btn {

    background: #1B2638;

    color: #DCE5F0;

    border-color: #34445C;

}


html[data-theme="dark"] .blog-category-btn:hover {

    background: var(--primary);

    color: #ffffff;

    border-color: var(--primary);

}


html[data-theme="dark"] .blog-category-btn.active {

    background: var(--primary);

    color: #ffffff;

    border-color: var(--primary);

}


/* ========================================
   MOBILE — NO SCROLLBAR
======================================== */

@media (max-width: 768px) {

    .blog-category-section {
        padding: 20px 15px;
    }

    .blog-category-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        overflow: visible;
    }

    .blog-category-btn {
        flex-shrink: 1;
        padding: 9px 16px;
        font-size: 14px;
    }

}