/* The tokens, the three themes and the .theme-pick control all live in
   assets/style.css now - every page in the archive loads that sheet, and the
   city indexes and the protocol pages wear the same switch this page does.
   This file is only what is particular to a search page. */

* { box-sizing: border-box; }
/* assets/style.css is loaded first and dresses a document page as a sheet of
   paper on a grey desk; this page is not that page, so both ends of that are
   reset here rather than by dropping the shared sheet (its .protocol-text
   rules are still wanted if anything on this page ever renders body text). */
html { background: var(--bg); }
body {
  font-family: "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  margin: 0; padding: 0; max-width: none; min-height: 0;
  box-shadow: none; border-radius: 0;
  background: var(--bg); color: var(--fg);
}

/* A centred column, as on the professional pages this page now matches.
   820px rather than their 1040: that page carries a three-up grid of cards
   and wants the width, while this one is a single column of prose, which
   stops being comfortable to read long before 1040px. */
.serp-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.serp-top { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem; }
.serp-top a { color: var(--accent); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.serp-top a:hover { text-decoration: underline; }

/* The switch itself is in style.css; here it only has to take the end of the
   row it shares with the "כל הערים" link. */
.serp-top .theme-pick { margin-inline-start: auto; }

/* The masthead, lifted from the professional index: a large balanced title,
   one line of prose no wider than a comfortable measure, and a rule with the
   corpus counted above it. The numbers are written by the page itself from
   Pagefind's own filter counts, so they can never drift from what the search
   below actually holds. */
.serp-head { margin-bottom: 1.8rem; }
.serp-head h1 {
  margin: 0 0 10px; font-size: clamp(28px, 4.4vw, 40px); font-weight: 700;
  letter-spacing: -.02em; text-wrap: balance; color: var(--fg);
}
.serp-head .serp-sub { color: var(--muted); max-width: 60ch; margin: 0; line-height: 1.6; }
.serp-headstats {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 14px;
}
.serp-headstats b { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; }

/* The small caps-y label above the result list. text-transform does nothing
   to Hebrew, so the letter-spacing is what carries it - same treatment the
   professional page gives its own Hebrew section labels. */
.serp-sec {
  font-size: 14px; letter-spacing: .09em; color: var(--muted);
  font-weight: 600; margin: 0 0 6px;
}

.serp-search-row { margin-bottom: 0.7rem; }
.serp-box {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem;
  background: var(--card); box-shadow: var(--shadow);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.serp-box:focus-within { border-color: var(--accent); }
.serp-ai { flex: none; display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent); text-decoration: none; font-size: 1rem; line-height: 1; }
.serp-ai:hover, .serp-ai:focus-visible { background: var(--accent); color: var(--bg); outline: none; }
.serp-ai[hidden] { display: none; }
.serp-icon { color: var(--muted); flex-shrink: 0; }
.serp-box input { flex: 1; min-width: 0; border: none; outline: none; font-size: 16px; background: transparent; color: var(--fg); font-family: inherit; }

/* The syntax help. Collapsed, quiet, and sitting directly under the box it
   describes - a reader who needs it looks there, and one who doesn't never
   has to scroll past an open panel of rules. */
.serp-help { margin-bottom: 1rem; font-size: 0.85rem; }
.serp-help summary {
  cursor: pointer; color: var(--accent); font-weight: 600;
  width: fit-content; padding: 0.2rem 0;
}
.serp-help-body {
  margin-top: 0.5rem; padding: 0.9rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--muted); line-height: 1.6;
}
.serp-help-body p { margin: 0 0 0.6rem; }
.serp-help-body p:last-child { margin-bottom: 0; }
.serp-help-body strong { color: var(--fg); }
/* Two columns on anything with room: the query on the reading-start edge,
   what it does beside it. On a phone they stack, which is why the dd carries
   its own inline-start padding there rather than relying on the grid gap. */
.serp-help-rows { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; margin: 0 0 0.7rem; }
.serp-help-rows dt {
  font-weight: 600; color: var(--fg);
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.1rem 0.5rem; width: fit-content; white-space: nowrap;
}
.serp-help-rows dd { margin: 0; align-self: center; }
.serp-help-body code { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.35rem; }
.serp-help-note { font-size: 0.95em; }
@media (max-width: 480px) {
  .serp-help-rows { grid-template-columns: 1fr; gap: 0.15rem; }
  .serp-help-rows dd { padding-inline-start: 0.5rem; margin-bottom: 0.5rem; }
}

.serp-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }

