/* ==========================================================================
   GET ANSWERS — Pass 55
   Landing page, topic archives, single answer, search results. Loaded
   only on those four surfaces — see inc/enqueue.php's osta_is_answers_
   page(). Depends on osta-global (tokens, .container, .btn, .card-grid,
   .page-header, .empty-state, .locked, .on-dark are all reused from
   there) and osta-inner, loaded first — see enqueue.php's dependency list.
   ========================================================================== */

/* ---- HERO ----
   Uses the existing .on-dark utility (global.css) for its background and
   base text color/heading color — this file only adds layout and the
   pieces .on-dark doesn't already cover (body copy, search bar, chips). */

.answers-hero {
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-10);
  text-align: center;
}

.answers-hero__inner {
  max-width: var(--measure-max);
  margin-inline: auto;
}

.answers-hero__heading {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.answers-hero__body {
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-surface);
  opacity: 0.92;
  margin: 0 0 var(--space-5);
}

/* ---- SEARCH ----
   REBUILT — PASS "Get Answers: fix the search UI, the empty topic
   filter, and the answer keyword/link gaps". A single vertical stack —
   input, then the topic dropdown, then ONE submit button — matching the
   client's own mobile screenshot, which this pass's own report confirms
   was already correct; the bug was the DESKTOP layout cramming the
   search field, its button, AND a second whole filter block into one
   640px-wide flex row. No flex row here any more at any width — see
   this file's own git history / the previous version of this comment
   for the exact mechanism that broke.

   A solid, opaque input with a real border and a normal-contrast
   placeholder — NOT the mockup's 10%-white input with a 50%-white
   placeholder, which both fail contrast. input/button colors are
   inherited from global.css's own base rules (white surface, ink text) —
   nothing here overrides them, so this reads correctly whether the form
   sits on the dark hero or a plain light page header. */

.answers-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
  text-align: left; /* This form's own labels/controls read left-to-right in a vertical stack — not the hero's inherited center alignment. */
}

.answers-search__field {
  position: relative;
}

.answers-search__icon {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--color-muted);
  pointer-events: none;
}

.answers-search__field input {
  width: 100%;
  min-height: var(--tap-min);
  padding-left: calc(var(--space-2) * 2 + 22px);
  /* Chrome gives input[type="search"] its own native "searchfield"
     appearance, which silently ignores the author border-radius below
     (confirmed live: computed border-radius read 0px despite the same
     var(--radius-sm) global.css already sets on every input) even
     though it still paints something visually round-ish of its own.
     appearance: none hands rendering back to normal CSS so this input
     and .answers-suggestions below it use the IDENTICAL radius, not
     two different roundings that happen to look similar. */
  appearance: none;
  -webkit-appearance: none;
}

/* ---- TYPE-AHEAD SUGGESTIONS (PASS "Corrective: homepage topics,
   type-ahead suggestions, empty topic filter, results indicator";
   POLISHED — PASS "Corrective: homepage topics, type-ahead polish,
   empty topic filter, results indicator") ----
   Replaces a native <datalist>'s own unstyled browser UI, reported live
   as "a black box… unrelated to the site design". Positioned against
   .answers-search__field (position: relative, above) so it sits flush
   under the input at the input's own width, never the icon's. Built and
   shown entirely by assets/js/answers-suggestions.js — starts `hidden`
   and empty in the markup, so with JavaScript off it never exists.
   Capped at 6 items (assets/js/answers-suggestions.js's own MAX_SHOWN),
   never a live count above that.

   ROOT CAUSE of "inner scrollbar" + "overflows past the hero band",
   confirmed live, not guessed: a sample-question label can run to a
   full sentence and was wrapping onto 2-3 lines. Six of THOSE, each at
   least var(--tap-min) tall plus wrapped lines, easily summed to
   450-550px — taller than the max-height cap on a normal viewport (an
   inner scrollbar) and, even at that cap's fully allowed height, often
   taller than the actual space left inside the hero below the input,
   so the box spilled well past the hero's own bottom edge into the
   section below. FIX: every suggestion is now forced to ONE line,
   truncated with an ellipsis rather than wrapped (below) — six single-
   line rows total roughly 300px, comfortably inside the hero on every
   viewport this was tested at, and never taller than the box's own
   content, so max-height/overflow-y are gone outright — there is
   nothing left for them to ever need to scroll. The box's own white
   background, border, shadow, and z-index (already correct — this
   was never a stacking/layering bug, only a size one) mean that on the
   rare very short viewport where six short rows still slightly cross
   the hero's bottom edge, it now reads as a normal, clean dropdown
   overlapping page content underneath it — the standard, expected
   shape of any autocomplete popover — not a broken one. */

