/* Core layout */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f9f9f9;
    color: #333;
    display: flex;
    flex-direction: column;
  }
  
  
  main {
    flex: 1;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  /* Smooth transition for theme toggle */
  body, .card, .navbar, footer, .list-group-item {
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Footer style */
  footer {
    margin-top: auto;
  }
  
  /* Dark Mode Styles */
  .dark-mode {
    background-color: #121212;
    color: #f1f1f1;
  }
  
  .dark-mode .navbar,
  .dark-mode footer,
  .dark-mode .card,
  .dark-mode .list-group-item {
    background-color: #1f1f1f;
    color: #f1f1f1;
    border-color: #2c2c2c;
  }
  
  .dark-mode a,
  .dark-mode .nav-link {
    color: #f1f1f1;
  }
  
  .dark-mode .btn-primary {
    background-color: #2196f3;
    border-color: #2196f3;
  }
  
  .dark-mode .btn-primary:hover {
    background-color: #1976d2;
    border-color: #1976d2;
  }
  
  /* List group hover in dark mode */
  .dark-mode .list-group-item:hover {
    background-color: #2a2a2a;
  }
/* Fix white padding/gap around main container in dark mode */
.dark-mode body {
    background-color: #121212;
  }
  
  .dark-mode main {
    background-color: #121212;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Optional: remove white background of default Bootstrap .container */
  main.container {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
  }
/* Fix header colors in dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode .section-title {
  color: #ffffff !important;
}
.post-links{
    text-decoration: none;
}
.post-links:hover{
    text-decoration:underline;
}
.dark-mode .text-muted {
    color: #cccccc !important; /* Brighter muted text in dark mode */
}
.navbar .nav-link.active {
    font-weight: bold;
    color: #f1c40f !important; /* yellow highlight or your theme color */
}

.dark-mode p,
.dark-mode li,
.dark-mode .text-muted {
  color: #f1f1f1 !important;
}

/* Optional: emphasize muted text just slightly less than main text */
.dark-mode .text-muted {
  color: #d1d1d1 !important;
}

.card {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.card {
  opacity: 0;
  transform: translateY(10px);
  animation: slideFadeIn 0.6s ease forwards;
}

@keyframes slideFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body:not(.dark-mode) .navbar .nav-link:hover {
  color: #ffc107 !important;
}
.navbar .nav-link:hover {
  color: #ffc107 !important;
}
/* Make all container pages mobile-friendly */
/* Ensure consistent container padding on smaller devices */

@media (max-width: 576px) {
  .card {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.list-group-item {
  padding: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .post-list-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 5rem;
  }
}

ul.list-group {
  margin-bottom: 5rem;
}