/* ===============================
   Global Layout & Typography
   =============================== */

/* Headings
   ------------------------------- */

/* Main page title */
main h1,
main .h1 {
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

/* Second-level headings */
main h2,
main .h2 {
  /* Top margin set more specifically below */
  margin-bottom: 1.15rem;
}

/* Third-level headings */
main h3,
main .h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Ensure generous spacing before any H2 */
main .section > h2,
main h2 {
  margin-top: 3.5rem !important;
}

/* Sections
   ------------------------------- */

main section {
  /* Add a little more breathing room between sections overall */
  margin-bottom: 2.5rem;
}

/* Body text
   ------------------------------- */

/* Slightly reduce base body text size without altering headings/navigation */
main {
  font-size: 0.9rem;
}

main p {
  /* Slightly increase line height in body text for readability */
  line-height: 1.6;
}

/* Lists
   ------------------------------- */

/* Add breathing room before and after lists */
main ul,
main ol {
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

/* Optional: more space between paragraphs and following lists */
main p + ul,
main p + ol {
  margin-top: 1rem;
}

/* Bold ordered list markers when explicitly requested with a helper class */
.bold-ol ol > li::marker {
  font-weight: 700;
}

/* Optional: more space between headings and the list that follows */
main h2 + ul,
main h2 + ol,
main h3 + ul,
main h3 + ol {
  margin-top: 1.25rem;
}

/* Contextual spacing rules
   ------------------------------- */

/* Add extra space when a third-level heading follows text or a list */
main p + h3,
main ul + h3,
main ol + h3 {
  margin-top: 2.5rem;
}

/* Tighten spacing when a heading is immediately followed by a sub-section heading */
main section[class^="level"]
  > :is(h1, h2, h3, h4, h5)
  + section[class^="level"]
  > :is(h2, h3, h4, h5, h6) {
  margin-top: 1.5rem !important;
}

/* =========================================================
   Specific Overrides
   ========================================================= */

/* Tables
   ------------------------------- */
main table thead th,
main .table thead th {
  background-color: #f2f2f2 !important;
}

main table tbody tr:hover > *,
main .table tbody tr:hover > * {
  background-color: #f7f7f7 !important;
}

/* Increase vertical spacing between bullets (works even with Bootstrap/Quarto overrides) */
main ul li,
main ol li {
  margin-bottom: 0.5rem !important;
  line-height: 1.5 !important;
}

/* If list items contain <p>, ensure they also have spacing */
main ul li p,
main ol li p {
  margin-bottom: 0.5rem !important;
  line-height: 1.5 !important;
}

/* =========================================================
   Callouts
   ========================================================= */

/* Add a bit more vertical padding in all callout header banners */
.callout-tip > .callout-header,
.callout-note > .callout-header,
.callout-important > .callout-header,
.callout-warning > .callout-header,
.callout-caution > .callout-header {
  padding-top: 0.7rem !important;
  padding-bottom: 0.4rem !important;
}

/* Remove extra gap under the last bullet in callouts
   (keep only the callout's own padding at the bottom) */
.callout .callout-body ul,
.callout .callout-body ol {
  margin-bottom: 0;
}

.callout .callout-body ul li:last-child,
.callout .callout-body ol li:last-child {
  margin-bottom: 0 !important;
}

/* Footer draft notice */
.footer-draft-note {
  color: #333333;
  font-style: italic;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.nav-footer {
  align-items: center !important;
}

/* Mermaid diagrams */
pre.mermaid,
.mermaid {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  overflow-x: auto;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Force flowchart connector arrows to dark grey regardless of theme */
.flowchart-link,
.edgePath path.path,
svg .flowchart-link,
svg .edgePath path {
  stroke: #555555 !important;
}

svg marker path,
svg defs marker path {
  fill: #555555 !important;
  stroke: #555555 !important;
}

/* =========================================================
   Sidebar Navigation
   ========================================================= */

/* Sidebar container */
.sidebar.sidebar-navigation {
  background-color: #F7F7F7;
  border-right: 1px solid #DADADA;
}

/* Section header labels */
.sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container .sidebar-item-text,
.sidebar .sidebar-section-item {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0C425C !important;
  padding-top: 0.9rem;
}

/* Regular sidebar links */
.sidebar .sidebar-item .sidebar-item-text {
  font-size: 0.875rem;
  color: #333333;
}

/* Sidebar link hover */
.sidebar a.sidebar-item-text:hover,
.sidebar .sidebar-item a:hover {
  color: #2E7DA1 !important;
  background-color: #D2EAF4;
  border-radius: 4px;
  text-decoration: none;
}

/* Active page indicator */
.sidebar a.active,
.sidebar .sidebar-item a.active {
  color: #0C425C !important;
  font-weight: 600;
  background-color: #D2EAF4;
  border-radius: 4px;
}

/* Sidebar search input focus */
.sidebar .form-control:focus {
  border-color: #2E7DA1;
  box-shadow: 0 0 0 0.2rem rgba(46, 125, 161, 0.2);
}