@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   scSimEval Documentation Theme (Tidyverse Style)
   ========================================================================== */

/* Typography & Global Layout */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #24292f !important;
  background-color: #ffffff !important;
}

main p, main li, main dd, .section p, .section li {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.5 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  margin-bottom: 1em !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

/* Page Header & Single Underline Rule (Ensures strictly ONE line under titles) */
.page-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 1.2rem !important;
}

.page-header + hr,
.page-header hr,
h1 + hr,
.page-header ~ hr {
  display: none !important;
}

h1 {
  font-size: 2.1em !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  padding-bottom: 0.35em !important;
  margin-top: 1.2em !important;
  margin-bottom: 0.6em !important;
}

h2 {
  font-size: 1.45em !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 0.25em !important;
  color: #1e293b !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

h3 {
  font-size: 1.2em !important;
  color: #334155 !important;
  margin-top: 1.2em !important;
  margin-bottom: 0.4em !important;
}

code, pre, kbd, samp {
  font-family: 'JetBrains Mono', Consolas, Monaco, "Courier New", monospace !important;
}

pre {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 1em 1.2em !important;
  line-height: 1.45 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Responsive Tables without Column Collision */
table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border-collapse: collapse !important;
  margin: 1.5em 0 !important;
  font-size: 0.95em !important;
}

th {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #cbd5e1 !important;
  padding: 0.65em 0.85em !important;
  text-align: left !important;
}

td {
  padding: 0.6em 0.85em !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-align: left !important;
}

tr:nth-child(even) td {
  background-color: #f8fafc !important;
}

/* ==========================================================================
   Two-Column Layout: Main Content (Left) & Headings Sidebar (Right)
   Follows tidyr / ggplot2 Tidyverse Design Pattern
   ========================================================================== */

main#main, .col-md-9 {
  min-width: 0 !important;
  padding-right: 2rem !important;
  padding-bottom: 2.5rem !important;
}

/* Right Headings Sidebar - Sticky, Clean, Single Slider, Stops Before Footer */
@media (min-width: 768px) {
  aside.col-md-3 {
    position: sticky !important;
    top: 85px !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-left: 1.5rem !important;
    border-left: 1px solid #e2e8f0 !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
  }

  aside.col-md-3::-webkit-scrollbar,
  nav#toc::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

@media (max-width: 767.98px) {
  aside.col-md-3 {
    margin-top: 2rem !important;
    border-top: 1px solid #e2e8f0 !important;
    border-left: none !important;
    padding-top: 1.5rem !important;
    padding-left: 0 !important;
  }
}

/* Table of Contents Styling (Clean Tidyverse Style) */
nav#toc {
  font-size: 0.9rem !important;
  scrollbar-width: none !important;
}

nav#toc h2 {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-top: 0.2rem !important;
  margin-bottom: 0.8rem !important;
}

nav#toc ul {
  padding-left: 0.25rem !important;
  list-style: none !important;
  margin: 0 !important;
}

nav#toc li {
  margin-bottom: 0.45rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

nav#toc a {
  color: #475569 !important;
  text-decoration: none !important;
  transition: color 0.15s ease-in-out !important;
  display: block !important;
}

nav#toc a:hover, nav#toc a.active {
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Footer Isolation (Prevents Sidebar Overflow / Overlap)
   ========================================================================== */
footer {
  margin-top: 3.5rem !important;
  padding: 2.2rem 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  position: relative !important;
  z-index: 20 !important;
  clear: both !important;
}

/* Function names and inline code inside paragraph texts in dark blue */
p code,
p a code,
p a > code,
li code,
li a code,
li a > code {
  color: #1e40af !important; /* Dark blue */
  background-color: #f1f5f9 !important;
  padding: 0.15em 0.35em !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  border: 1px solid #e2e8f0 !important;
}

