/* Custom theme variables */
:root {
  --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --line-height: 1.6;
  --text-color: #333;
  --bg-color: #fff;
  --sidebar-bg: #f8f9fa;
  --sidebar-width: 280px;
  --sidebar-border: #e0e0e0;
  --content-max-width: 1200px;
  --link-color: #0066cc;
  --link-hover: #0052a3;
  --header-bg: #fff;
  --header-border: #e0e0e0;
  --theme-transition: 0.3s ease; /* Standardized transition speed */
  --charcoal-400: #6b7280;
}

[data-theme="dark"] {
  --text-color: #e0e0e0;
  --bg-color: #1e1e1e;
  --sidebar-bg: #252525;
  --sidebar-border: #404040;
  --link-color: #66b3ff;
  --link-hover: #99ccff;
  --header-bg: #252525;
  --header-border: #404040;
  --charcoal-400: #9ca3af;
}

/* Base styles */
html {
  background-color: var(--bg-color);
  transition: background-color var(--theme-transition);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  letter-spacing: 0.01em;
  color: var(--text-color);
  background-color: var(--bg-color);
  background-image: url('../img/grid.png');
  background-repeat: repeat-x;
  background-position: 0 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: background-color var(--theme-transition), color var(--theme-transition);
  padding-top: 60px; /* Space for header */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Prevent horizontal overflow */
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Dark mode - same grid image, it will appear more subtle on dark background */
[data-theme="dark"] body {
  background-image: url('../img/grid.png');
  background-repeat: repeat-x;
  background-position: 0 0;
}

/* Site header - full width across viewport */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}

[data-theme="dark"] .site-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.site-header h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
  transition: color var(--theme-transition);
  flex: 1; /* Allow h1 to take available space */
  text-decoration: none;
  border-bottom: none;
}

/* Remove underline from h1 on tablet and mobile */
@media (max-width: 1264px) {
  .site-header h1,
  .site-header h1 a {
    text-decoration: none !important;
    border-bottom: none !important;
  }
}

.site-header .header-search {
  width: 280px;
  margin: 0 1rem;
  position: relative;
  flex-shrink: 0;
  z-index: 1000; /* Ensure dropdown appears above other content */
}

.site-header .header-search input {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition);
}

.site-header .header-search input:focus {
  outline: none;
  border-color: var(--link-color);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.site-header .header-search input::placeholder {
  color: var(--text-color);
  opacity: 0.5;
  transition: color var(--theme-transition);
}

/* Search icon in header search */
.site-header .header-search::after {
  content: '\f002';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
  opacity: 0.5;
  pointer-events: none;
}

.site-header .header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Hide header search on mobile, show sidebar search */
@media (max-width: 767px) {
  .site-header .header-search {
    display: none !important;
  }
  
  /* Show sidebar search on mobile */
  .sidebar .search-box {
    display: block !important;
  }
}

/* Hide sidebar search on tablet and above, show header search */
@media (min-width: 768px) {
  .sidebar .search-box {
    display: none !important;
  }
  
  .site-header .header-search {
    display: block !important;
  }
}

/* Mobile menu toggle - positioned on the left */
.site-header .mobile-menu-toggle {
  margin-right: 1rem;
  order: -1; /* Ensure it appears before h1 */
}

/* Prevent content flicker - ensure content is visible */
body > .container {
  opacity: 1 !important;
  visibility: visible !important;
}

.col-md-9,
[role="main"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Sidebar header - removed, now in site header */
.sidebar-header {
  display: none !important;
}

/* Main layout */
.wrapper {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  position: fixed;
  left: 0;
  top: 60px; /* Below header */
  bottom: 0;
  overflow-y: auto;
  z-index: 50;
  transition: background-color var(--theme-transition), border-color var(--theme-transition);
}

/* Search box - Material style */
.search-box {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--sidebar-border);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition);
}

.search-box input:focus {
  outline: none;
  border-color: var(--link-color);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.search-box input::placeholder {
  color: var(--text-color);
  opacity: 0.5;
  transition: color var(--theme-transition);
}

/* Search icon */
.search-box::after {
  content: '\f002';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
  opacity: 0.5;
  pointer-events: none;
}

/* Search results - Material style */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--bg-color);
  border: 1px solid var(--sidebar-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 0 1.5rem;
}

/* Header search dropdown - no side margins */
.header-search .search-results {
  margin: 0;
  margin-top: 4px;
}

[data-theme="dark"] .search-results {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-results-list li {
  margin: 0;
  border-bottom: 1px solid var(--sidebar-border);
}

.search-results-list li:last-child {
  border-bottom: none;
}

.search-results-list a {
  display: block;
  padding: 1rem;
  color: var(--text-color);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.search-results-list a:hover,
.search-results-list a:focus {
  background-color: rgba(0, 0, 0, 0.05);
  outline: none;
}

[data-theme="dark"] .search-results-list a:hover,
[data-theme="dark"] .search-results-list a:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

.search-result-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  color: var(--text-color);
}

.search-result-title mark {
  background-color: rgba(0, 102, 204, 0.2);
  color: var(--link-color);
  padding: 0 2px;
  border-radius: 2px;
}

[data-theme="dark"] .search-result-title mark {
  background-color: rgba(102, 179, 255, 0.3);
}

.search-result-snippet {
  font-size: 0.85rem;
  color: var(--text-color);
  opacity: 0.7;
  line-height: 1.4;
  margin-top: 0.25rem;
}

.search-result-snippet mark {
  background-color: rgba(0, 102, 204, 0.2);
  color: var(--link-color);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 500;
}

[data-theme="dark"] .search-result-snippet mark {
  background-color: rgba(102, 179, 255, 0.3);
}

.search-no-results {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-color);
  opacity: 0.6;
  font-size: 0.9rem;
}

/* Navigation */
.nav {
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
}

/* Add margin above first navigation item on desktop/tablet */
@media (min-width: 768px) {
  .sidebar .nav > .nav-section:first-child,
  .sidebar .nav > .nav-top-level:first-child {
    margin-top: 1.5rem;
  }
}

/* Category headers for grouping mini reports */
.nav-category-header {
  padding: 0.75rem 0.8rem 0.5rem;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-color);
  text-align: left;
  user-select: none;
  pointer-events: none; /* Non-clickable */
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 0.75rem;
  margin-top: 1rem;
  opacity: 0.8;
  transition: color var(--theme-transition), border-color var(--theme-transition);
}

.nav-section-list > .nav-category-header:first-child {
  margin-top: 0.5rem;
}

[data-theme="dark"] .nav-category-header {
  opacity: 0.7;
}

.nav-section {
  margin-bottom: 0.5rem;
  display: block;
  width: 100%;
}

.nav-section-header {
  cursor: pointer;
  user-select: none;
  padding: 0.6rem 0.8rem;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-color);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