/* "That worked" - said by the control itself, for half a second.
 *
 * A filter here changes a result list further down the page, and on a phone
 * that list is off-screen entirely: the reader picks a city, the page silently
 * becomes a different page, and nothing at the point of contact confirms the
 * tap landed. Same effect, timing and tokens as the tenders board and
 * /pro/companies, so the whole professional space acknowledges in one voice.
 *
 * box-shadow and border-color only: both are composited and neither is part of
 * layout, so the filter row cannot reflow mid-animation. */
@keyframes filter-ack {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
         border-color: var(--accent); }
  55%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
         border-color: var(--accent); }
  100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent);
         border-color: var(--border); }
}
.ack { animation: filter-ack .55s ease-out; }
/* A still ANIMATION rather than `animation: none`: with no animation
   animationend never fires, the cleanup never runs, and the class stays on the
   last control touched for the rest of the visit. */
@keyframes filter-ack-still {
  0%, 100% { border-color: var(--accent);
             box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ack { animation: filter-ack-still .8s steps(1); }
}
.serp-filters select {
  border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.9rem;
  min-height: 40px; font-size: 0.85rem; color: var(--fg); background: var(--card); font-family: inherit;
  flex: 0 1 auto; min-width: 0; max-width: 15rem;
}
/* overflow-wrap because this element also carries the engine-failure
   message, which ends in a long unbreakable URL - without it that one
   line makes the whole page scroll sideways. */
.serp-stats { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; min-width: 0; }
.serp-statsrow { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.serp-share {
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-family: inherit; cursor: pointer;
}
.serp-share:hover { border-color: var(--accent); }
/* Each result is a card, the same object the professional index is built
   from: hairline rule, 12px corner, the soft shadow, and the accent picked
   up on hover. Being a card is also what lets the list run the full width of
   the column without the snippets reading as loose floating text. */
.serp-result {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; margin-bottom: 12px;
  transition: border-color .12s ease;
}
.serp-result:hover { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .serp-result { transition: none; } }
.serp-empty { color: var(--muted); font-size: 0.9rem; }
.serp-breadcrumb { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.15rem; overflow-wrap: break-word; }
.serp-city { font-weight: 700; color: var(--fg); text-decoration: none; }
.serp-city:hover { text-decoration: underline; }
.serp-title {
  display: block; color: var(--accent); font-size: 1.15rem; text-decoration: none;
  line-height: 1.3; margin-bottom: 0.2rem; width: fit-content; max-width: 100%;
  overflow-wrap: break-word; font-weight: 600;
}
.serp-title:hover { text-decoration: underline; }
.serp-title:visited { color: var(--visited); }
.serp-snippet { color: var(--muted); font-size: 0.87rem; line-height: 1.5; overflow-wrap: break-word; }
/* Bold rather than a highlighted background: the marked words sit inside a
   grey snippet and a filled background on every one of them turns the line
   into stripes. Colour goes to --fg, i.e. one step darker than the snippet. */
.serp-snippet mark { background: none; font-weight: 700; color: var(--fg); }

/* Phones: tighter spacing, full-width filter pills instead of a wrapped
   row (three ~30% pills get cramped below ~480px), bigger touch targets. */
@media (max-width: 480px) {
  .serp-page { padding: 24px 14px 48px; }
  .serp-box { padding: 0.7rem 0.9rem; }
  .serp-filters { flex-direction: column; }
  .serp-filters select { width: 100%; }
  .serp-title { font-size: 1.05rem; }
}

/* Knesset mode: the one filter control - term, document types, committees. */
.kn-tree { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 0.3rem 0.9rem; flex: 1 1 100%; }
.kn-tree summary { cursor: pointer; min-height: 34px; display: flex; align-items: center; font-size: 0.9rem; color: var(--fg); }
.kn-body { padding: 0.3rem 0 0.6rem; font-size: 0.9rem; }
.kn-term { font-weight: 600; margin-bottom: 0.3rem; }
.kn-types, .kn-committees, .kn-others-list { list-style: none; margin: 0; padding: 0 1.2rem 0 0; }
.kn-types > li { margin: 0.3rem 0; }
.kn-types label { cursor: pointer; }
.kn-committees { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.35rem 1.5rem 0.2rem 0; }
.kn-c { border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--fg); font-family: inherit; font-size: 0.8rem; padding: 0.2rem 0.7rem; cursor: pointer; }
.kn-c[aria-pressed="true"] { background: var(--accent, #7851A9); color: #fff; border-color: var(--accent, #7851A9); }
.kn-c[aria-pressed="true"] span { color: #fff; }
.kn-tree span { color: var(--muted); }
.kn-others { margin-top: 0.7rem; color: var(--muted); }
.kn-others-list { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.serp-full { margin: 0.5rem 0 0; font-size: 0.9rem; }