/*
Theme Name: Spiritual Minimal Blog Complete v2
Author: OVEX Design Studio / Ovidiu (Enhanced by Gemini)
Description: A definitive, feature-complete WordPress theme with a dynamic grid, AJAX comments & likes, reading time, featured images, AJAX live search, styled comments, and a fully responsive layout.
Version: 3.0.0 (Final)
Text Domain: spiritual-minimal-blog-complete-v2
*/

:root{
  --bg: #fff;
  --text: #0f1724;
  --muted: #6b7280;
  --card: #fbfbfb;
  --border: #e6e6e6;
  --accent: #6d8b74;
  --accent-2: #c8d6cf;
  --accent-3: #b08aa1; /* secondary accent */
  --error: #d9534f;
  --success: #5cb85c;
  --max-width: 1100px;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"]{
  --bg: #071018;
  --text: #e6efef;
  --muted: #9aa6ad;
  --card: #0c181d;
  --border: #1a2c33;
  --accent: #9acbb7;
  --accent-2: #102923;
  --accent-3: #5b3b4a;
  --error: #e57373;
  --success: #81c784;
}

/* Base & Accessibility */
*{box-sizing:border-box}
html,body{height:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  transition: background-color .2s, color .2s;
}
body.mobile-menu-open {overflow:hidden;}
.skip-link {position:absolute; top: -40px; left:0; background:var(--accent); color:white; padding:8px; z-index:1000; transition: top .2s;}
.skip-link:focus {top:0;}

/* Layout container */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 20px}
.container-narrow {max-width: 800px;}

/* Header */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter: blur(8px);background: color-mix(in srgb, var(--bg) 92%, transparent);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px; padding:0 20px;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.brand .avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;background:var(--card);border:1px solid var(--border)}
.site-title{font-weight:700;font-size:1.2rem}

/* Navbar & Actions */
.header-actions{display:flex;align-items:center;gap:8px}
.menu-list{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.menu-list a{padding:8px 14px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:0.95rem;text-decoration:none;transition: all .15s}
.menu-list a:hover, .menu-list a:focus{background:var(--card);border-color:var(--border)}
.menu-list .current-menu-item a {background:var(--accent-2);color:var(--accent)}

/* AJAX Search */
.search-container{position:relative}
.ajax-search-form .search-input{padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); min-width:200px; transition: all .2s; font-size: 0.95rem;}
#ajaxSearchResults{position:absolute; top:calc(100% + 6px); right:0; width:340px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.1); z-index:99; max-height: 70vh; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition: all .2s;}
#ajaxSearchResults.show{opacity:1;visibility:visible;transform:translateY(0)}
.search-result-item{display:flex;align-items:center;gap:12px;padding:10px;text-decoration:none;border-bottom:1px solid var(--border); transition: background-color .15s}
.search-result-item:hover{background:color-mix(in srgb,var(--accent) 5%, transparent)}
.search-result-item img{width:70px;height:50px;object-fit:cover;border-radius:6px; flex-shrink: 0}
.search-result-item .title{font-weight:600;color:var(--text);line-height:1.3}

/* Header Action Buttons & Mobile Menu */
.icon-toggle{background:transparent; border:1px solid var(--border); border-radius:10px; width:40px; height:40px; cursor:pointer; font-size:1.2rem; display:inline-flex;align-items:center;justify-content:center; color:var(--muted); transition:all .15s;}
.icon-toggle:hover{background:var(--card);color:var(--text)}
#mobileMenu{position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .2s;}
#mobileMenu.open {opacity: 1; visibility: visible;}
#mobileMenu .menu-list {flex-direction: column; gap: 1rem; text-align:center;}
#mobileMenu .menu-list a {font-size: 1.5rem;}
#closeMenuBtn { position: fixed; top: 20px; right: 20px; z-index: 101;}

/* Homepage Grid */
main{padding:28px 0}
.posts-list-wrapper {padding: 28px 0;}
.posts-list {display:grid; gap:24px;}
.posts-list .post-card-full {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px;}
.post-card-full .post-thumb-link {grid-column: 1; grid-row:1;}
.post-card-full .post-thumb {height: 400px; border-radius: 16px; object-fit: cover;}
.post-card-full .post-body {grid-column: 2; grid-row:1;}
.posts-grid {margin-top:24px; display:grid; gap:24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}

/* Post Cards */
.post-card {background:var(--card);border:1px solid var(--border);border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.02); transition:transform .15s,box-shadow .15s; display:flex; flex-direction:column;}
.post-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px -5px rgba(0,0,0,0.07)}
.post-thumb {width:100%;height:220px;object-fit:cover;display:block;background:#eee;}
.post-body{padding:20px; flex-grow:1; display:flex; flex-direction:column;}
.post-card .entry-title {font-size: 1.25rem;}
.post-card-full .entry-title {font-size: clamp(1.8rem, 3.6vw, 2.5rem);}
.entry-title a {color: var(--text); text-decoration: none; transition: color .15s;}
.entry-title a:hover, .entry-title a:focus {color: var(--accent);}
.post-card .post-categories a {font-size:0.85rem; font-weight: 600; color:var(--accent); text-transform: uppercase; text-decoration: none;}

/* Entry Meta */
.entry-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:0.9rem;flex-wrap:wrap;margin:10px 0;}
.entry-meta > span {display:flex; align-items:center; gap:5px;}
.entry-meta .author-ava img{width:28px;height:28px;border-radius:50%;}
.entry-meta a {color: var(--text); text-decoration: none}
.entry-meta a:hover {text-decoration: underline}
.entry-content {margin-top: auto; font-size: 1rem;}