.nav-section-header:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .nav-section-header:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-section-header::after {
  content: "▼";
  font-size: 0.7rem;
  transition: transform 0.2s;
  opacity: 0.6;
}

.nav-section.expanded .nav-section-header::after {
  content: "▲";
}

.nav-section-list {
  display: none;
  padding-left: 0.5rem;
  margin-top: 0.25rem;
}

.nav-section.expanded .nav-section-list {
  display: block;
}

.nav-link {
  display: block;
  padding: 0.5rem 0.8rem;
  color: var(--text-color);
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: left;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

.nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--link-color);
}

[data-theme="dark"] .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  font-weight: 400;
  background-color: rgba(0, 102, 204, 0.1);
  color: var(--link-color);
}

[data-theme="dark"] .nav-link.active {
  background-color: rgba(102, 179, 255, 0.2);
}

/* Top-level nav items (not in sections) */
.nav-top-level {
  padding: 0;
  margin-bottom: 0.5rem;
  display: block;
  width: 100%;
}

.nav-top-level a {
  display: block;
  padding: 0.6rem 0.8rem;
  color: var(--text-color);
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: left;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

.nav-top-level a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--link-color);
}

[data-theme="dark"] .nav-top-level a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-top-level a.active {
  font-weight: 400;
  background-color: rgba(0, 102, 204, 0.1);
  color: var(--link-color);
}

[data-theme="dark"] .nav-top-level a.active {
  background-color: rgba(102, 179, 255, 0.2);
}

/* Hide the top navbar completely */
.navbar {
  display: none !important;
}

/* Hide search, previous, next buttons from navbar */
.navbar .nav-link[data-bs-toggle="modal"],
.navbar .nav-link[rel="prev"],
.navbar .nav-link[rel="next"],
.navbar .nav-link[href="#"]:has(i.fa-search),
.navbar .nav-item:has(.fa-search),
.navbar .nav-item:has(.fa-arrow-left),
.navbar .nav-item:has(.fa-arrow-right) {
  display: none !important;
}

/* Hide search/prev/next from sidebar if they appear */
.sidebar .nav-link[data-bs-toggle="modal"],
.sidebar .nav-link[rel="prev"],
.sidebar .nav-link[rel="next"] {
  display: none !important;
}

/* TOC sidebar - show and position correctly */
.col-md-3 {
  display: block !important;
  margin-left: 0 !important;
  position: relative !important;
  z-index: 10 !important; /* Higher z-index to overlay */
  padding-left: 0 !important;
  padding-right: 1rem !important;
  width: 40px !important; /* Only as wide as collapsed sidebar */
  flex-shrink: 0;
  pointer-events: auto !important; /* Make container interactive for hover */
  overflow: visible !important; /* Allow expanded sidebar to overflow */
}

/* Make the collapsed sidebar and OUTLINE text interactive */
.col-md-3::before,
.col-md-3 .bs-sidebar {
  pointer-events: auto !important; /* Make these elements interactive */
}

/* Hide outline card on smaller screens - below 1265px */
@media (max-width: 1264px) {
  .col-md-3 {
    display: none !important;
  }
  
  /* Hide OUTLINE label when card is hidden */
  .col-md-3::before {
    display: none !important;
    content: none !important;
  }
  
  /* Adjust content margin when outline is hidden */
  body > .container {
    margin-left: var(--sidebar-width) !important;
  }
}

/* "OUTLINE" label - only visible when col-md-3 is visible */
.col-md-3::before {
  content: "OUTLINE";
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-color);
  opacity: 0.6;
  margin-bottom: 0.5rem;
  position: fixed; /* Fixed position - doesn't move on scroll */
  top: 82px; /* Below header (60px) + padding (22px) */
  left: calc(var(--sidebar-width) + 1rem); /* Sidebar width + 1rem gap */
  z-index: 11;
  background-color: var(--bg-color);
  padding-bottom: 0.5rem;
  transition: color var(--theme-transition), background-color var(--theme-transition);
  pointer-events: auto; /* Make OUTLINE text hoverable */
  width: 40px; /* Match collapsed sidebar width */
}

/* Hide OUTLINE label when col-md-3 is hidden */
@media (max-width: 1264px) {
  .col-md-3::before {
    display: none !important;
  }
}

/* TOC styling - Outline style with hover to expand */
.bs-sidebar {
  position: fixed !important; /* Fixed position - doesn't move on scroll */
  top: 110px !important; /* Below header (60px) + padding (22px) + OUTLINE text (~28px) */
  left: calc(var(--sidebar-width) + 1rem) !important; /* Sidebar width + 1rem gap */
  max-height: calc(100vh - 110px) !important; /* Max height based on viewport, but can be smaller */
  overflow: hidden !important; /* Container doesn't scroll, inner nav does */
  padding: 0 !important;
  background-color: var(--bg-color) !important; /* Theme-aware background */
  border: none !important;
  width: 40px !important; /* Collapsed width - just enough for the indicator lines */
  transition: width 0.3s ease, box-shadow 0.3s ease, background-color var(--theme-transition), color var(--theme-transition);
  padding-right: 1rem; /* Add padding for the expanded state */
  z-index: 100 !important; /* High z-index to overlay content when expanded */
  contain: layout style paint; /* Improve scroll performance and containment */
  height: auto !important; /* Height based on content */
}

/* Force dark mode background - override Bootstrap classes */
[data-theme="dark"] .bs-sidebar {
  background-color: #1e1e1e !important;
}

[data-theme="dark"] .bs-sidebar.card,
[data-theme="dark"] .card.bg-body-tertiary,
[data-theme="dark"] #toc-collapse,
[data-theme="dark"] .bs-sidebar #toc-collapse {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-color: #404040 !important;
}

[data-theme="dark"] .bs-sidebar.bg-body-tertiary {
  background-color: #1e1e1e !important;
}

/* Override Bootstrap bg-body-tertiary in dark mode */
[data-theme="dark"] .bg-body-tertiary {
  background-color: #1e1e1e !important;
}

/* Override Bootstrap card class in dark mode */
[data-theme="dark"] .card {
  background-color: #1e1e1e !important;
  border-color: #404040 !important;
  color: #e0e0e0 !important;
}

