/*
 * Wide layout with sidebar
 * Inspired by: gwern.net
 * Features: full-width, sidebar nav, multi-column, dark mode
 */

/* ===== Color Scheme - Light Mode (Default) ===== */
:root,
.quarto-light {
  --bg-color: #fefefe;
  --text-color: #2c2c2c;
  --text-muted: #666;
  --link-color: #1a5f7a;
  --link-hover: #0d3d4d;
  --border-color: #ddd;
  --bg-subtle: #f7f7f7;
  --code-bg: #f4f4f4;
  --accent: #1a5f7a;
  --sidebar-width: 200px;
  --content-max-width: 1400px;
  --icon-color: #666;
}

/* ===== Color Scheme - Dark Mode ===== */
.quarto-dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --text-muted: #aaa;
  --link-color: #6db3c9;
  --link-hover: #9dd4e4;
  --border-color: #3a3a3a;
  --bg-subtle: #242424;
  --code-bg: #2a2a2a;
  --accent: #6db3c9;
  --icon-color: #ccc;
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not(.quarto-light) {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --text-muted: #aaa;
    --link-color: #6db3c9;
    --link-hover: #9dd4e4;
    --border-color: #3a3a3a;
    --bg-subtle: #242424;
    --code-bg: #2a2a2a;
    --accent: #6db3c9;
    --icon-color: #ccc;
  }
}

/* ===== Base ===== */
html {
  font-size: 19px;
  scroll-behavior: smooth;
}

body {
  font-family: "Source Serif Pro", "Libre Baskerville", Georgia, serif;
  line-height: 1.55;
  color: var(--text-color) !important;
  background-color: var(--bg-color) !important;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* ===== Global Dark Mode Overrides ===== */
/* These ensure dark mode applies everywhere */
.quarto-dark,
.quarto-dark body,
.quarto-dark #quarto-content,
.quarto-dark main,
.quarto-dark .page-columns,
.quarto-dark .content,
.quarto-dark article {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* ===== Full Width Layout ===== */
#quarto-content {
  display: flex;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 2rem;
  background-color: var(--bg-color) !important;
}

.page-layout-full #quarto-content {
  max-width: 100%;
  padding: 0;
}

/* ===== Left TOC Sidebar ===== */
#quarto-sidebar {
  display: block !important;
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width);
  padding: 1.5rem 1rem;
  background: var(--bg-subtle) !important;
  border-right: 1px solid var(--border-color) !important;
  position: fixed !important;
  left: 0;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  z-index: 100;
}

/* Offset main content for fixed sidebar */
body:not(.fullcontent) #quarto-content {
  margin-left: var(--sidebar-width);
}

/* Hide the collapse toggle glass overlay */
#quarto-sidebar-glass {
  display: none !important;
}

/* TOC title */
#toc-title,
.sidebar-title {
  font-family: "Source Sans Pro", -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted) !important;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

/* TOC list styling */
#TOC ul,
.sidebar nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#TOC ul ul,
.sidebar nav ul ul {
  padding-left: 0.75rem;
  margin-top: 0.25rem;
}

#TOC li,
.sidebar nav li {
  margin: 0.15rem 0;
}

#TOC a,
.sidebar nav a {
  font-family: "Source Sans Pro", -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted) !important;
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border-bottom: none !important;
  line-height: 1.4;
  transition: all 0.15s ease;
}

#TOC a:hover,
.sidebar nav a:hover {
  color: var(--text-color) !important;
  background: var(--bg-color) !important;
}

#TOC a.active,
.sidebar nav a.active {
  color: var(--accent) !important;
  font-weight: 500;
}

/* Nested items slightly smaller */
#TOC ul ul a {
  font-size: 0.8rem;
  padding-left: 0.75rem;
}

#TOC ul ul ul a {
  font-size: 0.75rem;
  padding-left: 1rem;
}

/* ===== Main Content ===== */
#quarto-document-content,
.content,
main {
  flex: 1;
  min-width: 0;
  padding: 2rem 3rem;
  max-width: 1100px;
  background-color: var(--bg-color) !important;
}

/* ===== Navbar ===== */
#quarto-header,
.navbar {
  background: var(--bg-subtle) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.navbar > .container-fluid {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0.5rem 2rem;
}

.navbar-brand,
.navbar-title {
  display: none !important;
}

.navbar-nav {
  gap: 0.25rem;
}

.nav-link {
  font-family: "Source Sans Pro", -apple-system, sans-serif !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
  border-radius: 4px !important;
  border-bottom: none !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-color) !important;
  background: var(--bg-color) !important;
}

.navbar a {
  border-bottom: none !important;
}

