/*
=========================================================
MODERN BLOG v2
Designed for Astra Child Theme
=========================================================
*/

/*=========================================================
RESET ASTRA
=========================================================*/

body.single-post{
    background:#f5f7fb;
}

.single-post .site{
    overflow-x:hidden;
}

.single-post .site-content{
    background:#f5f7fb;
}

.single-post .ast-container{
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
    display:block;
}

.single-post #primary{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

.single-post #secondary{
    display:none;
}

.single-post .content-area{
    width:100%;
    margin:0;
    padding:0;
}

.single-post .site-main{
    width:100%;
    margin:0;
    padding:0;
}

.single-post article{
    margin:0;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
}

.single-post .entry-header{
    display:none;
}

.single-post .entry-content{
    margin:0;
    padding:0;
}

.single-post .ast-separate-container #primary,
.single-post .ast-separate-container .ast-container{
    background:transparent;
}

.single-post .ast-separate-container .ast-article-post,
.single-post .ast-separate-container .ast-article-single{
    padding:0;
}

/*=========================================================
VARIABLES
=========================================================*/

:root{

    --blog-bg:#f5f7fb;

    --surface:#ffffff;

    --text:#1f2937;

    --muted:#6b7280;

    --primary:#2563eb;

    --primary-light:#dbeafe;

    --border:#e5e7eb;

    --radius:24px;

    --container:1320px;

    --content:780px;

    --sidebar:300px;

    --shadow:
        0 20px 45px rgba(15,23,42,.08);

}

/*=========================================================
BASE
=========================================================*/

html{
    scroll-behavior:smooth;
}

body{
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    color:inherit;
}

/*=========================================================
MAIN WRAPPER
=========================================================*/

.modern-blog{

    width:100%;

    margin:0;

    padding:0;

}

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

.blog-container{

    width:min(1320px,calc(100% - 48px));

    margin:0 auto;

}
/*=========================================================
GRID
=========================================================*/

.blog-grid{

    display:grid;

    grid-template-columns:minmax(0,1fr) 300px;

    gap:38px;

    align-items:start;

    margin-top:40px;
    margin-bottom:40px;

}



/*=========================================================
MAIN
=========================================================*/
.blog-main{

    background:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:

        0 10px 30px rgba(0,0,0,.05);

}
/*.blog-main{

    min-width:0;

}*/

/*=========================================================
SIDEBAR
=========================================================*/

.blog-sidebar{

   width: 100%;
}

/*=========================================================
SPACING
=========================================================*/

.blog-main>*:first-child{

    margin-top:0;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:1150px){

    .blog-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .blog-sidebar{

        order:2;

    }

}

@media (max-width:768px){


        .blog-main{
            width:100%;
            max-width:100%;
            margin:0 auto;
        }

        .modern-article{
            width:100%;
            max-width:100%;
             margin:0;
        }

        .modern-article-content{
            width:100%;
            max-width:100%;
        }

}

@media (max-width:480px){

     .blog-main{
            width:100%;
            max-width:100%;
            margin:0 auto;
        }

        .modern-article{
            width:100%;
            max-width:100%;
        }

        .modern-article-content{
            width:100%;
            max-width:100%;
        }


}

/*=========================================================
HERO
=========================================================*/

.blog-hero{

    position:relative;

    width:100%;

    max-width:var(--container);

    height:560px;

    margin:40px auto 0;

    border-radius:var(--radius);

    overflow:hidden;

    background:#111827;

    box-shadow:var(--shadow);

    display:flex;

    align-items:flex-end;

}

.blog-hero-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.blog-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.03);

}

.blog-hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(15,23,42,.88) 0%,

        rgba(15,23,42,.60) 35%,

        rgba(15,23,42,.20) 70%,

        rgba(15,23,42,.05) 100%

    );

    z-index:1;

}

.blog-hero-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:900px;

    padding:60px;

    color:#fff;

}

/*=========================================================
CATEGORY
=========================================================*/

.blog-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:22px;

    border-radius:999px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

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

