/* Catalogue search: the header field and its results panel.
   Part of the split style.css. inc/enqueue.php enqueues each file in
   assets/css/ as its own <link>, in filename order -- they are NOT
   concatenated, so a comment or a rule cut across the join breaks both
   files and the browser drops what it cannot parse without saying so.
   Keep every construct whole inside this file. tests/css-integrity.php
   is what catches a bad cut.

   This file loads after 50-catalog.css, whose last rule is a blanket
   [hidden] { display: none !important; }. Nothing here fights that: the
   panel is a popup and MUST NOT reserve space, which is exactly what
   display:none gives it. The one component on this site that needed
   [hidden] to mean something else -- the fish offer's two variants --
   had to say !important and explain why; this one does not.

   Every colour is a token from 00-base.css. tests/palette-contrast.php
   measures those pairs; adding a raw hex here would be a colour nobody
   has measured. */

/* The whole control is one row under the header, at every width.

   Not a field squeezed into .pet-header-end and not an icon that expands:
   that row is already a three-column grid (auto minmax(0,1fr) auto) which
   60-legal.css narrows at 1560px, 780px and 560px, and a fourth thing in
   it would have to be tuned at each of those. A row of its own is the
   same markup at every width, is server-rendered so it never shifts, and
   makes the field visible rather than hidden behind a glyph -- which for
   a shop of 2,300 lines is the point of building it at all.

   position: relative so the panel can hang off it without touching flow.

   box-sizing is stated because this theme has NO global border-box reset --
   50-catalog.css says the same thing above its own grid for the same reason.
   Without it, width:100% plus 16px of padding on each side is 32px wider than
   its parent, and headless Chrome at a phone width measured .pet-search running
   from 24px to 508px inside a 500px viewport: a page that scrolls sideways,
   which is the one thing a header must never do.

   TWO CLASSES IN THE SELECTOR, AND THAT IS THE POINT. The header is a
   `is-layout-constrained` block, and WordPress prints

     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { max-width: var(--wp--style--global--content-size); margin-inline: auto !important }

   for it. `:where()` contributes nothing, so that selector weighs exactly as
   much as a single class -- a TIE with `.pet-search`, settled by whichever
   stylesheet the page happens to print second. Measured in headless Chrome with
   core's layout rules present: the search row came out 760px wide (theme.json's
   contentSize) inside a header row that is `alignwide` at 1280. A control that
   is right or wrong depending on enqueue order is a control that is wrong.
   `.pet-site-header .pet-search` outweighs it in every order.

   The field is deliberately narrower than the navigation row on wide screens.
   At the old 100% width it became a 1200px-long control and visually dominated
   the header; 880px leaves enough room for useful queries and results without
   turning the field into a second navigation bar. On smaller screens the
   100% width remains below that maximum and fills the available space. The
   horizontal padding stays on the header itself, so the control cannot create
   horizontal overflow. */
.pet-site-header .pet-search {
  box-sizing: border-box;
  margin-block: 0;
  margin-inline: auto;
  max-width: 880px;
  padding: 0 0 10px;
  position: relative;
  width: 100%;
}

.pet-search-form {
  align-items: center;
  background: var(--pet-surface);
  border: 1px solid var(--pet-border-input);
  border-radius: 999px;
  display: flex;
  gap: .4rem;
  padding: 0 .35rem 0 .9rem;
}
/* The field's own edge is a component boundary, so it carries
   --pet-border-input (3.79 on white) rather than the decorative
   --pet-border, and the focused state is the focus token itself. */
.pet-search-form:focus-within { border-color: var(--pet-focus); box-shadow: 0 0 0 3px var(--pet-primary-soft); }

.pet-search-icon { align-items: center; color: var(--pet-muted); display: inline-flex; flex: 0 0 auto; }
.pet-search-icon svg { fill: currentColor; height: 18px; width: 18px; }

/* A fixed 44px line, so the row's height is the same before and after the
   stylesheet, before and after the script, and in all three languages.
   appearance:none removes Safari's own search decorations, which draw a
   second clear button next to ours. */
