/* answers-search-results.css — the same-page (inline) search results
   component (template-parts/sections/answers-results.php). Pass "Get
   Answers: same-page search results", extended by a later request to
   also appear on the homepage's own knowledge-base search box.

   WHY ITS OWN FILE, NOT inner-pages.css OR homepage.css: this component
   now renders on BOTH the Get Answers page (inner-pages.css) and the
   homepage (homepage.css) — two mutually exclusive stylesheets (see
   inc/enqueue.php: is_front_page() gets homepage.css OR every other
   template gets inner-pages.css, never both). A rule living in either
   one of those files would be missing on the other surface. This file
   is enqueued on both instead (osta_enqueue_answers_search_assets(),
   inc/enqueue.php) — it only ever depends on tokens.css/global.css
   (--space-*, --color-*, --tap-min, .card/.card__heading/.card__body,
   .empty-state), never on anything specific to either page-level file,
   so loading it alongside whichever of the two is active is safe.

   Reuses global.css's .card/.card__heading/.card__body and .empty-state
   wholesale rather than inventing new card/empty-state primitives —
   only the parts specific to this feature (header row, Clear control,
   the three result groups) get new rules here.

   UPDATED — PASS "Get Answers: ORS Chapter 90 keyword database + topic
   dropdown + unified search": template-parts/sections/answers-
   results.php no longer renders the section (or an empty-but-hidden
   skeleton of it) at all when no search/topic filter is active — a
   plain `return;` in the template, not a client-toggleable [hidden]
   attribute — so this file no longer needs (or has) [hidden] rules at
   the section/list/card/clear-link level; whenever the section renders
   at all, every part of it is already in its final, correct state. See
   the results template's own docblock for the full "no search = the
   section doesn't exist in the DOM at all" reasoning, and this pass's
   own report for what that means for assets/js/answers-search.js's now-
   inert zero-reload enhancement. */

.answers-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.answers-results__count {
  margin: 0;
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

/* A real <a> (works with no JS — see answers-results.php's own docblock),
   styled with a visible border so it reads as a control, not a plain text
   link — min-height/inline-flex is what guarantees the 48px tap target
   regardless of how short "Clear" renders at any font size. */
.answers-results__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.answers-results__clear:hover {
  background: var(--color-brand-wash);
}

/* ---- GROUPS — PASS "Get Answers: ORS Chapter 90 keyword database +
   topic dropdown + unified search". Three separately labelled groups
   (Statute Summaries / From Get Answers / Guides & Articles) replace
   the single flat card list this file used to style — item 5's own
   explicit "clearly labelled groups so a member can tell a statute
   summary from an article". A group with nothing in it is simply never
   rendered by the template (template-parts/sections/answers-results.php)
   — no [hidden]/empty-group state needed here. ---- */

.answers-results__group + .answers-results__group {
  margin-top: var(--space-6);
}

.answers-results__group-heading {
  font-size: var(--text-h4);
  margin: 0 0 var(--space-3);
}

.answers-results__accordions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.answers-results__accordion {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.answers-results__accordion:not([open]) > .answers-results__accordion-panel {
  display: none;
}

.answers-results__accordion[open] > .answers-results__accordion-panel {
  display: block;
}

.answers-results__accordion-toggle {
  display: block;
  cursor: pointer;
  list-style: none;
  color: var(--color-brand);
}

.answers-results__accordion-toggle::-webkit-details-marker {
  display: none;
}

.answers-results__accordion-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.answers-results__accordion-toggle-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
}

.answers-results__accordion-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: inherit;
}

.answers-results__accordion-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-brand-wash);
  color: var(--color-brand);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}

.answers-results__accordion-chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .answers-results__accordion-chevron {
    transition: none;
  }
}

.answers-results__accordion[open] .answers-results__accordion-chevron {
  transform: rotate(135deg);
}

.answers-results__accordion-toggle:hover {
  color: var(--color-brand-hover);
}

.answers-results__accordion-panel {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.answers-results__more {
  margin-top: var(--space-3);
}

.answers-results__more-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-1);
  cursor: pointer;
  list-style: none;
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
}

.answers-results__more-toggle::-webkit-details-marker {
  display: none;
}

.answers-results__more-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.answers-results__more[open] > .answers-results__more-toggle {
  margin-bottom: var(--space-3);
}

.answers-results__accordion-panel .answers-statute-grid__intro {
  margin-bottom: var(--space-4);
}

.answers-results__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.answers-results__list--grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .answers-results__list--grid {
    grid-template-columns: 1fr 1fr;
  }
}

.answers-statute-grid {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

.answers-statute-grid__intro {
  margin: 0 0 var(--space-4);
  color: var(--color-body);
}

.answers-statute-grid__more {
  margin: var(--space-4) 0 0;
}

.answers-statute-grid__more a {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
}

.answers-statute-grid__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
}

.answers-statute-grid__keywords .answers-chip {
  pointer-events: none;
}

.answers-results__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Used for all three groups' own "what kind of thing is this" badge:
   a keyword-database entry's category, an osta_answer's topic (still a
   real link to that topic's archive), or a site-content result's Page/
   Article label. A plain <span> for the first and third (no link
   target that makes sense for either); the middle one renders as a
   real <a> in the template — this rule covers both, since the visual
   treatment is identical either way. */
.answers-results__category {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--tap-min);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 2 — was --text-small (16px). */
  font-size: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

a.answers-results__category:hover {
  text-decoration: underline;
}

.answers-results__question {
  margin: 0;
}

.answers-results__question a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-ink);
  text-decoration: none;
}

.answers-results__question a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.answers-results__summary {
  margin: 0;
}

/* Keyword-database entries only — the link to the official statute.
   Same tap-target/link-styling convention as .answers-results__category
   above. */
.answers-results__statute {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--tap-min);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 2 — an ORS statute citation, was --text-small
     (16px). */
  font-size: var(--text-body);
  text-decoration: underline;
}

.answers-results__statute:hover,
.answers-results__statute:focus-visible {
  color: var(--color-brand-hover);
}

/* Fallback when a keyword entry has an ORS citation but no statute
   link on file — plain text, not a fake/dead link. */
.answers-results__ors {
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 2 — an ORS statute citation, was --text-small
     (16px). */
  color: var(--color-muted);
  font-size: var(--text-body);
  margin: 0;
}