/*********************************
        SINGLE POST
*********************************/

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

.site-main{
    margin:70px auto;
    padding:0 20px;

}

.single-post article{
    background:transparent;
}


/*********************************
        HEADER
*********************************/
.article-header{

display:flex;
align-items:center;
justify-content:center;
gap:45px;

margin-bottom:70px;

}

.article-image{

flex:0 0 280px;

}

.article-image img{

width:280px;
height:100%;

object-fit:cover;

border-radius:22px;

display:block;

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

}

.article-header-content{

flex:1;

max-width:650px;

}

.entry-title{

font-size:38px;

line-height:1.7;

margin-bottom:22px;

text-align:right;

}

.entry-meta{

display:inline-flex;

padding:10px 18px;

border-radius:40px;

background:#fff;

border:1px solid #e7ddd2;

gap:10px;

}

/*********************************
        CONTENT
*********************************/

.entry-content{

    font-size:18px;

    line-height:2.5;

    color:#535353;

}

.entry-content p{

    margin-bottom:26px;

}

.entry-content strong{

    color:#222;

}

.entry-content img{

    max-width:100%;

    height:auto;

    display:block;

    margin:45px auto;

    border-radius:20px;

}

.entry-content h2{

    margin:20px 0 ;

    font-size:30px;

    color:#222;

    position:relative;

    padding-bottom:15px;

}

.entry-content h2::after{

    content:"";

    position:absolute;

    bottom:0;

    right:0;

    width:65px;

    height:3px;

    background:var(--primary);

    border-radius:20px;

}

.entry-content h3{

    margin:55px 0 18px;

    font-size:28px;

    color:#2f2f2f;

}

.entry-content h4{

    margin:45px 0 15px;

    font-size:23px;

    color:#333;

}

.entry-content ul,
.entry-content ol{

    margin:20px 0 35px;

    padding-right:24px;

}

.entry-content li{

    margin-bottom:12px;

}

.entry-content blockquote{

    margin:45px 0;

    padding:30px;

    background:#fcfaf7;

    border-right:4px solid var(--primary);

    border-radius:20px;

    font-size:19px;

    line-height:2.3;

    color:#444;

}

/*********************************
        TAGS
*********************************/

.entry-footer{

    margin-top:70px !important;

    padding-top:30px;

    border-top:1px solid #e7ddd2;

}

.tags a{

    display:inline-block;

    margin:6px;

    padding:10px 18px;

    background:#fff;

    border:1px solid #e3d7ca;

    border-radius:30px;

    color:#6a594b;

    text-decoration:none;

    transition:.3s;

}

.tags a:hover{

    background:var(--primary);

    color:#fff;

}

/*********************************
      PREV NEXT
*********************************/
.post-navigation{
margin:10px auto;
display:flex;
justify-content:center;
}

.post-navigation .nav-links{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
width:auto;
}

.post-navigation .nav-previous,
.post-navigation .nav-next{
flex:none;
}

.post-navigation a{

display:flex;

align-items:center;

justify-content:center;

padding:15px 28px;

min-width:220px;

min-height:45px;

background:#fff;

border-radius:14px;

border:1px solid #e5ddd3;

font-size:15px;

font-weight:600;

transition:.3s;
color:var(--title);
}

.post-navigation a:hover{

background:var(--primary);

color:#fff;

}


/*********************************
        COMMENTS
*********************************/
#respond{
    max-width:1100px;
    margin:50px auto;
    background:#fff;
    border:1px solid #e9dfd5;
    border-radius:28px;
    padding:25px 45px;
  
}
#reply-title{
    text-align:center;
    font-size:37px;
    margin-bottom:12px;
    color:#2f2f2f;
    font-weight:700;
}

#reply-title::after{
    content:"";
    display:block;
    width:70px;
    height:3px;
    background:var(--primary);
    margin:18px auto 0;
    border-radius:20px;
}

