/* Define a CSS variable for the custom black color */
:root {
  /* Brand colors */
  --second-black: #00090c; /* Your primary color */
  --second-red: #fa1336; /* Your accent color */
  --second-blue: #3d8afb; /* Optional colors */
  --second-yellow: #f6d032;
  --second-green: #43b929;
  --second-red-light: #fa13361a;
  --second-yellow-light: #f6d0321a;
  --second-hover: #f8f8f8;
  --second-gray: #bababa;

  /* Text colors */
  --md-text-color: #242424; /* Set body text color */
  --md-heading-color: var(--second-black); /* Custom black for light mode */

  /* Primary Foreground Color */
  --md-primary-fg-color: hsla(
    210,
    15%,
    4%,
    1
  ); /* Primary color (second-black), converted to HSLA */
  --md-primary-fg-color--light: hsla(
    210,
    15%,
    10%,
    1
  ); /* Lighter version of second-black */
  --md-primary-fg-color--dark: hsla(
    210,
    15%,
    2%,
    1
  ); /* Darker version of second-black */

  /* Background Color */
  --md-primary-bg-color: hsla(0, 0%, 100%, 1); /* Plain white background */
  --md-primary-bg-color--light: hsla(
    0,
    0%,
    100%,
    0.7
  ); /* Light white background with transparency */

  /* Accent Color (Blue) */
  --md-accent-fg-color: var(--second-blue);
  --md-accent-fg-color--transparent: hsla(
    352,
    88%,
    57%,
    0.1
  ); /* Transparent version of accent color (10% opacity) */

  /* Accent Background Color */
  --md-accent-bg-color: hsla(0, 0%, 100%, 1); /* White accent background */
  --md-accent-bg-color--light: hsla(
    0,
    0%,
    100%,
    0.7
  ); /* Light version of white background */
}

/* Customize headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 700; /* Increase font weight */
  color: var(
    --md-heading-color
  ) !important; /* Force the use of the heading color variable */
}

/* Adjust specific heading sizes */
.md-typeset h1 {
  font-size: 1.6rem; /* Decrease size for H1 */
  margin-bottom: 0.5rem;
}

.md-typeset h2 {
  font-size: 1.2rem; /* Adjust size for H2 */
}

.md-typeset h3 {
  font-size: 0.85rem; /* Smaller than H2 for better hierarchy */
}

.md-typeset h4 {
  margin-top: 1.5em; /* Increase space above */
  margin-bottom: 0.25em; /* Decreased by about half from 0.5em */
}

/* Reduce space between h4 and the following paragraph */
.md-typeset h4 + p {
  margin-top: 0;
}

/* Set sidebar heading to second-primary color */
.md-nav__title {
  color: var(--second-primary); /* Use the second-primary color */
}

/* Target section headings in navigation */
.md-nav--primary .md-nav__item--section > .md-nav__link[for] {
  color: var(--second-primary) !important;
}

.md-nav__item .md-nav__link {
  color: var(--second-gray) !important;
  transition: color 0.2s ease; /* Add smooth transition for hover effect */
}

/* Add hover effect for all nav items */
.md-nav__item .md-nav__link:hover {
  color: #242424 !important;
}

/* Update active item styles */
.md-nav__item .md-nav__link--active,
.md-nav__item--active .md-nav__link--active {
  font-weight: 400;
  font-weight: 400; /* Regular weight instead of bold */
  color: var(--second-primary) !important; /* Use second-primary color */
}

/* Universal font size for paragraphs, lists, links, etc. */
.md-typeset,
.md-typeset p,
.md-typeset ul,
.md-typeset ol,
.md-typeset li,
.md-typeset a {
  font-size: 0.8rem; /* Universal font size for all text elements */
  line-height: 1.6; /* Consistent line height for readability */
}

/* Increase spacing between list items */
.md-typeset ul li,
.md-typeset ol li {
  margin-bottom: 0.75em !important; /* Increase gap between list items by ~50% from default */
}

