/* ==========================================================================
   WBI Filter
   Pills built from the terms of a taxonomy and a search box that update a
   Bricks query loop. The loop and its cards keep their own styles; this
   sheet only draws the controls, plus the dimmed state of the loop while a
   new page of results loads.

   Mobile first. One row on wide screens: the pills, then the search filling
   what is left. The search only stays there while it keeps its minimum
   width (--wbi-flt-search-min); with less room it wraps to a full-width row
   below the pills, and the pills themselves wrap onto new lines. That is
   the desktop, tablet and phone layout of the design without a breakpoint.
   Hover and transitions live in one `(hover: hover) and (pointer: fine)`
   block: a phone never computes them.

   Every visual value is a `--wbi-flt-*` custom property, so the Bricks
   element only overrides variables (typography, the border gradient and the
   pill alignment excepted). Tokens live in :where() (zero specificity) so
   any rule Bricks generates on the root (#brxe-xxx { --token: ... }) always
   wins, whatever the order in which the stylesheets load. "Colors per term"
   write --wbi-flt-t-* tokens inline on their pill, which the state rules
   read first.

   Gradient borders: the gradient paints the whole border box and an ::after
   fills the inside, so a single background-image (the one the Bricks
   gradient control writes) is enough. Not an inset box-shadow: Safari 26
   has painted it over the whole button, or not at all (WebKit bugs 298341
   and 300477), hiding the gradient or flooding the pill with it. The
   selected pill gives the gradient a size of 0, which leaves its border
   transparent: the property the control writes is never overridden.
   ::before stays free for Bricks: with "Apply to: Overlay" its gradient
   control paints there instead of on the pill.

   Sizes are in px, never in rem: Bricks sets the root to 10px.

   Markup:
     div.wbi-filter
       div.wbi-filter__terms          (role="group")
         button.wbi-filter__pill      (aria-pressed; --all for "All";
                                       --term-border with a border of
                                       its own from Colors per term)
           ::before                   (the border, with Apply to: Overlay)
           span.wbi-filter__label
           span.wbi-filter__count     (optional)
           ::after                    (the fill)
       form.wbi-filter__search        (role="search")
         label.wbi-filter__sr
         span.wbi-filter__icon
         input.wbi-filter__input
         button.wbi-filter__clear     (optional)
       p.wbi-filter__status           (role="status", visually hidden)
   ========================================================================== */

:where(.wbi-filter) {
  /* Theme Styles > WBI Elements > Font (see wbi-fonts.css) */
  --wbi-flt-font: var(--wbi-font), system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Layout ---------------------------------------------------------- */
  --wbi-flt-col-gap: 40px;
  --wbi-flt-row-gap: 24px;
  --wbi-flt-gap: 4px;

  /* --- Pills ----------------------------------------------------------- */
  --wbi-flt-pill-h: 52px;
  --wbi-flt-pill-min-w: 139px;
  --wbi-flt-pill-pad-x: 20px;
  --wbi-flt-pill-border-w: 2px;
  --wbi-flt-pill-radius: 999px;
  --wbi-flt-pill-fill: #FFFFFF;
  --wbi-flt-pill-color: #0D1115;
  /* The factory gradient comes from the Bricks control; this one covers an
     element inserted by code. */
  --wbi-flt-pill-border: conic-gradient(from 0deg at center, #579E80 0%, #449372 14%, #82BAAA 25%, #66B7C4 33%, #5AB8D7 67%, #79BAB7 75%, #6DAB90 83%, #579E80 100%);
  --wbi-flt-count-color: currentColor;

  /* --- Selected -------------------------------------------------------- */
  --wbi-flt-active-fill: #FFDD62;
  --wbi-flt-active-color: #0D1115;
  --wbi-flt-active-border: transparent;

  /* --- States ---------------------------------------------------------- */
  --wbi-flt-hover-fill: #FFF6D6;
  --wbi-flt-focus: #0D1115;
  /* A cleared Duration slider comes out as a unitless `0`, which is not a
     time: the transition declaration drops and colors change at once. */
  --wbi-flt-duration: 200ms;

  /* --- Search ---------------------------------------------------------- */
  --wbi-flt-search-min: 320px;
  --wbi-flt-search-h: 48px;
  --wbi-flt-search-pad-x: 14px;
  --wbi-flt-search-border-w: 1.5px;
  --wbi-flt-search-radius: 8px;
  --wbi-flt-search-fill: #FFFFFF;
  --wbi-flt-search-border: #DBE1E7;
  --wbi-flt-search-focus: #0D1115;
  /* Default only: the Typography control writes `color` on the input. */
  --wbi-flt-search-color: #0D1115;
  --wbi-flt-ph-color: #D0D1D8;
  --wbi-flt-icon-color: #3A3A3A;
  --wbi-flt-icon-size: 24px;
  --wbi-flt-icon-gap: 12px;
}

/* ==========================================================================
   Root
   ========================================================================== */

.wbi-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--wbi-flt-col-gap);
  row-gap: var(--wbi-flt-row-gap);
  /* Bricks containers are flex with align-items: flex-start: without it
     the element would shrink to its content. */
  width: 100%;
  font-family: var(--wbi-flt-font);
}

