/* The archive is dressed as the professional space on goinfo.co.il is: ink
   on paper, one teal accent, and cards that are held by a hairline rule and a
   very soft shadow rather than by a fill. The token *names* are this sheet's
   own, so nothing downstream had to be renamed - only the values moved. */
:root {
  --bg: #fbfaf8;
  --fg: #14191d;
  --muted: #56626b;
  --border: #e2e0da;
  --accent: #1d6b64;
  --surface: #e6f0ee;
  --card: #ffffff;
  --visited: #6a4c93;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,25,29,.06), 0 8px 24px -16px rgba(20,25,29,.35);
}

/* Same scheme after dark - and, as on the site, the explicit [data-theme]
   picks below come later in the file so a visitor who chose a theme outranks
   whatever the OS prefers. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151a;
    --fg: #e8eaec;
    --muted: #98a4ac;
    --border: #26313a;
    --accent: #5cc4b6;
    --surface: #12312e;
    --card: #161d23;
    --visited: #c58af9;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

/* :root-scoped, not a bare attribute selector: the picker buttons below
   carry data-theme="clouds"/"fashion"/"zebra" themselves, so a bare
   [data-theme="fashion"] redefines the tokens *on the button* and it paints
   itself in that theme's colours while the page stays in another. */
:root[data-theme="clouds"] {
  --bg: #fbfaf8; --fg: #14191d; --muted: #56626b; --border: #e2e0da;
  --accent: #1d6b64; --surface: #e6f0ee; --card: #ffffff; --visited: #6a4c93;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,25,29,.06), 0 8px 24px -16px rgba(20,25,29,.35);
}

:root[data-theme="fashion"] {
  --bg: #0d0b08; --fg: #f3ecdc; --muted: #b7a67f; --border: #3c3320;
  --accent: #ddb44f; --surface: #18140d; --card: #221c12; --visited: #c9a3d4;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(0,0,0,.5);
}

:root[data-theme="zebra"] {
  --bg: #ffffff; --fg: #111111; --muted: #5c5c5c; --border: #cfcfcf;
  --accent: #111111; --surface: #f0f0f0; --card: #ffffff; --visited: #111111;
  --radius: 6px;
  --shadow: none;
}
/* Emoji are pre-rendered colour pixels, so the tokens above cannot touch
   them - grayscale is the only way to keep the no-hue promise of this theme,
   same rule as on the site itself. */
:root[data-theme="zebra"] .theme-pick button { filter: grayscale(1); }

* { 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 site's own picker, same markup and same aria-pressed convention. */
.theme-pick { display: flex; gap: .3rem; margin-inline-start: auto; }
.theme-pick button {
  font-size: .72rem; padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  font-family: inherit; cursor: pointer;
}
.theme-pick button:hover { border-color: var(--accent); }
.theme-pick button[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
@media (max-width: 640px) { .theme-pick .theme-btn-label { display: none; } }

/* 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-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; }
.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; }
}