/* ===============================
   Sticky Navbar and Active Tab Styling
   =============================== */

/* Makes the navigation bar stick to the top when scrolling */
.sticky-nav {
  position: sticky; /* Fixes navbar in place when scrolling past it */
  top: 0;           /* Sticks to the top edge of the viewport */
  z-index: 50;      /* Keeps navbar above other elements */
}

/* Style for the active tab in the navbar */
.active-tab {
  border-bottom: 0;                     /* Removes default bottom border */
  font-weight: 600;                     /* Makes active tab text bold */
  text-decoration-line: underline;      /* Adds underline to indicate active state */
  text-decoration-thickness: 3px;       /* Makes the underline thicker */
  text-underline-offset: 10px;          /* Pushes the underline away from the text */
  text-decoration-color: currentColor;  /* Matches underline color to text color */
}

/* Active tab in dark theme */
.dark .active-tab {
  border-color: #ffffff; /* White accent for dark mode */
}

/* Active tab in light theme */
.light .active-tab {
  border-color: #000000; /* Black accent for light mode */
}

/* ===============================
   Section Spacing for Scroll Behavior
   =============================== */

/* Prevents section headings from being hidden under the sticky navbar */
.section {
  scroll-margin-top: 80px; /* Creates spacing when using in-page anchors */
}

/* ===============================
   Theme Variables
   =============================== */

/* Light theme color variables */
.light {
  --surface-0: #f7f7f9; /* Primary light background color */
  --surface-1: #eeeeF2; /* Slightly darker secondary background */
}

/* Dark theme color variables */
.dark {
  --surface-0: #0c0c0e; /* Primary dark background color */
  --surface-1: #141416; /* Slightly lighter secondary background */
}