/* =========================================================
   Devici brand header
   Forces header color regardless of light/dark palette scheme
   ========================================================= */

:root {
  --md-primary-fg-color: #2B2834;
  --md-primary-fg-color--light: #2B2834;
  --md-primary-fg-color--dark: #2B2834;
}

/* ---------------------------------------------------------
   Header + top navigation tabs
   --------------------------------------------------------- */

.md-header,
.md-tabs {
  background-color: #2B2834 !important;
}

.md-header,
.md-header a,
.md-header .md-header__button,
.md-tabs,
.md-tabs a {
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   Search input (dark header friendly)
   --------------------------------------------------------- */

.md-search__input {
  background-color: rgba(255, 255, 255, 0.12);
}

.md-search__input:focus {
  background-color: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------
   Logo sizing
   --------------------------------------------------------- */

.md-header__button.md-logo img {
  height: 28px;
  width: auto;
}

/* ---------------------------------------------------------
   Feature list styling
   --------------------------------------------------------- */

.feature-sublist {
  margin-top: 0.3rem;
  margin-bottom: 0.8rem;
  padding-left: 1.25rem;
}

.feature-sublist li {
  margin: 0.2rem 0;
}

/* ---------------------------------------------------------
   Homepage: 3-up grid for "How Devici approaches threat modeling"
   --------------------------------------------------------- */

@media screen and (min-width: 900px) {
  .md-typeset .approach-section .grid.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------
   Mobile navigation drawer header (hamburger menu)
   --------------------------------------------------------- */

.md-nav--primary .md-nav__title[for="__drawer"] {
  background-color: #2B2834 !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   TOC ("On this page") – desktop cleanup
   --------------------------------------------------------- */

/* Remove TOC title background */
.md-nav--secondary .md-nav__title {
  background: transparent;
  border: none;
}

/* Remove TOC sidebar background on desktop */
.md-sidebar--secondary,
.md-sidebar--secondary .md-sidebar__scrollwrap,
.md-sidebar--secondary .md-sidebar__inner {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Light mode: ensure "On this page" title text is visible */
[data-md-color-scheme="default"] .md-nav--secondary .md-nav__title {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* ---------------------------------------------------------
   TOC ("On this page") – mobile overlay fix
   --------------------------------------------------------- */

/* On mobile, the TOC opens as a drawer: it MUST be opaque */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--secondary,
  .md-sidebar--secondary .md-sidebar__scrollwrap,
  .md-sidebar--secondary .md-sidebar__inner,
  .md-nav--secondary {
    background: var(--md-default-bg-color) !important;
  }

  .md-sidebar--secondary {
    box-shadow: var(--md-shadow-z3) !important;
  }
}