/* ==========================================================================
   Re:InvestorHub white-label for MkDocs Material
   Brand tokens sourced from the app (frontend CSS variables):
     --primary: hsl(223 47% 55%)   (brand blue)
     --accent:  hsl(134 47% 49%)   (brand green)
     fonts: Inter (body), Sora (headings), JetBrains Mono (code)
   ========================================================================== */

/* Brand display font for headings (Inter + JetBrains Mono load via theme.font) */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&display=swap");

/* --- Brand colors --------------------------------------------------------
   These apply ONLY because mkdocs.yml sets `primary: custom` / `accent: custom`.
   With a named palette (e.g. `indigo`), Material declares these same variables
   on `body[data-md-color-primary="indigo"]`, which shadows anything declared
   here on `:root` (= html) for every element inside body. That is inheritance
   depth, not specificity, so `!important` would not rescue it. See the comment
   above `palette:` in mkdocs.yml before changing either file. */
:root {
  --md-primary-fg-color:        hsl(223, 47%, 55%);
  --md-primary-fg-color--light: hsl(223, 47%, 65%);
  --md-primary-fg-color--dark:  hsl(223, 47%, 45%);
  --md-accent-fg-color:         hsl(134, 47%, 49%);
  --md-accent-fg-color--transparent: hsla(134, 47%, 49%, 0.1);

  /* Foreground for content sitting ON the primary colour: header title, icons,
     tabs. A named palette supplies these; `custom` supplies NOTHING, so they
     must be declared here or the header text inherits the body colour and goes
     dark-on-brand-blue (unreadable). */
  --md-primary-bg-color:        hsl(0, 0%, 100%);
  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
}

/* Dark ("slate") scheme — lift the blue/green slightly for contrast on dark */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: hsl(223, 47%, 62%);
  --md-accent-fg-color:  hsl(134, 47%, 55%);
}

/* --- Typography ---------------------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Sora", var(--md-text-font, "Inter"), sans-serif;
  font-weight: 600;
}

/* --- Header lockup ------------------------------------------------------- */
/* Give the lockup room to breathe at header height. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
  width: auto;
}

/* --- Header breadcrumb (replaces the static site-name title) ------------- */
/* GitHub/AWS-style path of the current page's nav location, rendered by the
   custom overrides/partials/header.html. */
.md-header__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Path separators in brand green. */
.md-header__crumb-sep {
  color: #47bc54;
  font-weight: 600;
  margin: 0 0.12rem;
}
.md-header__crumb--current {
  font-weight: 700;
}
/* On narrow screens, collapse to the leading slash + current page (e.g. "/Setup log"):
   hide ancestor crumbs and every separator except the leading one. */
@media screen and (max-width: 44.9375em) {
  .md-header__breadcrumb .md-header__crumb:not(.md-header__crumb--current) {
    display: none;
  }
  .md-header__breadcrumb .md-header__crumb-sep:not(:first-of-type) {
    display: none;
  }
}