/* Wrapper inside main */
main .info-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

/* Sidebar */
main .info-sidebar {
  flex: 1 1 200px;
  min-width: 180px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

main .info-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

main .info-sidebar li {
  margin-bottom: 10px;
}

main .info-sidebar a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.2s;
}

main .info-sidebar a:hover {
  color: #e74c3c; /* example accent color */
}

main .info-sidebar a.active {
  color: #e74c3c;
  font-weight: 700;
  /* subtle indicator */
  background: rgba(231,76,60,0.06);
  padding: 4px 6px;
  border-radius: 4px;
}

/* Content section */
main .info-content {
  flex: 3 1 600px;
  min-width: 300px;
}

/* Articles */
main .info-content article {
  margin-bottom: 60px;
}

main .info-content h2 {
  margin-bottom: 10px;
  font-size: 1.8rem;
  color: #2c3e50;
}

main .info-content h4 {
  margin-bottom: 0.2em; /* Reduce space under h4, adjust as needed */
}

main .info-content p {
  line-height: 1.6;
  color: #444;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

#other-sites .section {
    margin-bottom: 1.5em; /* adjust spacing as needed */
}

/* Responsive: sidebar stacks above content on small screens */
@media (max-width: 768px) {
  main .info-wrapper {
    flex-direction: column;
  }
  main .info-sidebar {
    position: relative;
    top: 0;
  }
}