/* ==========================================================================
   BongoShield brand theme for MkDocs Material
   Palette: navy #0A0E1A · cyan #00D4FF · orange #FF7F1F · ink #101623
   ========================================================================== */

:root {
  --bs-navy: #0A0E1A;
  --bs-cyan: #00D4FF;
  --bs-cyan-dark: #00A8CC;
  --bs-orange: #FF7F1F;
  --bs-ink: #101623;
}

/* --------------------------------------------------------------------------
   Header / navigation bar — navy with white text in BOTH schemes
   -------------------------------------------------------------------------- */
[data-md-color-primary="black"] {
  --md-primary-fg-color: var(--bs-navy);
  --md-primary-fg-color--light: var(--bs-navy);
  --md-primary-fg-color--dark: var(--bs-navy);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
}

/* Cyan accent everywhere (links on hover, active nav, focus rings, etc.) */
[data-md-color-accent="cyan"] {
  --md-accent-fg-color: var(--bs-cyan);
  --md-accent-fg-color--transparent: rgba(0, 212, 255, 0.1);
}

/* --------------------------------------------------------------------------
   LIGHT scheme
   -------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--bs-navy);
  --md-primary-fg-color--dark: var(--bs-navy);
  --md-accent-fg-color: var(--bs-cyan);

  /* Links in body use a readable cyan-dark for contrast on white */
  --md-typeset-a-color: var(--bs-cyan-dark);
}

/* --------------------------------------------------------------------------
   DARK scheme — navy background, cyan accents
   -------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--bs-navy);
  --md-primary-fg-color--dark: var(--bs-navy);
  --md-accent-fg-color: var(--bs-cyan);

  /* On-brand navy backgrounds */
  --md-default-bg-color: var(--bs-navy);
  --md-default-bg-color--light: #0d1220;
  --md-default-bg-color--lighter: #131a2b;
  --md-default-bg-color--lightest: #1a2236;

  /* Bright cyan links read well on navy */
  --md-typeset-a-color: var(--bs-cyan);

  /* Code blocks a touch lighter than page for separation */
  --md-code-bg-color: #131a2b;
}

/* Slightly deeper navy for the footer in dark mode */
[data-md-color-scheme="slate"] .md-footer {
  background-color: #070a12;
}

/* --------------------------------------------------------------------------
   Accents & polish
   -------------------------------------------------------------------------- */

/* Active/hover nav and TOC links turn cyan */
.md-nav__link:hover,
.md-nav__link--active,
.md-nav__link:focus {
  color: var(--bs-cyan);
}

/* Header tabs: active tab underlined in cyan */
.md-tabs__link:hover,
.md-tabs__link--active {
  color: #ffffff;
  opacity: 1;
}

/* Buttons (e.g. .md-button--primary on landing pages) use cyan,
   with a single sparing orange hover accent */
.md-typeset .md-button--primary {
  background-color: var(--bs-cyan);
  border-color: var(--bs-cyan);
  color: var(--bs-navy);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--bs-orange);
  border-color: var(--bs-orange);
  color: #ffffff;
}

/* Blockquotes / the "big idea" callout get a cyan left rule */
.md-typeset blockquote {
  border-left: 4px solid var(--bs-cyan);
}

/* One sparing orange accent: the "tip" admonition title bar */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--bs-orange);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(255, 127, 31, 0.1);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--bs-orange);
}

/* Header logo sizing so the wordmark reads cleanly */
.md-header__button.md-logo img {
  height: 1.6rem;
  width: auto;
}

/* Centered brand wordmark on the landing page.
   Two variants swap per scheme so it reads on white (light) and navy (dark). */
.bs-hero-logo {
  margin: 0.5rem auto 1.5rem;
  max-width: 380px;
  width: 60%;
  height: auto;
}
[data-md-color-scheme="default"] .bs-hero-logo--light { display: block; }
[data-md-color-scheme="default"] .bs-hero-logo--dark  { display: none; }
[data-md-color-scheme="slate"]   .bs-hero-logo--light { display: none; }
[data-md-color-scheme="slate"]   .bs-hero-logo--dark  { display: block; }