/* Site search (rebuild, 2026-09-29): a friendly signpost. The search box sits in the page's
   opening beside the village crossroads painting; the example searches are arrow-shaped signs
   that point the way; results come back as paper cards that settle into place one after
   another, each with a round arrow knob; "Not finding it?" is the village mailbox. Behaviour
   stays in js/search.js. Scoped to body.p-search. */

.p-search main :is(h1, h2, h3) { color: var(--navy); }
.p-search .container { max-width: 1200px; padding-inline: clamp(16px, 4vw, 40px); }
.p-search main a { text-decoration: none; }
.p-search .crumbs { font-size: 15px; font-weight: 700; color: var(--muted); margin: 0 0 12px; }
.p-search .crumbs a { color: var(--navy); }
.p-search .crumbs .sep { margin: 0 8px; color: var(--gold-deep); }
.p-search main > .page-head h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1; margin: 0 0 16px; }
.p-search .lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--text); max-width: 34em; }

/* the search box */
.p-search .search-form {
  display: flex;
  gap: 10px;
  margin: 26px 0 0;
  padding: 10px;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--line);
  max-width: 620px;
}
.p-search .search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(29, 44, 76, .18);
  font: 500 18px/1.2 var(--f-body);
  color: var(--navy);
}
.p-search .search-form input[type="search"]:focus { box-shadow: inset 0 0 0 2px var(--navy); }
.p-search .search-form .btn { min-height: 56px; padding: 0 28px; font-size: 17.5px; flex-shrink: 0; }

/* example searches: signs that point the way */
.p-search .search-signs { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 10px; max-width: 640px; }
.p-search .search-signs li { margin: 0; --sign: #f3e5c0; --tilt: -1.5deg; }
.p-search .search-signs li:nth-child(2) { --sign: var(--blue-soft); --tilt: 1.2deg; }
.p-search .search-signs li:nth-child(3) { --sign: var(--sage-soft); --tilt: -.8deg; }
.p-search .search-signs li:nth-child(4) { --sign: var(--brick-soft); --tilt: 1.6deg; }
.p-search .search-signs li:nth-child(5) { --sign: #efe2c2; --tilt: -1.2deg; }
.p-search .search-signs li:nth-child(6) { --sign: var(--blue-soft); --tilt: .8deg; }
.p-search .search-signs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 30px 0 18px;
  background: var(--sign);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  border-radius: 6px 0 0 6px;
  font: 600 16px/1 var(--f-display);
  color: var(--navy);
  rotate: var(--tilt);
  transform-origin: 0 50%;
}
.p-search .search-signs a::before { /* the nail */
  content: "";
  width: 7px; height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(29, 44, 76, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.p-search .search-signs a:hover { color: var(--navy); }
.p-search .search-signs a:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .p-search .search-signs a { transition: rotate .45s var(--spring), translate .45s var(--spring); }
  .p-search .search-signs a:hover { rotate: 0deg; translate: 5px 0; }
}

/* the crossroads painting in the hills */
.p-search main > .page-head .page-visual img { width: 100%; height: auto; }
@media (min-width: 900px) {
  .p-search main > .page-head .page-visual { margin-bottom: -60px; }
}
@media (prefers-reduced-motion: no-preference) {
  .p-search main > .page-head .page-visual img { animation: search-settle 1.1s var(--ease) both; }
}
@keyframes search-settle { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ---------- results ---------- */
.p-search .search-desk { padding: clamp(20px, 3vw, 40px) 0 clamp(30px, 4vw, 60px); }
.p-search .search-desk > .container { max-width: 960px; }
.p-search #search-status { margin: 0; font: 400 calc(26px * .9)/1.3 var(--f-hand); color: var(--gold-dark); }
.p-search #search-status:empty { display: none; }
.p-search .search-results { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.p-search .search-results li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 18px;
  align-items: center;
  margin: 0;
  padding: 20px 20px 20px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.p-search .search-results li::after { /* round arrow knob */
  content: "\2192";
  grid-column: 2; grid-row: 1 / span 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft);
  color: var(--navy);
  font: 20px var(--f-display);
}
.p-search .search-results li a { grid-column: 1; font: 600 clamp(19px, 1.8vw, 22px)/1.25 var(--f-display); color: var(--navy); }
.p-search .search-results li a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card is the link */
.p-search .search-results li a:hover { text-decoration: none; color: var(--navy); }
.p-search .search-results li a:focus-visible { outline: none; }
.p-search .search-results li:has(a:focus-visible) { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.p-search .search-results .search-type {
  grid-column: 1; grid-row: 2;
  justify-self: start;
  margin: 0;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-ink);
  font: 700 12.5px/1.4 var(--f-body);
  letter-spacing: .06em;
}
.p-search .search-results li p { grid-column: 1; margin: 2px 0 0; font-size: 16px; line-height: 1.55; color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .p-search .search-results li { animation: search-in .5s var(--spring) both; transition: translate .35s var(--spring), box-shadow .35s var(--ease); }
  .p-search .search-results li:nth-child(2) { animation-delay: .04s; } .p-search .search-results li:nth-child(3) { animation-delay: .08s; }
  .p-search .search-results li:nth-child(4) { animation-delay: .12s; } .p-search .search-results li:nth-child(5) { animation-delay: .16s; }
  .p-search .search-results li:nth-child(n+6) { animation-delay: .2s; }
  .p-search .search-results li::after { transition: background-color .25s, transform .35s var(--spring); }
  .p-search .search-results li:hover { translate: 0 -3px; box-shadow: var(--shadow-lift); }
  .p-search .search-results li:hover::after { background: var(--gold); transform: translateX(3px); }
}
@keyframes search-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- not finding it: the mailbox ---------- */
.p-search .search-lost {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  margin-top: clamp(34px, 4vw, 52px) !important;
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--gold-soft);
  border: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
.p-search .search-lost-plot { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow), 0 0 0 8px rgba(255, 252, 245, .5); }
.p-search .search-lost-plot img { width: 110px; height: auto; }
.p-search .search-lost h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 8px; }
.p-search .search-lost p { margin: 0; font-size: 17.5px; color: var(--text); }
.p-search .search-lost .card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .p-search .search-lost-plot { transition: transform .5s var(--spring); }
  .p-search .search-lost:hover .search-lost-plot { transform: translateY(-6px) rotate(-6deg); }
}

@media (max-width: 899px) {
  .p-search main > .page-head .page-visual { max-width: 420px; margin: 18px auto 0; }
}
@media (max-width: 640px) {
  .p-search .search-lost { grid-template-columns: 1fr; justify-items: start; }
  .p-search .search-lost-plot { width: 110px; height: 110px; }
  .p-search .search-lost-plot img { width: 80px; }
  .p-search .search-results li { padding: 18px 16px 18px 20px; gap: 6px 12px; }
  .p-search .search-results li::after { width: 36px; height: 36px; font-size: 17px; }
}
@media (max-width: 420px) {
  .p-search .search-form { border-radius: 26px; flex-direction: column; padding: 8px; }
  .p-search .search-form .btn { justify-content: center; }
  .p-search .search-signs a { font-size: 15px; padding: 0 26px 0 14px; }
}