/*
 * DeepLife brand theme for MkDocs Material.
 * Layout follows the Helical docs (white header, single brand accent, left nav),
 * recolored to match the DeepLife logo (logo-deeplife-final-V3):
 *   navy   #103048  wordmark / headings
 *   teal   #1898c0  sphere -> primary accent
 *   blue   #4058a0  swirl
 *   violet #7a3f9d  swirl tail
 */

:root {
  --dl-navy: #103048;
  --dl-teal: #1898c0;
  --dl-teal-deep: #137199; /* darkened for link contrast on white */
  --dl-blue: #4058a0;
  --dl-violet: #7a3f9d;
  --dl-navy-dark: #0b2233; /* dark-theme background derived from the logo navy */
}

/* ---- Light mode: white header, navy text, teal accents ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;            /* header background */
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #f3f6f8;
  --md-primary-bg-color: var(--dl-navy);     /* header title / icons */
  --md-primary-bg-color--light: #41566b;

  --md-accent-fg-color: var(--dl-teal);      /* hovers, focus, active nav */
  --md-typeset-a-color: var(--dl-teal-deep);

  --md-footer-bg-color: var(--dl-navy);
  --md-footer-bg-color--dark: #0b2233;
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2 {
  color: var(--dl-navy);
}

/* ---- Dark mode: deep navy background, teal accent (disabled for now) ----
   Re-enable alongside the slate palette entry in mkdocs.yml.
[data-md-color-scheme="slate"] {
  --md-hue: 210;
  --md-default-bg-color: var(--dl-navy-dark);
  --md-default-bg-color--light: #102c40;

  --md-primary-fg-color: var(--dl-navy-dark);
  --md-primary-bg-color: #f8f8f8;

  --md-accent-fg-color: var(--dl-teal);
  --md-typeset-a-color: #4fc3df;
}
*/

/* ---- Brand gradient rule under the header (mirrors the logo swirl) ---- */
.md-header {
  position: relative;
}
.md-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--dl-teal) 0%,
    var(--dl-blue) 55%,
    var(--dl-violet) 100%
  );
}

/* ---- Per-theme logo: color on light, white on dark ---- */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.7rem;
  width: auto;
}
/* Dark-mode logo swap (disabled for now; re-enable with dark mode).
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url(../assets/logo-deeplife-white.png);
}
*/

/* The logo is a full "DeepLife." wordmark, so hide the redundant site-name text.
   Keep .md-header__title itself (flex-grow spacer) so search / palette toggle /
   repo link stay right-aligned, like the Helical header. */
.md-header__title > .md-header__ellipsis {
  display: none;
}

/* "grid cards" on the landing pages: lift on hover with a brand-tinted border. */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  transition: border-color 125ms, box-shadow 125ms, transform 125ms;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 16px rgba(16, 48, 72, 0.12);
  transform: translateY(-2px);
}