/* Make anchored section stand out briefly */
:target {
  animation: hash-flash 1.2s ease-out;
  scroll-margin-top: 2rem; /* avoids being hidden under the header */
}

@keyframes hash-flash {
  0%   { background-color: rgba(255, 235, 59, 0.45); } /* yellow 400 */
  100% { background-color: transparent; }
}

/* Apply only in dark mode */
[data-md-color-scheme="slate"] {
  /* Pick your lighter dark shade */
  --my-header-bg: #131117;      /* a soft charcoal */
  --my-header-fg: #ffffff;      /* readable text on dark */

  /* Header */
  /* Top bar (logo, title, search icon, etc.) */
  .md-header {
    background-color: var(--my-header-bg) !important;
    color: var(--my-header-fg) !important;
  }

  /* Tabs bar (nav tabs under the header) */
  .md-tabs {
    background-color: var(--my-header-bg) !important;
    color: var(--my-header-fg) !important;
    border-bottom: 0 !important;                /* optional: remove divider line */
  }

  /* Search bar (opened input) */
  .md-search__form {
    background-color: var(--my-header-bg) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;  /* subtle outline */
  }

  /* Search input + icons */
  .md-search__input,
  .md-search__icon {
    color: var(--my-header-fg) !important;
  }

  /* Search suggestions dropdown */
  .md-search__output {
    background-color: var(--my-header-bg) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* Optional: footer to match header */
  .md-footer {
    background-color: var(--my-header-bg) !important;
    color: var(--my-header-fg) !important;
  }
}