/* Specifically target the TOC collapse element */
[data-theme="dark"] .navbar-collapse.collapse.card.bg-body-tertiary {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Expand on hover - when hovering the col-md-3 container, outline text, or sidebar */
/* Must come after base .bs-sidebar rule and be very specific */
.col-md-3:hover > .bs-sidebar,
.col-md-3:hover .bs-sidebar,
.col-md-3:hover .col-md-3 .bs-sidebar,
.bs-sidebar:hover,
.col-md-3::before:hover ~ .bs-sidebar {
  width: 250px !important;
  overflow-y: hidden !important; /* Container doesn't scroll, inner nav does */
  overflow-x: hidden !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
  background-color: var(--bg-color) !important;
  position: fixed !important; /* Fixed position - doesn't move on scroll */
  top: 110px !important; /* Below header + OUTLINE text */
  left: calc(var(--sidebar-width) + 1rem) !important; /* Sidebar width + 1rem gap */
  z-index: 100 !important; /* Higher than main content */
  contain: layout style paint; /* Improve scroll performance and containment */
  overscroll-behavior: contain !important; /* Prevent scroll chaining to main content */
  height: auto !important; /* Height based on content */
  max-height: calc(100vh - 110px) !important; /* Max height based on viewport, but can be smaller */
}

[data-theme="dark"] .col-md-3:hover > .bs-sidebar,
[data-theme="dark"] .col-md-3:hover .bs-sidebar,
[data-theme="dark"] .bs-sidebar:hover,
[data-theme="dark"] .col-md-3::before:hover ~ .bs-sidebar {
  width: 250px !important;
  overflow-y: hidden !important; /* Container doesn't scroll, inner nav does */
  overflow-x: hidden !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5) !important;
  background-color: var(--bg-color) !important;
  position: fixed !important; /* Fixed position - doesn't move on scroll */
  top: 110px !important; /* Below header + OUTLINE text */
  left: calc(var(--sidebar-width) + 1rem) !important; /* Sidebar width + 1rem gap */
  z-index: 100 !important; /* Higher than main content */
  contain: layout style paint; /* Improve scroll performance and containment */
  overscroll-behavior: contain !important; /* Prevent scroll chaining to main content */
  height: auto !important; /* Height based on content */
  max-height: calc(100vh - 110px) !important; /* Max height based on viewport, but can be smaller */
}

.bs-sidebar .navbar-header {
  display: none !important; /* Hide the header since we moved "OUTLINE" outside */
}

.bs-sidebar .navbar-toggler {
  display: none !important;
}

.bs-sidebar .nav {
  padding: 0 !important;
  margin: 0 !important;
  overscroll-behavior: contain !important; /* Prevent scroll chaining */
  overflow-y: hidden !important; /* Hidden when collapsed */
  overflow-x: hidden !important;
  display: block !important;
}

/* When expanded, make the nav scrollable if content exceeds max-height */
.col-md-3:hover .bs-sidebar .nav,
.bs-sidebar:hover .nav {
  overflow-y: auto !important; /* Enable scrolling when expanded and content exceeds container */
  overflow-x: hidden !important;
  max-height: calc(100vh - 110px) !important; /* Constrain to viewport height */
}

/* Ensure inner scrollable containers also prevent scroll chaining */
.bs-sidebar .navbar-collapse,
.bs-sidebar #toc-collapse,
.bs-sidebar .collapse {
  overscroll-behavior: contain !important; /* Prevent scroll chaining to main content */
  overflow-y: hidden !important; /* Hidden when collapsed */
  overflow-x: hidden !important;
  height: 100% !important; /* Fill parent height */
}

/* Make inner containers scrollable when expanded */
.col-md-3:hover .bs-sidebar .navbar-collapse,
.col-md-3:hover .bs-sidebar #toc-collapse,
.col-md-3:hover .bs-sidebar .collapse,
.bs-sidebar:hover .navbar-collapse,
.bs-sidebar:hover #toc-collapse,
.bs-sidebar:hover .collapse {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.bs-sidebar .nav-item {
  margin-bottom: 0.1rem; /* Reduced from 0.25rem */
  position: relative;
}

/* Default collapsed state - hide text, show horizontal lines */
.bs-sidebar .nav-link {
  font-size: 0.7rem; /* Reduced from 0.8rem */
  font-weight: 400;
  padding: 0.3rem 0.6rem 0.3rem 1.2rem !important; /* Reduced from 0.5rem 0.75rem 0.5rem 1.5rem */
  color: var(--text-color);
  opacity: 0 !important; /* Hide text when collapsed */
  text-decoration: none;
  display: block;
  border-radius: 0;
  text-align: left;
  transition: opacity 0.3s ease, color var(--theme-transition);
  position: relative;
  line-height: 1.2; /* Reduced from 1.4 */
  white-space: normal; /* Allow wrapping */
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 250px; /* Always 250px wide so wrapping is consistent */
  box-sizing: border-box;
  height: auto; /* Natural height based on wrapped text */
}

/* Show text on hover - only when hovering the col-md-3 container */
.col-md-3:hover .bs-sidebar .nav-link,
.bs-sidebar:hover .nav-link {
  opacity: 0.7 !important; /* Show text when expanded */
}

/* Horizontal lines for collapsed state - represent structure */
.bs-sidebar .nav-item::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background-color: var(--sidebar-border);
  opacity: 0.4;
  z-index: 2;
  transition: opacity 0.3s ease, width 0.3s ease, background-color var(--theme-transition);
}

/* Different line lengths for different heading levels when collapsed */
.bs-sidebar .nav-item[data-bs-level="1"]::after {
  width: 20px; /* Longest line for H1 */
}

.bs-sidebar .nav-item[data-bs-level="2"]::after {
  width: 15px; /* Medium line for H2 */
}

.bs-sidebar .nav-item[data-bs-level="3"]::after {
  width: 10px; /* Shorter line for H3 */
}

.bs-sidebar .nav-item[data-bs-level="4"]::after,
.bs-sidebar .nav-item[data-bs-level="5"]::after,
.bs-sidebar .nav-item[data-bs-level="6"]::after {
  width: 8px; /* Shortest line for deeper levels */
}

/* Hide horizontal lines when expanded */
.col-md-3:hover .bs-sidebar .nav-item::after,
.bs-sidebar:hover .nav-item::after {
  opacity: 0 !important; /* Hide lines when showing content */
}

/* Vertical indicator line/bar - show when expanded */
.bs-sidebar .nav-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.3rem; /* Reduced from 0.5rem */
  bottom: 0.3rem; /* Reduced from 0.5rem */
  width: 2px;
  background-color: var(--sidebar-border);
  opacity: 0; /* Hidden when collapsed */
  z-index: 1;
  transition: opacity 0.3s ease, background-color var(--theme-transition), color var(--theme-transition);
}

/* Show vertical indicator lines when expanded */
.col-md-3:hover .bs-sidebar .nav-item::before,
.bs-sidebar:hover .nav-item::before {
  opacity: 0.3; /* Show vertical lines when expanded */
}

/* Active item indicator - thicker line */
.bs-sidebar .nav-item .nav-link.active {
  position: relative;
  color: var(--text-color) !important;
}