/* Single Post */
.entry{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.single .post-body {padding:24px 32px 32px;}
.single .entry-title {font-size:clamp(1.7rem,3.6vw,2.8rem); margin-bottom: 1rem;}
.single .entry-meta .author-ava img{width:36px;height:36px;}
.featured-image{margin:1.5rem 0;overflow:hidden;border-radius: 16px; border:1px solid var(--border)}
.featured-image .post-thumb{border-radius:0; border:0; width:100%; height:auto; max-height:500px;}
.wp-caption-text{padding:12px; margin:0; font-size:0.9rem; color:var(--muted); background: color-mix(in srgb,var(--border) 40%,transparent); text-align:center; border-top:1px solid var(--border);}
.entry-content{font-size:1.05rem; line-height:1.7}
.entry-content a {color:var(--accent); text-decoration:none; font-weight:600; border-bottom:2px solid var(--accent-2);}
.entry-content a:hover {border-bottom-color: var(--accent)}

/* Icons Bar & Like Button */
.icons-bar{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:18px;border-top:1px dashed var(--border);flex-wrap:wrap}
.icon-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:0.9rem;transition:all .15s; -webkit-user-select:none; user-select:none;}
.icon-btn:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--border) 50%,transparent);}
.like-btn.liked { background-color: var(--accent-2); border-color: var(--accent); color: var(--accent);}
.like-btn.liked .like-icon { color: #e74c3c; }

/* Previous/Next Post Navigation */
.post-nav { margin: 32px 0; padding: 20px; border: 1px solid var(--border); border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.post-nav a { text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; transition: background-color .15s;}
.post-nav a:hover { background-color: color-mix(in srgb, var(--border) 50%, transparent); }
.post-nav .nav-next { grid-column: 2; text-align: right; justify-content: flex-end; }
.post-nav img { width: 90px; height: 70px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.post-nav .meta { font-size: 0.9rem; color: var(--muted); display: block; }
.post-nav .title { font-size: 1rem; font-weight: 600; color: var(--text); }

/* Related Articles */
.related { margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--border); }
.related h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.related-item a { text-decoration: none; display: block; }
.related-item .related-thumb img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; transition: transform .2s; }
.related-item a:hover .related-thumb img { transform: scale(1.05); }
.related-item .related-title { font-weight: 600; color: var(--text); line-height: 1.3; transition: color .15s; }
.related-item a:hover .related-title { color: var(--accent); }

/* NEW: Comments Area Styling */
.comments-area { margin-top:32px; padding:24px 28px; background:transparent; border-radius:16px; border: 1px solid var(--border); }
.comments-area h3 { font-size: 1.5rem; color: var(--text); margin-bottom: 24px; }
.comment-list {list-style:none; padding:0; margin:0;}
.comment {display:flex; gap:16px; padding:16px 0; border-bottom: 1px solid var(--border); }
.comment:last-child {border-bottom:0;}
.comment .avatar {width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0;}
.comment-author { font-weight: 600; font-size: 1rem; color: var(--text); }
.comment-meta { font-size: 0.85rem; color: var(--muted); margin: 2px 0 8px; }
.comment-reply-link { font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration:none; }
#comment-status { margin: 10px 0; padding: 12px; border-radius: 8px; display:none; color: #fff; font-size: 0.9rem;}
#comment-status.success { background-color: var(--success); }
#comment-status.error { background-color: var(--error); }
/* NEW: Comment Form Styling */
.comment-respond { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; font-weight: 600; color: var(--muted); font-size: 0.9rem; margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
    width: 100%; padding: 12px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font-family: var(--font-sans); font-size: 1rem;
    transition: all .2s;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb,var(--accent) 20%, transparent); }
.comment-form .submit { 
    background:var(--accent); color:white; border:none; padding:11px 22px; 
    border-radius:10px; font-weight:700; cursor:pointer; 
    box-shadow:0 6px 18px -5px color-mix(in srgb, var(--accent) 30%, transparent); transition: all .15s;
}
.comment-form .submit:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* Load More & Footer */
.smbv-loader{text-align:center;padding:18px;}
#loadMoreBtn { background: var(--card); border: 1px solid var(--border); padding: 12px 24px; font-weight: 600; border-radius: 12px; cursor:pointer; transition: all .15s;}
#loadMoreBtn:hover { background: var(--accent-2); }
footer.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:28px 0 48px;color:var(--muted);text-align:center}

/* Popups & Overlays */
.share-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:101;opacity:0;visibility:hidden;transition: opacity .2s}
.share-popup-overlay.show{opacity:1;visibility:visible}
.share-popup{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 15px 40px rgba(0,0,0,0.15);padding:24px;z-index:102;width:90%;max-width:300px;opacity:0;visibility:hidden;transition:opacity .2s, transform .2s}
#backToTop{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;z-index: 100}

/* Mobile Responsive */
@media (max-width:768px){
  .header-actions .navbar, .ajax-search-form {display:none}
  .menu-toggle {display:inline-flex;}
  .post-card-full { grid-template-columns: 1fr; gap: 0; } /* FIX: Stacks the grid */
  .post-card-full .post-thumb { height: 250px; border-radius: 16px 16px 0 0;}
  .post-card-full .post-body { padding-top: 16px; }
  .posts-grid {grid-template-columns: 1fr;}
  .single .post-body {padding: 16px;}
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .nav-next { text-align: left; justify-content: flex-start; }
}
.menu-toggle {display:none;}
@media (max-width: 768px){ .menu-toggle{display:inline-flex} }

/* Accessibility focus */
a:focus,button:focus,input:focus{outline:3px solid color-mix(in srgb,var(--accent) 20%, transparent);outline-offset:2px;border-radius: 4px;}