/* ==========================================================================
   1. FONTS & THEME VARIABLES
   ========================================================================== */
@font-face {
  font-family: 'Noto Sans', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
}

:root {
  --md-text-font: "Noto Sans", sans-serif;
  font-optical-sizing: auto;

  --msd-blue: #4682b4;
  --msd-green: #4cae4f;
  --msd-red: #dc3545;
  --msd-violet: #7e35f4;
  --msd-dark-grey: #464e56;
  --msd-medium-grey: #6c757d;
}

[data-md-color-scheme="vtct_theme"] {
  --md-code-hl-number-color: #5E54C9;
  --md-code-hl-special-color: #F11D50;
  --md-code-hl-function-color: #85d273;
  --md-code-hl-constant-color: #333;
  --md-code-hl-keyword-color: #00B0DE;
  --md-code-hl-string-color: #FF9600;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: #F11D50;
  --md-code-hl-punctuation-color: #333;
  --md-code-hl-comment-color: #aaa;
  --md-code-hl-generic-color: var(--md-default-fg-color--light);
  --md-code-hl-variable-color: #333;

  --msd-blue: #4682b4;
  --msd-green: #4cae4f;
}

/* Base Layout & Typography */
strong {
  font-weight: bold !important;
}

.md-grid {
  max-width: 64rem !important;
}

.md-main {
  background-color: #f7f9fc;
}

.md-content {
  background-color: #fff;
  margin-bottom: 2rem;
  border-radius: 1.5rem;
}

.tx-hero h1 {
  font-size: 2.41rem !important;
}

.md-content article h2 {
  color: var(--msd-green);
  font-weight: 400;
}

.md-content article h3 {
  font-weight: 400;
}

.md-content article h3 {
  font-weight: 400;
}


/* ==========================================================================
   2. NAVIGATION & TABS
   ========================================================================== */
.md-tabs__link {
  font-size: .75rem !important;
}

.md-tabs__link--active {
  font-weight: bold !important;
  color: var(--md-accent-fg-color);
}

.md-tabs__link--active, 
.md-tabs__link:focus, 
.md-tabs__link:hover {
  color: inherit;
  opacity: 1;
}

.md-nav__item .md-nav__link--active {
  font-weight: bold !important;
  font-size: .75rem !important;
  color: var(--md-accent-fg-color);
}

.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
  background: #f7f9fc;
  box-shadow: none !important;
}

.md-nav--secondary .md-nav__title {
  background: #f7f9fc;
  box-shadow: none !important;
}

.md-select__inner {
  border-radius: 1rem;
}

.md-typeset .md-content__button {
  color: var(--md-default-fg-color--lighter);
  display: none;
}


/* ==========================================================================
   3. TABLES
   ========================================================================== */
table {
  padding: 0;
}

table tr {
  border-top: 1px solid #cccccc;
  background-color: transparent;
  margin: 0;
  padding: 0;
}

table tr th,
table tr td {
  border: 0px solid #cccccc;
  margin: 0;
  padding: 6px 13px;
}

table tr th {
  font-weight: bold;
}

table tr th :first-child,
table tr td :first-child {
  margin-top: 0;
}

table tr th :last-child,
table tr td :last-child {
  margin-bottom: 0;
}

.md-typeset table:not([class]) {
  font-size: 0.7rem;
  font-family: "Noto Sans", sans-serif;
  border-radius: 1.5rem;
}

.md-typeset table:not([class]) th {
  min-width: 1.5rem;
}


/* ==========================================================================
   4. ADMONITIONS & DETAILS
   ========================================================================== */
.admonition,
details {
  font-family: "Noto Sans", sans-serif;
}

.md-typeset .admonition, 
.md-typeset details {
  font-size: 0.75rem;
  border-radius: 1.5rem;
}