.bs-sidebar .nav-item .nav-link.active::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.3rem; /* Reduced from 0.5rem */
  bottom: 0.3rem; /* Reduced from 0.5rem */
  width: 3px;
  background-color: var(--link-color);
  opacity: 1;
  z-index: 2;
  transition: background-color var(--theme-transition);
}

.bs-sidebar .nav-item[data-bs-level="1"] > .nav-link.active::before {
  left: -0.5rem;
}

/* Hide page title (first H1) from outline card */
.bs-sidebar .nav-item[data-bs-level="1"]:first-child {
  display: none !important;
}

/* Add margin above first section in outline card */
.bs-sidebar .nav-item[data-bs-level="1"]:not(:first-child),
.bs-sidebar .nav-item[data-bs-level="2"]:first-child {
  margin-top: 0.75rem !important;
}

/* Numbered list style for outline */
.bs-sidebar .nav-item[data-bs-level="1"] > .nav-link {
  padding-left: 0.5rem !important;
  font-weight: 400;
  opacity: 0 !important; /* Hide text when collapsed */
}

.col-md-3:hover .bs-sidebar .nav-item[data-bs-level="1"] > .nav-link,
.bs-sidebar:hover .nav-item[data-bs-level="1"] > .nav-link {
  opacity: 0.7 !important; /* Show text when expanded */
}

.bs-sidebar .nav-item[data-bs-level="2"] > .nav-link {
  padding-left: 1.5rem !important;
}

.bs-sidebar .nav-item[data-bs-level="3"] > .nav-link {
  padding-left: 2.5rem !important;
}

/* Active link - hide when collapsed, show when expanded */
.bs-sidebar .nav-link.active {
  opacity: 0 !important; /* Hide text when collapsed */
  color: var(--text-color);
  font-weight: 400;
  background-color: transparent !important;
}

.col-md-3:hover .bs-sidebar .nav-link.active,
.bs-sidebar:hover .nav-link.active {
  opacity: 0.7 !important; /* Show text when expanded */
}

.bs-sidebar .nav-link:hover {
  opacity: 1 !important;
  color: var(--text-color);
  background-color: rgba(0, 0, 0, 0.05);
  transition: opacity 0.3s ease, color var(--theme-transition), background-color var(--theme-transition);
}

[data-theme="dark"] .bs-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Nested nav items */
.bs-sidebar .nav-item .nav {
  margin-left: 0;
  padding-left: 0;
}

.bs-sidebar .nav-item .nav .nav-link {
  font-size: 0.7rem; /* Reduced from 0.8rem */
  font-weight: 400;
  padding-top: 0.2rem; /* Reduced from 0.35rem */
  padding-bottom: 0.2rem; /* Reduced from 0.35rem */
  line-height: 1.2; /* Reduced line height */
}

/* Content area - move main content */
body > .container {
  margin-left: var(--sidebar-width) !important;
  padding: 2rem !important;
  max-width: none !important; /* Allow content to center naturally */
  margin-top: 0 !important;
  margin-right: 0 !important;
  padding-top: 2rem !important; /* Space below header */
  width: calc(100% - var(--sidebar-width)) !important;
  box-sizing: border-box !important;
  display: block !important;
  transition: background-color var(--theme-transition), color var(--theme-transition);
  flex: 1; /* Take up available space, pushing footer down */
}

/* Prevent row from wrapping - keep outline and content side-by-side until outline hides */
body > .container > .row {
  display: flex !important;
  flex-wrap: nowrap !important; /* Prevent wrapping */
  margin: 0 !important;
}

/* Ensure columns stay side-by-side until outline hides */
@media (min-width: 1265px) {
  body > .container > .row {
    flex-wrap: nowrap !important;
  }
  
  .col-md-3 {
    flex: 0 0 auto !important;
    width: 40px !important; /* Collapsed width - container only */
  }
  
  /* Ensure sidebar expands on hover within media query */
  .col-md-3:hover .bs-sidebar {
    width: 250px !important;
    overflow-y: auto !important;
  }
  
  .col-md-9 {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Allow flex shrinking */
  }
}

/* Main content column - better width */
.col-md-9,
[role="main"] {
  padding: 0 2rem !important;
  margin: 0 auto !important; /* Center the content */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  max-width: 650px !important;
  width: 100% !important;
  position: relative;
  z-index: 1;
  box-sizing: border-box !important;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

/* Ensure content is visible */
.col-md-9 > *,
[role="main"] > * {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* Responsive content - adjust margins and padding (Material-style) */
@media (max-width: 1200px) {
  body > .container {
    padding: 1.5rem !important;
    margin-left: var(--sidebar-width) !important;
  }
  
  .col-md-9,
  [role="main"] {
    padding: 0 1rem !important;
    max-width: 100% !important;
    margin: 0 auto !important; /* Center the content */
  }
  
  .md-content__inner {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 650px;
  }
}

@media (max-width: 992px) {
  body > .container {
    padding: 1.5rem !important;
    margin-left: var(--sidebar-width) !important;
  }
  
  .col-md-9,
  [role="main"] {
    padding: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important; /* No outline card space on tablet */
  }
  
  .md-content__inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    max-width: 100%;
  }
}

/* Fix content spacing */
.col-md-9 h1,
.col-md-9 h2,
.col-md-9 h3,
.col-md-9 p,
/* Unordered lists - bullets */
.col-md-9 ul,
[role="main"] ul,
.md-content__inner ul {
  margin-top: 1rem;
  margin-bottom: 1rem;
  list-style-type: disc;
}

/* Ordered lists - numbers */
.col-md-9 ol,
[role="main"] ol,
.md-content__inner ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  counter-reset: list-counter;
  list-style-type: decimal;
}

.col-md-9 ol li,
[role="main"] ol li,
.md-content__inner ol li {
  counter-increment: list-counter;
  display: list-item;
  list-style-position: outside;
}

/* Unordered list items */
.col-md-9 ul li,
[role="main"] ul li,
.md-content__inner ul li {
  display: list-item;
  list-style-position: outside;
}

/* Consistent H1 styling for all content pages */
.col-md-9 h1,
[role="main"] h1,
.md-content__inner h1 {
  margin-top: 0;
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: var(--text-color);
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  padding-bottom: 0.1rem;
}

/* Page title class for H1 elements */
.page-title,
h1.page-title,
.col-md-9 h1.page-title,
[role="main"] h1.page-title,
.md-content__inner h1.page-title {
  font-size: 2.5rem;
  font-weight: 200;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2rem;
}

/* Consistent H2 styling for all content pages */
.col-md-9 h2,
[role="main"] h2,
.md-content__inner h2 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--text-color);
}

/* Consistent H3 styling for all content pages */
.col-md-9 h3,
[role="main"] h3,
.md-content__inner h3 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

/* List item spacing for main bullet points */
.col-md-9 li,
[role="main"] li,
.md-content__inner li {
  margin-bottom: 0.7rem;
}