p a:hover code,
li a:hover code {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

/* Black box surrounding figures (only around the figure itself) */
.figure img,
figure img,
img.r-plt,
p > img:not(.logo):not([src*="shields.io"]):not([src*="badge"]) {
  border: 1.5px solid #000000 !important;
  border-radius: 4px !important;
  padding: 3px !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

/* Remove 'Source: vignettes/****.Rmd' texts everywhere */
.page-header small.dont-index,
.template-article small.dont-index,
small.dont-index {
  display: none !important;
}

/* ==========================================================================
   Logo Display Control: ONLY on Home Page and Reference Page
   (Hidden from all article/vignette pages as requested)
   ========================================================================== */

/* Default: hide page logo everywhere */
.page-header img.logo,
.page-header .logo,
.template-article .page-header img.logo,
.template-article img.logo,
.template-article .page-header .logo,
.template-news .page-header img.logo,
.template-news img.logo,
.template-citation-authors .page-header img.logo,
.template-citation-authors img.logo,
.template-reference-topic .page-header img.logo,
.template-reference-topic img.logo {
  display: none !important;
}

/* Prominently show logo ONLY on Home Page and Reference Index Page (No shading, no square border) */
.template-home .page-header img.logo,
.template-home img.logo,
.template-reference-index .page-header img.logo,
.template-reference-index img.logo {
  display: block !important;
  width: 175px !important;
  min-width: 175px !important;
  max-width: 175px !important;
  height: auto !important;
  float: right !important;
  margin-left: 2rem !important;
  margin-bottom: 1.5rem !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.navbar-brand img, .navbar-brand .logo {
  height: 42px !important;
  width: auto !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

@media (max-width: 767.98px) {
  .template-home .page-header img.logo,
  .template-home img.logo,
  .template-reference-index .page-header img.logo,
  .template-reference-index img.logo {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    float: none !important;
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
  }
}

/* Ensure citation section is completely hidden on Authors page */
.template-citation-authors div.section:has(> #citation),
.template-citation-authors #citation,
.template-citation-authors #citation ~ * {
  display: none !important;
}

/* ==========================================================================
   Navbar Search Bar & Autocomplete Styling
   ========================================================================== */
.navbar #search-input {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  padding: 0.32rem 0.95rem 0.32rem 2.2rem !important;
  font-size: 0.86rem !important;
  width: 200px !important;
  transition: all 0.25s ease-in-out !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0.65rem center !important;
  background-size: 0.92rem 0.92rem !important;
}

.navbar #search-input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.84rem !important;
}

.navbar #search-input:focus {
  background-color: #ffffff !important;
  border-color: #38bdf8 !important;
  color: #0f172a !important;
  width: 270px !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35) !important;
  outline: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
}

.navbar #search-input:focus::placeholder {
  color: #94a3b8 !important;
}

.navbar form[role="search"] {
  display: flex !important;
  align-items: center !important;
  margin: 0 0.5rem 0 0 !important;
}

.navbar .navbar-nav:last-child {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0.25rem !important;
}

/* Autocomplete dropdown menu */
.algolia-autocomplete {
  width: 100% !important;
}

.algolia-autocomplete .aa-dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
  margin-top: 0.5rem !important;
  padding: 0.5rem !important;
  min-width: 320px !important;
  max-width: 480px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  z-index: 1050 !important;
}

.algolia-autocomplete .aa-suggestion {
  padding: 0.55rem 0.8rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 0.88rem !important;
  color: #334155 !important;
  transition: background-color 0.15s ease-in-out !important;
}

.algolia-autocomplete .aa-suggestion:hover,
.algolia-autocomplete .aa-suggestion.aa-cursor {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.algolia-autocomplete .search-details {
  font-weight: 600 !important;
  color: #1e40af !important;
  text-decoration: none !important;
}

.algolia-autocomplete mark {
  background: #fef08a !important;
  color: #713f12 !important;
  padding: 0.1em 0.25em !important;
  border-radius: 3px !important;
}