.blog-title{

    margin:0;

    color:#fff;

    font-size:clamp(2.8rem,5vw,4.6rem);

    line-height:1.05;

    font-weight:800;

    text-wrap:balance;

}

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

.blog-excerpt{

    margin:26px 0 0;

    max-width:760px;

    color:rgba(255,255,255,.92);

    font-size:1.18rem;

    line-height:1.75;

}

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

.blog-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    margin-top:30px;

    color:rgba(255,255,255,.88);

    font-size:.95rem;

}

.blog-divider{

    opacity:.45;

}

.blog-meta time{

    white-space:nowrap;

}

/*=========================================================
NO FEATURED IMAGE
=========================================================*/

.blog-hero:not(:has(img)){

    background:

    linear-gradient(

        135deg,

        #2563eb,

        #1d4ed8,

        #1e293b

    );

}

/*=========================================================
TABLET
=========================================================*/

@media (max-width:992px){

    .blog-hero{

        height:500px;

    }

    .blog-hero-content{

        padding:42px;

    }

    .blog-title{

        font-size:3rem;

    }

}

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

@media (max-width:768px){

    .blog-hero{

        height:420px;

        margin-top:20px;

        border-radius:18px;

    }

    .blog-hero-content{

        padding:28px;

    }

    .blog-title{

        font-size:2.2rem;

    }

    .blog-excerpt{

        font-size:1rem;

    }

    .blog-meta{

        gap:8px;

        font-size:.88rem;

    }

}

@media (max-width:480px){

    .blog-hero{

        height:360px;

    }

    .blog-title{

        font-size:1.9rem;

    }

    .blog-category{

        padding:6px 14px;

        font-size:.72rem;

    }

}

/*=========================================================
SIDEBAR
=========================================================*/

.blog-sidebar{
    width:300px;
    min-width:300px;
    align-self:start;
}

.blog-sidebar-inner{
     position:sticky;
    top:110px;
    display:block;
}

.blog-sidebar>*{

    width:100%;

}

/*=========================================================
TOC WRAPPER
=========================================================*/

.modern-toc{

      position:static;
      margin-bottom: 20px;


}

/*=========================================================
TOC CARD
=========================================================*/

.modern-toc-card{


    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:20px;

    padding:24px;

    box-shadow:

        0 12px 35px rgba(0,0,0,.06);

   

}

.modern-toc-heading{

    margin:0 0 20px;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.10em;

    color:#6b7280;

}

/*=========================================================
REMOVE EZTOC DEFAULT STYLE
=========================================================*/

.modern-toc #ez-toc-container{

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    padding:0 !important;

    margin:0 !important;

}

.modern-toc .ez-toc-title{

    display:none !important;

}

.modern-toc nav{

    max-height:70vh;

    overflow:auto;

}
.modern-toc ul{

    margin:0;

    padding:0;

    list-style:none;

}

.modern-toc li{

    margin:0;

}


.modern-toc li+li{

    margin-top:3px;

}

/*=========================================================
TOC LINKS
=========================================================*/

.modern-toc a{

    display:block;

    padding:8px 0;

    color:#6b7280;

    text-decoration:none;

    transition:.25s;

    border-left:2px solid transparent;

    padding-left:14px;

}

.modern-toc a:hover{

    color:#111827;

    border-left-color:#2563eb;

}

.modern-toc a.active{

    color:#2563eb;

    border-left-color:#2563eb;

    font-weight:700;

}


/*=========================================================
NESTED LISTS
=========================================================*/

.modern-toc ul ul{

    margin-top:4px;

    padding-left:18px;

}

.modern-toc ul ul a{

    font-size:.90rem;

}

/*=========================================================
SCROLLBAR
=========================================================*/

.modern-toc nav{

    max-height:70vh;

    overflow:auto;

    padding-right:6px;

}

.modern-toc nav::-webkit-scrollbar{

    width:6px;

}