/* ===== Navbar Icons Fix (Light & Dark) ===== */
/* Override Bootstrap's data-bs-theme="dark" */
.navbar,
.navbar[data-bs-theme="dark"],
nav.navbar[data-bs-theme="dark"] {
  --bs-navbar-color: #555 !important;
  --bs-navbar-hover-color: #222 !important;
  --bs-navbar-active-color: #222 !important;
  --bs-link-color: #555 !important;
  --bs-emphasis-color: #333 !important;
  --bs-body-color: #333 !important;
}

.quarto-dark .navbar,
.quarto-dark .navbar[data-bs-theme="dark"],
.quarto-dark nav.navbar[data-bs-theme="dark"] {
  --bs-navbar-color: #aaa !important;
  --bs-navbar-hover-color: #eee !important;
  --bs-navbar-active-color: #eee !important;
  --bs-link-color: #aaa !important;
  --bs-emphasis-color: #ddd !important;
  --bs-body-color: #ddd !important;
}

/* Theme toggle button - force visibility */
.quarto-color-scheme-toggle {
  color: var(--icon-color) !important;
  opacity: 1 !important;
}

.quarto-color-scheme-toggle .bi,
.quarto-color-scheme-toggle .bi::before,
.quarto-color-scheme-toggle i {
  color: var(--icon-color) !important;
  fill: var(--icon-color) !important;
  -webkit-text-fill-color: var(--icon-color) !important;
}

/* Force light mode toggle to be dark colored */
.quarto-light .quarto-color-scheme-toggle,
.quarto-light .quarto-color-scheme-toggle .bi,
.quarto-light .quarto-color-scheme-toggle .bi::before,
.quarto-light .quarto-color-scheme-toggle i,
body.quarto-light .navbar .quarto-color-scheme-toggle,
body.quarto-light .navbar .quarto-color-scheme-toggle .bi,
body.quarto-light .navbar .quarto-color-scheme-toggle i,
html.quarto-light .quarto-color-scheme-toggle,
[data-bs-theme="dark"] .quarto-light .quarto-color-scheme-toggle .bi {
  color: #333 !important;
  fill: #333 !important;
  -webkit-text-fill-color: #333 !important;
  opacity: 1 !important;
}

/* Force dark mode toggle to be light colored */
.quarto-dark .quarto-color-scheme-toggle,
.quarto-dark .quarto-color-scheme-toggle .bi,
.quarto-dark .quarto-color-scheme-toggle .bi::before,
.quarto-dark .quarto-color-scheme-toggle i {
  color: #ccc !important;
  fill: #ccc !important;
  -webkit-text-fill-color: #ccc !important;
}

/* Override navbar data-bs-theme="dark" for light mode */
.navbar[data-bs-theme="dark"] .quarto-color-scheme-toggle .bi,
.navbar[data-bs-theme="dark"] .quarto-color-scheme-toggle .bi::before {
  color: #333 !important;
  fill: #333 !important;
  -webkit-text-fill-color: #333 !important;
}

.quarto-dark .navbar[data-bs-theme="dark"] .quarto-color-scheme-toggle .bi,
.quarto-dark .navbar[data-bs-theme="dark"] .quarto-color-scheme-toggle .bi::before {
  color: #ccc !important;
  fill: #ccc !important;
  -webkit-text-fill-color: #ccc !important;
}

/* Search button */
#quarto-search button,
.aa-DetachedSearchButton {
  color: var(--icon-color) !important;
  border-color: var(--border-color) !important;
  background: transparent !important;
}

#quarto-search .aa-DetachedSearchButtonIcon svg,
.aa-DetachedSearchButtonIcon svg {
  color: var(--icon-color) !important;
  fill: var(--icon-color) !important;
  stroke: var(--icon-color) !important;
}

/* Hamburger menu icon */
.navbar-toggler {
  border-color: var(--border-color) !important;
}

.quarto-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.quarto-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ccc' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: "Source Sans Pro", -apple-system, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--text-color) !important;
}

h1 {
  font-size: 2rem;
  margin-top: 0;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border-color);
}

h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-color);
}

h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p, li, td, th, span, div {
  color: var(--text-color);
}

p { margin: 0.9rem 0; }

