/**
 * [home_filters] shortcode: standalone search + category/specialty/state bar.
 * Self-contained (not scoped under .advantis-jobs-v2); tokens match
 * site-chrome.css so it looks native wherever it's placed (e.g. homepage
 * hero, over a photo). Selects get the adv-select.js custom-dropdown skin —
 * .hf-field select and .hf-field .advs-trigger share one ruleset so the box
 * looks identical before/after JS enhances it (mirrors jobs-archive.css's
 * .fanchor pattern).
 */

.home-filters,
.home-filters * {
  box-sizing: border-box;
}

.home-filters {
  font-family: system-ui, "Verdana", sans-serif;
}

.home-filters .hf-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Row 1: search + button, always inline ===== */

.home-filters .hf-search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.home-filters .hf-search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--adv-white, #fff);
  border: 1.8px solid var(--adv-line, #e5eaf0);
  border-radius: 13px;
  height: 54px;
  padding: 0 16px;
  transition: 0.2s;
  min-width: 0;
}

.home-filters .hf-search:focus-within {
  border-color: var(--adv-teal, #0ca2d4);
  box-shadow: 0 0 0 4px var(--adv-teal-soft, #e3f6fc);
}

.home-filters .hf-search svg {
  width: 20px;
  height: 20px;
  color: var(--adv-teal, #0ca2d4);
  flex: none;
}

.home-filters .hf-search input {
  border: none;
  outline: none;
  box-shadow: none;
  flex: 1;
  font-size: 16px;
  background: transparent;
  min-width: 0;
  font-weight: 500;
  /* !important overrides Elementor's page CSS (post-9.css), which injects
     `input:not([type="submit"]){color:#000!important}` on the homepage only —
     the /job-search/ page isn't Elementor, so it renders --ink without this. */
  color: var(--adv-ink, #0f1722) !important;
  padding: 0 28px 0 0;
}

.home-filters .hf-search input::placeholder {
  color: var(--adv-muted, #7a8898);
  font-weight: 400;
}

.home-filters .hf-clear {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--adv-muted, #7a8898);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.7);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease, background 0.15s ease;
}

.home-filters .hf-search input:not(:placeholder-shown) ~ .hf-clear {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

.home-filters .hf-clear:hover {
  color: var(--adv-slate, #475569);
  background: var(--adv-panel, #f4f7fa);
}

.home-filters .hf-clear svg {
  width: 14px;
  height: 14px;
}

.home-filters .hf-submit {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 26px;
  background: var(--adv-ink, #0f1722);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 13px;
  white-space: nowrap;
  cursor: pointer;
  /* Explicit none: Astra's global button styles otherwise leak a faint
     0 1px 2px shadow that the /job-search/ bar's .advantis-jobs-v2 scope resets. */
  box-shadow: none;
  transition: 0.2s;
}

.home-filters .hf-submit:hover {
  background: var(--adv-teal-d, #0879a2);
}

.home-filters .hf-submit:focus-visible {
  outline: 2px solid var(--adv-teal, #0ca2d4);
  outline-offset: 2px;
}

/* Icon shown only on mobile (see the @media (max-width: 700px) block below),
   mirroring jobs-archive.css's .gobtn-text/.gobtn-icon swap. */
.home-filters .hf-submit-icon {
  display: none;
}

/* ===== Keyword suggestions (assets/js/home-filters.js) =====
   Matches .qsuggest in jobs-archive.css (main /job-search/ page) so the two
   feel like one component: same radius/shadow, same teal hover tint, same
   teal-bold match highlighting. */

.home-filters .hf-suggest[hidden] {
  display: none;
}

.home-filters .hf-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--adv-white, #fff);
  border: 1px solid var(--adv-line, #e5eaf0);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 37, 51, 0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 330px;
  overflow-y: auto;
}

.home-filters .hf-suggest button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  color: var(--adv-ink, #0f1722);
  text-align: left;
}

.home-filters .hf-suggest button:hover,
.home-filters .hf-suggest button.is-active {
  background: #eef7f7;
}

.home-filters .hf-suggest .hf-suggest-t {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-filters .hf-suggest .hf-suggest-ct {
  min-width: 64px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--adv-teal-d, #0879a2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-filters .hf-suggest button b {
  font-weight: 700;
  color: var(--adv-teal-d, #0879a2);
}

/* ===== Row 2: the 3 filter selects ===== */

.home-filters .hf-selects-row {
  display: flex;
  gap: 8px;
}

.home-filters .hf-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.home-filters .hf-field label {
  position: absolute;
  top: 7px;
  left: 14px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* #64748b = the jobs-archive --muted (WCAG-AA "real text" muted), not the
     lighter decorative --adv-muted #7a8898, so the label matches /job-search/. */
  color: #64748b;
  pointer-events: none;
  z-index: 1;
  margin: 0;
}

.home-filters .hf-field select,
.home-filters .hf-field .advs-trigger {
  width: 100%;
  height: 54px;
  min-height: 54px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--adv-white, #fff);
  background-image: none;
  border: 1.8px solid var(--adv-line, #e5eaf0);
  border-radius: var(--adv-radius, 12px);
  padding: 22px 36px 9px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--adv-slate, #475569);
  cursor: pointer;
  /* Explicit none: matches the /job-search/ controls, which sit in a scope
     that resets Astra's global input/button shadow. */
  box-shadow: none;
  transition: 0.15s;
  line-height: 1.3;
}

.home-filters .hf-field select:hover,
.home-filters .hf-field .advs-trigger:hover {
  border-color: var(--adv-slate, #475569);
}

.home-filters .hf-field select:focus,
.home-filters .hf-field .advs-trigger:focus-visible,
.home-filters .hf-field .advs-trigger.is-open {
  outline: none;
  border-color: var(--adv-teal, #0ca2d4);
}

.home-filters .hf-field.is-filled select,
.home-filters .hf-field.is-filled .advs-trigger {
  border-color: var(--adv-teal, #0ca2d4);
  background: var(--adv-teal-soft, #e3f6fc);
  color: var(--adv-teal-d, #0879a2);
  font-weight: 700;
}

.home-filters .hf-field.is-filled label {
  color: var(--adv-teal-d, #0879a2);
}

.home-filters .hf-field .hf-chev {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--adv-slate, #475569);
  pointer-events: none;
}

.home-filters .hf-field.is-filled .hf-chev {
  color: var(--adv-teal-d, #0879a2);
}

/* Category/Specialty short-label overlay, matching /job-search/ #fCat.
   adv-select.js shows the full label once enhanced; these rules cover the
   pre-enhancement paint so the long term name never flashes: blank the
   native select's own text and show the server-rendered overlay. */
.home-filters .hf-field .hf-servervalue {
  display: none;
  position: absolute;
  z-index: 1;
  top: 22px;
  right: 36px;
  left: 14px;
  overflow: hidden;
  color: var(--adv-teal-d, #0879a2);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PHP knows which category/specialty is selected and only renders
   .hf-servervalue (and adds the has-servervalue class) when it has a short
   label, so the condition lives on the class rather than a per-slug :has(). */
.home-filters .hf-field.has-servervalue select:not([data-adv-enhanced]) {
  color: transparent;
}

.home-filters .hf-field.has-servervalue select:not([data-adv-enhanced]) ~ .hf-servervalue {
  display: block;
}

/* ===== Mobile: icon submit + pill-chip row (viewport-based, matches
   /job-search/) =====
   Previously the selects stacked below a ~360px container query measuring
   this widget's own Elementor column width, which on the homepage rarely
   narrows that far even on a real phone — so the selects never stacked and
   3 full 54px controls got squeezed into too little horizontal space. This
   uses the same @media (max-width: 700px) breakpoint as jobs-archive.css's
   .filtrow .fanchor chips instead (a viewport query, not a container query),
   for true visual/behavioural parity with /job-search/'s mobile filter bar —
   minus its "More Filters" button, which this widget never had and isn't
   gaining. Deliberately no `order` property anywhere below: job-search's
   chips reorder filled ones to the end of the row, but Category here is
   *always* .is-filled on first paint (effective_category always resolves to
   a real term server-side), so reordering would push Category to the back.
   The three fields must render in fixed DOM order Category -> Specialty ->
   State regardless of which are filled. */
@media (max-width: 700px) {
  /* Search field + submit shrink to 44px, matching jobs-archive.css's
     .sbar/.gobtn on the mobile search row. */
  .home-filters .hf-search {
    height: 44px;
  }

  .home-filters .hf-search input {
    /* 16px floor: prevents iOS Safari's focus auto-zoom (see jobs-archive #fLoc). */
    font-size: 16px;
  }

  /* Arrow-icon square, matching jobs-archive.css's .gobtn on the mobile
     search row: text swaps for the icon, button shrinks to a square that
     matches .hf-search's height, and stays inline (no stacking). */
  .home-filters .hf-submit {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
  }

  .home-filters .hf-submit-text {
    display: none;
  }

  .home-filters .hf-submit-icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  .home-filters .hf-selects-row {
    flex-wrap: nowrap;
    align-items: center;
  }

  .home-filters .hf-field {
    display: inline-flex;
    align-items: center;
    min-width: 64px;
    height: 40px;
    border: 1.5px solid var(--adv-line, #e5eaf0);
    border-radius: 999px;
    background: var(--adv-white, #fff);
    padding: 0 12px;
  }

  .home-filters .hf-field.is-filled {
    border-color: var(--adv-teal, #0ca2d4);
  }

  .home-filters .hf-field select,
  .home-filters .hf-field .advs-trigger {
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0;
    box-shadow: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--adv-teal-d, #0879a2);
    line-height: 1.5;
  }

  /* Equal-specificity twin of the base .is-filled select/.advs-trigger rule
     above in the cascade — without this, that rule's teal-soft background
     wins over the transparent chip interior set just above for every filled
     chip (most visibly Category, which is always filled on first paint).
     job-search's filled chips stay white/transparent inside; only the
     chip border goes teal. */
  .home-filters .hf-field.is-filled select,
  .home-filters .hf-field.is-filled .advs-trigger {
    background: transparent;
  }

  .home-filters .hf-field .advs-trigger .advs-value {
    text-align: center;
  }

  .home-filters .hf-field select:not([data-adv-enhanced]) {
    text-align: center;
  }

  .home-filters .hf-field .hf-servervalue {
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    font-size: 12.5px;
    line-height: 1;
    text-align: center;
  }

  .home-filters .hf-field.has-servervalue select:not([data-adv-enhanced]) {
    width: 18px;
  }

  .home-filters .hf-field:not(.is-filled) .advs-value {
    display: none;
  }

  .home-filters .hf-field:not(.is-filled) .advs-trigger,
  .home-filters .hf-field:not(.is-filled) select {
    position: absolute;
    inset: 0;
    width: 100%;
  }

  .home-filters .hf-field:not(.is-filled) select:not([data-adv-enhanced]) {
    color: transparent;
  }

  .home-filters .hf-field:not(.is-filled) {
    justify-content: center;
  }

  .home-filters .hf-field:not(.is-filled) label {
    position: static;
    transform: none;
    pointer-events: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--adv-ink, #0f1722);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-filters .hf-field.is-filled label {
    display: none;
  }

  .home-filters .hf-field .hf-chev {
    display: none;
  }

  .home-filters .hf-selects-row .advs-panel {
    width: 240px;
    max-width: 80vw;
  }

  .home-filters .hf-selects-row .advs-opt {
    align-items: flex-start;
  }
}