.modern-toc nav::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:999px;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1150px){

    .modern-toc{

        position:relative;

        top:auto;

    }

}

@media(max-width:768px){

    .modern-toc-card{

        padding:22px;

    }

}

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

.modern-article{

    width:100%;

}

.modern-article-content{

    font-size:1.12rem;

    line-height:1.9;

    color:var(--text);

    overflow-wrap:anywhere;

}

.modern-article-content>*:first-child{

    margin-top:0;

}

.modern-article-content>*:last-child{

    margin-bottom:0;

}

/*=========================================================
PARAGRAPHS
=========================================================*/

.modern-article-content p{

    margin:0 0 1.8rem;

    text-wrap:pretty;

}

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

.modern-article-content h2{

    margin:4rem 0 1.4rem;

    font-size:2.35rem;

    line-height:1.15;

    font-weight:800;

    color:#111827;

    scroll-margin-top:130px;

}

.modern-article-content h3{

    margin:3rem 0 1rem;

    font-size:1.8rem;

    line-height:1.25;

    font-weight:700;

}

.modern-article-content h4{

    margin:2.5rem 0 .8rem;

    font-size:1.4rem;

    font-weight:700;

}

.modern-article-content h5{

    margin:2rem 0 .7rem;

    font-size:1.15rem;

    font-weight:700;

}

.modern-article-content h6{

    margin:2rem 0 .6rem;

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:.05em;

}

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

.modern-article-content a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.modern-article-content a:hover{

    text-decoration:underline;

}

/*=========================================================
LISTS
=========================================================*/

.modern-article-content ul,

.modern-article-content ol{

    margin:0 0 2rem 1.5rem;

}

.modern-article-content li{

    margin-bottom:.75rem;

}

.modern-article-content li::marker{

    color:var(--primary);

}

/*=========================================================
IMAGES
=========================================================*/

.modern-article-content img{

    width:100%;

    border-radius:18px;

    margin:2.5rem 0;

    box-shadow:var(--shadow);

}

.modern-article-content figure{

    margin:2.5rem 0;

}

.modern-article-content figcaption{

    margin-top:.9rem;

    text-align:center;

    color:var(--muted);

    font-size:.92rem;

}

/*=========================================================
BLOCKQUOTE
=========================================================*/

.modern-article-content blockquote{

    margin:3rem 0;

    padding:2rem;

    border-left:5px solid var(--primary);

    background:#f8fafc;

    border-radius:18px;

    font-size:1.15rem;

    font-style:italic;

}

.modern-article-content blockquote p:last-child{

    margin-bottom:0;

}

/*=========================================================
TABLES
=========================================================*/

.modern-article-content table{

    width:100%;

    margin:2.5rem 0;

    border-collapse:collapse;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

    box-shadow:var(--shadow);

}

.modern-article-content th{

    background:#111827;

    color:#fff;

    padding:16px;

    text-align:left;

}

.modern-article-content td{

    padding:16px;

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

}

.modern-article-content tr:nth-child(even){

    background:#f8fafc;

}

/*=========================================================
CODE
=========================================================*/

.modern-article-content pre{

    margin:2.5rem 0;

    padding:24px;

    overflow:auto;

    border-radius:18px;

    background:#111827;

    color:#fff;

    white-space:pre-wrap;

}

.modern-article-content code{

    font-family:Consolas,Monaco,monospace;

}

.modern-article-content :not(pre)>code{

    padding:.2rem .45rem;

    border-radius:6px;

    background:#eef2ff;

    color:#1e3a8a;

}

/*=========================================================
GUTENBERG
=========================================================*/

.wp-block-image,
.wp-block-gallery,
.wp-block-columns,
.wp-block-cover,
.wp-block-table,
.wp-block-media-text{

    margin:2.5rem 0;

}

.wp-block-separator{

    width:120px;

    margin:4rem auto;

    border:none;

    border-top:2px solid var(--border);

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:768px){

    .modern-article-content{

        font-size:1.05rem;

    }

    .modern-article-content h2{

        font-size:2rem;

    }

    .modern-article-content h3{

        font-size:1.6rem;

    }

    .modern-article-content h4{

        font-size:1.3rem;

    }

}

