/* Logo visibility on dark header — NucleusIQ logo has dark circle, needs light background */
.md-header__button.md-logo img,
.md-header__button.md-logo .nucleusiq-logo,
.md-nav__button.md-logo img,
.md-sidebar__scrollwrap .md-nav__title .md-nav__button img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  max-height: 2.5rem !important;
  min-height: 1.8rem !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  max-width: 190px !important;
  max-height: 61px !important;
}

.home-hero {
  text-align: center;
  margin: 1.5rem auto 2rem;
  max-width: 920px;
}

.home-hero h1 {
  margin-bottom: 0.5rem;
}

.home-hero p {
  font-size: 1.05rem;
  opacity: 0.9;
}

/* Brand styling */
:root {
  --nq-brand: #393939;
  --nq-brand-soft: #4a4a4a;
}

/*
 * Brand gray for chrome (header, primary UI). Keep content links a distinct color —
 * using --nq-brand for .md-typeset a made links the same as body text ("invisible").
 */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--nq-brand);
  --md-primary-fg-color--light: var(--nq-brand-soft);
  --md-primary-fg-color--dark: #2f2f2f;
  /* Accent for tabs/buttons; body links use --md-typeset-a-color below */
  --md-accent-fg-color: var(--nq-brand);
  --md-typeset-a-color: #2563eb;
  --md-typeset-a-color--hover: #1d4ed8;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--nq-brand);
  --md-primary-fg-color--light: var(--nq-brand-soft);
  --md-primary-fg-color--dark: #2f2f2f;
  --md-accent-fg-color: #c4c4c4;
  /* Light blue on dark — readable; dark gray links on slate were nearly invisible */
  --md-typeset-a-color: #93c5fd;
  --md-typeset-a-color--hover: #bfdbfe;
}

/* Header should be white with dark text */
.md-header,
.md-tabs {
  background: #ffffff !important;
  color: var(--nq-brand) !important;
}

.md-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.md-header .md-icon,
.md-header .md-tabs__link,
.md-source__repository,
.md-source__icon {
  color: var(--nq-brand) !important;
}

/* Keep only logo in header */
.md-header__title {
  display: none !important;
}

/* Header layout (desktop): logo left, search center, GitHub right */
@media screen and (min-width: 76.25em) {
  .md-header__inner {
    display: grid !important;
    grid-template-columns: max-content 1fr max-content;
    align-items: center !important;
    column-gap: 0.75rem;
    width: 100%;
  }

  .md-header__button.md-logo {
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .md-header__button[for="__search"] {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  .md-header__source {
    grid-column: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  .md-header__button[for="__drawer"] {
    display: none !important;
  }
}

/* Optional palette switcher removed to keep right side clean */
.md-header__option[data-md-component="palette"] {
  display: none !important;
}

/* Buttons keep brand; inline links use Material --md-typeset-a-color (set above) */

.md-typeset .md-button--primary,
.md-typeset .md-button {
  border-color: var(--nq-brand);
  color: var(--nq-brand);
}

.md-typeset .md-button--primary {
  background-color: var(--nq-brand);
  color: #fff;
}