/*========== SINGLE ARTICLE ==========*/
.single-layout-wrapper{
display:grid;
grid-template-columns:80% 20%;
gap:35px;
max-width:1500px;
margin:auto;
padding:0 20px;
}
.single-main-content{min-width:0}
.single-article{
background:#fff;
border-radius:16px;
padding:35px;
box-shadow:0 8px 30px rgba(0,0,0,.06)
}

/*========== HERO ==========*/
.single-hero{
margin-bottom:35px
}

.hero-category{
margin-bottom:15px
}

.hero-category a{
display:inline-block;
background:#0056d6;
color:#fff;
padding:7px 14px;
border-radius:30px;
font-size:13px;
font-weight:700;
text-decoration:none;
letter-spacing:.3px
}

.post-title{
font-size:44px;
line-height:1.15;
font-weight:800;
margin:0 0 18px;
color:#111
}

.post-subtitle{
font-size:22px;
line-height:1.6;
color:#555;
margin:0 0 28px
}

.post-meta-top{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
padding:18px 0;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
margin-bottom:25px
}

.meta-author{
display:flex;
align-items:center;
gap:15px
}

.meta-author img{
border-radius:50%
}

.meta-author strong{
display:block;
font-size:16px;
margin-bottom:4px
}

.meta-author span{
font-size:14px;
color:#777
}

.meta-reading{
font-size:14px;
font-weight:700;
color:#0056d6
}

.post-featured-image{
margin-top:25px;
overflow:hidden;
border-radius:18px
}

.post-featured-image img{
display:block;
width:100%;
height:auto;
transition:.35s
}

.post-featured-image img:hover{
transform:scale(1.03)
}

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

.post-content{
font-size:20px;
line-height:1.9;
color:#333
}

.post-content p{
margin:0 0 1.8em
}

.post-content h2{
font-size:34px;
margin:60px 0 20px;
font-weight:800;
line-height:1.3;
color:#111
}

.post-content h3{
font-size:28px;
margin:45px 0 18px;
font-weight:700
}

.post-content h4{
font-size:22px;
margin:35px 0 15px
}

.post-content ul,
.post-content ol{
padding-left:28px;
margin:20px 0
}

.post-content li{
margin:10px 0
}

.post-content a{
color:#0056d6;
font-weight:600;
text-decoration:none
}

.post-content a:hover{
text-decoration:underline
}

.post-content img{
max-width:100%;
height:auto;
border-radius:14px;
margin:25px auto;
display:block
}

.post-content figure{
margin:30px 0
}

.post-content figcaption{
font-size:14px;
text-align:center;
color:#777;
margin-top:10px
}

.post-content blockquote{
border-left:5px solid #0056d6;
background:#f6f9ff;
padding:20px 25px;
margin:35px 0;
font-style:italic;
border-radius:10px
}

.post-content table{
width:100%;
border-collapse:collapse;
margin:30px 0;
font-size:16px
}

.post-content th{
background:#0056d6;
color:#fff;
padding:12px
}

.post-content td{
padding:12px;
border:1px solid #e6e6e6
}

.post-content pre{
overflow:auto;
padding:18px;
background:#111827;
color:#fff;
border-radius:12px
}

.post-content code{
background:#eef3ff;
padding:2px 6px;
border-radius:4px;
font-size:90%
}

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

.single-share{
display:flex;
gap:12px;
margin:30px 0;
flex-wrap:wrap
}

.single-share a{
padding:10px 18px;
background:#f5f5f5;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:.25s
}

.single-share a:hover{
background:#0056d6;
color:#fff
}
/*========== KEY HIGHLIGHTS ==========*/

.key-highlights{
margin:35px 0;
padding:25px 30px;
background:#f7fbff;
border:1px solid #d9e8ff;
border-left:5px solid #0056d6;
border-radius:14px
}

.key-highlights h2{
margin:0 0 18px;
font-size:28px
}

.key-highlights ul{
margin:0;
padding:0;
list-style:none
}

.key-highlights li{
position:relative;
padding-left:34px;
margin:14px 0;
font-size:18px;
line-height:1.7
}

