/* Load Lato from Google Fonts — @import must be at the top of the file */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* Let Mermaid classDef color: properties take effect instead of Material's
   default dark text.  Material defines this on :root>* (body), so we must
   use the same selector.  Setting to 'initial' (guaranteed-invalid for
   custom properties) makes color: var(...) fall back to the inherited
   classDef inline style. */
:root>* {
  --md-mermaid-label-fg-color: initial;
}

/*Header row*/
.md-header {
  background-color: #253647 !important;
}

/* .md-header__title {
  display: none !important;
} */

/* Logo settings */
.md-header__button.md-logo img {
  height: 30px !important;
  /* adjust to your needs */
  width: auto;
  /* Maintains aspect ratio */
}

.md-header__button.md-logo {
  margin-right: 20px;
  /* Adds space to the right of the logo */
  padding: 10px;
  /* Adds internal spacing around the logo */
}

.md-nav--primary .md-nav__title[for=__drawer] {
  background-color: #253647 !important;
  color: #ffffff;
  font-weight: 700;
}

.md-nav--primary .md-nav__title {
  background-color: #253647 !important;
  color: #ffffff;
  cursor: pointer;
  height: 5.6rem;
  line-height: 2.4rem;
  padding: 3rem .8rem .2rem;
  position: relative;
  white-space: nowrap;
}

/* Product Tabs row */

.md-tabs {
  background-color: #253647 !important;
}

.md-tabs__link {
  color: #8cd0df !important;
}

.md-tabs__link,
.md-tabs__link--active {
  font-family: "Lato", sans-serif !important;
  font-weight: 700 !important;
  /* Bold */
  letter-spacing: 0.3px;
  /* optional: cleaner bold look */
}

/* Footer styles */

/* Footer styles */
.md-footer {
  background-color: #253647 !important;
  /* Matches custom footer */
  color: #ffffff !important;
  margin-top: 0 !important;
  /* Remove gap between custom footer and standard footer */
}

.md-footer-meta {
  background-color: #253647 !important;
  /* Matches custom footer */
}

/* Ensure custom footer links hover correctly via global CSS if needed */
.md-footer-custom a:hover {
  color: #8cd0df !important;
  transform: translateX(3px);
  opacity: 1 !important;
}

/* Global fonts */

/* Apply Lato to body text */
body {
  font-family: "Lato", sans-serif !important;
}

/* Apply Lato to headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", sans-serif !important;
}

.md-typeset h1 {
  font-weight: 450 !important;
}

.md-typeset h2 {
  font-weight: 400 !important;
}

/* Adapt dl button */

/* a.md-header-nav__button.md-icon svg {
  display: none;
} */

a.md-header-nav__button.md-icon {
  /* display: inline-block;
  width: 24px;
  height: 24px; */
  margin-left: 50px;
  /* background-image: url('../images/download-icon.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; */
}

/* Utility for figure centering, ![my image desc](path/to/img){ .center }*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Expand grid width to allow for larger central content */
.md-grid {
  max-width: 68rem; /* md default is 61rem, size of the middle part of website */
}

/* Dual-render Mermaid compatibility hooks */
.mermaid-pdf-container {
  display: none !important; /* Hide PNG container on website */
}

/* Fix Mermaid classDef color on dark nodes:
   Mermaid sets color:#fff on <g class="label"> via inline style, but the
   Material theme's body color cascades into <foreignObject> and overrides it.
   Forcing inheritance here restores the intended classDef text color. */
/* Fix Mermaid classDef color on dark nodes:
   Force an unbroken inheritance chain for color through all descendants of a node.
   This bypasses browser foreignObject boundaries and Mermaid's internal g.label styling. */
.mermaid-web-container svg g.node *,
svg.mermaid g.node * {
  color: inherit !important;
}

@media print {
  .mermaid-web-container {
    display: none !important; /* Hide Live Mermaid (JS) in PDF/Print */
  }
  .mermaid-pdf-container {
    display: block !important; /* Show PNG container in PDF/Print */
  }
  .mermaid-pdf-container img {
    margin: 20px auto;
    display: block;
    max-width: 100%;
  }
}

/* Dual-render KaTeX compatibility hooks */
.katex-pdf-container {
  display: none !important; /* Hide pre-rendered KaTeX on website */
}

@media print {
  .katex-web-container {
    display: none !important; /* Hide JS-rendered KaTeX in PDF/Print */
  }
  .katex-pdf-container {
    display: inline !important; /* Show pre-rendered KaTeX in PDF/Print */
  }
  .katex-pdf-container.katex-display {
    display: block !important; /* Display-mode equations as block in PDF */
    text-align: center;
    margin: 1em 0;
  }
}