/*=========================================================
CALLOUTS
=========================================================*/

.modern-callout{

    display:flex;

    gap:20px;

    align-items:flex-start;

    margin:2.5rem 0;

    padding:24px;

    border-radius:20px;

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

    background:#fff;

    box-shadow:0 10px 25px rgba(15,23,42,.05);

}

.modern-callout-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    font-weight:700;

}

.modern-callout-content{

    flex:1;

}

.modern-callout-content>*:last-child{

    margin-bottom:0;

}

.modern-callout.info .modern-callout-icon{

    background:#dbeafe;

    color:#2563eb;

}

.modern-callout.success .modern-callout-icon{

    background:#dcfce7;

    color:#15803d;

}

.modern-callout.warning .modern-callout-icon{

    background:#fef3c7;

    color:#b45309;

}

.modern-callout.danger .modern-callout-icon{

    background:#fee2e2;

    color:#dc2626;

}

/*=========================================================
FAQ
=========================================================*/

.modern-faq{

    margin:3rem 0;

}

.modern-faq details{

    margin-bottom:18px;

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

    border-radius:16px;

    overflow:hidden;

    background:#fff;

}

.modern-faq summary{

    cursor:pointer;

    list-style:none;

    padding:22px;

    font-weight:700;

    position:relative;

}

.modern-faq summary::-webkit-details-marker{

    display:none;

}

.modern-faq details[open] summary{

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

}

.modern-faq details>div{

    padding:22px;

}

/*=========================================================
VIDEOS
=========================================================*/

.modern-article iframe{

    width:100%;

    aspect-ratio:16/9;

    border:0;

    border-radius:18px;

    margin:2.5rem 0;

    box-shadow:var(--shadow);

}

.wp-block-embed{

    margin:2.5rem 0;

}

/*=========================================================
AUTHOR BOX
=========================================================*/

.modern-author{

    display:flex;

    gap:24px;

    align-items:center;

    margin-top:5rem;

    padding:32px;

    border-radius:22px;

    background:#fff;

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

    box-shadow:var(--shadow);

}

.modern-author-avatar img{

    width:90px;

    height:90px;

    border-radius:50%;

    object-fit:cover;

}

.modern-author-content{

    flex:1;

}

.modern-author-content h3{

    margin:0 0 .5rem;

}

.modern-author-content p{

    margin:0;

    color:var(--muted);

}

/*=========================================================
RELATED POSTS
=========================================================*/

.related-posts{

    margin-top:6rem;

}

.related-posts-title{

    margin-bottom:2rem;

}

.related-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.related-card{

    overflow:hidden;

    border-radius:20px;

    background:#fff;

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

    box-shadow:var(--shadow);

    transition:.25s ease;

}

.related-card:hover{

    transform:translateY(-6px);

}

.related-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.related-card-content{

    padding:24px;

}

.related-card-content h3{

    margin:0 0 10px;

    font-size:1.2rem;

}

.related-card-content a{

    text-decoration:none;

}

/*=========================================================
READING PROGRESS
=========================================================*/

.reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:var(--primary);

    z-index:9999;

}

/*=========================================================
FADE IN
=========================================================*/

.fade-in{

    opacity:0;

    transform:translateY(25px);

    transition:

        opacity .6s ease,

        transform .6s ease;

}

.fade-in.visible{

    opacity:1;

    transform:none;

}

/*=========================================================
SELECTION
=========================================================*/

::selection{

    background:var(--primary-light);

}

/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:900px){

    .modern-author{

        flex-direction:column;

        text-align:center;

    }

    .modern-callout{

        flex-direction:column;

    }

    .related-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .modern-callout{

        padding:20px;

    }

    .modern-faq summary{

        padding:18px;

    }

    .modern-faq details>div{

        padding:18px;

    }

}

/*=========================================================
ASTRA COMPATIBILITY
=========================================================*/

