/* ==========================================================================
   braXos brand theme for MkDocs-Material
   Derived from braxos.com:
     - Typeface : Work Sans (primary), Roboto Slab (secondary, available)
     - Logo mark: carmine red  #9C182F   (the "X")
     - Wordmark : slate         #415364   ("bra os")
     - Body     : gray          #595959   on white
   ========================================================================== */

:root {
  --brx-red:        #9C182F;   /* brand carmine - links, accents */
  --brx-red-bright: #C21F3A;   /* hover / active */
  --brx-slate:      #415364;   /* wordmark slate - headers, headings */
  --brx-ink:        #2b3947;   /* darkened slate - heading text */
  --brx-body:       #595959;   /* body gray */
  --brx-bordeaux:   #6b003e;   /* deep hero bordeaux - deep accents */
}

/* ------------------------------------------------------------------ Light */
[data-md-color-scheme="default"] {
  /* White nav bar with slate text/icons, like braxos.com */
  --md-primary-fg-color:        #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark:  #f4f4f4;
  --md-primary-bg-color:        var(--brx-slate);
  --md-primary-bg-color--light: #6a7a88;

  /* Brand red for interaction */
  --md-accent-fg-color:             var(--brx-red);
  --md-accent-fg-color--transparent: rgba(156, 24, 47, 0.10);
  --md-typeset-a-color:             var(--brx-red);

  /* Body copy in the braXos gray */
  --md-default-fg-color:        var(--brx-body);
  --md-typeset-color:           var(--brx-body);
}

/* braxos.com's nav sits on a white bar with a red graphic accent; echo it. */
[data-md-color-scheme="default"] .md-header {
  border-bottom: 2px solid var(--brx-red);
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.05);
}
[data-md-color-scheme="default"] .md-tabs {
  background-color: #ffffff;
  color: var(--brx-slate);
}

/* ------------------------------------------------------------------- Dark */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #2b3947;   /* slate header */
  --md-primary-fg-color--light: #35485a;
  --md-primary-fg-color--dark:  #1e2932;
  --md-primary-bg-color:        #ffffff;

  --md-accent-fg-color:         #ea5167;   /* brighter red for contrast on dark */
  --md-typeset-a-color:         #ef6d80;
}
[data-md-color-scheme="slate"] .md-header {
  border-bottom: 2px solid var(--brx-red);
}

/* Swap to the white wordmark on the dark (slate) header. */
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img {
  content: url("braxos-logo-white.svg");
}

/* Give the wordmark a little more presence than Material's default logo height. */
.md-header__button.md-logo img {
  height: 1.4rem;
  width: auto;
}

/* -------------------------------------------------------------- Headings */
/* Echo the logo wordmark slate; Work Sans a touch heavier for the display feel. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--brx-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: #e7ecf0;
}

/* ----------------------------------------------------------- Accents/UI */
.md-nav__link--active,
.md-typeset a:hover {
  color: var(--brx-red-bright);
}

/* Primary call-to-action buttons in brand red (used by grid cards / .md-button--primary) */
.md-typeset .md-button--primary {
  background-color: var(--brx-red);
  border-color: var(--brx-red);
  color: #ffffff;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--brx-red-bright);
  border-color: var(--brx-red-bright);
}

/* Page tagline directly under an H1 (e.g. the Maestro overview). */
.md-typeset .tagline {
  margin-top: -1.3rem;
  color: var(--brx-red);
  font-style: italic;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}
[data-md-color-scheme="slate"] .md-typeset .tagline {
  color: #ef6d80;
}

/* Text selection in brand red tint */
::selection {
  background: rgba(156, 24, 47, 0.18);
}

/* Inline code keeps a subtle brand tint rather than Material's default pink */
[data-md-color-scheme="default"] .md-typeset code {
  color: var(--brx-bordeaux);
}

/* --------------------------------------------------------------- Footer */
/* "powered by braXos" (left) + Maestro version (right), on Material's dark
   footer-meta bar. Mirrors the LiftOff Commander portal footer. */
.md-footer-meta__inner {
  flex-wrap: wrap;
}
.brx-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.35rem 0;
}
.brx-footer .brx-poweredby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 1.05rem;
  line-height: 1;
  color: #ef6d80;   /* bright carmine - reads on the dark footer bar */
}
.brx-footer .brx-footer-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brx-footer .brx-footer-logo {
  height: 18px;
  width: auto;
  display: block;
}
.brx-footer .brx-version {
  font-size: 0.7rem;
  opacity: 0.85;
}

/* ------------------------------------------------------- Hero figure */
.md-typeset .brx-hero {
  /* Override Material's `figure { width: fit-content }` so the hero fills the
     full (TOC-reclaimed) content column instead of collapsing to intrinsic size. */
  width: 100%;
  max-width: none;
  margin: 0.6rem 0 1.4rem;
  text-align: center;
}
.md-typeset .brx-hero img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.md-typeset .brx-hero figcaption {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--brx-body);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}