.answers-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); /* Same radius as the input it belongs to. */
  box-shadow: var(--shadow-soft);
  z-index: 30;
}

.answers-suggestions__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body); /* Same size as the input's own typed text. */
  color: var(--color-ink);
  cursor: pointer;
}

.answers-suggestions__option:hover,
.answers-suggestions__option.is-active {
  background: var(--color-brand-wash);
}

.answers-suggestions__kind {
  flex: 0 0 auto;
  min-width: 4.5em;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.answers-suggestions__label {
  flex: 1 1 auto;
  min-width: 0; /* Required alongside white-space: nowrap below — without it a flex item won't shrink past its content's natural width, and ellipsis never triggers. */
  color: var(--color-brand); /* Navy — matches the "white surface, navy text" spec. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.answers-search__topic-label {
  color: var(--color-surface);
  font-weight: var(--weight-semibold);
  text-align: left;
  margin: 0;
}

.answers-search__topic-select {
  width: 100%;
  min-height: var(--tap-min);
}

.answers-search__submit {
  width: 100%;
  min-height: var(--tap-min);
}

.answers-search__clear-topic {
  align-self: center;
  color: var(--color-surface);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* Search results page's smaller, non-hero variant — same component,
   sitting in a light .page-header instead of the dark landing hero. */
.answers-search--compact {
  margin-inline: 0;
  margin-top: var(--space-3);
}

.answers-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  background: var(--color-surface);
  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);
  border-radius: 999px;
  text-decoration: none;
}

/* Specificity fix, kept for .answers-chip's one remaining use (search-
   answers.php's own "browse by topic" list — unrelated to and untouched
   by the ORS Keyword Database pass; the landing-page Popular Topics
   chip list this rule ALSO originally covered is gone, see above).
   global.css's .on-dark a (0,1,1) would otherwise beat a bare
   .answers-chip (0,1,0) if this class is ever placed on a dark
   background again — this selector (0,2,1) beats it unconditionally,
   same reasoning as when this was first added, still correct even
   though only one caller of .answers-chip remains. */
.answers-search__topic-list a.answers-chip {
  color: var(--color-brand);
}

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

/* ---- BROWSE BY TOPIC ---- */

.answers-browse__header {
  max-width: var(--measure-max);
  margin: 0 auto var(--space-6);
  text-align: center;
}

.answers-browse__heading {
  margin: 0 0 var(--space-2);
}

.answers-browse__intro {
  font-size: var(--text-lead);
  color: var(--color-body);
  margin: 0;
}

/* Fixed 1/2/3-column grid — matching the mockup's own grid-cols-1
   md:grid-cols-2 lg:grid-cols-3, NOT .card-grid's generic auto-fit
   (fine for an arbitrary-length list elsewhere, but wrong here: at
   1200px-wide desktop it fit 4 of these 260px-minimum cards per row,
   splitting exactly six fixed topics into an uneven 4-then-2 layout
   instead of the clean 2-row-of-3 grid the design calls for). */
.answers-topic-grid {
  grid-template-columns: repeat(1, 1fr);
}

.answers-topic-card-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.answers-topic-hub-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.answers-topic-hub-link:hover {
  color: var(--color-link-hover);
  border-color: var(--color-brand);
}