.single-post .entry-content>*{

    max-width:none;

}

.single-post .entry-content::after{

    display:none;

    content:none;

}

.single-post .ast-single-post-order{

    display:block;

}

.single-post .post-navigation,
.single-post .navigation.post-navigation,
.single-post .comments-area{

    margin-top:4rem;

}

/*=========================================================
GUTENBERG ALIGNMENTS
=========================================================*/

.modern-article-content .aligncenter{

    display:block;

    margin:2.5rem auto;

}

.modern-article-content .alignleft{

    float:left;

    margin:0 2rem 1rem 0;

    max-width:45%;

}

.modern-article-content .alignright{

    float:right;

    margin:0 0 1rem 2rem;

    max-width:45%;

}

.modern-article-content .alignwide{

    width:100%;

    max-width:100%;

}

.modern-article-content .alignfull{

    width:100vw;

    max-width:100vw;

    margin-left:calc(50% - 50vw);

}

/*=========================================================
BUTTONS
=========================================================*/

.modern-article-content .wp-block-button__link{

    border-radius:999px;

    padding:14px 28px;

    font-weight:700;

    text-decoration:none;

}

/*=========================================================
TABLE OVERFLOW
=========================================================*/

.modern-article-content .wp-block-table{

    overflow-x:auto;

}

.modern-article-content table{

    min-width:640px;

}

/*=========================================================
LONG CONTENT
=========================================================*/

.modern-article-content pre,
.modern-article-content code,
.modern-article-content table{

    overflow-wrap:normal;

}

.modern-article-content p,
.modern-article-content li,
.modern-article-content td{

    word-break:break-word;

}

/*=========================================================
FORMS
=========================================================*/

.modern-article-content input,
.modern-article-content textarea,
.modern-article-content select{

    width:100%;

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

    border-radius:12px;

    padding:12px 14px;

    font:inherit;

}

.modern-article-content button{

    cursor:pointer;

}

/*=========================================================
FOCUS
=========================================================*/

a:focus-visible,
button:focus-visible,
summary:focus-visible{

    outline:3px solid rgba(37,99,235,.35);

    outline-offset:3px;

}

/*=========================================================
PRINT
=========================================================*/

@media print{

    .blog-sidebar,
    .reading-progress{

        display:none;

    }

    .blog-grid{

        display:block;

    }

}

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

@media(max-width:768px){

    .modern-article-content .alignleft,
    .modern-article-content .alignright{

        float:none;

        max-width:100%;

        margin:2rem 0;

    }

    .modern-article-content .alignfull{

        width:100%;

        max-width:100%;

        margin-left:0;

    }

    .modern-toc{

        position:relative;

        top:auto;

    }

}

/*=========================================================
END
=========================================================*/


.reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#2563eb;

    z-index:99999;

}


/*==================================================
=            BREADCRUMBS
==================================================*/

.modern-breadcrumbs{
margin:24px auto;
padding:0 20px;
max-width:1200px;
}

.modern-breadcrumbs-inner{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.5rem;
font-size:.9rem;
color:var(--muted);
}

.modern-breadcrumbs a{
color:var(--muted);
text-decoration:none;
transition:.25s;
}

.modern-breadcrumbs a:hover{
color:var(--primary);
}

.modern-breadcrumbs .separator{
opacity:.5;
}

.modern-breadcrumbs .current{
color:var(--text);
font-weight:600;
}

/*==================================================
=            AUTHOR
==================================================*/

.modern-author{
margin-top:80px;
}

.modern-author-card{
display:flex;
align-items:center;
gap:32px;
background:var(--card);
border:1px solid var(--border);
border-radius:24px;
padding:32px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.modern-author-avatar img{
width:120px;
height:120px;
border-radius:50%;
display:block;
}

.modern-author-content{
flex:1;
}

.modern-author-label{
display:block;
font-size:.85rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--primary);
margin-bottom:8px;
}

.modern-author-name{
margin:0 0 12px;
font-size:1.8rem;
}

