/*
 * =================================================================
 * STYLES FOR COMPONENTS PAGE ONLY
 * =================================================================
 */

/* ---- Main Layout & Sidebar Menu ---- */

/* Styles for the main sidebar navigation container on the components page. */
.components-menu {
  position: sticky; /* Makes the menu stick to the top of the viewport as the user scrolls. */
  top: 6rem; /* Adjust this value based on your header's height. */
  align-self: start;
  height: calc(
    100vh - 8rem
  ); /* Calculates the height to fill the viewport minus some padding. */
  overflow-y: auto; /* Adds a scrollbar if the menu items exceed the height. */
}

/* Styles for individual links in the sidebar menu. */
.components-menu a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s ease-in-out;
  border-left: 3px solid transparent;
}

/* Hover state for the sidebar links. */
.components-menu a:hover {
  color: var(--text);
  background-color: var(--surface-muted);
}

/* Active state for the sidebar link, controlled by the scrollspy script. */
.components-menu a.active {
  color: var(--primary-accent);
  font-weight: 600;
  border-left-color: var(--primary-accent);
}

/* ---- Code Snippet Blocks ---- */

/* Styles for the dark-themed code snippet blocks used for examples. */
.code-block {
  background-color: #0f172a; /* Dark background for high contrast. */
  color: #e6eaf2; /* Light text color for readability. */
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto; /* Allows horizontal scrolling for long code lines. */
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 1rem;
}