.key-highlights li:before{
content:"✓";
position:absolute;
left:0;
top:0;
width:22px;
height:22px;
border-radius:50%;
background:#0056d6;
color:#fff;
font-size:13px;
display:flex;
align-items:center;
justify-content:center
}

/*========== TABLE OF CONTENTS ==========*/

.article-toc{
background:#fff;
border:1px solid #e7e7e7;
border-radius:14px;
padding:22px;
margin:35px 0;
box-shadow:0 4px 18px rgba(0,0,0,.05)
}

.toc-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px
}

.toc-head span{
font-size:22px;
font-weight:700
}

.toc-head button{
width:34px;
height:34px;
border:none;
border-radius:50%;
background:#eef3ff;
cursor:pointer;
font-size:18px
}

.article-toc ul{
margin:0;
padding:0;
list-style:none
}

.article-toc li{
margin:8px 0
}

.article-toc li.sub{
padding-left:18px
}

.article-toc a{
display:block;
padding:10px 14px;
text-decoration:none;
color:#444;
border-radius:8px;
transition:.25s
}

.article-toc a:hover{
background:#f5f7fb
}

.article-toc a.active{
background:#eaf2ff;
border-left:4px solid #0056d6;
color:#0056d6;
font-weight:700
}

.toc-progress{
margin-top:18px;
padding-top:16px;
border-top:1px solid #eee;
font-size:14px;
color:#666
}

/*========== TAGS ==========*/

.post-tags{
margin:40px 0;
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center
}

.post-tags span{
font-weight:700
}

.post-tags a{
padding:8px 14px;
background:#f2f4f8;
border-radius:30px;
text-decoration:none;
color:#333;
font-size:14px;
transition:.25s
}

.post-tags a:hover{
background:#0056d6;
color:#fff
}

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

.author-card{
display:flex;
gap:22px;
align-items:flex-start;
padding:28px;
margin:50px 0;
background:#fff;
border:1px solid #ececec;
border-radius:16px;
box-shadow:0 5px 22px rgba(0,0,0,.05)
}

.author-avatar img{
border-radius:50%
}

.author-info{
flex:1
}

.author-info h3{
margin:0 0 12px;
font-size:24px
}

.author-info p{
margin:0 0 15px;
line-height:1.8;
color:#555
}

.author-info a{
display:inline-block;
padding:10px 18px;
background:#0056d6;
color:#fff;
text-decoration:none;
border-radius:8px;
font-weight:600
}

.author-info a:hover{
background:#003fa8
}

/*========== PREVIOUS / NEXT ==========*/

.post-navigation{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin:50px 0
}

.post-navigation>div{
background:#fff;
border:1px solid #ececec;
border-radius:14px;
padding:20px;
transition:.25s
}

.post-navigation>div:hover{
box-shadow:0 6px 24px rgba(0,0,0,.08);
transform:translateY(-3px)
}

.post-navigation a{
text-decoration:none;
font-weight:700;
font-size:17px;
line-height:1.5;
color:#222
}

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

.related-posts{
margin-top:70px
}

.related-posts h2{
font-size:32px;
margin-bottom:28px
}

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

.related-card{
background:#fff;
border-radius:16px;
overflow:hidden;
border:1px solid #ececec;
transition:.3s
}

.related-card:hover{
transform:translateY(-5px);
box-shadow:0 8px 28px rgba(0,0,0,.08)
}

.related-card img{
width:100%;
height:210px;
object-fit:cover;
display:block
}

.related-card h3{
font-size:20px;
padding:18px;
margin:0;
line-height:1.45
}

.related-card span{
display:block;
padding:0 18px 20px;
font-size:14px;
color:#777
}

.related-card a{
color:#111;
text-decoration:none
}
/*========== SIDEBAR ==========*/

.sidebar-wrapper{
position:sticky;
top:90px
}

.sidebar-widget{
background:#fff;
border:1px solid #ececec;
border-radius:16px;
padding:20px;
margin-bottom:25px;
box-shadow:0 4px 18px rgba(0,0,0,.05)
}

.sidebar-widget h3{
margin:0 0 18px;
font-size:20px;
font-weight:700
}

