/**
 * Shared Navigation Styles
 *
 * This file contains shared styles for navigation components used across the site.
 * It provides a unified styling for section navigation tabs.
 */

/* Section Navigation Styles */
.section-nav {
  background-color: var(--bg-lighter);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
}

.section-nav .nav-link {
  color: var(--text-dark);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: var(--transition);
}

.section-nav .nav-link:hover {
  color: var(--primary-color);
}

.section-nav .nav-link.active {
  background-color: var(--primary-color);
  color: white;
  box-shadow: var(--shadow-sm);
}

/* Legacy classes removed - use .section-nav instead */

/* Responsive Adjustments */
@media (max-width: 768px) {
  .section-nav .nav-link,
  .about-nav .nav-link,
  .programs-nav .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}