/*
 * Speak.Algolia — structural styles only.
 *
 * This is deliberately not a theme. It contains what the widgets are *broken* without and nothing
 * else: no fonts, shadows, radii, spacing scale or brand colours. Style the rest yourself, or pass
 * your own classes through the `cssClasses` / `classNames` options.
 *
 * The autocomplete panel is the reason this file exists. `@algolia/autocomplete-js` computes the
 * panel's `top`, `left` and `width` as inline styles, but leaves `position`, `z-index` and the
 * background to CSS — so with no stylesheet at all the panel renders in the page flow at the bottom
 * of <body>, which looks like the widget is broken.
 *
 * Every selector is a single class, so a Tailwind utility passed through `cssClasses` wins on
 * specificity without `!important`. Every value worth disagreeing with is a custom property.
 */

:root {
    --sa-panel-bg: #fff;
    --sa-panel-border: #e0e0e0;
    --sa-panel-max-height: 24rem;
    --sa-z-panel: 100;
    --sa-item-selected-bg: #f2f2f2;
    --sa-highlight-bg: transparent;
    --sa-highlight-color: inherit;
    --sa-highlight-weight: 700;
    --sa-gap: 0.5rem;
}

/* ---------------------------------------------------------------- autocomplete: the search box */

.aa-Form {
    display: flex;
    align-items: center;
    gap: var(--sa-gap);
}

.aa-InputWrapper {
    /* Without this the input refuses to shrink inside the flex row and overflows its container. */
    flex: 1 1 auto;
    min-width: 0;
}

.aa-Input {
    width: 100%;
}

.aa-InputWrapperPrefix,
.aa-InputWrapperSuffix {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

/* ------------------------------------------------------------------ autocomplete: the panel */

.aa-Panel {
    /* top/left/width arrive as inline styles from panelPlacement; these three do not. */
    position: absolute;
    z-index: var(--sa-z-panel);
    background: var(--sa-panel-bg);
    border: 1px solid var(--sa-panel-border);
    max-height: var(--sa-panel-max-height);
    overflow-y: auto;
}

.aa-List {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aa-Item {
    cursor: pointer;
}

/* Autocomplete tracks the active item with aria-selected rather than a class, and keyboard
   navigation is unusable without a visible cue. */
.aa-Item[aria-selected='true'] {
    background: var(--sa-item-selected-bg);
}

/* ------------------------------------------------------------------------------ results page */

.ais-Hits-list,
.ais-Pagination-list,
.ais-Menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The content type dropdown, shown instead of tabs once there are too many. */
.sa-TabSelect-select {
    font: inherit;
    color: inherit;
    max-width: 100%;
}

/* ------------------------------------------------------------------------------- highlighting */

/* InstantSearch and autocomplete both emit <mark>. A UA renders it as black-on-yellow, which almost
   never matches a site; default to weight only and let the custom properties opt into colour. */
.aa-Panel mark,
.ais-Highlight-highlighted,
.ais-Snippet-highlighted {
    background: var(--sa-highlight-bg);
    color: var(--sa-highlight-color);
    font-weight: var(--sa-highlight-weight);
}

/* ------------------------------------------------------------------------------- housekeeping */

/* The pagination container is hidden by toggling `hidden`, which a `display` rule would defeat. */
[hidden] {
    display: none !important;
}

.aa-Form:focus-within,
.ais-SearchBox-input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Text for screen readers and innerText only, e.g. the separator between a suggestion's name and type. */
.sa-VisuallyHidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}