.comments-area{
max-width:900px;
margin:90px auto 0;
padding:50px;
background:linear-gradient(135deg,#fcfaf8,#f6efe7);
border:1px solid #eadfce;
border-radius:30px;
box-shadow:0 20px 45px rgba(0,0,0,.05);
position:relative;
overflow:hidden;
}

.comments-area::before{
content:"";
position:absolute;
top:-80px;
left:-80px;
width:220px;
height:220px;
border-radius:50%;
background:rgba(255,255,255,.45);
}

.comments-area::after{
content:"";
position:absolute;
bottom:-60px;
right:-60px;
width:170px;
height:170px;
border-radius:50%;
background:rgba(255,255,255,.3);
}

.comment-reply-title{
position:relative;
z-index:2;
font-size:34px;
margin-bottom:15px;
color:#2d2d2d;
text-align:center;

}

.logged-in-as,
.comment-notes{
position:relative;
z-index:2;
text-align:center;
margin-bottom:30px;
color:#8d8174;
font-size:15px;
line-height:2;
}

.comment-form-author,
.comment-form-email{

margin:0;

}

.comment-form-url,
.comment-form-comment,
.comment-form-cookies-consent,
.form-submit{

grid-column:1/-1;

}


.comment-form input,
.comment-form textarea{

width:100%;

padding:16px 18px;

border:1px solid #ddd;

border-radius:16px;

background:#fff;

font-size:15px;

transition:.3s;

box-sizing:border-box;

}

.comment-form textarea{

min-height:190px;

resize:vertical;

}

.comment-form input:focus,
.comment-form textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(190,160,126,.12);

}

.comment-form-cookies-consent{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

}

.comment-form-cookies-consent input{

width:18px;

height:18px;

margin:0;

}

.form-submit{

text-align:center;

margin-top:10px;

}

.form-submit .submit{

background:var(--primary);

color:#fff;

border:none;

padding:15px 42px;

border-radius:40px;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.form-submit .submit:hover{

transform:translateY(-3px);

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

}
/*********************************
        MOBILE
*********************************/
@media (max-width:768px){

.site-main{
    margin:35px auto;
    padding:0 15px;
}

/* هدر مقاله */

.article-header{
    flex-direction:column;
    gap:25px;
    margin-bottom:35px;
    text-align:center;
}

.article-image{
    flex:0 0 auto;
}

.article-image img{
    width:100%;
    max-width:280px;
    height:auto;
    aspect-ratio:1/1;
    margin:auto;
}

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

.entry-title{
    font-size:28px;
    line-height:1.8;
    text-align:center;
    margin-bottom:18px;
}

.entry-meta{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 16px;
    font-size:13px;
}

/* متن مقاله */

.entry-content{
    font-size:16px;
    line-height:2.2;
}

.entry-content p{
    margin-bottom:20px;
}

.entry-content h2{
    font-size:24px;
    line-height:1.8;
    margin:35px 0 18px;
}

.entry-content h3{
    font-size:21px;
    line-height:1.8;
}

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

.entry-content img{
    margin:25px auto;
    border-radius:16px;
}

.entry-content blockquote{
    padding:20px;
    font-size:16px;
    line-height:2;
}

.entry-content ul,
.entry-content ol{
    padding-right:18px;
}

/* تگ ها */

.entry-footer{
    margin-top:40px !important;
    padding-top:20px;
}

.tags{
    text-align:center;
}

.tags a{
    padding:8px 14px;
    font-size:13px;
}

/* قبلی و بعدی */

/* قبلی و بعدی */

.post-navigation{
    width:100%;
}

.post-navigation .nav-links{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:12px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next{
    width:100%;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a{
    width:100%;
    min-width:0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-sizing:border-box;
font-size: 14px;
}


/* نظرات */

.comments-area{
    padding:20px;
    margin-top:45px;
    border-radius:20px;
}

#respond{
    padding:20px;
    border-radius:20px;
}

#reply-title,
.comment-reply-title{
    font-size:26px;
}

.comment-form textarea{
    min-height:150px;
}

.form-submit .submit{
    width:100%;
}

}