/* Search-first homepage: one input, a map, and the results between them.
   Loaded only by Public_html/index.php. */

.search-home {
  padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
  background: linear-gradient(180deg, var(--surface2, #f6f5ff) 0%, transparent 100%);
}
.search-home-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}
.search-home h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.search-home-lead {
  margin: 0;
  color: var(--muted, #555);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  max-width: 60ch;
  margin-inline: auto;
}

/* ── the one input ───────────────────────────────────────────────────────── */
.search-home-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.search-home-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.search-home-field svg {
  position: absolute;
  left: 16px;
  color: var(--muted, #888);
  pointer-events: none;
}
.search-home-input {
  width: 100%;
  /* 16px keeps iOS from zooming the page on focus. */
  font: inherit;
  font-size: 16px;
  padding: 15px 16px 15px 46px;
  border: 1px solid var(--line, #e0ddf5);
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--text, #111);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px -22px rgba(0, 0, 0, .5);
  transition: border-color .16s, box-shadow .16s;
}
.search-home-input::placeholder { color: var(--muted, #8b8b95) }
.search-home-input:focus {
  outline: none;
  border-color: var(--brand, #7657ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #7657ff) 18%, transparent);
}
.search-home-submit {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: 14px;
  background: var(--brand, #7657ff);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .14s;
}
.search-home-submit:hover { opacity: .9 }

/* ── controls under the input ────────────────────────────────────────────── */
.search-home-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--line, #e0ddf5);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--muted, #555);
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .14s, background .14s, color .14s;
}
.search-chip:hover { border-color: var(--brand, #7657ff); color: var(--text, #111) }
.search-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--brand, #7657ff) 12%, transparent);
  border-color: var(--brand, #7657ff);
  color: var(--brand, #7657ff);
  font-weight: 600;
}
.search-chip--locate { font-weight: 600; color: var(--brand, #7657ff) }
.search-chip--locate[data-busy="true"] { opacity: .6; pointer-events: none }

.search-home-status {
  min-height: 20px;
  font-size: .85rem;
  color: var(--muted, #666);
}
.search-home-status[data-tone="error"] { color: #c0392b }

/* ── results + map ───────────────────────────────────────────────────────── */
.search-home-results {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px) clamp(24px, 4vw, 44px);
  display: grid;
  /* One column until there are results to put beside the map: an empty list
     panel only shoves the map off to one side. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.search-home-results.has-results {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}
.search-home-results:not(.has-results) .search-result-list {
  max-width: 640px;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .search-home-results, .search-home-results.has-results { grid-template-columns: 1fr }
}

.search-result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 860px) { .search-result-list { max-height: 300px } }

/* A row carries two actions: point the map at this place, and open its page.
   The first is the whole row, because that is what someone reading a list of
   nearby places wants; the second is a distinct control at the end, so leaving
   the page stays a deliberate choice rather than a mis-tap. */
.search-result {
  display: flex;
  align-items: stretch;
  /* The list is a scrolling flex column with a max height, so its children
     shrink to fit unless told not to. While the padding sat on the row itself
     that floor was the padding; it now sits on the button inside, leaving the
     row nothing but its border to stand on — every row collapsed to 2px. */
  flex: 0 0 auto;
  border: 1px solid var(--line, #eceaf6);
  border-radius: 11px;
  background: var(--surface, #fff);
  overflow: hidden;
  transition: border-color .14s, background-color .14s;
}
.search-result:hover { border-color: var(--brand, #7657ff) }

/* The row the map is currently showing. The rail reads at a glance down a
   scrolling list, where a border colour alone does not. */
.search-result.is-active {
  border-color: var(--brand, #7657ff);
  background: rgba(118, 87, 255, .07);
  box-shadow: inset 3px 0 0 var(--brand, #7657ff);
}

.search-result-locate {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 13px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.search-result-open {
  flex: 0 0 auto;
  width: 44px;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line, #eceaf6);
  color: var(--muted, #777);
  text-decoration: none;
  font-size: 15px;
  transition: color .14s, background-color .14s;
}
.search-result-open:hover {
  color: var(--brand, #7657ff);
  background: var(--surface2, #f4f4f6);
}
.search-result-locate:focus-visible,
.search-result-open:focus-visible {
  outline: 2px solid var(--brand, #7657ff);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .search-result, .search-result-open { transition: none }
}
.search-result-glyph {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 15px;
  background: var(--surface2, #f4f4f6);
}
.search-result-body { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.search-result-title {
  font-size: .93rem; font-weight: 600; color: var(--text, #111);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-result-meta {
  font-size: .78rem; color: var(--muted, #777);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.search-result-dist { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand, #7657ff) }

.search-home-map {
  height: 440px;
  border-radius: 14px;
  border: 1px solid var(--line, #e6e4f0);
  overflow: hidden;
  background: var(--surface2, #f4f4f6);
  z-index: 0; /* keep Leaflet panes under the sticky site header */
}
@media (max-width: 860px) { .search-home-map { height: 320px } }

.search-home-empty {
  padding: 26px 18px;
  text-align: center;
  color: var(--muted, #777);
  font-size: .9rem;
  border: 1px dashed var(--line, #e0ddf5);
  border-radius: 11px;
}

.search-home-marker {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  font-size: 12px;
}
.search-home-marker > span { transform: rotate(45deg) }

[data-theme="dark"] .search-home { background: linear-gradient(180deg, rgba(118,87,255,.08) 0%, transparent 100%) }
[data-theme="dark"] .search-result-glyph { background: rgba(255,255,255,.06) }

@media (prefers-reduced-motion: reduce) {
  .search-result, .search-home-input, .search-chip { transition: none }
}

/* The label for the one input is visible to screen readers only: the
   placeholder and the magnifier already say what the field is, and the
   platform has no such utility class of its own. */
.search-home .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}