// my-custom-theme/styles/override.styl
// This file is used to override default styles of the VuePress Reco theme.
// It's loaded AFTER Reco's default styles, ensuring your rules take precedence.

// --- 1. Define Your Custom Blue Color Palette ---
$blue-50  = #E3F2FD  // Very light blue, good for subtle backgrounds
$blue-100 = #BBDEFB  // Light blue, for active background
$blue-500 = #2196F3  // Primary blue, good for hover text/borders
$blue-700 = #1976D2  // Darker blue, good for active text/borders


// --- 2. Sidebar Customizations (from previous steps) ---
.sidebar
  .sidebar-heading
    &.open, &:hover
      color $blue-500 !important

  .sidebar-link
    &:hover
      color $blue-500 !important
      background-color $blue-50 !important
      transition color 0.2s ease, background-color 0.2s ease

  a.sidebar-link.active
    font-weight 600
    color $blue-700 !important
    background $blue-100 !important
    border-right 3px solid $blue-700 !important




// --- 4. Markdown Header Anchor Link Bar (Vertical Bar) ---
.header-anchor
  color $blue-500 !important

// **CRITICAL FIX: Change the vertical bar next to h2 headings**
.page .theme-reco-content h2::before
  // The original rule has 'border-left: 5px solid #3eaf7c;'.
  // We need to specifically override that border-left color.
  border-left 5px solid $blue-700 !important // Use a darker blue for the bar


// --- 5. Other Global Link/Button Hover Effects (Optional) ---
a
  &:hover
    color $blue-500 !important

.markdown-it-code-copy
  .copy-button
    &:hover
      background-color $blue-500 !important
      color #fff !important