.answers-topic-hub-link__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.answers-topic-hub-link__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .answers-topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .answers-topic-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.answers-topic-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  transition: transform 150ms, box-shadow 150ms;
}

.answers-topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .answers-topic-card {
    transition: none;
  }
  .answers-topic-card:hover {
    transform: none;
  }
}

.answers-topic-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  /* Circular, matching the mockup's rounded-xl on a 48px box (a radius
     at least half the box size always resolves to a full circle) —
     var(--radius-md) read as a rounded SQUARE instead, the actual gap
     from the mockup's own layout flagged after comparing screenshots. */
  border-radius: 50%;
  /* Green as a SURFACE fill only — the icon drawn on top is navy-ish
     ink (--color-accent-on, 8.89:1), never white. Corrections carried
     forward: white-on-green fails contrast (2.10:1) — the mockup's own
     icons ARE white-on-green, which is why this deliberately does not
     match that one detail even though everything else here now does. */
  background: var(--color-accent);
  color: var(--color-accent-on);
  margin-bottom: var(--space-3);
}

.answers-topic-card__icon svg {
  width: 24px;
  height: 24px;
}

.answers-topic-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h4);
  color: var(--color-surface);
  margin: 0 0 var(--space-2);
}

.answers-topic-card__body {
  color: var(--color-surface);
  opacity: 0.85;
  margin: 0 0 var(--space-4);
  flex-grow: 1;
}

.answers-topic-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.answers-topic-card__count {
  font-size: var(--text-small);
  color: var(--color-brand-on-dark);
}

.answers-topic-card__arrow {
  width: 20px;
  height: 20px;
  color: var(--color-surface);
  transition: transform 150ms;
}

.answers-topic-card:hover .answers-topic-card__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .answers-topic-card__arrow {
    transition: none;
  }
  .answers-topic-card:hover .answers-topic-card__arrow {
    transform: none;
  }
}

/* ---- FALLBACK CTA BAR ---- */

.answers-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface-dark);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: var(--tap-min);
  text-decoration: none;
}

.answers-cta-bar__text {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h4);
  color: var(--color-surface);
}

.answers-cta-bar__arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  transition: transform 150ms;
}

.answers-cta-bar:hover .answers-cta-bar__arrow {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  .answers-cta-bar__arrow {
    transition: none;
  }
  .answers-cta-bar:hover .answers-cta-bar__arrow {
    transform: none;
  }
}

/* ---- DISCLAIMER ----
   Empty by default (no field value) — see osta_answers_disclaimer(). A
   plain, quiet small-print box, not an alert; this is informational, not
   a warning. */

.answers-disclaimer {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

.answers-disclaimer p {
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 2 — the legal disclaimer under every answer, was
     --text-small (16px). */
  font-size: var(--text-body);
  color: var(--color-muted);
  margin: 0;
}

.answers-disclaimer--inline {
  padding-block: var(--space-4) 0;
  margin-top: var(--space-6);
}

/* ---- TOPIC ARCHIVE ---- */

.answers-topic-header__back {
  margin: 0 0 var(--space-3);
}

.answers-topic-header__back a {
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 3 — had no sizing at all; the gap this creates was
     already flagged in a comment below (answers-search.php's own "back"
     link uses the same class — see that comment). */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: var(--weight-semibold);
}

/* ---- QUESTION LISTS ----
   Shared by the topic archive, the search results page, and the single
   answer page's "More in this Topic" list. */

.answers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.answers-list__item {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.answers-list__item:last-child {
  border-bottom: none;
}

.answers-list__topic {
  display: inline-block;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  margin-bottom: var(--space-1);
}

.answers-list__question {
  margin: 0 0 var(--space-1);
}

.answers-list__question a {
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 3 — had no sizing at all. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-ink);
  text-decoration: none;
}

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

.answers-list__summary {
  color: var(--color-body);
  margin: 0;
}

/* No-results state's own topic chip list — the .empty-state wrapper and
   heading/body already come from global.css. */
.answers-search__topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

/* ---- SINGLE ANSWER ----
   Generous type and line length — Step 4's own instruction, this
   audience is mostly over 65. Reuses .container--narrow (global.css,
   --measure-max = 720px) rather than inventing a second measure. */

.answers-article {
  padding-block: calc(var(--header-height) + var(--space-6)) var(--space-10);
}

/* A clearly-tappable "way back" — the breadcrumb below is still there
   for anyone who reads it, but this is the thing meant to actually be
   found and used. Real 48px target (min-height + inline-flex), unlike
   .answers-topic-header__back's plain inline link. */
.answers-article__back {
  margin: 0 0 var(--space-3);
}

.answers-article__back a {
  display: inline-flex;
  align-items: 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-article__back a:hover {
  background: var(--color-brand-wash);
}

.answers-article__breadcrumbs {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}

/* PASS "Fix the accessibility failures found by the component
   inventory", item 3 — had no sizing at all. Same pattern as the other
   breadcrumb families (.tenant-rights-breadcrumb a, inner-pages.css). */
.answers-article__breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-muted);
}

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

