/**
 * ============================================================================
 * CUSTOM SCROLLBAR - STYLED SCROLLBARS FOR DARK THEME
 * ============================================================================
 * Customizes the appearance of scrollbars across the entire website.
 * Provides a consistent, modern look that matches the dark theme.
 * 
 * BROWSER SUPPORT:
 * - Firefox: Uses scrollbar-width and scrollbar-color (standard properties)
 * - Chrome/Safari/Edge: Uses ::-webkit-scrollbar pseudo-elements
 * 
 * DESIGN CHOICES:
 * - Thin scrollbars (12px width) for modern appearance
 * - Dark colors matching site theme
 * - Rounded scrollbar thumb for visual polish
 * - Hover states for better interactivity
 * - Component-specific overrides for certain elements
 * ============================================================================
 */

/* ========================================================================== */
/* FIREFOX SCROLLBAR - STANDARD PROPERTIES */
/* ========================================================================== */
/* Modern browsers (Firefox) support these standard scrollbar properties */
* {
  scrollbar-width: thin; /* Thin scrollbar (vs auto or none) */
  scrollbar-color: #211d25 #000000; /* Thumb color, Track color */
}

/* ========================================================================== */
/* WEBKIT SCROLLBAR - CHROME, SAFARI, EDGE */
/* ========================================================================== */

/* SCROLLBAR DIMENSIONS - WIDTH AND HEIGHT */
::-webkit-scrollbar {
  width: 12px; /* Vertical scrollbar width */
  height: 12px; /* Horizontal scrollbar height */
}

/* SCROLLBAR TRACK - BACKGROUND CHANNEL */
/* The track is the background where the thumb slides */
::-webkit-scrollbar-track {
  background: #000000; /* Black background matching page */
}

/* SCROLLBAR THUMB - DRAGGABLE HANDLE */
/* The thumb is the part users drag to scroll */
::-webkit-scrollbar-thumb {
  background: #211d25; /* Dark gray thumb */
  border-radius: 6px; /* Rounded corners for modern look */
  border: 2px solid #000000; /* Border creates visual separation from track */
}

/* SCROLLBAR THUMB HOVER STATE */
/* Slightly lighter color when user hovers over thumb */
::-webkit-scrollbar-thumb:hover {
  background: #2a2530; /* Lighter gray on hover */
}

/* SCROLLBAR THUMB ACTIVE STATE */
/* Color when user is actively dragging the thumb */
::-webkit-scrollbar-thumb:active {
  background: #333; /* Even lighter when clicking/dragging */
}

/* ========================================================================== */
/* COMPONENT-SPECIFIC SCROLLBAR OVERRIDES */
/* ========================================================================== */
/* Some components need slightly different scrollbar styling */

/* ARTICLE DISPLAY AND SEARCH RESULTS - CUSTOM TRACK COLOR */
.article-display::-webkit-scrollbar-track,
.search-popup__results-list::-webkit-scrollbar-track {
  background: #191919; /* Slightly lighter track for these components */
}

/* ARTICLE DISPLAY AND SEARCH RESULTS - CUSTOM THUMB */
.article-display::-webkit-scrollbar-thumb,
.search-popup__results-list::-webkit-scrollbar-thumb {
  background: #211d25; /* Same thumb color */
  border: 2px solid #191919; /* Border matches custom track color */
}

/* ARTICLE DISPLAY AND SEARCH RESULTS - HOVER STATE */
.article-display::-webkit-scrollbar-thumb:hover,
.search-popup__results-list::-webkit-scrollbar-thumb:hover {
  background: #2a2530; /* Lighter on hover */
}

/* ========================================================================== */
/* SCROLLBAR CORNER - WHERE SCROLLBARS MEET */
/* ========================================================================== */
/* Styles the corner where vertical and horizontal scrollbars intersect */
::-webkit-scrollbar-corner {
  background: #000000; /* Match page background */
}