/* /home-search (functions/home-search.js). Layered on home.css so the page shares the homepage's header, menu,
   footer, Italiana/Lato type, square edges and slate-on-white colors. Always light, like the homepage.
   11/3/2026 rebuild: the MLS search sits inside an LS Realty frame; desktop opens it on the page, phones lead with
   the full-screen new-tab button because Matrix's filters are cramped inside a frame on a phone. */
.idx-page{color-scheme:light}
.idx-page .sr,.idx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.idx-page .hdr .brand{color:inherit}
.idx-page .hdr nav.main a[aria-current="page"]::after{right:0}
.idx-page main{display:block}

/* Intro: the homepage's eyebrow + display type on the mist band, under the fixed 66px header. */
.idx-intro{background:var(--mist);border-bottom:1px solid var(--line);padding:calc(66px + clamp(40px,6vw,76px)) 0 clamp(30px,4vw,48px)}
.idx-intro h1{font-size:clamp(40px,6.4vw,72px);letter-spacing:.12em}
.idx-intro .lede{max-width:620px;color:#3a3f45;margin:18px 0 0}
.idx-body{max-width:1440px;padding-top:clamp(24px,3.4vw,44px)}

/* The framed search */
.search-panel{background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(20,22,24,.08)}
.search-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:16px clamp(16px,2.4vw,28px);border-bottom:1px solid var(--line);background:#fff}
.search-brand{display:flex;align-items:center;gap:14px;min-width:0}
.search-brand img{width:40px;height:40px;flex:none;object-fit:contain}
.search-toolbar h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:.1em;margin:0 0 4px}
.search-toolbar p{margin:0;font-size:14.5px;line-height:1.5;color:var(--mute)}
/* The new-tab button: secondary on desktop (the search is right here), the main way in on phones. */
.idx-page .btn-dark{min-height:44px;padding:0 20px;border:1px solid var(--ink);background:transparent;color:var(--ink);white-space:normal;text-align:center}
.idx-page .btn-dark:hover,.idx-page .btn-dark:focus-visible{background:var(--ink);color:#fff}
.idx-page .btn-line{min-height:44px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.idx-page .btn-line:hover,.idx-page .btn-line:focus-visible{border-color:var(--ink);background:var(--ink);color:#fff}

.search-embed summary{cursor:pointer;display:flex;align-items:center;min-height:52px;padding:0 clamp(16px,2.4vw,28px);font:700 12px/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;list-style:none}
.search-embed summary::-webkit-details-marker{display:none}
.search-embed summary::after{content:"";width:8px;height:8px;margin-left:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.search-embed[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.search-embed summary:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.search-embed .when-open{display:none}.search-embed[open] .when-open{display:inline}.search-embed[open] .when-closed{display:none}
.search-embed[open] summary{border-bottom:1px solid var(--line)}
.idx-frame{position:relative;background:#fff;overflow:hidden}
.search-panel iframe{display:block;width:100%;border:0;background:#fff;height:min(82vh,960px);min-height:720px}

/* Loading veil + slow fallback */
.idx-loading{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fff;color:var(--mute);font:700 12px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase}
.search-embed[data-idx-state=loading] .idx-loading{display:flex}
.idx-spinner{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink);animation:idx-spin 1s linear infinite}
@keyframes idx-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.idx-spinner{animation:none;border-top-color:var(--gold)}}
.idx-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:clamp(32px,8vh,96px) clamp(20px,6vw,72px) 32px;background:#fff}
.idx-fallback[hidden]{display:none}
.idx-fallback h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:.08em}
.idx-fallback p{margin:0 0 8px;max-width:620px;color:#3a3f45}
.idx-actions{display:flex;flex-wrap:wrap;gap:12px}

.search-help{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--mute)}
.search-help a{color:var(--ink);text-underline-offset:3px}
.search-unavailable{padding:clamp(24px,4vw,44px)}
.search-unavailable h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.search-unavailable p{color:#3a3f45}

/* Next step band */
.search-next{padding:clamp(56px,8vw,96px) 0}
.search-next .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.search-next h2{font-size:clamp(30px,4.2vw,48px)}
.search-next p:not(.eyebrow){margin:14px 0 0;max-width:560px;color:#3a3f45}

.idx-page .ftr .legal p{max-width:980px}
.idx-page a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.idx-page .ftr a:focus-visible{outline-color:#fff}

/* Desktop: the search is the page. No collapse control once it is open. */
@media (min-width:761px){
  .search-embed[open] summary{display:none}
}
/* Phones */
@media (max-width:760px){
  .search-toolbar{padding:16px}
  .search-toolbar>.btn{width:100%;background:var(--ink);color:#fff;min-height:52px}
  .search-toolbar>.btn:hover,.search-toolbar>.btn:focus-visible{background:var(--slate);border-color:var(--slate)}
  .search-embed summary{padding:0 16px}
  .search-panel iframe{height:calc(100svh - 120px);min-height:560px}
  .idx-actions .btn{width:100%}
  .idx-fallback{padding:24px 16px}
  .search-next .btn-row{width:100%;flex-direction:column}
  .search-next .btn-row .btn{width:100%}
  .idx-body{padding-left:16px;padding-right:16px}
  .search-brand img{display:none}
}