/* ==========================================================================
   Pills
   ========================================================================== */

.wbi-filter__terms {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--wbi-flt-gap);
  min-width: 0;
  max-width: 100%;
  /* "One line that scrolls" turns wrapping off. Nothing may stick out of
     this box, or the scroll would clip it: the focus ring of the pills is
     drawn inside them. */
  overflow-x: auto;
  scrollbar-width: thin;
}

.wbi-filter__pill {
  /* Its own stacking context: the fill (::after, z-index -1) paints over
     the gradient and under the text. */
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: var(--wbi-flt-pill-min-w);
  max-width: var(--wbi-flt-pill-max-w, none);
  min-height: var(--wbi-flt-pill-h);
  margin: 0;
  padding: 0 var(--wbi-flt-pill-pad-x);
  border: var(--wbi-flt-pill-border-w) solid transparent;
  border-radius: var(--wbi-flt-pill-radius);
  background-color: transparent;
  background-image: var(--wbi-flt-pill-border);
  background-origin: border-box;
  /* !important: "Apply to: Text" in the Border control clips the background
     to the label and makes the label transparent. */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  box-shadow: none;
  color: var(--wbi-flt-t-color, var(--wbi-flt-pill-color));
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* The fill covers the pill's border box with a transparent border as wide
   as the pill's and paints inside it, so its edge follows the inner curve
   of the border at any radius. Longhands rather than `inset`, which Safari
   only reads from 14.1. A cleared width comes as a unitless 0 that voids
   the calc(): the margin falls back to 0, which is then the right value. */
.wbi-filter__pill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: calc(var(--wbi-flt-pill-border-w) * -1);
  border: var(--wbi-flt-pill-border-w) solid transparent;
  border-radius: inherit;
  background-color: var(--wbi-flt-t-fill, var(--wbi-flt-pill-fill));
  background-clip: padding-box;
}

/* "Apply to: Overlay" in the Border control: Bricks paints the gradient in
   a ::before of its own (content, position and the four sides at 0) and
   not on the pill. Spread over the border box and under the fill, it draws
   the same border. Never there otherwise: nothing here gives it content. */
.wbi-filter__pill::before {
  z-index: -2;
  margin: calc(var(--wbi-flt-pill-border-w) * -1);
  border-radius: inherit;
}

/* No gradient at all: clipped to the padding box, it showed along the edge
   of the fill on tight corners. A background of size 0 is not painted. */
.wbi-filter__pill[aria-pressed="true"] {
  border-color: var(--wbi-flt-t-active-border, var(--wbi-flt-active-border));
  background-size: 0 0;
  color: var(--wbi-flt-t-active-color, var(--wbi-flt-active-color));
}

.wbi-filter__pill[aria-pressed="true"]::after {
  background-color: var(--wbi-flt-t-active-fill, var(--wbi-flt-active-fill));
}

/* The Overlay border goes away where the pill draws none (selected) or
   draws its own, the inline one of Colors per term. */
.wbi-filter__pill[aria-pressed="true"]::before,
.wbi-filter__pill--term-border::before {
  display: none;
}

/* Inside the pill (see .wbi-filter__terms). A fixed offset, not one worked
   out from the border width: Bricks writes a cleared width as a unitless 0,
   which would void the calc() and put the ring back outside. */
.wbi-filter__pill:focus-visible {
  outline: 2px solid var(--wbi-flt-focus);
  outline-offset: -5px;
}

