/* styles.css */

/* === 1. Global Typography === */

/* --- Coloring --- */

/* Add this to Option 1 to support Dark Mode better */
@media (prefers-color-scheme: dark) {
  code {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Variable fonts for smooth rendering */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200..900&family=Source+Serif+Pro:ital,wght@0,200..900;1,200..900&family=Source+Code+Pro:wght@300..700&display=swap');

:root {
  --bs-body-font-family: "Source Serif Pro", Georgia, Cambria, "Times New Roman", serif;
  --bs-font-sans-serif: "Source Sans Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: "Source Code Pro", "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", monospace;
}

/* Body text */
body {
  font-family: var(--bs-body-font-family);
  line-height: 1.7;
  font-size: 1.05rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-font-sans-serif);
  line-height: 1.25;
  font-weight: 700;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}

/* Code typography */
code, pre, pre code, .sourceCode, .code-output {
  font-family: var(--bs-font-monospace);
  font-size: 0.92rem;
  line-height: 1.5;
}

pre {
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
}

code {
  background: rgba(0, 0, 0, 0.04);
  padding: 0.15em 0.35em;
  border-radius: 4px;
}

/* SVG text */
svg text {
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: inherit;
}

/* --- Global Size Scaling --- */

/* html { */
    /* 100% usually equals 16px. 
       Consider 110% or 115% for long-form reading on screens. */
    /* font-size: 115%;  */
/* } */

/* === 2. Fenced environments === */

/* --- Outer Container Styling (Borders and Layout) --- */
/* This rule applies the border to the main container div. */
div.theorem,
div.lemma,
div.corollary,
div.proposition,
div.conjecture,
div.definition,
div.example,
div.exercise,
div.solution,
div.remark {
    margin: 0.5em 0;
    border-left: 4px solid; /* Keep the colored border here */
}

/* --- Inner Body Styling (Background and Padding) --- */
/* This rule targets the inner *-body class to apply the background. */
.theorem-body,
.lemma-body,
.corollary-body,
.proposition-body,
.conjecture-body,
.definition-body,
.example-body,
.exercise-body,
.solution-body,
.remark-body {
    padding: 0.5em; /* Padding for the text content */
    font-family: "Source Sans Pro", sans-serif;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 0.95rem; 
    line-height: 1.55;
}

/* Smaller Code Blocks */
pre, code {
    font-family: var(--bs-font-monospace);
    font-size: 0.9em; 
}


/* Specific border colors for each theorem-like environment */
div.theorem { border-left-color: #795548; }
div.lemma { border-left-color: #FFC107; }
div.corollary { border-left-color: #E91E63; }
div.proposition { border-left-color: #3F51B5; }
div.definition { border-left-color: #2196F3; }
div.example { border-left-color: #9C27B0; }
div.exercise { border-left-color: #00BCD4; }
div.solution { border-left-color: #FF9800; }
div.remark { border-left-color: #607D8B; }


/* Proof Environment (Works differently)*/
div.proof {
    margin: 0.25em 0;
    padding: 0.50em;
    display: block;
    border-left: 2px solid #333;
    font-family: "Source Serif Pro", serif;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* SVG Containers for side-by-side image and text */
.svg-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1em;
    margin: 0.5rem 0;
}
.svg-container > img, .svg-container > svg {
    max-width: var(--svg-width, 300px);
    height: auto;
    display: block;
}
.svg-caption {
    flex: 1 1 var(--svg-width);
    word-break: break-word;
}

/* - Custom CSS for inline h5 headings - */
h5.anchored {
    font-weight: bold;
    display: inline;
    margin: 0;
    padding: 0;
}
h5.anchored .anchorjs-link {
    display: none;
}
h5.anchored::after {
    content: ":";
    margin-right: 0.5em;
}
h5.anchored + p {
    display: inline;
    margin: 0;
    padding: 0;
}


/* === Custom tools === */

/* --- Custom List --- */
/* defines the custom-list div environment */
/* ::: {.custom-list}
- [(myentry)]{data-bullet="(myentry)"} aaa
- [(another_entry)]{data-bullet="(another_entry)"} bbb
::: */

/* 
.custom-list ul {
  list-style: none;
  padding-left: 0;
}

.custom-list li::before {
  content: attr(data-bullet);
  padding-right: 0.5em;
  font-weight: bold;
} */