/* ============================================
   WebToolsPad Blog — Frontend Stylesheet
   ============================================ */

/* Blog Layout */
.blog-main{padding-top:5rem;}
.blog-section{padding:2rem 0 4rem;}
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:2.5rem;align-items:start;}
.blog-page-header{margin-bottom:2rem;}
.blog-page-title{font-size:2rem;font-weight:800;margin-bottom:0.5rem;}
.blog-page-desc{color:var(--text-secondary);font-size:1rem;}

/* Blog Grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;}
.blog-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:var(--border-hover);}
.blog-card-img{display:block;aspect-ratio:16/9;overflow:hidden;}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.blog-card:hover .blog-card-img img{transform:scale(1.05);}
.blog-card-body{padding:1.3rem;flex:1;display:flex;flex-direction:column;}
.blog-card-cat{font-size:0.73rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent-teal);margin-bottom:0.5rem;display:inline-block;}
.blog-card-title{font-size:1.1rem;font-weight:700;margin-bottom:0.5rem;line-height:1.4;}
.blog-card-title a{color:var(--text-primary);transition:color 0.2s;}
.blog-card-title a:hover{color:var(--accent-primary);}
.blog-card-excerpt{font-size:0.88rem;color:var(--text-secondary);line-height:1.5;margin-bottom:1rem;flex:1;}
.blog-card-meta{display:flex;gap:1rem;font-size:0.78rem;color:var(--text-muted);flex-wrap:wrap;}
.blog-card-meta i{margin-right:0.2rem;}
.blog-card-date{font-size:0.8rem;color:var(--text-muted);}

/* Single Post */
.single-post{max-width:800px;}
.post-header{margin-bottom:2rem;}
.post-category-badge{display:inline-block;padding:0.3rem 0.9rem;background:rgba(108,92,231,0.12);color:var(--accent-secondary);border-radius:50px;font-size:0.78rem;font-weight:600;text-transform:uppercase;margin-bottom:0.8rem;}
.post-title{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:900;line-height:1.25;margin-bottom:1rem;}
.post-meta-bar{display:flex;align-items:center;gap:1.2rem;color:var(--text-muted);font-size:0.85rem;flex-wrap:wrap;}
.post-author-info{display:flex;align-items:center;gap:0.5rem;}
.author-avatar-sm{width:28px;height:28px;border-radius:50%;object-fit:cover;}
.post-author-info a{color:var(--accent-secondary);font-weight:600;}
.post-featured-image{margin-bottom:2rem;border-radius:var(--radius-lg);overflow:hidden;}
.post-featured-image img{width:100%;display:block;}

/* Post Content (Prose) */
.prose{font-size:1.05rem;line-height:1.8;color:var(--text-primary);}
.prose h2{font-size:1.5rem;font-weight:700;margin:2rem 0 1rem;color:var(--text-primary);}
.prose h3{font-size:1.25rem;font-weight:600;margin:1.5rem 0 0.8rem;}
.prose p{margin-bottom:1.2rem;}
.prose ul,.prose ol{margin:1rem 0 1.2rem 1.5rem;}
.prose li{margin-bottom:0.4rem;}
.prose a{color:var(--accent-primary);text-decoration:underline;}
.prose img{max-width:100%;border-radius:var(--radius-md);margin:1.5rem 0;}
.prose blockquote{border-left:4px solid var(--accent-primary);padding:1rem 1.5rem;margin:1.5rem 0;background:rgba(108,92,231,0.06);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-secondary);font-style:italic;}
.prose pre{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.2rem;overflow-x:auto;margin:1.5rem 0;font-size:0.9rem;}
.prose code{background:rgba(108,92,231,0.1);padding:0.15rem 0.4rem;border-radius:4px;font-size:0.9em;color:var(--accent-secondary);}
.prose pre code{background:none;padding:0;border-radius:0;color:inherit;}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;}
.prose th,.prose td{padding:0.7rem 1rem;border:1px solid var(--border-color);text-align:left;}
.prose th{background:rgba(108,92,231,0.08);font-weight:600;}

