/* ══════════════════════════════════════════════════════════
   PLAN A REALTY CORP. · Search Homes (search.html, 2026-10-08)
   Loads AFTER style.css and only adds what this page needs: a short hero, Alex's OneKey MLS
   IDX search in an iframe, the note about whose listings they are, and the call to action.
   Nav, burger, drawer, buttons, the dark CTA band and the footer live in style.css.
   No new colours: body copy --ink / --ink-2, quiet text --mute / --mute-2 (both pass AA on
   all three light grounds), small teal text only --teal-tx, the large hero accent --teal-lg.
   ══════════════════════════════════════════════════════════ */

/* anchors land below the fixed nav */
main [id]{scroll-margin-top:5.5rem}

/* ══ HERO ══ */
.shero{position:relative;padding:clamp(8.5rem,14vw,10.5rem) 0 clamp(2rem,4vw,2.6rem);overflow:hidden}
.shero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 64% at 84% 30%,rgba(9,178,149,.09),transparent 66%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 64px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
}
.shero .wrap{position:relative;z-index:1}
.shero__h1{font-size:clamp(2.5rem,6.6vw,4.6rem);margin:0 0 1.3rem;max-width:15ch}
/* no script on this page (BRAND-2026-10-08.md 3.2 and 6 list where the script goes): the accent stays in the
   headline face, in the large-text teal of the shared .ital rule, like /rent and the legal pages */
.shero__h1 .ital{font-family:var(--display);font-weight:700;font-size:1em;line-height:inherit;letter-spacing:-.012em;padding:0}
.shero__lede{font-size:clamp(1rem,1.6vw,1.13rem);color:var(--mute);max-width:62ch;margin:0}

/* ══ THE SEARCH ══
   Wider than .wrap (the map and the list need the room), with the same side gutter as .wrap on phones.
   The iframe gets a fixed height: Alex's height="100%" collapses inside a page (no parent height). 85% of the
   screen (80% on phones), so a strip of the page stays visible above or below it to scroll past the frame (a swipe
   that starts on the frame scrolls OneKey's search, not this page); svh where supported, so the phone's own
   toolbars never push the frame's foot off screen.
   2026-10-08 review: never taller than the screen minus 7rem (the fixed nav is about 5rem), so a phone in landscape
   or a short laptop screen keeps a strip of page to swipe or scroll on. The old 540 px / 480 px floors made the
   frame 185 to 245 px taller than the room under the nav on phones in landscape; the floor is now 260 px. */
.idx{width:min(100% - 2.5rem - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px),1400px);margin-inline:auto}
.idx__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;margin:0 0 .8rem}
.idx__tip{margin:0;font-size:.88rem;color:var(--mute-2)}
/* the phone tip only where it applies (a mouse and a fine pointer: the link alone, at the frame's right edge) */
@media (hover:hover) and (pointer:fine){ .idx__tip{display:none} .idx__bar{justify-content:flex-end} }
.idx__open{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:4px;transition:color .3s}
.idx__open svg{width:.95em;height:.95em;flex:none;fill:none;stroke:var(--teal-tx);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.idx__open:hover{color:var(--teal-tx)}
.idx__box{position:relative;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow)}
.idx__frame{display:block;width:100%;height:85vh;height:min(85vh,calc(100vh - 7rem));height:min(85svh,calc(100svh - 7rem));min-height:260px;max-height:1100px;border:0;background:var(--paper)}

/* A visually hidden name for the search region (screen readers move by heading and region) */
.idx__h{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}
/* "Skip past the search" + the Esc tip: OneKey's Filters dialog keeps Tab inside the frame, so this comes just
   before it. Hidden until it has focus, then a black chip over the frame's top-left corner. */
.idx__kbd{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}
.idx__kbd:focus-within{
  top:.75rem;left:.75rem;z-index:2;width:auto;height:auto;max-width:calc(100% - 1.5rem);margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;padding:.7rem 1rem;border-radius:10px;
  background:var(--ink);color:var(--paper);font-size:.9rem;line-height:1.45;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)
}
.idx__skip{color:var(--paper);font-weight:700;text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:4px}
.idx__skip:focus-visible{outline-color:var(--teal)}
.idx__kbdtip{color:rgba(255,255,255,.8)}

/* ══ WHOSE LISTINGS ══ (the target of "Skip past the search": focusable with tabindex="-1", so the next Tab goes on
   from here; the box shows the focus instead of the full-width section) */
.idx-note{padding:clamp(2.2rem,5vw,3.2rem) 0 clamp(3.6rem,8vw,5.5rem)}
.idx-note:focus{outline:none}
.idx-note:focus-visible .idx-note__box{outline:2px solid var(--teal-tx);outline-offset:3px}
.idx-note__h{margin:0 0 .45rem;font-family:var(--sans);font-size:1rem;font-weight:700;line-height:1.4;letter-spacing:0;color:var(--ink)}
.idx-note__box{max-width:72ch;padding:1.15rem 1.35rem;border-left:2px solid var(--teal);border-radius:0 10px 10px 0;background:var(--paper-2)}
.idx-note__box p{margin:0 0 .7em;font-size:.95rem;line-height:1.65;color:var(--ink-2)}
.idx-note__box p:last-child{margin-bottom:0}
.idx-note__box a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:4px;transition:color .3s}
.idx-note__box a:hover{color:var(--teal-tx)}

@media (max-width:760px){
  .shero{padding-top:7.5rem}
  .idx__bar{flex-direction:column;align-items:flex-start}
  /* phones: a little shorter, so more of the page shows to swipe past the frame */
  .idx__frame{height:80vh;height:min(80vh,calc(100vh - 7rem));height:min(80svh,calc(100svh - 7rem))}
}