/* 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;
}
}