/* Nested/secondary bullet points - ensure consistent styling */
.col-md-9 ul ul,
[role="main"] ul ul,
.md-content__inner ul ul,
.col-md-9 ol ul,
[role="main"] ol ul,
.md-content__inner ol ul {
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.col-md-9 ul ul li,
[role="main"] ul ul li,
.md-content__inner ul ul li,
.col-md-9 ol ul li,
[role="main"] ol ul li,
.md-content__inner ol ul li {
  margin-bottom: 0.7rem;
  list-style-type: disc;
}

/* Soft line breaks (shift+enter) - ensure <br> tags render correctly */
/* Apply to all content areas: paragraphs, list items, and general content */
/* <br> tags should always create a visible line break without paragraph spacing */
.col-md-9 br,
[role="main"] br,
.md-content__inner br,
.col-md-9 p br,
[role="main"] p br,
.md-content__inner p br,
.col-md-9 li br,
[role="main"] li br,
.md-content__inner li br {
  /* Ensure <br> tags are always rendered and create line breaks */
  display: inline;
  line-height: inherit;
  /* Prevent collapsing - ensure the break is always visible */
}

/* Ensure parent elements allow <br> tags to work correctly */
/* Don't collapse whitespace in a way that would merge <br> breaks */
.col-md-9 p,
[role="main"] p,
.md-content__inner p,
.col-md-9 li,
[role="main"] li,
.md-content__inner li {
  white-space: normal;
  /* Allow <br> tags to create line breaks without being collapsed */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Ensure <br> tags within these elements create visible line breaks */
}

/* Paragraphs that follow lists - ONLY indent continuations, not standalone paragraphs */
/* Strategy: Indent the first paragraph after a list ONLY if it's followed by other content */
/* (indicating it's a continuation, not a new section) */
/* Also indent subsequent paragraphs (ul + p ~ p) which are continuations */
.col-md-9 ul + p:has(+ p),
.col-md-9 ul + p:has(+ ul),
.col-md-9 ul + p:has(+ div.arithmatex),
.col-md-9 ul + p:has(+ p + p),
[role="main"] ul + p:has(+ p),
[role="main"] ul + p:has(+ ul),
[role="main"] ul + p:has(+ div.arithmatex),
[role="main"] ul + p:has(+ p + p),
.md-content__inner ul + p:has(+ p),
.md-content__inner ul + p:has(+ ul),
.md-content__inner ul + p:has(+ div.arithmatex),
.md-content__inner ul + p:has(+ p + p),
.col-md-9 ol + p:has(+ p),
.col-md-9 ol + p:has(+ ol),
.col-md-9 ol + p:has(+ div.arithmatex),
.col-md-9 ol + p:has(+ p + p),
[role="main"] ol + p:has(+ p),
[role="main"] ol + p:has(+ ol),
[role="main"] ol + p:has(+ div.arithmatex),
[role="main"] ol + p:has(+ p + p),
.md-content__inner ol + p:has(+ p),
.md-content__inner ol + p:has(+ ol),
.md-content__inner ol + p:has(+ div.arithmatex),
.md-content__inner ol + p:has(+ p + p) {
  margin-top: 1rem;
  margin-bottom: 1rem;
  /* Align to the bullet point text - match the list's padding-left */
  padding-left: 1.5rem !important;
  margin-left: 0;
  display: block;
}

/* Style paragraphs that contain nested list items rendered as text with <br> tags */
/* These paragraphs should have additional left padding for the nested items */
.col-md-9 ul + p:has(br),
[role="main"] ul + p:has(br),
.md-content__inner ul + p:has(br),
.col-md-9 ol + p:has(br),
[role="main"] ol + p:has(br),
.md-content__inner ol + p:has(br) {
  /* The paragraph itself is already indented by ul + p rule above */
  /* But we need to add extra padding for nested list items that appear as text */
  padding-left: 1.5rem !important;
}

/* Style text-based nested list items (lines starting with "    - ") within paragraphs */
/* These appear as text with <br> tags and should be styled to look like nested lists */
.col-md-9 p br,
[role="main"] p br,
.md-content__inner p br {
  /* Ensure <br> tags create proper line breaks */
  display: block;
  line-height: 1.7;
}

/* Add left padding/margin to text content after <br> tags that looks like list items */
/* This targets text that starts with "    - " pattern when rendered */
.col-md-9 p br + text,
[role="main"] p br + text,
.md-content__inner p br + text {
  padding-left: 1.5rem;
  display: block;
}

/* Subsequent paragraphs that follow a list (for multiple indented paragraphs) */
/* These are paragraphs that come after another paragraph that follows a list */
/* These are continuations, so they should be indented */
.col-md-9 ul + p + p,
[role="main"] ul + p + p,
.md-content__inner ul + p + p,
.col-md-9 ol + p + p,
[role="main"] ol + p + p,
.md-content__inner ol + p + p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  /* Align to the bullet point text - match the list's padding-left */
  padding-left: 1.5rem !important;
  margin-left: 0;
  display: block;
}

/* Continue for additional consecutive paragraphs */
.col-md-9 ul + p + p + p,
[role="main"] ul + p + p + p,
.md-content__inner ul + p + p + p,
.col-md-9 ol + p + p + p,
[role="main"] ol + p + p + p,
.md-content__inner ol + p + p + p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  margin-left: 0;
  display: block;
}

/* Handle paragraphs that come after formula blocks that follow lists */
/* This covers cases where indented paragraphs are separated by formulas */
.col-md-9 ul + p + p + p + p,
[role="main"] ul + p + p + p + p,
.md-content__inner ul + p + p + p + p,
.col-md-9 ol + p + p + p + p,
[role="main"] ol + p + p + p + p,
.md-content__inner ol + p + p + p + p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  margin-left: 0;
  display: block;
}

/* Handle paragraphs that come after paragraphs following lists */
/* This uses the general sibling selector to catch all paragraphs after the first one */
/* These are continuations, so they should be indented */
/* BUT: Exclude paragraphs that start with bold text (likely section headers, not continuations) */
/* Also exclude paragraphs that come after headings or new lists (reset rules handle those) */
.col-md-9 ul + p ~ p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
[role="main"] ul + p ~ p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
.md-content__inner ul + p ~ p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
.col-md-9 ol + p ~ p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
[role="main"] ol + p ~ p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
.md-content__inner ol + p ~ p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)) {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem !important;
  margin-left: 0;
  display: block;
}

/* Reset indentation for paragraphs that start with bold text (section headers) */
/* These are new sections, not continuations */
.col-md-9 p:has(> strong:first-child),
[role="main"] p:has(> strong:first-child),
.md-content__inner p:has(> strong:first-child) {
  padding-left: 0 !important;
  margin-left: 0;
}