.modern-author-name a{
text-decoration:none;
color:inherit;
}

.modern-author-bio{
color:var(--muted);
line-height:1.8;
margin-bottom:20px;
}

.modern-author-meta{
margin-bottom:24px;
font-size:.95rem;
color:var(--muted);
}

.modern-author-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
border-radius:999px;
background:var(--primary);
color:#fff;
text-decoration:none;
font-weight:600;
transition:.25s;
}

.modern-author-button:hover{
transform:translateY(-2px);
}

/*==================================================
=            SHARE
==================================================*/

.modern-share{
margin-top:60px;
}

.modern-share-card{
background:var(--card);
border:1px solid var(--border);
padding:32px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.modern-share-title{
margin-bottom:8px;
}

.modern-share-description{
color:var(--muted);
margin-bottom:24px;
}

.modern-share-buttons{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.modern-share-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 18px;
border-radius:999px;
background:#f5f7fb;
border:1px solid var(--border);
text-decoration:none;
color:var(--text);
cursor:pointer;
font-weight:600;
transition:.25s;
}

.modern-share-button:hover{
background:var(--primary);
color:#fff;
transform:translateY(-2px);
}

/*==================================================
=            FAQS
==================================================*/

.modern-faqs{
margin-top:70px;
}

.modern-faqs-card{
background:var(--card);
border:1px solid var(--border);
border-radius:24px;
padding:36px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.modern-faqs-header{
margin-bottom:30px;
}

.modern-faqs-header p{
color:var(--muted);
}

.modern-faq-item{
border-top:1px solid var(--border);
padding:18px 0;
}

.modern-faq-item:first-child{
border-top:none;
}

.modern-faq-item summary{
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
list-style:none;
font-weight:600;
font-size:1.05rem;
}

.modern-faq-item summary::-webkit-details-marker{
display:none;
}

.modern-faq-icon{
font-size:1.5rem;
color:var(--primary);
transition:.3s;
}

.modern-faq-item[open] .modern-faq-icon{
transform:rotate(45deg);
}

.modern-faq-answer{
margin-top:18px;
color:var(--muted);
line-height:1.8;
}

/*==================================================
=            RELATED POSTS
==================================================*/
/* RELATED POSTS */

.modern-related{
margin:70px 0;
}

.modern-related-title{
font-size:2rem;
margin-bottom:30px;
}

.modern-related-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.modern-related-card{
background:#fff;
border:1px solid var(--border);
border-radius:20px;
overflow:hidden;
transition:.25s;
}

.modern-related-card:hover{
transform:translateY(-5px);
}

.modern-related-card a{
display:block;
text-decoration:none;
color:inherit;
}

.modern-related-thumb{
height:200px;
overflow:hidden;
}

.modern-related-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.modern-related-body{
padding:22px;
}

.modern-related-cat{
font-size:.75rem;
font-weight:700;
color:var(--primary);
text-transform:uppercase;
letter-spacing:.08em;
}

.modern-related-body h3{
font-size:1.35rem;
line-height:1.3;
margin:12px 0;
}

.modern-related-meta{
font-size:.9rem;
color:var(--muted);
margin-bottom:15px;
}

.modern-related-body p{
font-size:1rem;
line-height:1.7;
color:var(--muted);
margin:0;
}

@media(max-width:900px){
.modern-related-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.modern-related-grid{
grid-template-columns:1fr;
}
}
/*==================================================
=            RESPONSIVE
==================================================*/

@media(max-width:992px){

.modern-related-grid{
grid-template-columns:1fr;
}

.modern-author-card{
flex-direction:column;
text-align:center;
}

.modern-share-buttons{
justify-content:center;
}

}

@media(max-width:768px){

.modern-breadcrumbs{
padding:0 16px;
}

.modern-author-card,
.modern-share-card,
.modern-faqs-card{
padding:24px;
}

.modern-related-content{
padding:20px;
}

.modern-share-button{
width:100%;
}

}