/*
 * Areas We Serve hero — suburb/postcode autocomplete dropdown.
 *
 * The Suburb Search plugin appends the jQuery UI menu *into* the form (appendTo: $container), and
 * .areas-hero-search is display:flex — so without absolute positioning the dropdown becomes a
 * third flex item and sits beside the input rather than under it. That is what most of this file
 * is for.
 *
 * The plugin ships its own stylesheet (assets/css/style.css) with a generic grey menu and no
 * width. This loads after it and restates the same properties in the theme's tokens, on the model
 * of assets/css/search.css, which does the identical job for the header product search. Both
 * exist because WordPress ships jQuery UI with none of its theme CSS.
 *
 * Scoped to .areas-hero-search rather than .suburb-search-form so it cannot reach a second
 * instance of the plugin's form if one is ever added elsewhere.
 */

.areas-hero-search {
    position: relative;
}

/* jQuery UI writes width, top and left inline every time it opens the menu — it measures the
   input and positions against it, which lands the menu flush under the input at the same width.
   So nothing here tries to set those three; this file is appearance only. The form above must
   stay position:relative, though, because that inline `left: 0` is relative to it. */
.areas-hero-search .ui-autocomplete {
    position: absolute;
    z-index: 100;
    max-width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    text-align: left;
}

.areas-hero-search .ui-autocomplete li {
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.areas-hero-search .ui-autocomplete li:last-child {
    border-bottom: 0;
}

.areas-hero-search .ui-autocomplete li.ui-state-focus {
    background: var(--bg-alt);
}

.areas-hero-search .ui-autocomplete li div {
    padding: var(--space-10) var(--space-20);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    color: var(--dark);
    line-height: 1.5;
}

.areas-hero-search .ui-autocomplete li .ui-state-active {
    color: var(--white);
    background: var(--theme);
    border: none;
}

/* The plugin puts this on the form while an AJAX request is in flight, and disables the button. */
.areas-hero-search.search-loading .button {
    opacity: 0.4;
    pointer-events: none;
}