/* search.css — the header trigger and the /search page.
 *
 * The results page is built to read as part of this site, not as a list of links off it:
 * the brand hero band at the top, section headings like the blog index, products in the
 * store's card shape and posts in the blog's. There is deliberately no
 * "anvilmobile.com › blog › …" breadcrumb — that is how a search engine renders somebody
 * else's website, and it made our own pages look third-party. */

/* ── Header trigger ──────────────────────────────────────────────────────────────── */
.site-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  margin-left: -1.5rem;            /* claw back half the header-bar's gap */
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer;
  transition: background-color .15s ease;
}
.site-search-btn:hover { background: rgba(14, 27, 46, .07); }
.site-search-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.site-search-btn svg { width: 19px; height: 19px; display: block; }

/* ── Brand band ──────────────────────────────────────────────────────────────────── */
/* Same treatment as the CMS/blog hero, so arriving at /search feels like arriving at any
   other page of ours rather than at a bare utility screen. */
.search-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 500px at 78% -20%, rgba(37, 99, 235, .38), transparent 70%),
    linear-gradient(160deg, #0e1b2e 0%, #1e3a5f 100%);
  /* .site-header is position:fixed at 60px, so the page clears it itself. */
  padding: calc(60px + clamp(1.75rem, 5vw, 3rem)) clamp(1.15rem, 4vw, 2rem) clamp(1.75rem, 4vw, 2.5rem);
}
.search-hero-inner { max-width: 940px; margin: 0 auto; position: relative; z-index: 1; }
.search-hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em;
  margin: 0 0 .4rem; color: #fff;
}
.search-hero p { margin: 0 0 1.35rem; color: #a9bdd8; font-size: clamp(.92rem, 1.8vw, 1.02rem); }
.search-hero-dots {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: clamp(180px, 26vw, 320px); opacity: .18; pointer-events: none; user-select: none;
}

.search-form { display: flex; gap: .6rem; align-items: stretch; }
.search-field { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.search-field svg {
  position: absolute; left: 1.05rem; width: 19px; height: 19px;
  color: #7c8aa0; pointer-events: none;
}
.search-field input {
  width: 100%; font: 400 1.02rem/1.4 inherit; color: #0e1b2e;
  padding: .95rem 1rem .95rem 3rem;
  border: 1px solid transparent; border-radius: 999px; background: #fff;
  box-shadow: 0 10px 30px -12px rgba(2, 8, 20, .6);
}
.search-field input:focus {
  outline: 0; border-color: #7cb2ff; box-shadow: 0 0 0 4px rgba(124, 178, 255, .25);
}
.search-form button {
  font: 600 .95rem inherit; padding: 0 1.6rem; cursor: pointer; flex-shrink: 0;
  border: 0; border-radius: 999px; background: #2563eb; color: #fff;
}
.search-form button:hover { background: #1d4ed8; }

/* ── Body ────────────────────────────────────────────────────────────────────────── */
.search-page {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.15rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem);
}
.search-summary { color: #5b6b80; font-size: .9rem; margin: 0 0 .5rem; }

.sr-section { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid #eef2f7; }
.sr-section:last-of-type { border-bottom: 0; }
.sr-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.35rem;
}
.sr-section-head h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; letter-spacing: -.02em;
  margin: 0; color: #0e1b2e; display: flex; align-items: baseline; gap: .55rem;
}
.sr-section-count {
  font-size: .82rem; font-weight: 600; color: #7c8aa0;
  background: #f1f5f9; border-radius: 999px; padding: .1rem .55rem;
}
.sr-section-more {
  font-size: .85rem; font-weight: 600; color: #2563eb; text-decoration: none; white-space: nowrap;
}
.sr-section-more:hover { text-decoration: underline; }

/* The matched passage. Highlighting is weight + brand blue, not a yellow marker. */
mark { background: none; }
.sr-product-detail mark, .sr-excerpt mark, .sr-page-snippet mark {
  background: none; color: #0e1b2e; font-weight: 700;
}
.sr-page-snippet mark { color: #14202e; }

/* ── Products: the store's card shape ────────────────────────────────────────────── */
.sr-product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.75rem;
}
.sr-product { display: flex; flex-direction: column; transition: transform .25s ease; }
.sr-product:hover { transform: translateY(-4px); }
.sr-product-link {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%;
}
.sr-product-img {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; background: #f8fafc; border: 1px solid #f1f5f9;
  overflow: hidden; margin-bottom: 1rem;
}
.sr-product-img img {
  width: 80%; height: 80%; object-fit: contain; transition: transform .3s ease;
}
.sr-product:hover .sr-product-img img { transform: scale(1.05); }
.sr-img-placeholder { font-size: 3rem; opacity: .3; }
.sr-product-title {
  font-size: .95rem; font-weight: 600; color: #1e293b; margin: 0 0 .35rem; line-height: 1.35;
}
.sr-product-price { font-size: .95rem; font-weight: 500; color: #475569; }
.sr-product-detail {
  font-size: .82rem; line-height: 1.55; color: #7c8aa0; margin: .6rem 0 0; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Posts: the blog's card shape (blog.css supplies .post-card) ─────────────────── */
.sr-post-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* blog.css gives .post-card-excerpt `flex: 1` so it fills the card — with overflow:hidden
   that cuts the passage mid-line and runs it under the date. Size to content instead and
   let the clamp do the truncating, then push the date back to the bottom of the card. */
.sr-excerpt {
  flex: 0 0 auto;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-post .post-card-meta { margin-top: auto; padding-top: .5rem; }

/* ── Pages ───────────────────────────────────────────────────────────────────────── */
.sr-page-list { display: grid; gap: .75rem; }
.sr-page {
  display: block; text-decoration: none; color: inherit;
  padding: 1.05rem 1.2rem; border: 1px solid #e6ecf3; border-radius: 14px; background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sr-page:hover {
  border-color: #cfe0f7; box-shadow: 0 10px 26px -18px rgba(6, 20, 40, .55);
  transform: translateY(-2px);
}
.sr-page-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.sr-page-title { font-size: 1.02rem; font-weight: 600; color: #14357a; margin: 0; }
.sr-page:hover .sr-page-title { text-decoration: underline; }
.sr-page-section {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #5b6b80; background: #f1f5f9; border-radius: 4px; padding: .16rem .45rem;
}
.sr-page-snippet { font-size: .9rem; line-height: 1.6; color: #5b6b80; margin: 0; }

/* ── States ──────────────────────────────────────────────────────────────────────── */
.search-state { padding: 2.5rem 0; color: #5b6b80; font-size: .98rem; line-height: 1.7; }
.search-state-lead { color: #0e1b2e; font-weight: 600; font-size: 1.08rem; }
.search-state ul { margin: .8rem 0 0; padding-left: 1.15rem; }
.search-state li { margin-bottom: .3rem; }
.search-suggest { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.15rem; }
.search-suggest a {
  font-size: .85rem; font-weight: 600; text-decoration: none;
  padding: .42rem .85rem; border-radius: 999px; background: #f4f7fc; color: #1d4ed8;
}
.search-suggest a:hover { background: #e8f0fd; }

.search-degraded {
  margin: 1.25rem 0 0; padding: .7rem .9rem; border-radius: 8px;
  background: #fff7ed; color: #9a5b12; font-size: .85rem;
}

@media (max-width: 560px) {
  .search-form { flex-wrap: wrap; }
  .search-form button { width: 100%; padding: .85rem; }
  .search-hero-dots { display: none; }
  .sr-product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
  .sr-product-detail { -webkit-line-clamp: 2; }
}