/* ==========================================================================
   Brand Colors
   ========================================================================== */

:root > * {
  --md-primary-fg-color:        #0E4BBD;
  --md-primary-fg-color--light: #E3F1FD;
  --md-primary-fg-color--dark:  #01111F;
}


/* ==========================================================================
   Landing Page - Grid Cards
   Subtle background with a light border to help them stand out.
   ========================================================================== */

.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 3%, white);
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
}

.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ul > li:hover {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 6%, white);
  border-color: color-mix(in srgb, var(--md-primary-fg-color) 18%, transparent);
}

/* Dark mode cards */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ol > li,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 8%, var(--md-default-bg-color));
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 20%, transparent);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ol > li:hover,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 15%, var(--md-default-bg-color));
  border-color: color-mix(in srgb, var(--md-primary-fg-color) 35%, transparent);
}


/* ==========================================================================
   Footer - Copyright
   ========================================================================== */

.md-copyright {
  font-size: 8pt;
  text-align: center;
  width: 100%;
}


/* ==========================================================================
   Light Mode Overrides
   Clean white background across body, tabs, search, and footer.
   Only applies to light mode — dark mode (slate) is unaffected.
   ========================================================================== */

/* Body background: pure white */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
}

/* Header: brand blue with white text, full-width layout */
.md-header {
  background: var(--md-primary-fg-color);
  --md-primary-bg-color: #fff;
  color: #fff;
}

/* Collapse the unused source container so search sits at the right edge */
.md-header__source {
  display: none !important;
}

.md-header__topic {
  color: #fff;
}

/* Search button and icon: white so it's visible against the blue header */
.md-header__button[for=__search],
.md-search__icon,
.md-search__button,
[dir=ltr] .md-search__button,
[dir=rtl] .md-search__button {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Search magnifying glass: rendered as a CSS mask-image, so the visible
   color comes from background-color on the ::before pseudo-element. */
.md-search__button:before {
  background-color: #ffffff !important;
}

.md-search__button:after {
  background: var(--md-primary-fg-color) !important;
  color: #ffffff !important;
  top: .4rem !important;
}

/* Tabs: white background */
.md-tabs {
  background: #ffffff;
}

.md-tabs .md-tabs__link {
  color: var(--md-primary-fg-color);
  opacity: 0.75;
}

.md-tabs .md-tabs__link--active,
.md-tabs .md-tabs__link:hover {
  color: var(--md-primary-fg-color);
  opacity: 1;
}

/* Footer: white background */
.md-footer,
.md-footer-meta {
  background-color: #ffffff !important;
}