/* Strong override to color search icons using the site accent (amber)
   Covers header button, drawer button, and input-leading icon across theme versions. */

/* Header/drawer search button (label toggles search dialog) */
label.md-header__button.md-icon[for="__search"],
label.md-header__button[for="__search"].md-icon,
label.md-header__button[for="__search"] .md-icon {
  color: var(--md-accent-fg-color) !important;
  /* center the icon within its square button to avoid appearing too high */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 13010; /* above neighboring elements */
}

/* Ensure the header search toggle itself has a solid hit area */
label.md-header__button[for="__search"] {
  width: 34px;
  height: 34px;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Search icon SVG styling - keep minimal for compatibility */
label.md-header__button[for="__search"] svg,
.md-search__icon svg {
  fill: var(--md-accent-fg-color) !important;
  width: 20px !important;
  height: 20px !important;
}

/* Terminal/JSON/GIF action button styling (from homepage features) */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(245, 158, 11, 0.08);
  border-top: 1px solid rgba(245, 158, 11, 0.2);
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Let MkDocs Material handle all search overlay, dialog, and result functionality */

/* CRITICAL FIX: Ensure only one theme toggle shows on mobile */
@media screen and (max-width: 1099px) {
  /* First hide ALL theme toggles */
  .md-header label.md-header__button[for^="__palette_"],
  .md-header__inner label.md-header__button[for^="__palette_"],
  label.md-header__button[for^="__palette_"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Then show ONLY the one that switches to the opposite theme */
  /* In light mode (default), show the button that switches to dark (palette_1) */
  [data-md-color-scheme="default"] .md-header__inner label.md-header__button[for="__palette_1"],
  html:not([data-md-color-scheme]) .md-header__inner label.md-header__button[for="__palette_1"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* In dark mode (slate), show the button that switches to light (palette_0) */
  [data-md-color-scheme="slate"] .md-header__inner label.md-header__button[for="__palette_0"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}