/* Tags Section */
.post-tags-section{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin:2rem 0;padding:1.2rem 0;border-top:1px solid var(--border-color);}
.tag-pill{display:inline-block;padding:0.3rem 0.8rem;background:rgba(108,92,231,0.1);color:var(--accent-secondary);border-radius:50px;font-size:0.8rem;font-weight:500;transition:var(--transition);}
.tag-pill:hover{background:var(--accent-primary);color:#fff;}

/* FAQ */
.post-faq-section{margin:2rem 0;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);}
.post-faq-section h2{font-size:1.3rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem;}
.faq-item{border-bottom:1px solid var(--border-color);padding:0;}
.faq-item:last-child{border-bottom:none;}
.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 0;background:none;border:none;color:var(--text-primary);font-size:1rem;font-weight:600;text-align:left;cursor:pointer;font-family:inherit;}
.faq-question i{transition:transform 0.3s;color:var(--accent-primary);font-size:0.85rem;}
.faq-question.open i{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s;color:var(--text-secondary);font-size:0.95rem;line-height:1.7;}
.faq-answer.open{max-height:500px;padding:0 0 1rem;}

/* Author Box */
.author-box{display:flex;gap:1.2rem;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin:2rem 0;}
.author-box-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;}
.author-box-info h4{font-size:1rem;margin-bottom:0.3rem;}
.author-box-info h4 a{color:var(--accent-primary);}
.author-box-info p{font-size:0.88rem;color:var(--text-secondary);margin-bottom:0.5rem;}
.author-socials{display:flex;gap:0.6rem;}
.author-socials a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(108,92,231,0.1);border-radius:8px;color:var(--accent-primary);transition:var(--transition);}
.author-socials a:hover{background:var(--accent-primary);color:#fff;}

/* Author Page */
.author-page-header{display:flex;gap:1.5rem;align-items:center;margin-bottom:2rem;flex-wrap:wrap;}
.author-page-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent-primary);}

/* Related Posts */
.related-posts-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border-color);}
.related-title{font-size:1.3rem;font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.6rem;}