.answers-article__breadcrumbs-sep {
  margin-inline: var(--space-1);
}

.answers-article__question {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}

.answers-article__statute {
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 2 — an ORS statute citation, was --text-small
     (16px). */
  display: inline-block;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  background: var(--color-surface-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-4);
}

/* PASS "Get Answers: fix the search UI…", item 4 — when a Statute Link
   is on file, .answers-article__statute now wraps a real <a> instead of
   plain text; the badge's own muted color is for the plain-text state
   only, a real link inside it reads as brand-navy, underlined on
   hover/focus, same convention as every other inline text link on the
   site. */
.answers-article__statute a {
  color: var(--color-brand);
  text-decoration: none;
}

.answers-article__statute a:hover,
.answers-article__statute a:focus-visible {
  text-decoration: underline;
}

/* Item 3 — the optional internal/external related links, below the
   answer body. Plain list, real 48px tap targets, same link-row shape
   used elsewhere in this file (.answers-results__statute). */
.answers-article__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.answers-article__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}

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

.answers-article__content {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-body);
}

.answers-article__content :first-child {
  margin-top: 0;
}

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

.answers-article__related .topic-related {
  margin-top: 0;
}

.answers-article__related .topic-related__list {
  grid-template-columns: 1fr;
}

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

.answers-article__related-heading {
  margin: 0 0 var(--space-2);
}

.answers-article__related .answers-list {
  margin-block: var(--space-2) 0;
}

/* ---- MOBILE ---- */

@media (max-width: 767px) {
  .answers-hero {
    padding-block: calc(var(--header-height) + var(--space-6)) var(--space-8);
  }

  .answers-topic-card {
    padding: var(--space-3);
  }

  .answers-cta-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .answers-article {
    padding-block: calc(var(--header-height) + var(--space-4)) var(--space-8);
  }
}

/* ---- ORS Chapter 90 research library ---- */

.ors-library__hero {
  background: var(--color-surface-dark);
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-10);
}

.ors-library__heading {
  color: var(--color-surface);
  margin: 0 0 var(--space-3);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.ors-library__intro {
  color: var(--color-surface);
  max-width: var(--measure-max);
  margin: 0 0 var(--space-5);
  font-size: var(--text-lead);
}

.ors-library__group {
  margin-bottom: var(--space-10);
}

.ors-library__group-heading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-h2);
}

.ors-library__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

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

@media (min-width: 1100px) {
  .ors-library__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.ors-library__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}

.ors-library__ors {
  margin: 0;
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  font-size: var(--text-small);
  letter-spacing: 0.02em;
}

.ors-library__name {
  margin: 0;
}

.ors-library__summary {
  margin: 0;
  flex: 1 1 auto;
}

.ors-library__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}