[dir=ltr] .md-typeset .admonition-title,
[dir=ltr] .md-typeset summary {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.md-typeset details:not([open]) > summary {
  border-radius: 1.5rem;
}

/* Custom Admonition: Settings */
.md-typeset .admonition.settings, 
.md-typeset details.settings {
  border-left: .22rem solid #448aff;
}

.md-typeset .admonition.settings > .admonition-title, 
.md-typeset details.settings > .admonition-title, 
.md-typeset details.settings > summary {
  border-bottom: .1rem solid rgba(236, 243, 255, 0.1);
  background-color: rgba(236, 243, 255, 0.1);
}

.md-typeset .admonition.settings > .admonition-title:before, 
.md-typeset details.settings > .admonition-title:before, 
.md-typeset details.settings > summary:before {
  color: #448aff;
  content: "settings";
}


/* ==========================================================================
   5. CODE BLOCKS & MEDIA
   ========================================================================== */
.md-typeset img, 
.md-typeset svg, 
.md-typeset video {
  border-radius: 1.5rem;
}

.md-typeset pre > code {
  border-radius: 1rem;
}

.md-typeset .tabbed-block > .highlight:first-child > .highlighttable > tbody > tr > .code > div > pre > code,
.md-typeset .highlighttable > tbody > tr > .code > div > pre > code {
  border-top-left-radius: 0;
  border-top-right-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
}

.md-typeset .tabbed-block > .highlight:first-child > .highlighttable > tbody > tr > .filename span.filename, 
.md-typeset .tabbed-block > .highlight:first-child > .highlighttable > tbody > tr > .linenos,
.highlighttable .linenos {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #fff;
  border-left: 10px solid #1d9ded;
  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
}

.md-typeset .tabbed-labels {
  box-shadow: none;
}

.highlight span.filename {
  background-color: transparent;
  border-bottom: transparent;
}

.highlighttable tr {
  border: hidden;
}

/* Sidebar item text color on hover */
.md-nav__link:hover {
  color: var(--msd-blue) !important;
}

/* Currently selected / active page in the sidebar */
.md-nav__link--active,
.md-nav__link--active:hover {
  color: var(--msd-blue) !important;
}

/* Optional: Active icon color if using navigation icons */
.md-nav__link--active .md-icon,
.md-nav__link--active svg {
  fill: var(--msd-blue) !important;
  color: var(--msd-blue) !important;
}

/* If sidebar items contain SVG icons, update their hover color as well */
.md-nav__link:hover .md-icon,
.md-nav__link:hover svg {
  fill: var(--msd-blue) !important;
  color: var(--msd-blue) !important;
}

@media screen and (max-width: 44.9375em) {
  .md-content__inner > .highlight > .highlighttable > tbody > tr > .linenos {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }

  .md-content__inner > .highlight > .highlighttable > tbody > tr > .code > div > pre > code {
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
  }

  .md-content__inner > .highlight > pre > code {
    border-radius: 1.5rem;
  }
}

/* mkdocstrings Indentation */
div.doc-contents:not(.first) {
  padding-left: 25px;
  border-left: 4px solid rgba(230, 230, 230);
  margin-bottom: 80px;
}

div.language-markmap.mkdocs-markmap {
  border: none;
  min-height: 500px;
}


/* ==========================================================================
   6. INTERACTIVE & QUIZ ELEMENTS
   ========================================================================== */
textarea[id^="userInput_"] {
  font-family: consolas, 'Courier New';
  border-radius: 15px;
  width: 50%;
  height: 2rem;
  resize: vertical;
  padding: 0.2rem;
}

textarea[id^="solution_"] {
  display: none;
}

div[id^="appreciate_"] {
  margin: 0.5rem;
}

.submitButton {
  background-color: initial;
  background-image: linear-gradient(-180deg, #00D775, #00BD68);
  border-radius: 9999px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  height: 44px;
  line-height: 44px;
  outline: 0;
  overflow: hidden;
  padding: 0 20px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 100px;
  z-index: 0;
  border: 0;
}

.submitButton:hover {
  background: #00bd68;
}

/* Custom Radio / Checkbox Containers */
.container {
  display: block;
  position: relative;
  padding-left: 1.7rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1rem;
  width: 1rem;
  background-color: #fff;
  border: solid 1px #ccc;
  border-radius: 50%;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
  border: none;
}

.container input:checked ~ .checkmark {
  background-color: #00D775;
  border: none;
}

.checkmark:after {
  content: "";
  position: absolute;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  top: 0.3rem;
  left: 0.3rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #fff;
}


/* ==========================================================================
   7. COMPONENTS (GLightbox, Tooltips, Search, Donation)
   ========================================================================== */
/* GLightbox */
h4[id^="gSlideTitle_"].gslide-title {
  color: #d6d6d6;
}

div.gslide-description.description-bottom {
  background: #141414;
}

.glightbox-container div.gslide-inner-content {
  width: 85%;
}

/* Tooltip */
.md-tooltip--active {
  border-radius: 0 15px 15px 15px;
}

/* Donation Button */
.donation-button {
  margin-top: 2rem;
  text-align: center;
}

.btn-donate {
  display: inline-block;
  padding: 0.5rem 2rem;
  background-color: #ffca28;
  color: #565656 !important;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 171, 215, 0.5);
}

.btn-donate:hover {
  background-color: #00abd7;
  color: #fff !important;
}

/* Search Box */
.md-search__form {
  border-radius: 100px;
}

[data-md-toggle=search]:checked ~ .md-header .md-search__form {
  background-color: var(--md-default-bg-color);
  box-shadow: 0 0 0.6rem #00000012;
  color: var(--md-default-fg-color);
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

[dir=ltr] .md-search__output, 
[dir=rtl] .md-search__output {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

/* Announcement Bar */
.md-banner {
  color: #C2B280;
  background-color: #2F4F4F;
}

.md-banner strong {
  white-space: nowrap;
}

.md-banner a,
.md-banner strong {
  color: var(--md-footer-fg-color);
}

.md-banner a:focus,
.md-banner a:hover {
  color: currentcolor;
}

.md-banner a:focus .twemoji,
.md-banner a:hover .twemoji {
  background-color: var(--md-footer-fg-color);
  box-shadow: none;
}

.md-banner .twemoji {
  border-radius: 100%;
  box-shadow: inset 0 0 0 .05rem currentcolor;
  display: inline-block;
  height: 1.2rem;
  padding: .25rem;
  transition: all .25s;
  vertical-align: bottom;
  width: 1.2rem;
}

.md-banner .twemoji svg {
  display: block;
  max-height: none;
}

.md-banner svg.announce-icon {
  fill: #C2B280;
}

.md-banner code {
  color: #c2b280;
  background-color: #2f4f4f;
}

/* ==========================================================================
   8. MATERIAL FOR MKDOCS EXTENSIONS & INSIDERS (.mdx-*)
   ========================================================================== */
@keyframes heart {
  0%, 40%, 80%, to { transform: scale(1); }
  20%, 60% { transform: scale(1.15); }
}

.md-typeset .twitter { color: #00acee; }
.md-typeset .mastodon { color: #897ff8; }
.md-typeset .mdx-video { width: auto; }

.md-typeset .mdx-video__inner {
  height: 0;
  padding-bottom: 56.138%;
  position: relative;
  width: 100%;
}

.md-typeset .mdx-video iframe {
  border: none;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

.md-typeset .mdx-heart {
  animation: heart 1s infinite;
}

.md-typeset .mdx-insiders {
  color: #e91e63;
}

.md-typeset .mdx-switch button {
  cursor: pointer;
  transition: opacity .25s;
}

.md-typeset .mdx-switch button:focus,
.md-typeset .mdx-switch button:hover {
  opacity: .75;
}

.md-typeset .mdx-switch button > code {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  display: block;
}

.md-typeset .mdx-deprecated {
  opacity: .5;
  transition: opacity .25s;
}

.md-typeset .mdx-deprecated:focus-within,
.md-typeset .mdx-deprecated:hover {
  opacity: 1;
}

.md-typeset .mdx-columns ol,
.md-typeset .mdx-columns ul {
  column-count: 2;
}

/* Increase specificity with .md-typeset */
.md-typeset .table-card {
  width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--md-default-fg-color--lightest, #e2e8f0);
}

.md-typeset .table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0;
}

.md-typeset .table-card th {
  background-color: var(--md-primary-fg-color, #0d9488) !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 12px 16px;
}

.md-typeset .table-card td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #f1f5f9);
}

.md-typeset .table-card tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

.md-typeset .table-card tr:hover td {
  background-color: rgba(13, 148, 136, 0.08);
}

@media screen and (max-width: 29.9375em) {
  .md-typeset .mdx-columns ol,
  .md-typeset .mdx-columns ul {
    -moz-columns: initial;
    columns: initial;
  }
}

.md-typeset .mdx-columns li {
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}

.md-typeset .mdx-flags {
  margin: 2em auto;
}

.md-typeset .mdx-flags ol {
  list-style: none;
}

.md-typeset .mdx-flags ol li {
  margin-bottom: 1em;
}

.md-typeset .mdx-flags__item {
  display: flex;
  gap: .6rem;
}

.md-typeset .mdx-flags__content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.md-typeset .mdx-flags__content span {
  align-items: baseline;
  display: inline-flex;
  justify-content: space-between;
}

.md-typeset .mdx-flags__content > span:nth-child(2) {
  font-size: 80%;
}

.md-typeset .mdx-flags__content code {
  float: right;
}

.md-typeset .mdx-author {
  display: flex;
  font-size: .68rem;
}

.md-typeset .mdx-author img {
  border-radius: 100%;
  height: 2rem;
}

.md-typeset .mdx-author p:first-child {
  flex-shrink: 0;
  margin-right: .8rem;
}

.md-typeset .mdx-author p > span {
  display: block;
}

.md-typeset .mdx-social {
  height: min(27rem, 80vw);
  position: relative;
}

.md-typeset .mdx-social:hover .mdx-social__image {
  background-color: #e4e4e40d;
}

.md-typeset .mdx-social__layer {
  margin-top: 4rem;
  position: absolute;
  transform-style: preserve-3d;
  transition: .25s cubic-bezier(.7, 0, .3, 1);
}

.md-typeset .mdx-social__layer:hover .mdx-social__label {
  opacity: 1;
}

.md-typeset .mdx-social__layer:hover .mdx-social__image {
  background-color: #7f7f7ffc;
}

.md-typeset .mdx-social__layer:hover ~ .mdx-social__layer {
  opacity: 0;
}

.md-typeset .mdx-social__image {
  box-shadow: -.25rem .25rem .5rem #0000000d;
  transform: rotate(-40deg) skew(15deg, 15deg) scale(.7);
  transition: all .25s;
}

.md-typeset .mdx-social__image img {
  display: block;
}

.md-typeset .mdx-social__label {
  background-color: var(--md-default-fg-color--light);
  color: var(--md-default-bg-color);
  display: block;
  opacity: 0;
  padding: .2rem .4rem;
  position: absolute;
  transition: all .25s;
}

.md-typeset .mdx-social:hover .mdx-social__layer:nth-child(6) { transform: translateY(-30px); }
.md-typeset .mdx-social:hover .mdx-social__layer:nth-child(5) { transform: translateY(-20px); }
.md-typeset .mdx-social:hover .mdx-social__layer:nth-child(4) { transform: translateY(-10px); }
.md-typeset .mdx-social:hover .mdx-social__layer:nth-child(3) { transform: translateY(0); }
.md-typeset .mdx-social:hover .mdx-social__layer:nth-child(2) { transform: translateY(10px); }
.md-typeset .mdx-social:hover .mdx-social__layer:first-child { transform: translateY(20px); }

.mdx-container {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom, linear-gradient(to bottom, var(--md-primary-fg-color), #0ff 99%, var(--md-default-bg-color) 99%);
  padding-top: 1rem;
}

[data-md-color-scheme=slate] .mdx-container {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom, linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%);
}

.mdx-hero {
  color: var(--md-primary-bg-color);
  margin: 0 .8rem;
}

.mdx-hero h1 {
  color: currentcolor;
  font-weight: 700;
  margin-bottom: 1rem;
}

@media screen and (max-width: 29.9375em) {
  .mdx-hero h1 { font-size: 1.4rem; }
}

.mdx-hero__content {
  padding-bottom: 6rem;
}

@media screen and (min-width: 60em) {
  .mdx-hero {
    align-items: stretch;
    display: flex;
  }

  .mdx-hero__content {
    margin-top: 3.5rem;
    max-width: 19rem;
    padding-bottom: 14vw;
  }

  .mdx-hero__image {
    order: 1;
    transform: translateX(4rem);
    width: 38rem;
  }
}

@media screen and (min-width: 76.25em) {
  .mdx-hero__image {
    transform: translateX(8rem);
  }
}

.mdx-hero .md-button {
  color: var(--md-primary-bg-color);
  margin-right: .5rem;
  margin-top: .5rem;
}

.mdx-hero .md-button:focus,
.mdx-hero .md-button:hover {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
}

.mdx-hero .md-button--primary {
  background-color: var(--md-primary-bg-color);
  border-color: var(--md-primary-bg-color);
  color: #894da8;
}

.md-typeset .mdx-iconsearch {
  background-color: var(--md-default-bg-color);
  border-radius: .1rem;
  box-shadow: var(--md-shadow-z1);
  position: relative;
  transition: box-shadow 125ms;
}

.md-typeset .mdx-iconsearch:focus-within,
.md-typeset .mdx-iconsearch:hover {
  box-shadow: var(--md-shadow-z2);
}

.md-typeset .mdx-iconsearch .md-input {
  background: var(--md-default-bg-color);
  box-shadow: none;
}

[data-md-color-scheme=slate] .md-typeset .mdx-iconsearch .md-input {
  background: var(--md-code-bg-color);
}

.md-typeset .mdx-iconsearch-result {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-color: var(--md-default-fg-color--lighter) #0000;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.md-tooltip .md-typeset .mdx-iconsearch-result {
  max-height: 10.25rem;
}

.md-typeset .mdx-iconsearch-result::-webkit-scrollbar {
  height: .2rem;
  width: .2rem;
}

.md-typeset .mdx-iconsearch-result::-webkit-scrollbar-thumb {
  background-color: var(--md-default-fg-color--lighter);
}

.md-typeset .mdx-iconsearch-result::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-accent-fg-color);
}

.md-typeset .mdx-iconsearch-result__meta {
  color: var(--md-default-fg-color--lighter);
  font-size: .64rem;
  position: absolute;
  right: .6rem;
  top: .4rem;
}

[dir=ltr] .md-typeset .mdx-iconsearch-result__list { margin-left: 0; }
[dir=rtl] .md-typeset .mdx-iconsearch-result__list { margin-right: 0; }

.md-typeset .mdx-iconsearch-result__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

[dir=ltr] .md-typeset .mdx-iconsearch-result__item { margin-left: 0; }
[dir=rtl] .md-typeset .mdx-iconsearch-result__item { margin-right: 0; }

.md-typeset .mdx-iconsearch-result__item {
  border-bottom: .05rem solid var(--md-default-fg-color--lightest);
  margin: 0;
  padding: .2rem .6rem;
}

.md-typeset .mdx-iconsearch-result__item:last-child {
  border-bottom: none;
}

.md-typeset .mdx-iconsearch-result__item > * {
  margin-right: .6rem;
}

.md-typeset .mdx-iconsearch-result__item img {
  height: .9rem;
  width: .9rem;
}

[data-md-color-scheme=slate] .md-typeset .mdx-iconsearch-result__item img[src*=squidfunk] {
  filter: invert(1);
}

.md-typeset .mdx-premium p {
  margin: 2em 0;
  text-align: center;
}

.md-typeset .mdx-premium img {
  height: 3.25rem;
}

.md-typeset .mdx-premium p:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.md-typeset .mdx-premium p:last-child > a {
  display: block;
  flex-shrink: 0;
}

.md-typeset .mdx-sponsorship__list {
  margin: 2em 0;
}

.md-typeset .mdx-sponsorship__list:after {
  clear: both;
  content: "";
  display: block;
}

[dir=ltr] .md-typeset .mdx-sponsorship__item { float: left; }
[dir=rtl] .md-typeset .mdx-sponsorship__item { float: right; }

.md-typeset .mdx-sponsorship__item {
  border-radius: 100%;
  display: block;
  height: 1.6rem;
  margin: .2rem;
  overflow: hidden;
  transform: scale(1);
  transition: color 125ms, transform 125ms;
  width: 1.6rem;
}

.md-typeset .mdx-sponsorship__item:focus,
.md-typeset .mdx-sponsorship__item:hover {
  transform: scale(1.1);
}

.md-typeset .mdx-sponsorship__item:focus img,
.md-typeset .mdx-sponsorship__item:hover img {
  filter: grayscale(0);
}

.md-typeset .mdx-sponsorship__item--private {
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--lighter);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.6rem;
  text-align: center;
}

.md-typeset .mdx-sponsorship__item img {
  display: block;
  filter: grayscale(100%) opacity(75%);
  height: auto;
  transition: filter 125ms;
  width: 100%;
}

.md-typeset .mdx-sponsorship-button { font-weight: 400; }
.md-typeset .mdx-sponsorship-count,
.md-typeset .mdx-sponsorship-total { font-weight: 700; }

/* ----------------- */
.md-typeset h1 {
  font-size: 1.5rem;
  font-weight: 500;
}

.md-typeset h2 {
  font-size: 1.3rem;
}

/* Normal text links inside articles */
.md-typeset a:not(.md-button) {
  color: var(--msd-blue);
  text-decoration: none;
  /* text-decoration-color: rgba(13, 148, 136, 0.3); */
  /* text-underline-offset: 3px; */
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Link hover state */
.md-typeset a:not(.md-button):hover {
  color: #7ca8cc; /* Slightly brighter blue on hover */
  /* text-decoration-color: #0284c7; */
  /* text-decoration-thickness: 2px; */
}

/* Dark mode adjustments (Slate theme) */
[data-md-color-scheme="slate"] .md-typeset a:not(.md-button) {
  color: #38bdf8;
  /* text-decoration-color: rgba(56, 189, 248, 0.4); */
}

[data-md-color-scheme="slate"] .md-typeset a:not(.md-button):hover {
  color: #7dd3fc;
  /* text-decoration-color: #7dd3fc; */
}

/* ==========================================
   Custom Grid Cards Styling
   ========================================== */

/* 1. Card Grid Container */
.md-typeset .grid.cards {
  gap: 1.25rem; /* Space between cards */
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* 2. Individual Card Elements (List items, sub-divs, or links) */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > div,
.md-typeset .grid.cards > a {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 1.5rem;
  padding: 1.25rem;
  background-color: var(--md-default-bg-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Card Hover State - Subtle Shadow */
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > div:hover,
.md-typeset .grid.cards > a:hover {
  transform: translateY(-2px); /* Softened lift effect */
  border-color: var(--msd-blue, #0d9488);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); /* Reduced spread & soft opacity */
}

/* 4. Headings inside Cards */
.md-typeset .grid.cards h2,
.md-typeset .grid.cards h3,
.md-typeset .grid.cards h4 {
  margin-top: 0;
  color: var(--msd-blue, #0d9488);
}

/* Dark Mode (Slate) Hover Adjustment */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > div:hover,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > a:hover {
  border-color: var(--msd-blue, #2dd4bf);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Muted glow for dark mode */
}

/* Custom color for bold text inside articles */
.md-typeset strong,
.md-typeset b {
  color: var(--msd-medium-grey);
}

/* Dark mode (Slate theme) adjustment */
[data-md-color-scheme="slate"] .md-typeset strong,
[data-md-color-scheme="slate"] .md-typeset b {
  color: var(--msd-blue, #2dd4bf);
}

/* GitHub README Style Badges */
.md-typeset .badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.md-typeset .badge {
  display: inline-flex;
  align-items: center; /* Vertically aligns inner label and value containers */
  font-size: 0.5rem;
  font-weight: 500;
  border-radius: 2rem;
  overflow: hidden;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%; /* Prevents mobile browsers from auto-boosting font size */
}

.md-typeset .badge-label {
  background-color: #555555;
  color: #ffffff !important;
  /* padding: 1px 7px; */
}

.md-typeset .badge-value {
  background-color: var(--msd-blue, #0d9488);
  color: #ffffff !important;
  /* padding: 1px 7px; */
}

.md-typeset .badge-label,
.md-typeset .badge-value {
  display: inline-flex;
  align-items: center; /* Vertically centers the text inside each half */
  padding: 1px 8px;    /* Adjust padding to control the total badge height */
  gap: 4px; /* Space between icon and text */
  height: 100%;
}

/* Style SVG icons inside badge labels */
.md-typeset .badge-label svg {
  width: 0.65rem !important;
  height: 0.65rem !important;
  fill: currentColor; /* Inherits white text color */
  fill: currentColor;
}

/* Badge Link Styling */
.md-typeset a.badge {
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

/* Hover Effect for Clickable Badges */
.md-typeset a.badge:hover {
  transform: translateY(-1px);
  opacity: 0.9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset a.badge:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Secondary badge value color variant */
.md-typeset .badge-value.blue {
  /* background-color: #0284c7; */
  background-color: var(--msd-blue);
}

/* Slate Dark Mode tweak */
[data-md-color-scheme="slate"] .md-typeset .badge-label {
  /* background-color: #334155; */
  background-color: var(--msd-dark-grey);
}

/* Custom Badge Value Colors */

/* Grade Badge: Green */
.md-typeset .badge-value.green {
  background-color: var(--msd-green);
}

/* Level Badge: red */
.md-typeset .badge-value.violet {
  background-color: var(--msd-violet);
}

.md-typeset .badge-value.red {
  background-color: var(--msd-red);
}

/* Updated Badge: Blue */
.md-typeset .badge-value.blue {
  background-color: var(--msd-blue);
}