/**
 * Sidebar Visual Hierarchy
 * Creates clear distinction between section labels, parent items, and child items
 */

/* ============================================
   SECTION LABELS (Introduction, Metrics, Use Cases)
   Non-interactive headers that organize content
   ============================================ */

/* Top-level section headers - muted and label-like */
#quarto-sidebar .sidebar-section > .sidebar-item-container > .sidebar-item-text {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  padding-top: var(--space-6);
  padding-bottom: var(--space-2);
  cursor: default;
}

/* Remove hover effect from section labels */
#quarto-sidebar .sidebar-section > .sidebar-item-container > .sidebar-item-text:hover {
  background: transparent !important;
  color: var(--color-text-tertiary) !important;
}

/* Hide chevron from top-level section labels if they're not truly collapsible */
#quarto-sidebar .sidebar-section:not(:has(.sidebar-section)) > .sidebar-item-container > .sidebar-item-toggle {
  display: none !important;
}

/* ============================================
   COLLAPSIBLE PARENT ITEMS (Time & Effort, etc)
   Interactive sections that expand/collapse
   ============================================ */

/* Nested section headers (category parents) */
#quarto-sidebar .sidebar-section .sidebar-section > .sidebar-item-container > .sidebar-item-text {
  text-transform: none;
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: normal;
}

/* Hover state for collapsible parents */
#quarto-sidebar .sidebar-section .sidebar-section > .sidebar-item-container > .sidebar-item-text:hover {
  background: rgba(10, 31, 68, 0.04) !important;
  color: var(--color-navy-900) !important;
}

/* Keep chevron visible for collapsible parents */
#quarto-sidebar .sidebar-section .sidebar-section > .sidebar-item-container > .sidebar-item-toggle {
  display: block !important;
  color: var(--color-text-secondary);
}

/* ============================================
   CHILD ITEMS (Individual metric pages)
   Leaf nodes with visual indentation
   ============================================ */

/* Child items - add left border for visual hierarchy */
#quarto-sidebar .sidebar-section .sidebar-section .sidebar-section .sidebar-item a {
  padding-left: var(--space-6);
  border-left: 2px solid transparent;
  font-size: 0.9rem;
  font-weight: var(--weight-normal);
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
}

/* Hover state for child items */
#quarto-sidebar .sidebar-section .sidebar-section .sidebar-section .sidebar-item a:hover {
  border-left-color: rgba(212, 175, 55, 0.3);
  background: rgba(10, 31, 68, 0.02) !important;
  padding-left: calc(var(--space-6) + 2px);
  color: var(--color-text-primary);
}

/* Active child item */
#quarto-sidebar .sidebar-section .sidebar-section .sidebar-section .sidebar-item.active > div > a,
#quarto-sidebar .sidebar-section .sidebar-section .sidebar-section .sidebar-item a.active {
  border-left-color: var(--color-gold-medium);
  border-left-width: 3px;
  background: rgba(212, 175, 55, 0.08) !important;
  color: var(--color-navy-900);
  font-weight: var(--weight-medium);
}

/* ============================================
   SPACING IMPROVEMENTS
   Better breathing room between sections
   ============================================ */

/* Add space between top-level sections */
#quarto-sidebar > .sidebar-menu-container > .list-unstyled > .sidebar-item.sidebar-item-section {
  margin-top: var(--space-4);
}

/* First section doesn't need top margin */
#quarto-sidebar > .sidebar-menu-container > .list-unstyled > .sidebar-item.sidebar-item-section:first-child {
  margin-top: 0;
}

/* Add subtle divider between major sections */
#quarto-sidebar > .sidebar-menu-container > .list-unstyled > .sidebar-item.sidebar-item-section::before {
  content: '';
  display: block;
  height: 1px;
  background: rgba(10, 31, 68, 0.06);
  margin: var(--space-4) 0;
}

/* First section doesn't need divider */
#quarto-sidebar > .sidebar-menu-container > .list-unstyled > .sidebar-item.sidebar-item-section:first-child::before {
  display: none;
}

/* ============================================
   RESTRICTED CONTENT INDICATOR
   Visual indicator for gated/restricted pages
   ============================================ */

/* Add lock icon to restricted items */
.sidebar-item.restricted::after {
  content: '🔒';
  font-size: 0.75rem;
  margin-left: var(--space-2);
  opacity: 0.6;
}

/* ============================================
   MOBILE RESPONSIVENESS
   Adjust hierarchy for smaller screens
   ============================================ */

@media (max-width: 768px) {
  /* Slightly reduce font sizes on mobile */
  #quarto-sidebar .sidebar-section > .sidebar-item-container > .sidebar-item-text {
    font-size: 0.7rem;
  }

  #quarto-sidebar .sidebar-section .sidebar-section > .sidebar-item-container > .sidebar-item-text {
    font-size: 0.85rem;
  }

  #quarto-sidebar .sidebar-section .sidebar-section .sidebar-section .sidebar-item a {
    font-size: 0.85rem;
  }
}

/* ============================================
   DARK MODE ADJUSTMENTS
   Ensure hierarchy visible in dark theme
   ============================================ */

body.quarto-dark #quarto-sidebar .sidebar-section > .sidebar-item-container > .sidebar-item-text {
  color: rgba(255, 255, 255, 0.5);
}

body.quarto-dark #quarto-sidebar .sidebar-section .sidebar-section > .sidebar-item-container > .sidebar-item-text:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

body.quarto-dark #quarto-sidebar .sidebar-section .sidebar-section .sidebar-section .sidebar-item a {
  color: rgba(255, 255, 255, 0.7);
}

body.quarto-dark #quarto-sidebar .sidebar-section .sidebar-section .sidebar-section .sidebar-item a:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.02) !important;
}