.pet-search-input {
  appearance: none;
  background: none;
  border: 0;
  color: var(--pet-text);
  flex: 1 1 auto;
  font: inherit;
  font-size: 1rem;
  height: 44px;
  min-width: 0;
  outline: none;
  padding: 0;
}
.pet-search-input::placeholder { color: var(--pet-text-secondary); opacity: 1; }
.pet-search-input::-webkit-search-cancel-button,
.pet-search-input::-webkit-search-decoration { appearance: none; display: none; }

.pet-search-clear {
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--pet-text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1.3rem;
  height: 32px;
  line-height: 1;
  width: 32px;
}
.pet-search-clear:hover { background: var(--pet-surface-muted); color: var(--pet-text); }
.pet-search-clear:focus-visible { outline: 2px solid var(--pet-focus); outline-offset: 2px; }

.pet-search-submit {
  background: var(--pet-primary);
  border: 0;
  border-radius: 999px;
  color: var(--pet-surface);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: .92rem;
  font-weight: 800;
  height: 36px;
  padding: 0 1rem;
}
.pet-search-submit:hover { background: var(--pet-primary-hover); }
.pet-search-submit:focus-visible { outline: 2px solid var(--pet-focus); outline-offset: 2px; }

/* The results.

   position: absolute and a max-height with its own scroll, so the panel
   never pushes the page: opening it, adding twelve more rows to it and
   closing it all leave the document exactly as tall as it was. The site's
   measured CLS is 0 and this component must not be the thing that changes
   that.

   inset-inline-start/end rather than left/right, so the panel spans the
   field in both directions and the Hebrew edition needs no rule of its
   own. Everything below is written in logical properties for the same
   reason. */
.pet-search-panel {
  background: var(--pet-surface);
  border: 1px solid var(--pet-border);
  border-radius: 18px;
  box-shadow: var(--pet-shadow);
  inset-inline: 0;
  max-height: min(70vh, 620px);
  overflow-y: auto;
  padding: .8rem;
  position: absolute;
  top: calc(100% - 4px);
  z-index: 70;
}

.pet-search-status { color: var(--pet-text-secondary); font-size: .88rem; font-weight: 700; margin: 0 0 .5rem; padding-inline: .3rem; }
.pet-search-status:empty { display: none; }

.pet-search-results { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }

.pet-search-result-link {
  align-items: center;
  border-radius: 12px;
  color: var(--pet-text);
  display: grid;
  gap: .7rem;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  padding: .45rem .5rem;
  text-decoration: none;
}
.pet-search-result-link:hover { background: var(--pet-surface-muted); }
.pet-search-result-link:focus-visible { background: var(--pet-surface-muted); outline: 2px solid var(--pet-focus); outline-offset: -2px; }

/* The picture's box is reserved whether or not there is a picture, and it
   is reserved in CSS rather than by width/height attributes: the index
   carries a filename and no dimensions, so an attribute pair here would
   be a number nobody measured. A fixed square plus object-fit means a
   photograph of any shape drops into the same hole and the list cannot
   reflow as images arrive. */
.pet-search-result-figure {
  align-items: center;
  background: var(--pet-surface-muted);
  border-radius: 10px;
  display: flex;
  height: 56px;
  justify-content: center;
  overflow: hidden;
  width: 56px;
}
.pet-search-result-figure img { height: 100%; object-fit: cover; width: 100%; }
/* 984 of the 2,292 indexed rows have no photograph -- 785 seashell rows
   whose source is a price-list spreadsheet with no images at all, and the
   fish the supplier sent no picture of. They get a neutral tile and a
   sentence only a screen reader hears, never a stand-in picture of
   something else: a drawing offered as a photograph is the thing three
   legacy rows are permanently excluded for.

   An empty tile and no glyph, deliberately. A camera or a paw drawn here
   would be an illustration standing where a photograph belongs, and an
   emoji renders as a different picture on every platform; a dashed empty
   slot reads as "nothing here yet" in every language and asserts nothing
   about the product. */
.pet-search-result-figure.is-empty {
  background: var(--pet-background);
  border: 1px dashed var(--pet-border-strong);
}

