/* ============================================================================
 * SEARCH FIELD
 * ----------------------------------------------------------------------------
 * Markup comes from areas/public/components/search-bar.php. One component,
 * used by the hero, Portfolio, Gigs, Store and Domain Search.
 * ========================================================================== */
/* ============================================================================
 * PHASE 8 — THE PUBLIC SEARCH FIELD
 * ----------------------------------------------------------------------------
 * Markup comes from areas/public/includes/search-bar.php. One component, used
 * by the hero, Portfolio, Gigs, Store and Domain Search.
 *
 * Two things the previous attempt got wrong and this fixes:
 *
 *  - The browser input kept its own surface. system.css styles every input on
 *    the site with `html body input:not([type="checkbox"]):not(...)` — six
 *    :not() clauses, so (0,6,3). A rule written `.tx-search input` loses to it
 *    and the field renders as a grey rounded box inside the shell. The reset
 *    below repeats that chain and adds the component class, so it wins (0,7,3)
 *    on specificity rather than on !important.
 *  - A full pill around a wide field looks like a tag, not a search field. The
 *    shell uses the card radius; only the submit button inside stays rounded.
 * ========================================================================== */

.tx-search{
  display:flex;
  align-items:center;
  gap:0.75rem;
  width:100%;
  min-width:0;
  height:var(--control-h-lg);
  padding:0 0.4rem 0 1rem;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-field);
  box-shadow:var(--shadow-soft);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.tx-search--lg{height:56px;padding-left:1.15rem}
.tx-search:hover{border-color:var(--ink-muted)}
.tx-search:focus-within{
  border-color:var(--accent);
  box-shadow:var(--focus-ring);
}

.tx-search__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.1rem;
  flex:0 0 1.1rem;
  color:var(--ink-muted);
  font-size:0.95rem;
  line-height:1;
  pointer-events:none;
}
.tx-search:focus-within .tx-search__icon{color:var(--ink-strong)}

/* The specificity chain described above — it strips the input back to bare
   text so the shell is the only visible surface. */
html body input.tx-search__field:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]){
  flex:1 1 auto;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:none;
  background:transparent;
  box-shadow:none;
  font-family:var(--font);
  font-size:1rem;
  font-weight:500;
  letter-spacing:var(--tracking-body);
  color:var(--ink-strong);
  -webkit-appearance:none;
  appearance:none;
}
.tx-search__field::placeholder{color:var(--ink-muted);font-weight:400}
/* Chrome draws its own clear button on type="search"; it never lines up. */
.tx-search__field::-webkit-search-cancel-button,
.tx-search__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

.tx-search__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  flex:0 0 auto;
  height:calc(100% - 0.8rem);
  min-height:0;
  padding:0 1.15rem;
  border:0;
  border-radius:calc(var(--r-field) - 4px);
  background:var(--accent);
  color:var(--accent-contrast);
  font-family:var(--font);
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:var(--tracking-body);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.tx-search__submit:hover{background:var(--primary-600)}
.tx-search__submit:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tx-search__submit i{font-size:0.78rem;transition:transform var(--dur-fast) var(--ease-out)}
.tx-search__submit:hover i{transform:translateX(2px)}

/* Where the field sits in a toolbar it keeps a sane track width. */
.tx-search--filter{max-width:26rem}
.tx-search--hero{max-width:34rem}

@media (max-width:768px){
  .tx-search,
  .tx-search--lg{
    height:var(--control-h);
    padding:0 0.3rem 0 0.85rem;
    gap:0.6rem;
  }
  .tx-search__submit{padding:0 0.9rem}
  .tx-search__submit span{display:none}
  .tx-search__submit i{font-size:0.85rem}
  .tx-search--filter,
  .tx-search--hero{max-width:none}
}