/* =========================================
   LIGHT MODE (Default) BUTTON COLORS
   ========================================= */
.btn-custom {
  color: #212529;         /* Text and border color */
  border-color: #212529; 
  background-color: transparent;
}

/* Light mode hover effect */
.btn-custom:hover {
  color: #ffffff;         /* Text turns white (light) */
  background-color: #212529; /* Background fills dark */
  border-color: #212529;
}

/* =========================================
   DARK MODE BUTTON COLORS
   ========================================= */
body.quarto-dark .btn-custom {
  color: #dee2e6 !important;         /* Dark mode text/border color */
  border-color: #dee2e6 !important;
}

/* Dark mode hover effect */
body.quarto-dark .btn-custom:hover {
  color: #212529 !important;         /* Text turns dark */
  background-color: #dee2e6 !important; /* Background fills light */
  border-color: #dee2e6 !important;
}

/* =========================================
   LIGHT MODE (Default) NAVBAR
   ========================================= */
.navbar {
  font-weight: 500;
  background-color: #ced2d9 !important; 
  border-bottom: 1px solid #ced2d9 !important;
  
  /* Overwrite Bootstrap's hidden white default colors */
  --bs-navbar-color: #2c3e50 !important;
  --bs-navbar-hover-color: #ffffff !important; /* Hover turns bright/light */
}

/* Force all links and icons (including search & lightswitch) to inherit the dark color */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar i, 
.navbar svg {
  color: var(--bs-navbar-color) !important;
  fill: var(--bs-navbar-color) !important;
}

/* Hover states for all links, search, and the toggle */
.navbar .nav-link:hover,
.navbar .navbar-brand:hover,
.navbar a:hover i,
.navbar a:hover svg,
.navbar .quarto-color-scheme-toggle:hover i,
.navbar .quarto-color-scheme-toggle:hover svg,
.navbar #quarto-search:hover i,
.navbar #quarto-search:hover svg {
  color: var(--bs-navbar-hover-color) !important;
  fill: var(--bs-navbar-hover-color) !important;
}

/* =========================================
   DARK MODE NAVBAR
   ========================================= */
body.quarto-dark .navbar {
  background-color: #121212 !important; 
  border-bottom: 1px solid #333333 !important;
  
  /* Switch variables to light text for dark mode */
  --bs-navbar-color: #e0e0e0 !important;
  --bs-navbar-hover-color: #6c757d !important; /* Hover turns dark grey */
}

/* =========================================
   HIJACK QUARTO TOGGLE (NO OVERLAYS)
   ========================================= */

/* 1. Hide Quarto's default icons completely (both light and dark mode) */
.navbar .quarto-color-scheme-toggle * {
  display: none !important;
}

/* 2. Light Mode: Attach Font Awesome Sun directly to the button */
.navbar .quarto-color-scheme-toggle::before {
  content: "\f185" !important; /* Font Awesome Sun */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important; 
  color: var(--bs-navbar-color) !important;
  display: inline-block !important;
  font-size: 1.15rem; /* Matches the size of other navbar icons */
  
  /* FIX: Use transform for vertical centering without sagging */
  transform: translateY(-0.1rem); 
}

/* 3. Dark Mode: Swap to Font Awesome Moon */
body.quarto-dark .navbar .quarto-color-scheme-toggle::before {
  content: "\f186" !important; /* Font Awesome Moon */
  color: var(--bs-navbar-color) !important; 
}

/* 4. Hover Effect for both modes */
.navbar .quarto-color-scheme-toggle:hover::before {
  color: var(--bs-navbar-hover-color) !important;
}

/* =========================================
   GENERAL HYPERLINKS (BASE GREY + INVERSION)
   ========================================= */

/* 1. Light Mode (Default) Links */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.quarto-color-scheme-toggle) {
  color: #6c757d !important; /* Base medium grey */
  transition: color 0.2s ease-in-out; /* Adds a smooth fade effect */
}

/* Light Mode Hover (Inverts to dark) */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.quarto-color-scheme-toggle):hover {
  color: #212529 !important; /* Turns nearly black */
}

/* 2. Dark Mode Links */
body.quarto-dark a:not(.btn):not(.nav-link):not(.navbar-brand):not(.quarto-color-scheme-toggle) {
  color: #adb5bd !important; /* Base light-medium grey for dark mode visibility */
}

/* Dark Mode Hover (Inverts to bright white) */
body.quarto-dark a:not(.btn):not(.nav-link):not(.navbar-brand):not(.quarto-color-scheme-toggle):hover {
  color: #ffffff !important; /* Turns stark white */
}

/* 3. Text Selection (Click and drag highlight) */
::selection {
  background-color: #d3d3d3 !important; 
  color: #212529 !important;            
}

body.quarto-dark ::selection {
  background-color: #555555 !important; 
  color: #f8f9fa !important;            
}

/* =========================================
   TABLE OF CONTENTS (TOC)
   ========================================= */

/* 1. Light Mode (Default) */
/* Base inactive links */
#TOC a,
.toc-actions a {
  color: #6c757d !important; 
  transition: color 0.2s ease-in-out;
}

/* Hovering over inactive links */
#TOC a:hover,
.toc-actions a:hover {
  color: #212529 !important;
}

/* The ACTIVE link and the vertical tracking line */
#TOC a.active,
#TOC .nav-link.active {
  color: #212529 !important; 
  border-left-color: #212529 !important; /* Kills the teal vertical line */
}


/* 2. Dark Mode */
/* Base inactive links */
body.quarto-dark #TOC a,
body.quarto-dark .toc-actions a {
  color: #adb5bd !important;
}

/* Hovering over inactive links */
body.quarto-dark #TOC a:hover,
body.quarto-dark .toc-actions a:hover {
  color: #ffffff !important;
}

/* The ACTIVE link and the vertical tracking line */
body.quarto-dark #TOC a.active,
body.quarto-dark #TOC .nav-link.active {
  color: #ffffff !important;
  border-left-color: #ffffff !important; /* Kills the dark mode teal line */
}