.bg-primary {
  background-color: #456882 !important;
}
.btn-primary {
  background-color: #1b3c53 !important;
  border: none !important;
}
body {
  background-color: #f9f3ef !important;
}
.bg-dark {
  background-color: #1b3c53 !important;
}
.card-img-top {
  object-fit: scale-down !important;
}
nav {
  border-radius: 2px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eaeaea !important;
  padding: 0.75rem 1rem !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
body {
  font-family: "Inconsolata", monospace !important;
  font-optical-sizing: auto !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-variation-settings: "wdth" 100 !important;
}

nav li a {
  color: #f9f3ef !important;
  margin-left: 1rem !important;
  transition: color 0.2s !important;
}
/* posts.css */

/* Grid layout */
#postsList .posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Card base */
#postsList .post-card {
  border: none;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover lift */
#postsList .post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Image styling */
#postsList .post-card .card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Body padding */
#postsList .post-card .card-body {
  padding: 1rem;
}

/* Title */
#postsList .post-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: #333;
}

/* Excerpt */
#postsList .post-card p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  height: 3.5rem; /* fixed height for uniform cards */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Read More button */
#postsList .post-card .btn-primary {
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* Button hover */
#postsList .post-card .btn-primary:hover {
  background-color: #0056b3;
}
h1 {
  font-family: "Inconsolata", monospace !important;
  font-optical-sizing: 100 !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-variation-settings: "wdth" 50 !important;
}
img {
  color: white !important;
}
/* Make the card body a vertical flex container */
#postsList .post-card .card-body {
  display: flex;
  flex-direction: column;
}

/* Push the button to the bottom and keep it left-aligned */
#postsList .post-card .btn-primary {
  margin-top: auto;
  align-self: flex-start;
}
#postsList .post-card .card-body p {
  /* remove the fixed height */
  /* height: 3.5rem; */

  /* allow paragraph to fill available space */
  flex: 1 1 auto;

  /* keep overflow hidden for neat ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* adjust the number of lines if you like */
  -webkit-line-clamp: 4;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='coral' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* (Optional) Match the border to your icon color */
.navbar-toggler {
  border: 2px solid coral;
}