/* Main CSS file for Jason Xue's blog */

/* General styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Header styles */
.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
}

/* Blog post styles */
.blog-post {
  margin-bottom: 3rem;
}

.blog-post-title {
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.blog-post-meta {
  margin-bottom: 1.25rem;
  color: #6c757d;
}

.blog-post img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Ensure images in content don't overflow */
.post-content img, 
article img,
.container img,
.col-md-8 img,
main img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}

/* Case study styles */
.case-study-header {
  background-color: #f8f9fa;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.case-study-highlights {
  background-color: #f1f8ff;
  padding: 1.5rem;
  border-radius: 5px;
  margin-bottom: 2rem;
}

.testimonial {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-left: 4px solid #0d6efd;
  margin: 2rem 0;
}

/* Resource styles */
.resource-card {
  margin-bottom: 2rem;
  transition: transform 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-5px);
}

/* Contact form styles */
.contact-form {
  background-color: #f8f9fa;
  padding: 2rem;
  border-radius: 5px;
}

.contact-info {
  margin-top: 2rem;
}

.contact-item {
  margin-bottom: 1rem;
}

/* Footer styles */
.footer {
  padding: 3rem 0;
}

.social-icons a {
  margin-right: 1rem;
  transition: opacity 0.3s ease;
}

.social-icons a:hover {
  opacity: 0.8;
}

/* Category and tag styles */
.category-badge, .tag-badge {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .blog-post-title {
    font-size: 1.75rem;
  }
}

/* Custom styles for specific sections */
.hero-section {
  background-color: #f8f9fa;
  padding: 4rem 0;
  margin-bottom: 3rem;
}

.featured-posts {
  margin-bottom: 3rem;
}

.sidebar-section {
  margin-bottom: 2rem;
}

.sidebar-section h4 {
  margin-bottom: 1rem;
}

/* Animation effects */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}