/* Reset indentation for paragraphs that come after headings or new lists */
/* This prevents indenting paragraphs that belong to new sections */
.col-md-9 h1 ~ p,
.col-md-9 h2 ~ p,
.col-md-9 h3 ~ p,
.col-md-9 ul ~ ul ~ p,
.col-md-9 ol ~ ol ~ p,
[role="main"] h1 ~ p,
[role="main"] h2 ~ p,
[role="main"] h3 ~ p,
[role="main"] ul ~ ul ~ p,
[role="main"] ol ~ ol ~ p,
.md-content__inner h1 ~ p,
.md-content__inner h2 ~ p,
.md-content__inner h3 ~ p,
.md-content__inner ul ~ ul ~ p,
.md-content__inner ol ~ ol ~ p {
  padding-left: 0;
  margin-left: 0;
}

/* Also handle paragraphs inside list items (for cases where markdown renders differently) */
.col-md-9 li p,
[role="main"] li p,
.md-content__inner li p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  /* Align to the bullet point text, not the bullet marker */
  padding-left: 0;
  margin-left: 0;
  /* Ensure it's treated as a separate paragraph with proper spacing */
  display: block;
}

/* Ensure strong/bold formatting works in indented paragraphs and list items */
.col-md-9 p strong,
.col-md-9 li p strong,
.col-md-9 ul + p strong,
.col-md-9 ul + p ~ p strong,
[role="main"] p strong,
[role="main"] li p strong,
[role="main"] ul + p strong,
[role="main"] ul + p ~ p strong,
.md-content__inner p strong,
.md-content__inner li p strong,
.md-content__inner ul + p strong,
.md-content__inner ul + p ~ p strong {
  font-weight: 700 !important;
  font-weight: bold !important;
}