/* Search Form */
.search-form-big{display:flex;gap:0.5rem;margin:1rem 0;}
.search-form-big input{flex:1;padding:0.8rem 1.2rem;background:var(--bg-card);border:2px solid var(--border-color);border-radius:10px;color:#fff;font-size:1rem;font-family:inherit;}
.search-form-big input:focus{border-color:var(--accent-primary);outline:none;}
.search-form-big button{padding:0.8rem 1.5rem;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:10px;color:#fff;font-weight:600;cursor:pointer;font-family:inherit;}

/* Sidebar */
.blog-sidebar{position:sticky;top:5rem;}
.sidebar-widget{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.3rem;margin-bottom:1.2rem;}
.widget-title{font-size:0.95rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem;}
.widget-title i{color:var(--accent-primary);}
.sidebar-search{display:flex;gap:0.4rem;}
.sidebar-search input{flex:1;padding:0.6rem 0.8rem;background:#1a1a2e;border:1px solid #2d2d44;border-radius:8px;color:#fff;font-size:0.88rem;font-family:inherit;}
.sidebar-search button{padding:0.6rem 0.8rem;background:var(--accent-primary);border:none;border-radius:8px;color:#fff;cursor:pointer;}
.widget-list{list-style:none;}
.widget-list li{border-bottom:1px solid rgba(108,92,231,0.08);}
.widget-list li:last-child{border-bottom:none;}
.widget-list a{display:flex;justify-content:space-between;padding:0.5rem 0;color:var(--text-secondary);font-size:0.88rem;transition:color 0.2s;}
.widget-list a:hover{color:var(--accent-primary);}
.widget-count{background:rgba(108,92,231,0.12);padding:0.1rem 0.5rem;border-radius:50px;font-size:0.75rem;color:var(--accent-secondary);}
.sidebar-post{display:flex;gap:0.8rem;padding:0.6rem 0;border-bottom:1px solid rgba(108,92,231,0.06);color:var(--text-primary);transition:color 0.2s;}
.sidebar-post:hover{color:var(--accent-primary);}
.sidebar-post img{width:60px;height:45px;border-radius:6px;object-fit:cover;}
.sidebar-post h4{font-size:0.82rem;font-weight:600;line-height:1.3;margin-bottom:0.2rem;}
.sidebar-views{font-size:0.73rem;color:var(--text-muted);}
.tag-cloud{display:flex;flex-wrap:wrap;gap:0.4rem;}

/* Pagination */
.blog-pagination{display:flex;justify-content:center;gap:0.4rem;margin-top:2.5rem;}
.page-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);font-size:0.9rem;font-weight:600;transition:var(--transition);}
.page-link:hover,.page-link.active{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border-color:transparent;}

/* Table of Contents */
.toc-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.3rem 1.5rem;margin:1.5rem 0 2rem;}
.toc-title{font-size:1rem;font-weight:700;margin-bottom:0.8rem;display:flex;align-items:center;gap:0.5rem;}
.toc-title i{color:var(--accent-primary);}
.toc-list{list-style:none;counter-reset:toc;}
.toc-list li{counter-increment:toc;padding:0.35rem 0;border-bottom:1px solid rgba(108,92,231,0.06);}
.toc-list li:last-child{border-bottom:none;}
.toc-list li a{color:var(--text-secondary);font-size:0.9rem;transition:color 0.2s;}
.toc-list li a:hover{color:var(--accent-primary);}
.toc-list li a::before{content:counter(toc)". ";color:var(--accent-primary);font-weight:600;}
.toc-list li.toc-sub{padding-left:1.2rem;}
.toc-list li.toc-sub a{font-size:0.85rem;}

/* Social Share */
.share-bar{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin:1.2rem 0;padding:0.8rem 0;}
.share-bar-bottom{border-top:1px solid var(--border-color);padding-top:1.2rem;margin-top:2rem;}
.share-label{font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-right:0.3rem;}
.share-btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.45rem 0.9rem;border-radius:8px;font-size:0.82rem;font-weight:600;color:#fff;transition:var(--transition);}
.share-btn:hover{transform:translateY(-2px);filter:brightness(1.15);}
.share-fb{background:#1877f2;}.share-tw{background:#1da1f2;}.share-li{background:#0a66c2;}.share-wa{background:#25d366;}

/* Post Prev/Next Navigation */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0;padding:1.5rem 0;border-top:1px solid var(--border-color);}
.post-nav-link{display:flex;flex-direction:column;gap:0.3rem;padding:1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:var(--transition);}
.post-nav-link:hover{border-color:var(--accent-primary);transform:translateY(-2px);}
.post-nav-next{text-align:right;}
.post-nav-label{font-size:0.78rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;}
.post-nav-title{font-size:0.92rem;font-weight:600;color:var(--text-primary);line-height:1.4;}

/* Empty State */
.empty-state{text-align:center;padding:3rem;color:var(--text-muted);}
.empty-state i{font-size:3rem;margin-bottom:1rem;color:var(--accent-primary);opacity:0.5;}
.empty-state h3{font-size:1.2rem;margin-bottom:0.5rem;color:var(--text-secondary);}

/* Responsive */
@media(max-width:968px){.blog-layout{grid-template-columns:1fr;}.blog-sidebar{position:static;}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}.post-meta-bar{flex-direction:column;gap:0.4rem;}.author-box{flex-direction:column;text-align:center;}.search-form-big{flex-direction:column;}.post-nav{grid-template-columns:1fr;}.share-bar{justify-content:center;}}