/* ---------------------------------------------------------
   COLOR CONFIGURATION
   --------------------------------------------------------- */
:root {
  --my-charcoal: #23282D;
  --my-sage:     #E6EAE4;
  --my-border:   rgba(35, 40, 45, 0.15);
--my-links: #3F6EC6;
--my-hover: #3B5563;
--my-hover_two: #DDE5DD
  
  /* MkDocs Material Theme Overrides */
  --md-primary-fg-color:        var(--my-sage);
  --md-primary-bg-color:        var(--my-sage);
  --md-admonition-icon--note:   var(--my-charcoal);

}

img {
    max-width: 100%;   /* never exceed container width */
    width: auto;       /*set desired width*/
    height: auto;      /* maintain aspect ratio */
    display: block;    /* optional: remove inline spacing */
    margin: 20px 0;    /* optional spacing */
}
img {
    max-width: 100%;   /* never exceed container */
    max-height: 50vh;  /* limit large/tall images */
    width: auto;       /*prevents upscaling */
    height: auto;
    display: block;
    margin: 20px 0;
}
/* ---------------------- 
   BASE & TYPOGRAPHY
   ---------------------- */
body, .md-typeset {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.8rem; 
  line-height: 1.5;
  color: var(--my-charcoal);
  background-color: var(--my-sage);
}

.md-typeset h1 {
  font-weight: 700;
  line-height: 1.2;
  font-size: 0.8rem;
  color: var(--my-charcoal);
}

.md-typeset h2 {
  font-weight: 700;
  line-height: 1.2;
  font-size: 0.8rem;
  color: var(--my-charcoal);
}

.md-typeset h3 {
  font-weight: 700;
  line-height: 1.2;
  font-size: 0.8rem;
  color: var(--my-charcoal);
}



/* Links */
.md-typeset a {
  color: var(--my-links);      
}

.md-typeset a:hover {
  /*color: var(--my-hover);*/
  text-decoration: underline;
}

/* ---------------------- 
   NAVIGATION (LEFT DRAWBAR)
   ---------------------- */

/* Remove the default background highlight/pill on active/hovered items */
.md-nav__link--active, 
.md-nav__link:focus, 
.md-nav__link:hover {
  background-color: transparent !important; 
  color: var(--my-charcoal) !important;
}

/* Add a classic indicator instead of a background color */
.md-nav__link--active {
  font-weight: 400 !important;
  border-left: 2px solid var(--my-charcoal);
  padding-left: 12px !important; /* Adjust padding to compensate for border */
  margin-left: -2px; /* Keeps text aligned with non-active items */
}

/* Ensure the sidebar background is seamless */
.md-nav {
  background-color: var(--my-sage);
}

/* ---------------------- 
   NAVBAR (HEADER)
   ---------------------- */
.md-header {
  background-color: var(--my-sage);
  color: var(--my-charcoal);
  box-shadow: none; 
  border-bottom: 1px solid var(--my-border);
}

.md-header__title, 
.md-header__button,
.md-header__topic {
  color: var(--my-charcoal) !important;
}

/* ---------------------- 
   ELEMENTS
   ---------------------- */
.md-typeset code {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--my-charcoal);
  padding: 2px 4px;
  border-radius: 3px;
}

.md-typeset table {
  border-collapse: collapse;
  width: 100%;
}

.md-typeset th, .md-typeset td {
  border: 1px solid var(--my-border);
  padding: 8px;
}

/* Extra CSS for mkdocs-enumerate-headings-plugin */ 
.enumerate-headings-plugin {
  filter: opacity(70%);
}


.md-typeset table {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--my-sage);   /* whole table background */
}

.md-typeset th {
  background-color: var(--my-sage);
  color: var(--my-charcoal);
  border: 1px solid var(--my-border);
  padding: 8px;
  text-align: left;
}

.md-typeset td {
  background-color: var(--my-sage);  
  border: 1px solid var(--my-border);
  padding: 8px;
}

/* Alternate row shading 
.md-typeset tr:nth-child(even) td {
  background-color: #EEF2EC;
} */

/* Hover row */
.md-typeset tr:hover td {
  background-color: #DDE5DD;
}