.pet-search-result-body { display: grid; gap: .1rem; min-width: 0; }
.pet-search-result-name {
  font-size: .96rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-search-result-meta {
  color: var(--pet-text-secondary);
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-search-result-price { font-size: .95rem; font-weight: 800; white-space: nowrap; }
/* A price-on-request row is a real state of this shop, not a missing
   number, so it is written out rather than left blank -- and set smaller
   and quieter so a column of figures still scans as a column of figures. */
.pet-search-result-price.is-request { color: var(--pet-text-secondary); font-size: .78rem; font-weight: 700; }

.pet-search-suggestions { display: grid; gap: .4rem; }
.pet-search-suggest-row {
  align-items: center;
  color: var(--pet-text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: .85rem;
  gap: .4rem;
  margin: .2rem 0 0;
  padding-inline: .3rem;
}
.pet-search-chip {
  background: var(--pet-surface-muted);
  border: 1px solid var(--pet-border-input);
  border-radius: 999px;
  color: var(--pet-text);
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  padding: .25rem .7rem;
}
.pet-search-chip:hover { background: var(--pet-primary-soft); border-color: var(--pet-primary); }
.pet-search-chip:focus-visible { outline: 2px solid var(--pet-focus); outline-offset: 2px; }

/* border-box: the 1rem of side padding and the 1px border would otherwise be
   added outside the 100% and the "show more" button would overhang the
   results column it sits at the foot of. */
.pet-search-more {
  background: var(--pet-surface-muted);
  border: 1px solid var(--pet-border-input);
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--pet-text);
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  margin-top: .5rem;
  padding: .45rem 1rem;
  width: 100%;
}
.pet-search-more:hover { background: var(--pet-primary-soft); border-color: var(--pet-primary); }
.pet-search-more:focus-visible { outline: 2px solid var(--pet-focus); outline-offset: 2px; }

.pet-search-all {
  color: var(--pet-primary);
  display: block;
  font-size: .85rem;
  font-weight: 800;
  margin-top: .6rem;
  padding: .35rem .3rem;
  text-align: center;
}
.pet-search-all:focus-visible { border-radius: 10px; outline: 2px solid var(--pet-focus); outline-offset: 2px; }

/* On a phone the panel takes the full width and stays anchored under the
   field.

   It was a bottom sheet first -- position: fixed, bottom: 0 -- and headless
   Chrome at 390px showed why that was wrong: with the content shorter than
   the screen the sheet sat at the bottom with 140px of dead page showing
   between it and the field a shopper had just typed into. An autocomplete
   belongs under its input. Staying absolute also means it is still out of
   flow, so opening it moves nothing, which is the property the whole
   component is built around. */
@media (max-width: 700px) {
  .pet-site-header .pet-search { padding-bottom: 8px; }
  /* Narrower, never hidden. A control collapsed to nothing visible while
     its text node stays in the document reads as broken to everyone who
     can see it and as present to everyone who cannot. */
  .pet-search-submit { font-size: .82rem; padding: 0 .7rem; }
  .pet-search-panel {
    border-radius: 0 0 16px 16px;
    /* Shorter than the desktop cap: the on-screen keyboard takes roughly a
       third of the viewport, and a panel measured against the full height
       would put half its rows behind it. */
    max-height: min(62vh, 460px);
    padding: .6rem .5rem;
  }
  .pet-search-result-name,
  .pet-search-result-meta { white-space: normal; }
  /* Two lines rather than one truncated line: at 390px a name has about
     20 characters before the ellipsis, and "Коралловое рифовое украш..."
     tells a shopper nothing about which of the 160 corals this one is. */
  .pet-search-result-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .pet-search-result-meta {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  /* The price moves under the name instead of taking a third column.
     "Цена по запросу" is eleven characters wider than any figure, and as a
     column it took a third of a 390px row: measured in headless Chrome, the
     name it left room for was "Коралловое рифовое..." on a page with 160
     corals, which names nothing. */
  .pet-search-result-link {
    gap: .2rem .6rem;
    grid-template-columns: 48px minmax(0, 1fr);
  }
  /* align-self: start so the thumbnail lines up with the first line of the
     name rather than centring itself against a three-line body, which put it
     next to the second line and read as belonging to the row below. */
  .pet-search-result-figure { align-self: start; grid-row: span 2; height: 48px; width: 48px; }
  .pet-search-result-price {
    font-size: .88rem;
    grid-column: 2;
    text-align: start;
  }
}