/* ================= GENERAL TYPOGRAPHY ================= */

/* Apply Space Grotesk to all headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}

/* Apply IBM Plex Sans to all paragraph text */
p, li, td {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
}

/* Ensure strong (bold) elements still have emphasis */
p strong, td strong {
  font-weight: 500;
}

/* Improve font rendering for smooth text */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================= TEAL THEME (Dark Mode Only) ================= */

/* h1 and h2 in teal (Brighter for dark mode) */
.md-typeset h1 {
  color: #00B3B3; /* Brighter Teal for Dark Mode */
}

.md-typeset h2 {
  color: #00CCCC; /* Brighter Teal for Dark Mode */
}

/* Keep h3-h6 in default colors */
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: inherit; /* Keeps default color */
}

/* ================= TABLE STYLING ================= */

/* Table headers */
.md-typeset table th {
  background-color: rgba(0, 168, 168, 0.2); /* Lightened teal */
  color: #66D9D9; /* Softer, more readable teal */
  font-family: "Space Grotesk", sans-serif; /* Same as headings */
  font-weight: 700;
}

/* Table shadows */
.md-typeset table {
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.4); /* Dark mode shadow */
}

/* ================= HEADER STYLING ================= */

/* Ensure the header uses Space Grotesk */
.md-header__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}

/* Default title font size (mobile-first approach) */
.md-header__title {
  font-size: 1.1rem;
}  /* Added the missing closing bracket here */

/* Increase font size on larger screens (desktop) */
@media screen and (min-width: 1024px) {
  .md-header__title {
      font-size: 1.3rem;
  }
}

/* Ensure the logo height is 1.7rem */
.md-header__button.md-logo img, 
.md-header__button.md-logo svg {
    height: 1.7rem;
    width: auto;
}

/* ================= IMAGE STYLING ================= */

/* Custom image styling: rounded corners with a subtle drop shadow */
.md-typeset img {
  border-radius: 5px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.md-typeset img:hover {
  transform: scale(1.005);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.6);
}

/* Apply a gradient to the MkDocs header */
.md-header {
  background: linear-gradient(90deg, #007A7A, #00A5A5); /* Teal gradient */
  border-bottom: none;
}

/* Ensure the header text contrasts well */
.md-header__title {
  color: white !important;
}

/* Optional: Style the header buttons */
.md-header__button {
  color: white !important;
}

.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 2000px) {
  .md-banner__inner {
    font-size: 0.65rem !important;
  }
}
.md-sidebar__scrollwrap {
  overflow-y: hidden;
  transition: overflow 0.2s ease-in;
}
.md-sidebar--ready .md-sidebar__scrollwrap {
  overflow-y: auto;
}