/* ============================================================
   AUX — Search: one component for every search box on the site
   ============================================================

   WHY THIS FILE EXISTS
   --------------------
   The site had five search boxes and five different constructions.

   The worst was the blog sidebar. `styles.css` styles
   `.search-box .search-field` with a radius, a padding and a focus
   colour but never gives it a width, so it rendered at the browser's
   default input size -- about 177px -- stranded in a full-width column.
   Its magnifier was positioned with a hard `left: 18px` on an RTL page,
   and its submit control was an `<a href="#">` with an inline `onclick`,
   which no keyboard and no screen reader can operate as a button.

   The others each solved the same problem differently: the glossary had
   a pill with a visible button, the product filter had four bare
   Bootstrap `.form-control`s, and the home hero had the theme's own
   composite bar.

   THE COMPONENT
   -------------
   `.aux-searchbox` is a form. It holds one field and one submit control
   that sits inside the field at the inline-end. Two variants:

     .aux-searchbox              icon button inset in the field (sidebar,
                              filter panel -- anywhere space is tight)
     .aux-searchbox--wide        field plus a visible text button beside it
                              (a page whose whole job is searching)

   `.aux-searchbox-filters` styles a stack of selects under a field so a
   filter panel reads as one control group rather than four strangers.

   The pill is not a new choice: `styles.css` already gives its search
   field a 999px radius and `custom.css` forces every `select` to 99px.
   An 8px field next to a 99px select was part of what looked wrong.

   RULES FOR EDITING
   -----------------
   - Logical properties only (`inline-start`/`inline-end`). The site is
     RTL; the bug this file replaces was a hard-coded `left`.
   - Focus must stay visible. The red ring is the only affordance a
     keyboard user gets.
   - Bump AUX_ASSETS_VERSION in app/helpers.php after editing this file.
   ============================================================ */

.aux-searchbox {
    --aux-searchbox-ink: #231f20;
    --aux-searchbox-accent: #ed1c24;
    --aux-searchbox-line: #e4e4e4;
    --aux-searchbox-muted: #8a8a8a;
    --aux-searchbox-height: 52px;

    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.aux-searchbox__field {
    /* The missing declaration that started all of this. */
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--aux-searchbox-height);
    margin: 0;
    /* Room at the inline-end for the button that sits inside the field. */
    padding-inline: 22px 58px;
    border: 1px solid var(--aux-searchbox-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--aux-searchbox-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.aux-searchbox__field::placeholder {
    color: var(--aux-searchbox-muted);
}

.aux-searchbox__field:focus {
    outline: none;
    border-color: var(--aux-searchbox-accent);
    box-shadow: 0 0 0 3px rgba(237, 28, 36, .12);
}

/* Safari paints its own clear button and inner shadow on type="search". */
.aux-searchbox__field::-webkit-search-decoration,
.aux-searchbox__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.aux-searchbox__submit {
    position: absolute;
    inset-block: 6px;
    inset-inline-end: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--aux-searchbox-ink);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.aux-searchbox__submit:hover {
    background: var(--aux-searchbox-accent);
}

.aux-searchbox__submit:focus-visible {
    outline: 2px solid var(--aux-searchbox-accent);
    outline-offset: 2px;
}

.aux-searchbox__submit:active {
    transform: scale(.94);
}

.aux-searchbox__submit svg {
    width: 17px;
    height: 17px;
}

/* ------------------------------------------------------------
   Wide variant — the button leaves the field and becomes a label
   ------------------------------------------------------------ */

.aux-searchbox--wide .aux-searchbox__field {
    padding-inline: 22px;
}

.aux-searchbox--wide .aux-searchbox__submit {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    width: auto;
    height: var(--aux-searchbox-height);
    padding-inline: 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .aux-searchbox--wide {
        flex-wrap: wrap;
    }
    .aux-searchbox--wide .aux-searchbox__submit {
        width: 100%;
    }
}

/* ------------------------------------------------------------
   Filter stack — selects that belong to the field above them
   ------------------------------------------------------------ */

.aux-searchbox-filters {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.aux-searchbox-filters select {
    width: 100%;
    height: 48px;
    padding-inline: 20px 44px;
    border: 1px solid var(--aux-searchbox-line, #e4e4e4);
    border-radius: 999px;
    background-color: #fff;
    font-size: 14px;
    color: #231f20;
    /* The theme's own chevron is positioned for LTR. */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23231f20' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-size: 12px 8px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.aux-searchbox-filters select:focus {
    outline: none;
    border-color: #ed1c24;
    box-shadow: 0 0 0 3px rgba(237, 28, 36, .12);
}

.aux-searchbox-filters .tf-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

/* ------------------------------------------------------------
   Home hero bar

   The hero search is the theme's own composite (`.wd-find-select`): a
   category select, a keyword field and a button laid out as one bar. Its
   layout is left alone -- only the focus behaviour is aligned, so every
   field on the site answers the keyboard the same way.
   ------------------------------------------------------------ */

.wd-find-select .form-control:focus,
.wd-find-select .nice-select.open {
    outline: none;
    border-color: #ed1c24;
    box-shadow: 0 0 0 3px rgba(237, 28, 36, .12);
}

@media (prefers-reduced-motion: reduce) {
    .aux-searchbox__field,
    .aux-searchbox__submit,
    .aux-searchbox-filters select {
        transition: none;
    }
    .aux-searchbox__submit:active {
        transform: none;
    }
}