/* === Base Colors === */
:root {
  --primary-pink: #f9d5e5;      /* light blush pink */
  --secondary-pink: #f2a9c1;    /* rose pink */
  --lavender: #d8c7f9;          /* soft lavender */
  --white: #ffffff;
  --light-bg: #fff7fb;          /* very light pink background */
  --text-dark: #3b2f2f;         /* warm dark brownish gray */
}

/* === Global Styles === */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", Roboto, sans-serif;
  background-color: var(--light-bg);
  color: var(--text-dark);
}

/* === Navbar === */
.navbar {
  background-color: var(--primary-pink) !important;
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--text-dark) !important;
  font-weight: 500;
  transition: 0s !important;
}

.navbar .nav-link:hover {
  color: var(--secondary-pink) !important;
  transition: 0s !important;
}

/* Make toggler visible on light backgrounds */
.navbar-toggler {
  border-color: rgba(0, 0, 0, 0.2);
}
.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='rgba(59,47,47,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* === Headings === */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  color: var(--secondary-pink);
}

/* === Links === */
a {
  text-decoration: none;
  color: var(--secondary-pink);
}

a:hover {
  color: var(--text-dark);
  text-decoration: underline;
}

/* === Buttons === */
.btn-primary, .btn-outline-primary {
  background-color: var(--secondary-pink);
  border-color: var(--secondary-pink);
  color: var(--white);
  transition: 0s !important; 
}

.btn-primary:hover, .btn-outline-primary:hover {
  background-color: var(--lavender);
  border-color: var(--lavender);
  color: var(--text-dark);
  transition: 0s !important;
}

/* === Post Cards / List Items === */
.list-group-item {
  background-color: var(--white);
}

.list-group-item:hover {
  background-color: var(--primary-pink);
}

/* === Category Badges === */
.badge.bg-secondary {
  background-color: var(--lavender) !important;
  color: var(--text-dark) !important;
  font-weight: 500;
}

.badge.bg-secondary:hover {
  background-color: var(--secondary-pink) !important;
}

/* === Containers / Layout === */
main {
  flex: 1;
}

.container {
  background-color: var(--white);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* === Footer === */
footer {
  margin-top: 3rem;
  background-color: var(--primary-pink);
  color: var(--text-dark);
  font-weight: 500;
  text-align: center;
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}