/* Adjust spacing for the last item in each list */
.md-typeset ul li:last-child,
.md-typeset ol li:last-child {
  margin-bottom: 0.25em !important; /* Reduced space after the last list item */
}

.md-typeset a {
  color: var(--md-text-color); /* Link color */
  text-decoration: underline; /* Add underline */
  text-underline-offset: 0.1em; /* Increase distance between text and underline */
  transition: color 125ms; /* Smooth color transition */
}

.md-typeset a:focus,
.md-typeset a:hover {
  color: var(--md-text-color);
  text-decoration: none;
}

/* Remove underlines from tab headers */
.tabbed-labels a,
.tabbed-labels--linked a {
  text-decoration: none !important;
}

.tabbed-labels a:hover,
.tabbed-labels--linked a:hover {
  text-decoration: none !important;
}

/* Customize the placeholder text size in the search input box */
.md-search__input::placeholder {
  font-size: 0.7rem;
  color: #888888; /* Optionally, change the placeholder text color */
}

.md-header__title {
  font-size: 0.8rem;
}

.md-tabs__link,
.md-nav__link {
  font-size: 0.7rem;
}

.md-source {
  font-size: 0.7rem;
}

/* Add space at the bottom of the content area */
.md-main__inner {
  padding-bottom: 2.5rem; /* Adjust this value as needed */
}

/* Add space between icons and text */
.md-typeset .lg {
  margin-right: 0.2rem;
}

.md-typeset a .twemoji {
  margin-right: 0.2rem;
}

/* Fix vertical alignment of octicons in headings */
.md-typeset h1 .twemoji,
.md-typeset h2 .twemoji,
.md-typeset h3 .twemoji,
.md-typeset h4 .twemoji,
.md-typeset h5 .twemoji,
.md-typeset h6 .twemoji {
  /*  vertical-align: text-bottom; */
  transform: translateY(2px);
  margin-right: 0.1rem;
}

/* Admonition styling */
.md-typeset .admonition,
.md-typeset details {
  margin-top: 3.6em; /* Space above callout boxes */
  margin-bottom: 4.2em; /* Space below callout boxes */
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--second-yellow);
}

.md-typeset .note > .admonition-title:before,
.md-typeset .note > summary:before {
  background-color: var(--second-yellow);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background: var(--second-yellow-light);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--second-red);
}

.md-typeset .warning > .admonition-title:before,
.md-typeset .warning > summary:before {
  background-color: var(--second-red);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background: var(--second-red-light);
}

/* Add border radius to code blocks */
.md-typeset pre {
  border-radius: 0.5rem;
}

.md-typeset code {
  border-radius: 0.3rem;
}

/* Add space above divider lines */
.md-typeset hr {
  margin-top: 2.8em;
  margin-bottom: 1em;
}

/* Style figure captions */
.md-typeset figcaption,
.md-typeset figure figcaption,
.md-typeset .figure figcaption,
.md-typeset .md-typeset figcaption {
  /* Added more specific selector */
  font-size: 0.64rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: #9b9ca1 !important;
  margin-top: 0.5em !important;
  line-height: 1.4 !important; /* Adjusted line height to match smaller font */
}

/* Override the general .md-typeset font size for captions specifically */
.md-typeset figcaption *,
.md-typeset figure figcaption *,
.md-typeset .figure figcaption * {
  font-size: 0.64rem !important;
}

/* Table styling - ensure consistent font size for all table content */
.md-typeset table,
.md-typeset table td,
.md-typeset table th,
.md-typeset table td *,
.md-typeset table th *,
.md-typeset table td a,
.md-typeset table th a {
  font-size: 0.72rem !important;
}

/* Ensure table headers have appropriate styling */
.md-typeset table th {
  font-weight: 600;
}

/* Improve table readability with better spacing */
.md-typeset table td,
.md-typeset table th {
  padding: 0.75rem 0.5rem;
  line-height: 1.4;
}