/*
==================================================
 CourseSuggest Premium Post Styles
 Part 2C - Editor & Finishing
==================================================
*/

/* ---------- Editor Typography ---------- */

.article-content blockquote{
    border-left:5px solid #2563eb;
    background:#eff6ff;
    padding:20px 25px;
    margin:30px 0;
    border-radius:12px;
    color:#334155;
    font-style:italic;
}

.article-content pre{
    background:#0f172a;
    color:#e2e8f0;
    padding:20px;
    border-radius:14px;
    overflow:auto;
    margin:30px 0;
    font-size:.95rem;
}

.article-content code{
    background:#f1f5f9;
    color:#dc2626;
    padding:2px 6px;
    border-radius:6px;
    font-size:.92em;
}

.article-content pre code{
    background:none;
    color:inherit;
    padding:0;
}

/* ---------- Tables ---------- */

.article-content table{
    width:100%;
    border-collapse:collapse;
    margin:35px 0;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(15,23,42,.08);
    display:block;
    overflow-x:auto;
}

.article-content th{
    background:#2563eb;
    color:#fff;
    padding:15px;
    white-space:nowrap;
}

.article-content td{
    padding:14px;
    border-bottom:1px solid #e5e7eb;
}

.article-content tr:nth-child(even){
    background:#f8fafc;
}

/* ---------- Images ---------- */

.article-content figure{
    margin:40px auto;
    text-align:center;
}

.article-content figcaption{
    color:#64748b;
    margin-top:10px;
    font-size:.92rem;
}

/* ---------- Lists ---------- */

.article-content ul{
    list-style:none;
    padding-left:0;
}

.article-content ul li{
    position:relative;
    padding-left:30px;
}

.article-content ul li:before{
    content:"✓";
    color:#2563eb;
    font-weight:bold;
    position:absolute;
    left:0;
}

.article-content ol{
    padding-left:25px;
}

/* ---------- Horizontal Rule ---------- */

.article-content hr{
    margin:45px 0;
    border:0;
    height:1px;
    background:#e5e7eb;
}

/* ---------- Responsive Video ---------- */

.article-content iframe{
    width:100%;
    min-height:450px;
    border:none;
    border-radius:16px;
    box-shadow:0 10px 28px rgba(15,23,42,.08);
    margin:35px 0;
}

/* ---------- Callout Boxes ---------- */

.callout{
    padding:22px;
    border-radius:14px;
    margin:30px 0;
    border-left:6px solid;
}

.callout.info{
    background:#eff6ff;
    border-color:#2563eb;
}

.callout.success{
    background:#ecfdf5;
    border-color:#16a34a;
}

.callout.warning{
    background:#fff7ed;
    border-color:#ea580c;
}

.callout.danger{
    background:#fef2f2;
    border-color:#dc2626;
}

/* ---------- Buttons ---------- */

.article-content .btn{
    border-radius:12px;
    padding:.8rem 1.5rem;
}

/* ---------- Back To Top ---------- */

#backToTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(37,99,235,.25);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

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

/* ---------- Mobile Share ---------- */

.mobile-share{
    display:none;
}

@media(max-width:991px){

.mobile-share{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background:#fff;
    border-top:1px solid #e5e7eb;
    display:flex;
    justify-content:space-around;
    padding:12px 0;
    z-index:9999;
    box-shadow:0 -6px 20px rgba(0,0,0,.08);
}

.mobile-share a{
    color:#334155;
    font-size:20px;
    text-decoration:none;
}

.article-content iframe{
    min-height:300px;
}

}

/* ---------- Print ---------- */

@media print{

header,
footer,
.sidebar-sticky,
.share-floating,
.mobile-share,
#readingProgress,
#backToTop,
.comments-card{
    display:none!important;
}

.article-card{
    box-shadow:none;
    border:none;
}

body{
    background:#fff;
}

}

/* ---------- Simple Animations ---------- */

.related-card,
.sidebar-card,
.article-card,
.author-box{
    transition:all .3s ease;
}

.fade-up{
    animation:fadeUp .5s ease forwards;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}