/* =======================================
   Color Variables (Material Theme)
   ======================================= */

/* Define custom theme colors using CSS variables */
:root {
  --md-primary-fg-color: #0B4651; /* Sets the background color of the top navigation bar and the footer */
  --md-accent-fg-color: #e94337;  /* Sets the accent color used for buttons, links, and interactive elements */
  --md-accent-fg-color--transparent: var(--md-code-bg-color); /* Sets background color of selected navigation element in sidebar */
}

/* Overrides */
.md-tabs, .md-footer{
  background-color: var(--md-primary-fg-color); /* add background color to generated navigation bar and footer */
  color: var(--md-primary-bg-color); /* set color of the text manually to white */
}
.md-typeset figcaption{
  max-width: 100%; /* Caption spans whole width */
}
.md-copyright__highlight{
  color: var(--md-primary-bg-color); /* set color of copyright text */
}
.md-typeset .admonition.note, .md-typeset .admonition.info{
  background-color: #0b47515b; /* set background-color of admonitions */
}



/* =======================================
   Layout & Header Customization
   ======================================= */

/* Set the color of the hamburger menu icon (top-left in the header) */
.md-header__button.md-icon {
  color: #e94337; /* Custom red for brand identity or visual emphasis */
}

/* Set the text color of the site title ("MODELBUILDER Help System") */
.md-header__title {
  color: #e94337; /* Red for brand consistency */
}

/* Change the hover color for links in the sidebar navigation */
.md-nav__link:hover {
  color: #e94337 !important; /* Red on hover to match branding */
}

/* Set the link color in the search result list */
.md-search-result__link {
  color: #e94337 !important; /* Make search result links red for visibility */
}

/* Customize how matched search terms are highlighted */
.md-search-result mark {
  /* background-color: #ffd5d2; */  /* Optional: use a light red background if desired */
  color: #e94337; /* Highlighted text in red instead of default blue */
}

/* Optional hover effect on search result links */
.md-search-result__link:hover {
  color: #cc0000 !important; /* Slightly darker red on hover for interaction feedback */
}

/* Set the default link color inside the main content area */
.md-typeset a {
  color: #e94337; /* Red links to match overall theme */
}

/* Change link color when hovered over in content */
.md-typeset a:hover {
  color: #cc0000; /* Darker red for hover effect */
}


/* =======================================
   Typography Customization
   ======================================= */

/* Set the color of level 1 headings in the content */
.md-typeset h1 {
  color: #e94337; /* Red top-level headings for consistency with site colors */
}

/* Set the color of level 2 headings in the content */
.md-typeset h2 {
  color: #e94337; /* Red subheadings */
}


/* =======================================
   Tables Styling
   ======================================= */

/* Define a reusable table style that is centered and full-width */
.TableCenter {
  width: 100%;                  /* Make table span the full width of the container */
  margin-left: auto;            /* Horizontally center the table */
  margin-right: auto;
  border-collapse: collapse;    /* Collapse borders so adjacent cell borders merge */
}

/* Apply consistent styling to all table cells (<td> and <th>) within .TableCenter */
.TableCenter td,
.TableCenter th {
  vertical-align: middle;       /* Vertically center content in each cell */
  border-top: 1px solid #ccc;   /* Add a light gray border on top of each row (creates row separation) */
  padding: 8px;                 /* Add space inside cells for better readability */
}

/* Remove the top border from the first row of the table to avoid double borders */
.TableCenter tr:first-child td {
  border-top: none;
}

/* A helper class to center text both vertically and horizontally in individual <td> cells */
.td-center {
  text-align: center;           /* Center content horizontally */
  vertical-align: middle;       /* Center content vertically */
}

table{  /*tables become scollable horizontally when needed*/
  overflow-x: auto; 
  display: block; 
  width: 100%;
  scrollbar-width: thin; /*thin scroll bar*/
}
table:hover{
  scrollbar-color: var(--md-accent-fg-color) #0000; /*red scroll bar on hover*/
}

/* color for hl_lines (hll = highlight line) */
code .hll {
  background-color: #fff3b0 !important;  /* pale yellow */
}

/* =======================================
   Image Styling
   ======================================= */

img.middle{
  display: block;
  margin: 1em auto;
  max-width: 100%;
}

/* =======================================
   Responsive Design
   ======================================= */

.bigImage td{ min-width: 300px; width: 50%;}      /*helper for tables that render images too small*/

@media (max-width: 750px){
  img{width: 100%;} /*bigger images*/
  .md-content__inner>.highlight {margin: 1em 0em;}  /*code blocks don't go over the edge of the site*/
  .md-typeset pre>code{border-radius: .4rem !important;} /*keeps rounded corners on smaller screens*/
}