/*
Theme Name: WebEili Blank
Theme URI: https://webeili.com
Author: WebEili
Description: Lightweight blank theme loading existing header/footer from /includes/ and using dark mode
Version: 1.7
*/
html{overflow-y:scroll} /* Fix scrollbar shift */

/* === Layout === */
.blog-wrapper{max-width:880px;margin:0 auto;padding:0 2rem;display:block}
.blog-container{max-width:820px;margin:3rem auto;padding:0 1.25rem;font-family:"Gantari",Arial;color:#1f2937;line-height:1.7}

/* === Article === */
.blog-article{width:820px;margin-bottom:2rem;padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}

/* === Titles & Headings === */
.blog-title{font-size:2rem;font-weight:700;line-height:1.3;margin-bottom:.3rem;color:#0f172a}
.blog-title a{color:inherit;text-decoration:none}
.blog-title a:hover{color:#2563eb}
.blog-container h1{font-family:"Gantari",Arial;font-size:1.9rem;font-weight:700;margin:1.5rem 0 1rem;color:#0f172a}
.blog-container h2{font-family:"Gantari",Arial;font-size:1.45rem;font-weight:700;margin:1.25rem 0 .75rem;color:#111827}
.blog-container h3{font-family:"Gantari",Arial;font-size:1.2rem;font-weight:600;margin:1rem 0 .5rem;color:#1f2937}

/* === Link Styling Cleanup === */
.blog-article-link,
.blog-article-link:hover,
.blog-title a,
.read-more,
.read-more:hover,
.blog-content a {
  text-decoration:none!important;
  border:none!important;
}

.blog-title a:hover,
.read-more:hover,
.blog-content a:hover {
  color:#2563eb!important;
}

/* === Meta (Date + Category Inline) === */
.blog-meta{display:flex;align-items:center;gap:.4rem;color:#6b7280;font-size:.88rem;margin-bottom:.65rem}
.blog-meta .blog-date{font-weight:500}
.blog-meta .blog-category{color:#6b7280}
.blog-meta .blog-category::before{content:"/";margin:0 .3rem;color:#9ca3af}

/* === Content === */
.blog-content{font-family:"Inter",Arial;color:#374151;font-size:1rem;margin-bottom:.9rem;line-height:1.7}
.blog-content p{margin-bottom:.9rem}
.blog-content img{max-width:100%;border-radius:.75rem;margin:1.25rem 0;display:block;height:auto}

/* === Read More === */
.read-more{display:inline-flex;align-items:center;gap:.3rem;color:#2563eb;font-weight:600;text-decoration:none;margin-top:.25rem;transition:color .2s}
.read-more:hover{text-decoration:underline;color:#1e40af}
.read-more::after{content:"→";font-size:1rem;line-height:1}
.single-post .read-more{display:none}

/* === Navigation === */
.post-navigation{display:flex;justify-content:space-between;margin:2.25rem 0 2rem;font-weight:600}
.post-navigation a{color:#2563eb;text-decoration:none}
.post-navigation a:hover{text-decoration:underline}

/* === Comments === */
.comments-section{margin-top:2rem;padding-top:1.5rem}
.comments-section p{font-family:"Inter",Arial;font-size:14px;}
.comment{border:none!important;border-bottom:1px solid #f1f5f9;padding-bottom:1rem;margin-bottom:1rem}
.comment-meta{color:#6b7280;font-size:.85rem}
.comment-author{font-weight:600;color:#111827}
.comment-content{margin-top:.5rem;font-size:1rem;line-height:1.6}
.comment img.avatar{border-radius:50%;margin-right:.4rem;vertical-align:middle}

/* === Comment Form === */
#reply-title{font-size:1.15rem;font-weight:600;margin-top:2rem}
.comment-form{max-width:80%;background:#f9fafb;border:1px solid #e5e7eb;border-radius:.75rem;padding:1.5rem;margin-top:1.25rem}
.comment-form p{margin-bottom:.75rem}
.comment-form label{display:block;font-weight:600;margin-bottom:.25rem;font-size:.9rem}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1px solid #d1d5db;border-radius:.5rem;padding:.6rem .8rem;font-size:1rem;background:#fff;transition:border .2s,box-shadow .2s}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px #bfdbfe}
.comment-form input[type=submit]{background:linear-gradient(90deg,#2563eb,#1d4ed8);color:#fff;border:none;padding:.6rem 1.25rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.comment-form input[type=submit]:hover{opacity:.9}

/* === Normalize === */
.blog-container p,.blog-container ul,.blog-container ol,.blog-container h1,.blog-container h2,.blog-container h3,.blog-container h4,.blog-container h5,.blog-container h6,.blog-container figure,.blog-container blockquote{margin-block-start:.6rem;margin-block-end:.6rem}
.blog-container .wp-block-post-content,.blog-container .comment-respond,.blog-container .commentlist,.blog-container .comments-section{margin:0;padding:0}

/* === Footer === */
.footer-modern .container{}

/* === Responsive === */
@media(max-width:900px){
.blog-wrapper,.blog-container,.blog-article{width:100%;max-width:100%;padding:0 1rem;margin:0 auto 1.5rem auto}
}

.dark .blog-container, .dark-mode .blog-container,.dark .blog-content{color:#f8fafc!important}
.dark .blog-title, .dark-mode .blog-title,
.dark .blog-title a, .dark-mode .blog-title a{color:#fff!important}
.dark .comment-form{background:transparent;}
/* repeat the same rules as above with .dark / .dark-mode if needed */