/* CSS Kustom untuk Template Blog */

:root {
  --blog-primary-color: #d63384; /* Contoh warna pink Bootstrap */
  --blog-text-color: #212529;
  --blog-muted-color: #6c757d;
  --blog-light-bg: #f8f9fa;
  --blog-link-color: #d63384;
  /* Anda bisa override dengan warna OASE Orange jika mau */
  /* --blog-primary-color: #ff7f00; */
  /* --blog-link-color: #ff7f00; */
}

body {
  font-family: "Lora", serif; /* Font utama untuk konten tulisan */
  padding-top: 56px;
  color: var(--blog-text-color);
  font-size: 1.05rem; /* Sedikit lebih besar untuk readability */
  line-height: 1.7; /* Jarak baris lebih lega */
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.blog-post-title a {
  font-family: "Poppins", sans-serif; /* Font header pakai Poppins */
  color: var(--blog-text-color);
}

a {
  color: var(--blog-link-color);
  text-decoration: none;
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease;
}
a:hover {
  color: #a31f6b; /* Warna link lebih gelap saat hover */
  text-decoration: underline;
}

/* Navbar */
.navbar-brand {
  font-weight: 700;
}

/* Blog Header */
.blog-header {
  background-color: var(--blog-primary-color);
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("../images/placeholder-header-blog.jpg"); /* Ganti dengan gambar header Anda */
  background-size: cover;
  background-position: center;
}

/* Main Content Area */
main {
  margin-top: 1rem;
}

/* Blog Posts */
.blog-post-title a {
  color: var(--blog-text-color);
  text-decoration: none;
}
.blog-post-title a:hover {
  color: var(--blog-link-color);
  text-decoration: none;
}
.blog-post-meta {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.blog-post img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

/* Sidebar */
.position-sticky {
  /* Pastikan top sesuai padding-top body + margin */
  top: 80px;
}
.sidebar-widget {
  margin-bottom: 2rem;
}
.sidebar-widget h4 {
  font-weight: bold;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}
.sidebar-widget ol {
  padding-left: 0; /* Reset padding */
}
.sidebar-widget ol li {
  margin-bottom: 0.3rem;
}

/* Footer */
.blog-footer {
  color: rgba(255, 255, 255, 0.8);
}
.blog-footer p:last-child {
  margin-bottom: 0;
}
.blog-footer small {
  color: rgba(255, 255, 255, 0.6);
}