.md-content__inner {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
  width: 100%;
  /* Prevent horizontal overflow */
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.md-main__inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Theme toggle button - moved to header */
.theme-toggle {
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-color) !important;
  font-size: 1.2rem;
  line-height: 1;
  min-width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .theme-toggle {
  color: var(--text-color) !important;
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Mark/highlight styling for ==text== syntax */
mark {
  background-color: #228B22 !important;
  color: var(--text-color) !important;
  padding: 0.15em 0.3em;
  border-radius: 3px;
  font-weight: inherit;
}

[data-theme="dark"] mark {
  background-color: #2d5016 !important;
  color: var(--text-color) !important;
}

/* Ensure mark elements are visible in all contexts */
.col-md-9 mark,
[role="main"] mark,
.md-content__inner mark,
p mark,
li mark {
  background-color: #228B22 !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .col-md-9 mark,
[data-theme="dark"] [role="main"] mark,
[data-theme="dark"] .md-content__inner mark,
/* Dark mode paragraph font weight */
[data-theme="dark"] .col-md-9 p,
[data-theme="dark"] [role="main"] p,
[data-theme="dark"] .md-content__inner p {
  font-weight: 300;
}

[data-theme="dark"] p mark,
[data-theme="dark"] li mark {
  background-color: #2d5016 !important;
  color: var(--text-color) !important;
}

/* Code blocks */
pre {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  padding: 1rem;
  overflow-x: auto;
}

[data-theme="dark"] pre {
  background-color: rgba(255, 255, 255, 0.05);
}

code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

[data-theme="dark"] code {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Remove borders and outlines from all images */
img,
img[src],
.md-content img,
.md-content__inner img,
.col-md-9 img,
[role="main"] img,
article img,
p img,
div img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  background-color: transparent !important;
  background: transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

/* Image grid styles for side-by-side images */
.image-grid {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.image-grid-2,
.image-grid-3,
.image-grid-4,
.image-grid-5 {
  display: flex;
  gap: 0.2rem;
  margin: 0.2rem auto;
  align-items: flex-start; /* Align items to the top */
  justify-content: flex-start;
  width: 100%;
  max-width: min(100%, 650px); /* Max width matches main content area */
  box-sizing: border-box;
}

.image-grid-2 img,
.image-grid-3 img,
.image-grid-4 img,
.image-grid-5 img {
  flex: 0 0 auto; /* Images take natural width at fixed height */
  height: 400px; /* Default height for 2 and 3 image grids */
  width: auto;
  object-fit: cover; /* Fill the container, cropping if needed */
  object-position: center;
  display: block;
  border-radius: 4px;
  border: none !important; /* Remove any default borders */
  outline: none !important; /* Remove any outlines */
  background-color: transparent !important; /* No background showing through */
  background: transparent !important;
  flex-shrink: 0;
  /* Ensure rounded corners work properly */
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.image-grid-4 img {
  height: 350px; /* Specific height for 4 image grids */
}

.image-grid-5 img {
  height: 300px; /* Specific height for 5 image grids */
}

/* Image captions - dark box style */
/* Use classes added by JavaScript for reliable targeting */
.image-caption {
  background-color: #2a2a2a !important;
  color: #b0b0b0 !important;
  padding: 0.75rem 1rem !important;
  margin: 0.5rem auto 0 auto !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  border-radius: 4px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

[data-theme="dark"] .image-caption {
  background-color: #1a1a1a !important;
  color: #c0c0c0 !important;
}

/* First caption line */
.image-caption-first {
  padding: 0.75rem 1rem !important;
  margin: 0.5rem auto 0 auto !important;
}

/* Second caption line - connects to first */
.image-caption-second {
  padding: 0 1rem 0.75rem 1rem !important;
  margin: 0 auto 1rem auto !important;
  margin-top: -0.5rem !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Photographer credit styling - smaller and greyer */
.image-caption-credit {
  font-size: 0.75rem !important;
  color: #888888 !important;
  opacity: 0.85 !important;
}

.photo-credit {
  font-size: 0.75rem !important;
  color: #888888 !important;
  opacity: 0.85 !important;
  display: inline-block;
}

/* Style credit text in lightbox descriptions */
.glightbox .photo-credit,
.glightbox-clean .photo-credit {
  font-size: 0.75rem !important;
  color: #888888 !important;
  opacity: 0.85 !important;
}

/* Fallback CSS selectors for cases where JS hasn't run yet */
.col-md-9 img + p,
[role="main"] img + p,
.md-content__inner img + p,
article img + p,
.image-grid-2 + p,
.image-grid-3 + p,
.image-grid-4 + p,
.image-grid-5 + p {
  background-color: #2a2a2a !important;
  color: #b0b0b0 !important;
  padding: 0.75rem 1rem !important;
  margin: 0.5rem auto 0 auto !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  border-radius: 4px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

[data-theme="dark"] .col-md-9 img + p,
[data-theme="dark"] [role="main"] img + p,
[data-theme="dark"] .md-content__inner img + p,
[data-theme="dark"] article img + p,
[data-theme="dark"] .image-grid-2 + p,
[data-theme="dark"] .image-grid-3 + p,
[data-theme="dark"] .image-grid-4 + p,
[data-theme="dark"] .image-grid-5 + p {
  background-color: #1a1a1a !important;
  color: #c0c0c0 !important;
}

/* Style for second line of multi-line captions (credit line) - combine with first */
.col-md-9 img + p + p,
[role="main"] img + p + p,
.md-content__inner img + p + p,
article img + p + p {
  background-color: #2a2a2a !important;
  color: #b0b0b0 !important;
  padding: 0 1rem 0.75rem 1rem !important;
  margin: 0 auto 1rem auto !important;
  margin-top: -0.5rem !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  border-radius: 4px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

[data-theme="dark"] .col-md-9 img + p + p,
[data-theme="dark"] [role="main"] img + p + p,
[data-theme="dark"] .md-content__inner img + p + p,
[data-theme="dark"] article img + p + p {
  background-color: #1a1a1a !important;
  color: #c0c0c0 !important;
}

/* Mobile menu toggle - hidden by default on desktop */
.mobile-menu-toggle {
  display: none !important;
}

/* Responsive: mobile and tablet styles */
@media (max-width: 768px) {
  /* Show mobile menu toggle on mobile */
  .mobile-menu-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Sidebar - hide by default, show as overlay when needed */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 280px !important;
    z-index: 1000;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  /* Sidebar overlay */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  /* Mobile menu toggle button - in header */
  .mobile-menu-toggle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 1001 !important;
    padding: 0.5rem 0.75rem !important;
    background: transparent !important;
    border: 1px solid var(--sidebar-border) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    color: var(--text-color) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Main content - full width on mobile */
  body > .container {
    margin-left: 0 !important;
    padding: 1rem !important;
    padding-top: 1rem !important; /* Header already provides space */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Header on mobile */
  .site-header {
    height: 50px;
    padding: 0 0.75rem;
  }
  
  .site-header h1 {
    font-size: 1rem;
    margin-left: 0.5rem;
  }
  
  body {
    padding-top: 50px; /* Smaller header on mobile */
  }
  
  .sidebar {
    top: 50px; /* Below smaller header */
  }
  
  .col-md-9,
  [role="main"] {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Content inner wrapper - proper padding on mobile (Material-style) */
  .md-content__inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Better spacing for readability */
    padding-top: 0.5rem;
    padding-bottom: 2rem;
  }
  
  /* Better spacing for content blocks */
  .md-content__inner > *:first-child {
    margin-top: 0;
  }
  
  .md-content__inner > *:last-child {
    margin-bottom: 0;
  }
  
  /* Ensure images don't overflow - Material-style */
  .col-md-9 img,
  [role="main"] img,
  .md-content__inner img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  /* Prevent horizontal overflow on all content */
  .col-md-9,
  [role="main"],
  .md-content__inner {
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Ensure code blocks don't cause overflow */
  pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  code {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  
  /* Fix content spacing on mobile */
  .col-md-9 h1,
  .col-md-9 h2,
  .col-md-9 h3,
  .col-md-9 p,
  .col-md-9 ul,
  .col-md-9 ol,
  [role="main"] h1,
  [role="main"] h2,
  [role="main"] h3,
  [role="main"] p,
  [role="main"] ul,
  [role="main"] ol {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Tables responsive */
  .col-md-9 table,
  [role="main"] table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Code blocks responsive */
  .col-md-9 pre,
  [role="main"] pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-wrap: normal;
    white-space: pre;
  }
  
  /* TOC/Outline - already hidden via media query above */
  
  /* Theme toggle - reposition for mobile */
  .theme-toggle {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    z-index: 1001;
  }
  
  /* Image grids - stack vertically on mobile (Material-style) */
  .image-grid-2,
  .image-grid-3,
  .image-grid-4,
  .image-grid-5 {
    flex-direction: column;
    gap: 0.75rem;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .image-grid-2 img,
  .image-grid-3 img,
  .image-grid-4 img,
  .image-grid-5 img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: cover;
  }
  
  /* Navigation - adjust font sizes */
  .nav-section-header {
    font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
  }
  
  .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }
  
  /* Sidebar header */
  .sidebar-header h1 {
    font-size: 1.1rem;
  }
  
  /* Search box */
  .search-box {
    padding: 0 1rem 0.75rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }
  
  .search-box input {
    font-size: 0.85rem;
  }
  
  /* Base font size adjustment - Material-style fluid typography */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Material-style heading scaling */
  h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    line-height: 1.3;
    margin-bottom: 1rem;
    font-weight: 300;
    text-decoration: none;
    border-bottom: 0.5px solid currentColor;
    padding-bottom: 0.1rem;
  }
  
  /* Page title class for mobile */
  .page-title,
  h1.page-title {
    font-size: clamp(2rem, 5.5vw, 2.5rem);
    font-weight: 200;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 2rem;
  }
  
  h2 {
    font-size: clamp(1.2rem, 3.5vw, 1.5rem);
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
  }
  
  h3 {
    font-size: clamp(1rem, 2.8vw, 1.2rem);
    line-height: 1.4;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  
  h4 {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    line-height: 1.4;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  
  /* Better paragraph spacing on mobile - Material-style */
  p {
    margin-bottom: 1rem;
    line-height: 1.7;
    font-size: 16px;
  }
  
  /* Better blockquote styling on mobile */
  blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--link-color);
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    font-size: 0.95em;
  }
  
  [data-theme="dark"] blockquote {
    background-color: rgba(255, 255, 255, 0.02);
  }
  
  /* Better code block styling on mobile */
  pre {
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.9em;
  }
  
  code {
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
  }
  
  /* Better list spacing */
  ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }
  
  /* Nested lists need additional indentation - override base padding and add margin */
  ul ul, ol ul, ul ol, ol ol {
    margin-left: 0.75rem !important;
    padding-left: 0.75rem !important;
  }
  
  li {
    margin-bottom: 0.7rem;
    line-height: 1.7;
  }
  
  /* Lists spacing */
  ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }
  
  /* Ensure nested lists in responsive sections also get proper indentation */
  ul ul, ol ul, ul ol, ol ol {
    margin-left: 0.75rem !important;
    padding-left: 0.75rem !important;
  }
  
  li {
    margin-bottom: 0.7rem;
  }
  
  /* Blockquotes */
  blockquote {
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--sidebar-border);
  }
  
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  
  * {
    max-width: 100%;
  }
}

/* Tablet styles - outline hidden, sidebar visible */
@media (min-width: 769px) and (max-width: 1264px) {
  /* Sidebar - slightly narrower */
  .sidebar {
    width: 240px;
  }
  
  /* Content - adjust margins */
  body > .container {
    margin-left: 240px !important;
    padding: 1.5rem !important;
    width: calc(100% - 240px) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  
  /* TOC hidden on tablet */
  .col-md-3 {
    display: none !important;
  }
  
  .col-md-9,
  [role="main"] {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Content inner wrapper - proper padding on tablet (Material-style) */
  .md-content__inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
  }
  
  /* Better typography on tablet */
  body {
    font-size: 16px;
  }
  
  h1 {
    font-size: clamp(1.8rem, 3.8vw, 2.1rem);
    font-weight: 300;
    text-decoration: none;
    border-bottom: 0.5px solid currentColor;
    padding-bottom: 0.1rem;
  }
  
  /* Page title class for tablet */
  .page-title,
  h1.page-title {
    font-size: clamp(2.2rem, 4.5vw, 2.5rem);
    font-weight: 200;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 2rem;
  }
  
  h2 {
    font-size: clamp(1.3rem, 3vw, 1.5rem);
  }
  
  h3 {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 600;
  }
  
  /* Ensure images don't overflow on tablet - Material-style */
  .col-md-9 img,
  [role="main"] img,
  .md-content__inner img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Prevent overflow on tablet */
  .col-md-9,
  [role="main"],
  .md-content__inner {
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Image grids on tablet - responsive but keep grid layout */
  .image-grid-2,
  .image-grid-3 {
    gap: 0.5rem;
    max-width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .image-grid-4,
  .image-grid-5 {
    gap: 0.4rem;
    max-width: 100%;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
  }
  
  /* Tables responsive on tablet */
  .col-md-9 table,
  [role="main"] table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Code blocks responsive on tablet */
  .col-md-9 pre,
  [role="main"] pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Text readability on tablet */
}

/* GLightbox image size constraints - no rounded corners in popup */
.glightbox .gslide-image img {
  max-width: 85vw !important;
  max-height: 80vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  margin: auto;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

.glightbox .gslide-media {
  max-width: 85vw !important;
  max-height: 80vh !important;
  padding: 10px;
  padding-top: 3rem;
  box-sizing: border-box;
}

.glightbox .gslide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-top: 2rem;
}

/* Ensure lightbox container has padding */
.glightbox .gslide-container {
  padding: 1rem;
  padding-top: 2rem;
}

/* Hide the image title/caption in lightbox */
.glightbox .gslide-title {
  display: none !important;
}

/* GLightbox description/caption styling - dark grey background, light grey text, left-aligned */
.glightbox .gslide-description,
.glightbox .gdesc,
.glightbox .gslide-description-inner,
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-description,
.glightbox-clean .gdesc-inner {
  background-color: #1a1a1a !important;
  color: #d0d0d0 !important;
  font-size: 0.875rem !important;
  font-style: italic !important;
  padding: 5px !important;
  text-align: left !important;
}

[data-theme="dark"] .glightbox .gslide-description,
[data-theme="dark"] .glightbox .gdesc,
[data-theme="dark"] .glightbox .gslide-description-inner,
[data-theme="dark"] .glightbox-clean .gslide-title,
[data-theme="dark"] .glightbox-clean .gslide-description,
[data-theme="dark"] .glightbox-clean .gdesc-inner {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* Mobile adjustments for lightbox */
@media (max-width: 767px) {
  .glightbox .gslide-image img {
    max-width: 90vw !important;
    max-height: 75vh !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
  }
  
  .glightbox .gslide-media {
    max-width: 90vw !important;
    max-height: 75vh !important;
    padding: 10px;
    padding-top: 2rem;
  }
  
  .glightbox .gslide {
    padding: 0.5rem;
    padding-top: 1.5rem;
  }
  
  .glightbox .gslide-container {
    padding-top: 1.5rem;
  }
}

/* Mobile responsive styles */
@media (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  h1 {
    font-size: 2.1rem;
    line-height: 1.3;
    font-weight: 300;
    text-decoration: none;
    border-bottom: 0.5px solid currentColor;
    padding-bottom: 0.1rem;
  }
  
  /* Page title class for tablet (second instance) */
  .page-title,
  h1.page-title {
    font-size: 2.5rem;
    font-weight: 200;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
    line-height: 1.4;
  }
  
  h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 600;
  }
  
  /* Better blockquote styling on tablet */
  blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--link-color);
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
  }
  
  [data-theme="dark"] blockquote {
    background-color: rgba(255, 255, 255, 0.02);
  }
  
  /* Prevent horizontal scroll on tablet */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
}

/* Force remove all borders from images - highest priority */
img,
img[src],
img[src*="/files/"],
.md-content img,
.md-content__inner img,
.col-md-9 img,
[role="main"] img,
article img,
p img,
div img,
figure img,
.markdown img {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  background: transparent !important;
  border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
}

/* Search term highlighting - temporary highlight on page navigation */
mark.search-highlight-temporary {
  background-color: #2e7d32 !important; /* Dark greenish color - Material theme style */
  color: #ffffff !important;
  padding: 0.1em 0.2em !important;
  border-radius: 2px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.3s ease, opacity 0.3s ease !important;
  animation: searchHighlightFade 2s ease-out forwards !important;
}

/* Dark mode search highlight */
[data-theme="dark"] mark.search-highlight-temporary {
  background-color: #4caf50 !important; /* Lighter green for dark mode */
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Fade out animation */
@keyframes searchHighlightFade {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Large screens - outline visible */
@media (min-width: 1265px) {
  .col-md-3 {
    display: block !important;
  }
}

/* Next page button container */
.next-page-button-container {
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--sidebar-border);
  transition: border-color var(--theme-transition);
}

.next-page-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: rgba(0, 102, 204, 0.1);
  color: var(--link-color);
  text-decoration: none;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 400;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

.next-page-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--link-color);
  text-decoration: none;
}

.next-page-button:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.next-page-button i {
  font-size: 0.9rem;
}

[data-theme="dark"] .next-page-button {
  background-color: rgba(102, 179, 255, 0.2);
}

[data-theme="dark"] .next-page-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--link-color);
}

/* Mobile styles for next page button */
@media (max-width: 768px) {
  .next-page-button-container {
    padding: 1.5rem 1rem;
    margin-top: 1.5rem;
  }
  
  .next-page-button {
    width: 100%;
    justify-content: center;
  }
}

/* Footer - at bottom of viewport when content is short, below content when long */
footer.col-md-12 {
  background-color: var(--bg-color);
  border-top: 1px solid var(--header-border);
  padding: 1rem 2rem;
  margin: 0;
  margin-top: auto; /* Push to bottom when content is short */
  transition: background-color var(--theme-transition), border-color var(--theme-transition);
}

footer.col-md-12 hr {
  display: none; /* Hide hr since footer already has border-top */
}

footer.col-md-12 p {
  margin: 0.5rem 0;
  color: var(--text-color);
  font-size: 0.875rem;
  transition: color var(--theme-transition);
}