/* OKKids Resource Finder — scoped styles.
   Palette tokens fall back to the site values so the harness renders standalone;
   inside the theme the :root custom properties win. */

#okf-finder {
  --okf-ink: var(--ink, #26333b);
  --okf-soft: var(--ink-soft, #51616c);
  --okf-line: var(--line, #e4ded3);
  --okf-paper: var(--paper, #faf8f4);
  --okf-card: var(--card, #ffffff);
  --okf-apricot: var(--apricot, #e8a06b);
  --okf-apricot-d: var(--apricot-deep, #c97c40);
  --okf-ease: var(--okk-ease, cubic-bezier(.22, .55, .25, 1));
  --okf-t1: var(--okk-t1, 130ms);

  background: var(--okf-card);
  border: 1px solid var(--okf-line);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 26px;
}

/* Defensive: the theme's card-grid may set display on .okf-card, which would
   beat the UA [hidden] rule and silently break filtering. */
#okf-list .okf-card[hidden], .okf-card[hidden] { display: none !important; }

#okf-finder .okf-row { margin-bottom: 16px; }
#okf-finder .okf-row:last-child { margin-bottom: 0; }

#okf-finder .okf-lab {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--okf-soft);
  margin-bottom: 8px;
}

#okf-finder #okf-county {
  width: 100%;
  max-width: 340px;
  font: inherit;
  font-size: max(16px, 1rem); /* under 16px iOS Safari zooms the page on focus */
  color: var(--okf-ink);
  background: var(--okf-paper);
  border: 1.5px solid var(--okf-line);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color var(--okf-t1) var(--okf-ease);
}
#okf-finder #okf-county:focus { border-color: var(--okf-apricot-d); outline: none; }
#okf-finder #okf-county:focus-visible { outline: 3px solid var(--sky-deep, #5e83a8); outline-offset: 2px; }

#okf-finder .okf-hint {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--okf-apricot-d);
}

#okf-finder .okf-chips { display: flex; flex-wrap: wrap; gap: 8px; }

#okf-finder .okf-chip {
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--okf-ink);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--okf-line);
  background: var(--okf-paper);
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--okf-t1) var(--okf-ease),
              box-shadow var(--okf-t1) var(--okf-ease),
              background-color var(--okf-t1) var(--okf-ease),
              border-color var(--okf-t1) var(--okf-ease);
}
@media (hover: hover) and (pointer: fine) {
  #okf-finder .okf-chip:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 color-mix(in oklab, var(--okf-apricot-d) 55%, transparent);
  }
}
#okf-finder .okf-chip:active { transform: translate(2px, 2px); box-shadow: none; transition-duration: 60ms; }
#okf-finder .okf-chip:focus-visible,
#okf-finder .okf-reset:focus-visible { outline: 3px solid var(--sky-deep, #5e83a8); outline-offset: 2px; }
#okf-finder .okf-chip[aria-pressed="true"] {
  background: #f8e2cf; /* fallback where color-mix is unsupported */
  background: color-mix(in oklab, var(--okf-apricot) 30%, white);
  border-color: var(--okf-apricot-d);
  color: var(--okf-apricot-d);
}

#okf-finder .okf-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#okf-finder .okf-count { font-size: .9rem; color: var(--okf-soft); margin: 0; }

#okf-finder .okf-reset {
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  color: var(--okf-apricot-d);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
  min-height: 44px;
}

/* Empty state block (server-rendered, hidden by JS while results exist) */
#okf-empty {
  background: var(--okf-card, #fff);
  border: 1.5px dashed var(--okf-line, #e4ded3);
  border-radius: 18px;
  padding: 26px;
  text-align: center;
  color: var(--okf-soft, #51616c);
}

@media (prefers-reduced-motion: reduce) {
  #okf-finder .okf-chip, #okf-finder #okf-county { transition: none; }
  #okf-finder .okf-chip:hover { transform: none; }
}