/* Cut with "…" only when a maximum width is set; the full name is in the
   pill's title. */
.wbi-filter__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wbi-filter__count {
  flex: none;
  color: var(--wbi-flt-count-color);
  font-size: max(14px, 0.875em);
  font-weight: 500;
  opacity: 0.7;
}

/* ==========================================================================
   Search
   ========================================================================== */

.wbi-filter__search {
  box-sizing: border-box;
  display: flex;
  order: var(--wbi-flt-search-order, 0);
  flex: 1 1 var(--wbi-flt-search-basis, var(--wbi-flt-search-min));
  align-items: center;
  gap: var(--wbi-flt-icon-gap);
  min-width: 0;
  max-width: var(--wbi-flt-search-max, none);
  height: var(--wbi-flt-search-h);
  margin: 0;
  padding: 0 var(--wbi-flt-search-pad-x);
  border: var(--wbi-flt-search-border-w) solid var(--wbi-flt-search-border);
  border-radius: var(--wbi-flt-search-radius);
  background: var(--wbi-flt-search-fill);
}

.wbi-filter__search:focus-within {
  border-color: var(--wbi-flt-search-focus);
}

.wbi-filter__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--wbi-flt-icon-size);
  height: var(--wbi-flt-icon-size);
  color: var(--wbi-flt-icon-color);
  pointer-events: none;
}

.wbi-filter__icon > :where(svg, img) {
  display: block;
  width: 100%;
  height: 100%;
}

.wbi-filter__icon > :where(i) {
  font-size: var(--wbi-flt-icon-size);
  line-height: 1;
}

/* Written as :where() for the tag, so the Typography control
   (#brxe-xxx .wbi-filter__input) and these class rules always win. */
.wbi-filter__input:where(input) {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wbi-flt-search-color);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  appearance: none;
}

.wbi-filter__input::placeholder {
  color: var(--wbi-flt-ph-color);
  opacity: 1;
}

/* The box has its own clear button. */
.wbi-filter__input::-webkit-search-cancel-button,
.wbi-filter__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.wbi-filter__clear:where(button) {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* 44 px of touch target around an 18 px cross, without growing the box.
     Fixed margins: a sum with the padding token breaks on a cleared (0)
     value, which Bricks writes without a unit. */
  width: 44px;
  height: 44px;
  margin: -8px -10px -8px -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wbi-flt-icon-color);
  cursor: pointer;
  appearance: none;
}

.wbi-filter__clear[hidden] {
  display: none;
}

.wbi-filter__clear svg {
  display: block;
  width: 18px;
  height: 18px;
}

.wbi-filter__clear:focus-visible {
  outline: 2px solid var(--wbi-flt-focus);
  outline-offset: -6px;
}

/* ==========================================================================
   Screen reader text: the search label and the results announcement
   ========================================================================== */

.wbi-filter__sr,
.wbi-filter__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   The loop while a new page of results loads (the script marks it)
   ========================================================================== */

[data-wbi-filter-busy] {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   Touch screens: iOS zooms into any field under 16 px when it is focused.
   ========================================================================== */

@media (pointer: coarse) {
  .wbi-filter__input:where(input) {
    font-size: 16px;
  }
}

/* ==========================================================================
   Computers: hover and transitions
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .wbi-filter__pill {
    transition:
      color var(--wbi-flt-duration) ease,
      border-color var(--wbi-flt-duration) ease;
  }

  .wbi-filter__pill::after {
    transition: background-color var(--wbi-flt-duration) ease;
  }

  /* Colors per term first, then the element's hover colors. */
  .wbi-filter__pill:not([aria-pressed="true"]):hover {
    color: var(--wbi-flt-t-hover-color, var(--wbi-flt-hover-color, var(--wbi-flt-t-color, var(--wbi-flt-pill-color))));
  }

  .wbi-filter__pill:not([aria-pressed="true"]):hover::after {
    background-color: var(--wbi-flt-t-hover-fill, var(--wbi-flt-hover-fill));
  }

  .wbi-filter__search {
    transition: border-color var(--wbi-flt-duration) ease;
  }

  .wbi-filter__clear:where(button):hover {
    background: rgb(13 17 21 / 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wbi-filter__pill,
  .wbi-filter__pill::after,
  .wbi-filter__search,
  [data-wbi-filter-busy] {
    transition-duration: 1ms !important;
  }
}