/* ===== Links ===== */
a {
  color: var(--link-color) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

a:hover {
  color: var(--link-hover) !important;
  border-bottom-color: var(--link-hover);
}

/* ===== Multi-Column Layout ===== */
.columns-2 {
  column-count: 2;
  column-gap: 2rem;
}

.columns-3 {
  column-count: 3;
  column-gap: 2rem;
}

/* Auto multi-column for wide content */
@media (min-width: 1200px) {
  .multi-column,
  .content > ol:not(.no-columns) {
    column-count: 2;
    column-gap: 3rem;
  }

  .content > ol:not(.no-columns) > li {
    break-inside: avoid;
  }
}

/* ===== Lists ===== */
ul, ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

li { margin: 0.4rem 0; }
ol li { margin: 0.75rem 0; }

/* ===== Code ===== */
pre, code {
  font-family: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
  font-size: 0.85rem;
}

code {
  background: var(--code-bg) !important;
  color: var(--text-color) !important;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

pre {
  background: var(--code-bg) !important;
  color: var(--text-color) !important;
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  overflow-x: auto;
  border: 1px solid var(--border-color) !important;
}

pre code {
  background: none !important;
  padding: 0;
}

/* Code block text */
.sourceCode,
.sourceCode span {
  color: var(--text-color);
}

/* ===== Tables ===== */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

th, td {
  border: 1px solid var(--border-color) !important;
  padding: 0.6rem 0.9rem;
  text-align: left;
  color: var(--text-color) !important;
  background-color: var(--bg-color) !important;
}

th {
  background: var(--bg-subtle) !important;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
}

/* ===== Blockquotes ===== */
blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--text-muted) !important;
  background: var(--bg-subtle) !important;
  font-style: italic;
}

/* ===== Horizontal Rules ===== */
hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 2.5rem 0;
}

/* ===== Profile Image ===== */
img[src*="profilepic"] {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ===== Two Column Profile Layout ===== */
.quarto-layout-panel {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.quarto-layout-cell:first-child {
  flex: 0 0 auto;
}

.quarto-layout-cell {
  flex: 1;
}

/* ===== Blog Listing ===== */
.quarto-listing,
.quarto-listing-default {
  background-color: var(--bg-color) !important;
}

.quarto-listing .listing-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
}

.quarto-listing .listing-title {
  font-weight: 600;
  color: var(--link-color) !important;
}

.quarto-listing .listing-date,
.listing-date {
  color: var(--text-muted) !important;
  font-size: 0.9rem;
}

.listing-description {
  color: var(--text-color) !important;
}

/* ===== Callouts ===== */
.callout {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  border-left: 4px solid var(--accent);
  background: var(--bg-subtle) !important;
  color: var(--text-color) !important;
}

/* ===== Footer ===== */
.nav-footer {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-muted) !important;
  background-color: var(--bg-color) !important;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 992px) {
  #quarto-sidebar {
    display: none !important;
  }

  body:not(.fullcontent) #quarto-content {
    margin-left: 0;
  }

  #quarto-document-content,
  .content,
  main {
    padding: 1.5rem;
  }

  .quarto-layout-panel {
    flex-direction: column;
    gap: 1rem;
  }

  .columns-2, .columns-3, .multi-column {
    column-count: 1;
  }

  /* Ensure theme toggle is visible on mobile */
  .quarto-color-scheme-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.5rem !important;
  }

  /* Mobile navbar fixes */
  .navbar > .container-fluid {
    padding: 0.5rem 1rem;
  }
}

/* ===== Print ===== */
@media print {
  #quarto-sidebar, .navbar, .nav-footer { display: none; }
  body { font-size: 12pt; }
  a { color: inherit; text-decoration: underline; }
}

/* ===== Selection ===== */
::selection {
  background: var(--accent);
  color: var(--bg-color);
}

/* ===== Quarto/Bootstrap dark mode overrides ===== */
/* Override darkly theme's hardcoded colors with our variables */

/* Main backgrounds - override Bootstrap's bg classes */
.quarto-dark,
.quarto-dark body,
.quarto-dark .bg-body,
.quarto-dark .bg-light,
.quarto-dark #quarto-content,
.quarto-dark #quarto-document-content,
.quarto-dark main,
.quarto-dark main.content,
.quarto-dark .page-columns,
.quarto-dark article,
.quarto-dark section {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Navbar in dark mode */
.quarto-dark #quarto-header,
.quarto-dark .navbar,
.quarto-dark .navbar.bg-dark,
.quarto-dark .navbar.bg-primary {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border-color) !important;
}

.quarto-dark .nav-link,
.quarto-dark .navbar-nav .nav-link {
  color: var(--text-muted) !important;
}

.quarto-dark .nav-link:hover,
.quarto-dark .nav-link.active {
  color: var(--text-color) !important;
}

/* Sidebar in dark mode */
.quarto-dark #quarto-sidebar,
.quarto-dark .sidebar,
.quarto-dark #TOC {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border-color) !important;
}

