/* SINGLE BLOG CSS - PART 1 */
/* Variables */
:root{
 --primary:#1f4d8b;--primary-dark:#173b69;--secondary:#f58220;
 --text:#1f2937;--muted:#667085;--light:#f7f9fc;--white:#fff;
 --border:#e5e7eb;--radius:18px;
 --shadow:0 18px 40px rgba(0,0,0,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--light);color:var(--text)}
.single-blog-page{background:var(--light)}
.container{width:min(92%,1200px);margin:auto}
.single-hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;padding:90px 0}
.breadcrumb{margin-bottom:20px;font-size:14px}
.breadcrumb a{color:#d9e8ff}
.single-category{display:inline-block;background:var(--secondary);padding:8px 16px;border-radius:40px;font-weight:700;margin-bottom:20px}
.single-title{font-size:54px;line-height:1.15;margin-bottom:20px}
.single-meta{display:flex;gap:12px;flex-wrap:wrap;color:#d9e8ff}
.single-content-section{padding:80px 0}
.single-content-section>.container{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.single-content{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:40px}
.featured-image{margin:-40px -40px 30px}
.featured-image img{width:100%;display:block;border-radius:18px 18px 0 0}
.post-content{font-size:18px;line-height:1.9}
.post-content h2{font-size:38px;color:var(--primary);margin:40px 0 20px}
.post-content h3{font-size:30px;margin:30px 0 15px}
.post-content p{margin-bottom:22px}
.post-content ul,.post-content ol{margin:0 0 24px 28px}
.post-content img{max-width:100%;border-radius:14px;margin:24px 0}
.post-content blockquote{padding:20px;border-left:5px solid var(--secondary);background:#fff8f2;margin:30px 0}
.post-content table{width:100%;border-collapse:collapse}
.post-content th,.post-content td{border:1px solid var(--border);padding:12px}
/* =========================
   BLOG CONTENT AREA
========================= */

.blog-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 20px;
  line-height: 1.8;
  color: #1a1a1a;
  font-size: 18px;
}

.blog-content h2 {
  font-size: 28px;
  margin: 30px 0 15px;
  font-weight: 700;
  color: #111;
}

.blog-content h3 {
  font-size: 22px;
  margin: 25px 0 12px;
  font-weight: 600;
}

.blog-content p {
  margin-bottom: 18px;
  color: #333;
}

.blog-content a {
  color: #c9a96e;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: 0.3s ease;
}

.blog-content a:hover {
  border-bottom: 1px solid #c9a96e;
}

/* Blockquote styling */
.blog-content blockquote {
  border-left: 4px solid #c9a96e;
  padding: 15px 20px;
  margin: 25px 0;
  background: #faf8f5;
  font-style: italic;
  color: #444;
}

/* Images inside blog */
.blog-content img {
  width: 100%;
  border-radius: 10px;
  margin: 25px 0;
}

/* =========================
   AUTHOR BOX (IMPORTANT)
========================= */

.author-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  margin: 50px 0;
  border: 1px solid #d4c5b9;
  border-radius: 12px;
  background: #fff;
}

.author-box img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.author-box .author-info h4 {
  margin: 0;
  font-size: 18px;
}

.author-box .author-info p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #666;
}

/* =========================
   COMMENTS SECTION
========================= */

.comments {
  max-width: 820px;
  margin: 60px auto;
  padding: 0 20px;
}

.comments h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.comment {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}

.comment .name {
  font-weight: 600;
  margin-bottom: 5px;
}

.comment .text {
  color: #444;
  font-size: 15px;
}

/* Comment form */
.comment-form {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-form input,
.comment-form textarea {
  padding: 12px;
  border: 1px solid #d4c5b9;
  border-radius: 8px;
  font-size: 14px;
}

.comment-form button {
  width: fit-content;
  padding: 10px 18px;
  background: #c9a96e;
  border: none;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s ease;
}

.comment-form button:hover {
  background: #b8956a;
}

/* =========================
   RESPONSIVE FIXES
========================= */

@media (max-width: 768px) {
  .blog-content {
    font-size: 16px;
    padding: 25px 15px;
  }

  .blog-content h2 {
    font-size: 24px;
  }

  .author-box {
    flex-direction: column;
    text-align: center;
  }

  .comments {
    padding: 0 15px;
  }
}