/* ---------- Import Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=JetBrains+Mono&display=swap');

/* ---------- Base Styles ---------- */
body {
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
}

/* ---------- Light Theme ---------- */
body.light {
  background-color: #fafafa;
  color: #222;
}

body.light h1, body.light h2, body.light h3, body.light h4 {
  color: #2b3a42;
}

body.light pre code {
  background: #f6f8fa;
  color: #24292e;
}

body.light code {
  background: #f0f0f0;
  color: #d6336c;
}

/* ---------- Dark Theme ---------- */
body.dark {
  background-color: #1e1e1e;
  color: #e6e6e6;
}

body.dark h1, body.dark h2, body.dark h3, body.dark h4 {
  color: #f0c808;
}

/* ---------- Code Blocks ---------- */
pre code {
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.95em;
  display: block;
  padding: 1em;
  border-radius: 6px;
  overflow-x: auto;
}

code {
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Dark mode code block */
body.dark pre,
body.dark .sourceCode pre {
  background-color: #2d2d2d;
  border-radius: 6px;
  padding: 1em;
  overflow-x: auto;
}

body.dark pre code,
body.dark .sourceCode pre code {
  color: #f8f8f2;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95em;
}

/* Syntax highlighting for R code 99bf9c */
body.dark pre.sourceCode span.co  { color: #99bf9c  !important; font-style: italic; }  /* comments */
body.dark .sourceCode .cf  { color: #f92672; }  /* functions */
body.dark .sourceCode .fu  { color: #f1fa8c; }  /* keywords like return */
body.dark .sourceCode .ot  { color: #f92672; }  /* operators */
body.dark .sourceCode .nn  { color: #66d9ef; }  /* numbers */
body.dark .sourceCode pre code span:not(.co):not(.cf):not(.fu):not(.ot):not(.nn) {
  color: #ffb86c;  /* bright orange for variables */
}

/* Inline code in dark mode */
body.dark code:not(pre code) {
  background-color: #444;
  color: #ffb86c;
  padding: 0.15em 0.35em;
  border-radius: 4px;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }

/* ---------- Links ---------- */
a {
  text-decoration: none;
  transition: color 0.2s ease;
}

body.light a { color: #0066cc; }
body.light a:hover { color: #004c99; text-decoration: underline; }

body.dark a { color: #4dabf7; }
body.dark a:hover { color: #82cfff; text-decoration: underline; }

/* ---------- Blockquotes ---------- */
blockquote {
  border-left: 5px solid #888;
  margin: 1em 0;
  padding: 0.5em 1em;
  font-style: italic;
}

/* ---------- Tables ---------- */
table {
  border-collapse: collapse;
  margin: 1.5em 0;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 0.6em;
  text-align: left;
}

body.dark th, body.dark td {
  border: 1px solid #555;
}

th {
  font-weight: 600;
}

/* ---------- Footer ---------- */
footer {
  margin-top: 3em;
  padding: 1.5em;
  text-align: center;
  font-size: 0.9em;
}

/* ---------- Top Bar ---------- */
#top-bar {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 2em;
  background-color: #2b3a42;
  color: #f0c808;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 1.5em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
}

#top-bar h1 {
  margin: 0;
}

/* ---------- Theme Toggle Button ---------- */
/* Fixed above top bar so it never hides and does not overlap search */
#theme-toggle {
  position: fixed;
  top: 0.8em;       /* match top-bar padding */
  right: 4em;       /* enough space from search */
  padding: 0.5em 1em;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  background: #f0c808;
  color: #222;
  transition: background 0.3s, color 0.3s;
  z-index: 1002;    /* above top-bar */
}

body.dark #theme-toggle {
  background: #444;
  color: #eee;
}

/* ---------- Navbar ---------- */
.navbar, .navbar .navbar-inner {
  background-color: #033c5a !important;
  color: #f8e08e !important;
}

.navbar a {
  color: #f8e08e !important;
  font-weight: 600;
}

.navbar a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Sidebar: collapse everything except the active section */
.sidebar .sidebar-section .collapse {
  display: none;
}

.sidebar .sidebar-section .collapse.show {
  display: block;
}

/* -------------------- */
/* Sidebar light theme  */
/* -------------------- */
body.light .sidebar {
  background-color: #f8f9fa;   /* light background */
  color: #2b3a42;              /* dark text */
}

body.light .sidebar a {
  color: #2b3a42;
}

body.light .sidebar .active,
body.light .sidebar a:hover {
  background-color: #e6e6e6;   /* subtle highlight */
  color: #2b3a42;
}

/* -------------------- */
/* Sidebar light theme  */
/* -------------------- */
body.light .sidebar,
body.light .sidebar-content,
body.light .sidebar-navigation {
  background-color: #f8f9fa;   /* light background */
  color: #2b3a42;
}

body.light .sidebar a {
  color: #2b3a42;
}

body.light .sidebar .active,
body.light .sidebar a:hover {
  background-color: #e6e6e6;
  color: #2b3a42;
}

/* ========= Sidebar theming that follows your light/dark toggle ========= */

/* LIGHT */
body.light #quarto-sidebar,
body.light nav.sidebar,
body.light .quarto-sidebar,
body.light #quarto-sidebar .sidebar-menu-container,
body.light nav.sidebar .sidebar-menu-container {
  background-color: #f8f9fa !important;   /* light bg */
  color: #2b3a42 !important;               /* dark text */
}

body.light #quarto-sidebar a {
  color: #2b3a42 !important;
}

body.light #quarto-sidebar .active,
body.light #quarto-sidebar a:hover {
  background-color: #e6e6e6 !important;
  color: #2b3a42 !important;
}

/* DARK */
body.dark #quarto-sidebar,
body.dark nav.sidebar,
body.dark .quarto-sidebar,
body.dark #quarto-sidebar .sidebar-menu-container,
body.dark nav.sidebar .sidebar-menu-container {
  background-color: #2b3a42 !important;    /* matches your top bar */
  color: #f0c808 !important;               /* gold text */
}

body.dark #quarto-sidebar a {
  color: #f0c808 !important;
}

body.dark #quarto-sidebar .active,
body.dark #quarto-sidebar a:hover {
  background-color: #3c4a52 !important;    /* subtle highlight */
  color: #ffffff !important;
}

/* Optional: remove any stray inherited bg on items */
body.dark #quarto-sidebar .sidebar-item-container,
body.light #quarto-sidebar .sidebar-item-container {
  background-color: transparent !important;
}

/* Smooth transition for sidebar collapsible sections */
.sidebar-section.collapse {
  transition: height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

/* Optional: fade effect when expanding */
.sidebar-section.collapse.show {
  opacity: 1;
}

.sidebar-section.collapse:not(.show) {
  opacity: 0;
}

.sidebar-item-toggle[aria-expanded="true"] i {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.sidebar-item-toggle i {
  transition: transform 0.3s ease;
}