.sidebar-widget img{
width:100%;
height:auto;
border-radius:12px
}

.sidebar-widget a{
text-decoration:none;
color:#222;
transition:.25s
}

.sidebar-widget a:hover{
color:#0056d6
}

.sidebar-item{
padding:14px 0;
border-bottom:1px solid #f1f1f1
}

.sidebar-item:last-child{
border-bottom:none
}

/*========== COMMENTS ==========*/

#comments{
margin-top:70px;
padding-top:35px;
border-top:2px solid #eee
}

.comment-list{
list-style:none;
padding:0;
margin:0
}

.comment{
padding:25px;
margin-bottom:20px;
border:1px solid #ececec;
border-radius:14px;
background:#fff
}

.comment-author img{
border-radius:50%
}

.comment-meta{
font-size:14px;
color:#777;
margin-bottom:10px
}

.comment-content{
line-height:1.8
}

.comment-reply-link{
display:inline-block;
margin-top:15px;
padding:8px 16px;
background:#0056d6;
color:#fff;
text-decoration:none;
border-radius:8px;
font-size:14px
}

.comment-reply-link:hover{
background:#003fa8
}

/*========== READING BAR ==========*/

.reading-bar{
position:fixed;
left:0;
top:0;
height:4px;
width:0;
background:#0056d6;
z-index:99999;
transition:width .1s linear
}

/*========== BACK TO TOP ==========*/

#backTop{
position:fixed;
right:25px;
bottom:25px;
width:48px;
height:48px;
border:none;
border-radius:50%;
background:#0056d6;
color:#fff;
font-size:20px;
cursor:pointer;
opacity:0;
visibility:hidden;
transition:.25s;
box-shadow:0 6px 18px rgba(0,0,0,.2);
z-index:9999
}

#backTop.show{
opacity:1;
visibility:visible
}

#backTop:hover{
transform:translateY(-3px)
}

/*========== UTILITIES ==========*/

.aligncenter{
display:block;
margin:25px auto
}

.alignleft{
float:left;
margin:0 25px 20px 0
}

.alignright{
float:right;
margin:0 0 20px 25px
}

.wp-caption{
max-width:100%
}

.wp-caption-text{
font-size:14px;
color:#666;
text-align:center;
margin-top:8px
}

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

::selection{
background:#0056d6;
color:#fff
}

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

::-webkit-scrollbar{
width:10px
}

::-webkit-scrollbar-thumb{
background:#c6d3ea;
border-radius:20px
}

::-webkit-scrollbar-thumb:hover{
background:#0056d6
}

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

:root{
--tb-bg:#fff;
--tb-card:#fff;
--tb-text:#222;
--tb-muted:#666;
--tb-primary:#0056d6;
--tb-border:#ececec
}

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

@media(max-width:1200px){

.single-layout-wrapper{
grid-template-columns:1fr;
}

.sidebar-wrapper{
position:relative;
top:0;
margin-top:40px;
}

.related-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.single-layout-wrapper{
padding:0 15px;
margin:20px auto;
}

.single-article{
padding:20px;
border-radius:12px;
}

.post-title{
font-size:34px;
line-height:1.25;
}

.post-subtitle{
font-size:19px;
}

.post-content{
font-size:18px;
line-height:1.85;
}

.post-content h2{
font-size:30px;
}

.post-content h3{
font-size:25px;
}

.post-meta-top{
flex-direction:column;
align-items:flex-start;
gap:15px;
}

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

.author-info{
text-align:center;
}

.post-navigation{
grid-template-columns:1fr;
}

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

.article-toc{
position:relative;
top:0;
padding:18px;
}

.key-highlights{
padding:20px;
}

.sidebar-widget{
padding:18px;
}

}

@media(max-width:480px){

.post-title{
font-size:30px;
}

.post-subtitle{
font-size:17px;
}

.post-content{
font-size:17px;
}

.post-content h2{
font-size:26px;
}

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

.hero-category a{
font-size:12px;
padding:6px 12px;
}

.single-share{
flex-direction:column;
}

.single-share a{
text-align:center;
width:100%;
}

.meta-author{
align-items:flex-start;
}

}