/* ==========================================================================
   KF Elements — FAQ Search
   --------------------------------------------------------------------------
   NEW at 0.15.0 (kf-elements #130). Nothing here restates a released rule.

   THE FIRST RULE IS THE SAFETY PROPERTY, NOT A STYLE. The section is hidden
   until `assets/js/faq-search.js` adds `ready`, so a page whose script never
   arrives shows no search box at all and its FAQs stand exactly as the server
   sent them. The state this ordering makes impossible is the one that matters:
   a live-looking box above questions it has hidden and can no longer restore.
   The widget prints `ready` itself in the Elementor editor, where the script
   does not necessarily run and an author who cannot see the box cannot place
   it.
   ========================================================================== */

.kfe .kfe-faq-search { display: none; }
.kfe .kfe-faq-search.ready { display: block; }

.kfe .kfe-faq-search .head {
  margin-bottom: 26px;
  text-align: var(--kfe-head-align, center);
}
.kfe .kfe-faq-search .head .kfe-faq-search-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem)));
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0;
}
.kfe .kfe-faq-search.kfe-dark .head .kfe-faq-search-title { color: #fff; }

/* ---------- the field ----------
   The magnifier is painted and not marked up, which is the specification's own
   call and this pack's WAF-safe rule agreeing with it: an `<svg>` in the markup
   here would be a second inline SVG path to audit for the sake of decoration
   that carries no meaning.

   It is a MASK on the field's own `::before` and not a background image on the
   input, so its colour is a token like every other ink in this pack instead of
   being frozen into the data URI. That is the whole reason for the pseudo
   element: a `background-image` cannot read a custom property for its own
   `fill`, so painting the glyph that way would have meant committing one
   consumer's grey to a shared stylesheet. The shape is `--kfe-faq-search-icon`,
   the ink is `--kfe-faq-search-icon-ink`, and a site that wants a different
   magnifier still replaces the whole image through the first.

   `.kfe-faq-search-field` is already `position: relative` above, which is what
   the pseudo is positioned against; the input keeps its 52px of left padding so
   the text never runs under the glyph. */
.kfe .kfe-faq-search-field {
  position: relative;
  max-width: var(--kfe-faq-search-max, 680px);
  margin: 0 auto;
}
.kfe .kfe-faq-search-field::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  background-color: var(--kfe-faq-search-icon-ink, var(--kfe-muted));
  -webkit-mask: var(--kfe-faq-search-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 105.29 14.03l4.84 4.84 1.41-1.41-4.84-4.84A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E")) no-repeat center / 20px 20px;
  mask: var(--kfe-faq-search-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 105.29 14.03l4.84 4.84 1.41-1.41-4.84-4.84A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E")) no-repeat center / 20px 20px;
}
.kfe .kfe-faq-search-input {
  width: 100%;
  padding: 18px 20px 18px 52px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.4;
  color: var(--kfe-ink);
  background-color: var(--kfe-white);
  background-image: none;
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-field, 10px);
  box-shadow: var(--kfe-faq-search-shadow, 0 2px 10px rgba(0, 0, 0, 0.05));
  transition: border-color 0.25s, box-shadow 0.25s;
  -webkit-appearance: none;
  appearance: none;
}
.kfe .kfe-faq-search-input::placeholder { color: var(--kfe-muted); opacity: 1; }
/* The focus ring REPLACES the outline rather than removing it: `outline: none`
   with nothing in its place is the accessibility failure this pattern is
   usually reported for, and the box-shadow below is visible on every ground
   this widget can sit on.

   `--kfe-focus-ring` is named in BOTH branches on purpose. A site that sets it
   gets the same ring whether or not its browser has `color-mix`; a site that
   does not gets the derived ring where `color-mix` exists and a neutral
   translucent black where it does not. The old fallback here was one consumer's
   accent written out in full, which is the thing a shared stylesheet must never
   carry. */
.kfe .kfe-faq-search-input:focus,
.kfe .kfe-faq-search-input:focus-visible {
  outline: none;
  border-color: var(--kfe-link, var(--kfe-accent));
  box-shadow: 0 0 0 3px var(--kfe-focus-ring, color-mix(in srgb, var(--kfe-link, var(--kfe-accent)) 18%, transparent));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .kfe .kfe-faq-search-input:focus,
  .kfe .kfe-faq-search-input:focus-visible { box-shadow: 0 0 0 3px var(--kfe-focus-ring, rgba(0, 0, 0, 0.18)); }
}

/* ---------- the count ----------
   `min-height` holds the line before the script has written anything into it,
   so the first character typed does not shove the questions below down the
   page. The element is empty in the markup on purpose: a server-printed
   "Showing all 116 questions." stops being true the moment the reader types,
   on a page where the script may never run. */
.kfe .kfe-faq-search-count {
  min-height: 22px;
  margin-top: 14px;
  text-align: center;
  font-size: var(--kfe-body-size, 15px);
  color: var(--kfe-body, var(--kfe-muted));
}
.kfe .kfe-faq-search-count.none { font-size: 17px; padding-top: 12px; }

/* ---------- what the filter hides ----------
   One utility class, set by faq-search.js on a `<details>` that does not match
   and on a `.kfe-faq` section left with none of its own. It lives in THIS
   sheet, not faq.css: `kfe_faq` neither declares this handle nor knows the
   filter exists, and the class can only ever be on the page when this widget —
   and therefore this stylesheet — is on it too.

   `!important` because this class's whole job is to win over whatever a widget
   sheet, a site's own CSS or a theme says about the element it lands on, and a
   question the reader has filtered out that stays visible is the filter simply
   not working. */
.kfe .kfe-faq-search-hidden { display: none !important; }

@media (max-width: 767px) {
  .kfe .kfe-faq-search-input { padding: 15px 16px 15px 46px; font-size: 16px; }
  /* 16px, not the 17 above: iOS Safari zooms the page on focus for any input
     under 16px, and the zoom does not come back when the field is blurred. */
  /* The glyph moves with the padding. It is the pseudo element's `left` now and
     no longer a `background-position`, so the two stay 46 - 18 - 20 = 8px apart
     from the text exactly as they were. */
  .kfe .kfe-faq-search-field::before { left: 15px; }
}