/*
 * mattgold_quicksearch – Grundstyles
 * Farben können im Theme über die CSS-Variablen überschrieben werden, z. B.:
 * .mg-quicksearch { --mg-qs-accent: #003366; }
 * Kontraste der Standardwerte erfüllen WCAG 2.1 AA (Text >= 4.5:1, UI >= 3:1).
 */
.mg-quicksearch {
    --mg-qs-text: #1a1a1a;
    --mg-qs-muted: #595959;
    --mg-qs-bg: #ffffff;
    --mg-qs-border: #767676;
    --mg-qs-accent: #c9c8c8;
    --mg-qs-active-bg: #f6f6f6;
    --mg-qs-mark-bg: #ffcb89;
    --mg-qs-radius: 4px;
    --mg-qs-max-height: 22rem;

    position: relative;
    margin: 0 0 1.5rem;
    color: var(--mg-qs-text);
}

.mg-quicksearch [hidden] {
    display: none !important;
}

.mg-quicksearch__label {
    display: block;
    margin-bottom: .375rem;
    font-weight: 600;
}

.mg-quicksearch__field {
    position: relative;
}

.mg-quicksearch__input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.75rem; /* ausreichend große Zielfläche */
    margin: 0;
    padding: .5rem .75rem .5rem 2.5rem;
    border: 1px solid var(--mg-qs-border);
    border-radius: var(--mg-qs-radius);
    background: var(--mg-qs-bg);
    color: var(--mg-qs-text);
    font: inherit;
    line-height: 1.4;
}

.mg-quicksearch__input::placeholder {
    color: var(--mg-qs-muted);
    opacity: 1;
}

.mg-quicksearch__input:focus {
    outline: 3px solid var(--mg-qs-accent);
    outline-offset: 1px;
    border-color: var(--mg-qs-accent);
}

.mg-quicksearch.is-open .mg-quicksearch__input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mg-quicksearch__icon {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: var(--mg-qs-muted);
    pointer-events: none;
}

.mg-quicksearch__listbox {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    max-height: var(--mg-qs-max-height);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--mg-qs-border);
    border-top: 0;
    border-radius: 0 0 var(--mg-qs-radius) var(--mg-qs-radius);
    background: var(--mg-qs-bg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

.mg-quicksearch__option {
    display: block;
    margin: 0;
    padding: .5rem .75rem;
    border-left: 4px solid transparent;
    cursor: pointer;
    line-height: 1.35;
}

.mg-quicksearch__option + .mg-quicksearch__option {
    border-top: 1px solid #e0e0e0;
}

.mg-quicksearch__option::before {
    content: none !important; /* Theme-Aufzählungszeichen unterdrücken */
}

.mg-quicksearch__option:hover {
    background: var(--mg-qs-active-bg);
}

.mg-quicksearch__option[aria-selected="true"] {
    background: var(--mg-qs-active-bg);
    border-left-color: var(--mg-qs-accent);
    outline: 2px solid var(--mg-qs-accent);
    outline-offset: -2px;
}

.mg-quicksearch__title {
    display: block;
    font-weight: 600;
}

.mg-quicksearch__nav-title {
    display: block;
    font-size: .875em;
}

.mg-quicksearch__path {
    display: block;
    margin-top: .125rem;
    color: var(--mg-qs-muted);
    font-size: .8125em;
}

.mg-quicksearch__separator {
    padding: 0 .125rem;
}

.mg-quicksearch__match {
    padding: 0;
    background: var(--mg-qs-mark-bg);
    color: inherit;
    font-weight: 700;
}

.mg-quicksearch__message {
    margin: .5rem 0 0;
    color: var(--mg-qs-muted);
}

.mg-quicksearch__visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Windows-Kontrastmodus */
@media (forced-colors: active) {
    .mg-quicksearch__option[aria-selected="true"] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
        outline-color: HighlightText;
    }
    .mg-quicksearch__option[aria-selected="true"] .mg-quicksearch__path,
    .mg-quicksearch__option[aria-selected="true"] .mg-quicksearch__match {
        color: HighlightText;
        background: Highlight;
    }
    .mg-quicksearch__match {
        forced-color-adjust: none;
        background: Mark;
        color: MarkText;
    }
}