/* The practice search (layout/_search.php): where to look and the three
   filters, on the home page's hero and the buyers page. Moved out of
   home.css unchanged when the buyers page took the same search (30 Sep,
   plan docs/ai/2026/09/2026-09-30-audience-pages) */

.srch {
  background: #fff;
  border: 1px solid var(--po-line-2);
  border-radius: 12px;
  padding: var(--po-sp-5) var(--po-sp-3);
  box-shadow: var(--po-sh-1);
}

.sbox {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--po-line-2);
  border-radius: 8px;
  padding-right: var(--po-sp-1);
  transition: border-color 130ms, box-shadow 130ms;
}

.sbox:focus-within {
  border-color: var(--po-brand-2);
  box-shadow: 0 0 0 3px rgba(58, 115, 150, 0.13);
}

.sbox>svg {
  width: 18px;
  height: 18px;
  color: var(--po-muted);
  margin-left: var(--po-sp-3);
  flex: 0 0 auto;
}

.sbox input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: none;
  outline: none;
  background: none;
  font-family: var(--po-font-text);
  font-size: var(--po-fs-xl);
  color: var(--po-ink-soft);
  padding: 0 var(--po-sp-2) 0 var(--po-sp-3);
}

.sbox input::placeholder {
  color: var(--po-muted);
}

.sbtn {
  width: 38px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: var(--po-cta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
  transition: background 130ms;
}

.sbtn:hover {
  background: var(--po-cta-hover);
}

.sbtn svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}

.filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--po-sp-2);
  margin-top: var(--po-sp-3);
}

/* The filters' caret - a solid triangle, large enough to read at a
   glance, turned over while its menu is open */
.multi summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 16px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--po-muted);
  pointer-events: none;
  transition: transform 160ms;
}

.multi[open] summary::after {
  transform: rotate(180deg);
}

/* The search's three filters (spec B5) share the row equally, each a
   disclosure of checkboxes styled as a select, because several options
   can be ticked (design review K1), which a native select cannot show */
.multi {
  position: relative;
}

.multi summary {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 var(--po-sp-8) 0 var(--po-sp-3);
  border: 1px solid var(--po-line-2);
  border-radius: 8px;
  background: #fff;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 500;
  color: var(--po-ink-2);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi summary::-webkit-details-marker {
  display: none;
}

.multi-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: var(--po-sp-2);
  background: #fff;
  border: 1px solid var(--po-line);
  border-radius: 8px;
  box-shadow: var(--po-sh-3);
}

.multi-menu label {
  display: flex;
  align-items: center;
  gap: var(--po-sp-2);
  padding: var(--po-sp-2) var(--po-sp-2);
  border-radius: 5px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 500;
  color: var(--po-ink-2);
  cursor: pointer;
}

.multi-menu label:hover {
  background: var(--po-bg-2);
}

.multi-menu input {
  accent-color: var(--po-brand-2);
}

/* Any is ruled off from the options it stands for (K2) */
.multi-menu hr {
  margin: var(--po-sp-1) var(--po-sp-2);
  border: 0;
  border-top: 1px solid var(--po-line);
}

.multi summary:hover {
  border-color: #cfd5da;
}

.multi summary:focus-visible,
.multi[open] summary {
  outline: none;
  border-color: var(--po-brand-2);
  box-shadow: 0 0 0 3px rgba(58, 115, 150, 0.13);
}

@media (max-width: 760px) {
  .filters {
    grid-template-columns: minmax(0, 1fr);
  }
}