/* All text elements */
.quarto-dark h1,
.quarto-dark h2,
.quarto-dark h3,
.quarto-dark h4,
.quarto-dark h5,
.quarto-dark h6,
.quarto-dark p,
.quarto-dark li,
.quarto-dark span,
.quarto-dark div,
.quarto-dark label {
  color: var(--text-color) !important;
}

/* Links */
.quarto-dark a:not(.nav-link):not(.navbar-brand) {
  color: var(--link-color) !important;
}

.quarto-dark a:hover:not(.nav-link):not(.navbar-brand) {
  color: var(--link-hover) !important;
}

/* Code blocks */
.quarto-dark pre,
.quarto-dark code,
.quarto-dark .sourceCode {
  background-color: var(--code-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

.quarto-dark pre code {
  background-color: transparent !important;
}

/* Tables */
.quarto-dark table,
.quarto-dark th,
.quarto-dark td,
.quarto-dark .table {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

.quarto-dark th,
.quarto-dark thead th {
  background-color: var(--bg-subtle) !important;
}

/* Cards and containers */
.quarto-dark .card,
.quarto-dark .card-body,
.quarto-dark .card-header,
.quarto-dark .list-group-item,
.quarto-dark .accordion-item,
.quarto-dark .accordion-body,
.quarto-dark .dropdown-menu,
.quarto-dark .modal-content,
.quarto-dark .offcanvas {
  background-color: var(--bg-subtle) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Buttons */
.quarto-dark .btn,
.quarto-dark .btn-outline-secondary,
.quarto-dark .btn-outline-primary {
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Forms */
.quarto-dark .form-control,
.quarto-dark .form-select,
.quarto-dark input,
.quarto-dark textarea {
  background-color: var(--bg-subtle) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Footer */
.quarto-dark .nav-footer,
.quarto-dark footer {
  background-color: var(--bg-color) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

/* Blockquotes and callouts */
.quarto-dark blockquote,
.quarto-dark .callout {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Search modal/dropdown */
.quarto-dark .aa-Panel,
.quarto-dark .aa-DetachedContainer,
.quarto-dark .aa-Autocomplete,
.quarto-dark .aa-Form {
  background-color: var(--bg-subtle) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

.quarto-dark .aa-Item {
  color: var(--text-color) !important;
}

.quarto-dark .aa-Item[aria-selected="true"] {
  background-color: var(--bg-color) !important;
}

.quarto-dark .aa-Input {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Listing/blog cards */
.quarto-dark .quarto-listing,
.quarto-dark .listing-item,
.quarto-dark .quarto-grid-item {
  background-color: var(--bg-color) !important;
  border-color: var(--border-color) !important;
}

.quarto-dark .listing-title,
.quarto-dark .listing-description,
.quarto-dark .listing-date {
  color: var(--text-color) !important;
}

/* Horizontal rules */
.quarto-dark hr {
  border-color: var(--border-color) !important;
}

/* ===== Theme Toggle Icon Content ===== */
/* Quarto doesn't add icon class, so we set it via CSS */
.quarto-color-scheme-toggle .bi::before {
  content: "\F5A2"; /* bi-sun-fill */
  font-family: "bootstrap-icons" !important;
}

.quarto-color-scheme-toggle.alternate .bi::before {
  content: "\F497"; /* bi-moon-fill */
}

/* ===== NUCLEAR OPTION: Force toggle icon visibility ===== */
/* This must be at the end to override everything */
i.bi,
.bi,
.bi::before,
[class^="bi-"]::before,
.quarto-color-scheme-toggle i,
.quarto-color-scheme-toggle .bi,
.quarto-color-scheme-toggle .bi::before,
.quarto-navbar-tools i,
.quarto-navbar-tools .bi,
.quarto-navbar-tools .bi::before,
.navbar i.bi,
.navbar .bi,
.navbar .bi::before {
  color: #333 !important;
  fill: #333 !important;
  -webkit-text-fill-color: #333 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dark mode override - must come after */
.quarto-dark i.bi,
.quarto-dark .bi,
.quarto-dark .bi::before,
.quarto-dark [class^="bi-"]::before,
.quarto-dark .quarto-color-scheme-toggle i,
.quarto-dark .quarto-color-scheme-toggle .bi,
.quarto-dark .quarto-color-scheme-toggle .bi::before,
.quarto-dark .quarto-navbar-tools i,
.quarto-dark .quarto-navbar-tools .bi,
.quarto-dark .quarto-navbar-tools .bi::before,
.quarto-dark .navbar i.bi,
.quarto-dark .navbar .bi,
.quarto-dark .navbar .bi::before {
  color: #ddd !important;
  fill: #ddd !important;
  -webkit-text-fill-color: #ddd !important;
}