/* ==========================================
POST STYLE.CSS
PART 1 - BASIC LAYOUT
Education Update Hub
========================================== */
/* ==========================
POST CONTAINER
========================== */
.post-container{
    width:95%;
    max-width:950px;
    margin:40px auto;
    padding:30px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}
/* ==========================
POST META
========================== */
.post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    font-size:15px;
    color:#666;
    margin-bottom:20px;
}
.post-meta span{
    display:flex;
    align-items:center;
}
/* ==========================
POST TITLE
========================== */
.post-container h1{
    font-size:40px;
    line-height:1.4;
    color:#1a1a1a;
    font-weight:700;
    margin-bottom:25px;
}
/* ==========================
FEATURED IMAGE
========================== */
.featured-image{
    margin:30px 0;
}
.featured-image img{
    width:100%;
    border-radius:12px;
    box-shadow:0 5px 18px rgba(0,0,0,.15);
}
/* ==========================
INTRO PARAGRAPH
========================== */
.intro{
    font-size:19px;
    line-height:1.9;
    color:#444;
    margin-bottom:30px;
    text-align:justify;
}
/* ==========================
HEADINGS
========================== */
.post-container h2{
    font-size:30px;
    color:#1565c0;
    margin-top:40px;
    margin-bottom:18px;
}
.post-container h3{
    font-size:24px;
    color:#222;
    margin-top:28px;
    margin-bottom:12px;
}
/* ==========================
PARAGRAPH
========================== */
.post-container p{
    font-size:18px;
    line-height:1.9;
    color:#333;
    text-align:justify;
    margin-bottom:18px;
}
/* ==========================
LISTS
========================== */
.post-container ul,
.post-container ol{
    margin:20px 0 20px 28px;
}
.post-container li{
    font-size:18px;
    line-height:1.8;
    margin-bottom:10px;
}
/* ==========================================
POST STYLE.CSS
PART 2 - BOXES & TABLES
========================================== */
/* ==========================
HIGHLIGHT BOX
========================== */
.highlight-box{
    background:#eef6ff;
    border-left:6px solid #1565c0;
    padding:22px;
    margin:30px 0;
    border-radius:10px;
}
.highlight-box h3{
    margin:0 0 12px;
    color:#1565c0;
}
.highlight-box p{
    margin:0;
}
/* ==========================
IMPORTANT UPDATE
========================== */
.important-update{
    background:#fff8e1;
    border-left:6px solid #f59e0b;
    padding:22px;
    margin:30px 0;
    border-radius:10px;
}
.important-update strong{
    color:#d97706;
    font-size:18px;
}
.important-update p{
    margin-top:10px;
}
/* ==========================
NOTE BOX
========================== */
.note{
    background:#fef3c7;
    border-left:6px solid #eab308;
    padding:18px;
    margin:25px 0;
    border-radius:10px;
    font-size:17px;
}
/* ==========================
QUICK SUMMARY
========================== */
.quick-summary{
    background:#f8fafc;
    border:1px solid #dbeafe;
    border-radius:12px;
    padding:25px;
    margin:35px 0;
}
.quick-summary h2{
    margin-top:0;
    margin-bottom:18px;
    color:#1565c0;
}
.quick-summary ul{
    list-style:none;
    margin:0;
    padding:0;
}
.quick-summary li{
    padding:12px 0;
    border-bottom:1px solid #e5e7eb;
    font-size:17px;
}
.quick-summary li:last-child{
    border-bottom:none;
}
/* ==========================
TABLE
========================== */
.table-responsive{
    overflow-x:auto;
    margin:30px 0;
}
.info-table,
table{
    width:100%;
    border-collapse:collapse;
}
.info-table th,
.info-table td,
table th,
table td{
    border:1px solid #ddd;
    padding:14px;
    text-align:left;
}
.info-table th,
table th{
    background:#1565c0;
    color:#fff;
    font-size:17px;
}
.info-table tr:nth-child(even),
table tr:nth-child(even){
    background:#f8fafc;
}
/* ==========================
READ MORE BUTTON
========================== */
.read-more-btn,
.post-btn{
    display:inline-block;
    margin-top:20px;
    padding:12px 24px;
    background:#1565c0;
    color:#fff;
    border-radius:8px;
    font-weight:600;
    transition:.3s;
}
.read-more-btn:hover,
.post-btn:hover{
    background:#0d47a1;
    color:#fff;
}
/* ==========================================
POST STYLE.CSS
PART 3 - FAQ + RELATED POSTS + AUTHOR
========================================== */
/* ==========================
FAQ SECTION
========================== */
.faq-section{
    margin:40px 0;
}
.faq-box{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:20px;
    margin-bottom:20px;
}
.faq-box h3{
    color:#1565c0;
    font-size:22px;
    margin-bottom:10px;
}
.faq-box p{
    margin:0;
    line-height:1.8;
}
/* ==========================
RELATED POSTS
========================== */
.related-posts{
    margin:45px 0;
    padding:25px;
    background:#f8fafc;
    border-radius:12px;
    border:1px solid #e5e7eb;
}
.related-posts h2{
    margin-top:0;
    margin-bottom:20px;
    color:#1565c0;
}
.related-posts ul{
    list-style:none;
    margin:0;
    padding:0;
}
.related-posts li{
    padding:12px 0;
    border-bottom:1px solid #ddd;
}
.related-posts li:last-child{
    border-bottom:none;
}
.related-posts a{
    color:#1565c0;
    font-weight:600;
}
.related-posts a:hover{
    color:#ef6c00;
}
/* ==========================
AUTHOR BOX
========================== */
.author-box{
    margin:40px 0;
    background:#eef6ff;
    border-left:6px solid #1565c0;
    padding:25px;
    border-radius:10px;
}
.author-box h3{
    color:#1565c0;
    margin-bottom:10px;
}
.author-box p{
    margin:0;
}
/* ==========================
POST TAGS
========================== */
.post-tags{
    margin:35px 0;
}
.post-tags a{
    display:inline-block;
    padding:8px 15px;
    margin:6px;
    background:#eef4ff;
    color:#1565c0;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
}
.post-tags a:hover{
    background:#1565c0;
    color:#fff;
}
/* ==========================
SOCIAL SHARE
========================== */
.share-box{
    margin:40px 0;
    text-align:center;
}
.share-box h3{
    margin-bottom:18px;
}
.share-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}
.share-buttons a{
    display:inline-block;
    padding:12px 18px;
    border-radius:8px;
    color:#fff;
    font-weight:600;
    transition:.3s;
}
.share-facebook{
    background:#1877F2;
}
.share-twitter{
    background:#1DA1F2;
}
.share-whatsapp{
    background:#25D366;
}
.share-telegram{
    background:#0088cc;
}
.share-buttons a:hover{
    transform:translateY(-2px);
    opacity:.9;
}
/* ==========================================
POST STYLE.CSS
PART 4 - RESPONSIVE + UTILITIES
========================================== */
/* ==========================
POST IMAGE
========================== */
.post-container img{
    max-width:100%;
    height:auto;
    border-radius:10px;
    margin:25px 0;
}
/* ==========================
HORIZONTAL LINE
========================== */
.post-container hr{
    border:none;
    border-top:1px solid #ddd;
    margin:40px 0;
}
/* ==========================
BLOCKQUOTE
========================== */
blockquote{
    background:#f8fafc;
    border-left:5px solid #1565c0;
    padding:20px;
    margin:30px 0;
    font-style:italic;
    color:#444;
    border-radius:8px;
}
/* ==========================
CODE
========================== */
code{
    background:#eef4ff;
    color:#d63384;
    padding:2px 6px;
    border-radius:4px;
}
pre{
    background:#1e293b;
    color:#fff;
    padding:20px;
    border-radius:10px;
    overflow:auto;
    margin:25px 0;
}
/* ==========================
BACK TO TOP
========================== */
.back-top{
    position:fixed;
    right:20px;
    bottom:20px;
    width:45px;
    height:45px;
    background:#1565c0;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    text-decoration:none;
    font-size:22px;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    z-index:999;
}
.back-top:hover{
    background:#0d47a1;
}
/* ==========================
RESPONSIVE
========================== */
@media(max-width:768px){
.post-container{
width:96%;
padding:18px;
}
.post-container h1{
font-size:30px;
line-height:1.5;
}
.post-container h2{
font-size:24px;
}
.post-container h3{
font-size:20px;
}
.post-container p,
.post-container li{
font-size:17px;
}
.post-meta{
flex-direction:column;
gap:8px;
}
.share-buttons{
flex-direction:column;
}
.share-buttons a{
width:100%;
text-align:center;
}
.info-table th,
.info-table td,
table th,
table td{
font-size:15px;
padding:10px;
}
}
/* ==========================
PRINT
========================== */
@media print{
.share-box,
.related-posts,
.author-box,
.back-top{
display:none;
}
.post-container{
width:100%;
margin:0;
box-shadow:none;
padding:0;
}
}
/* ==========================================
END OF POST STYLE.CSS
========================================== */