/* header.css V002 | 2026-10-08 search dropdown added at the end. V001 | 2026-10-08 | Jorge approved Home_Hero_V004 (home page) and Property_Header_Option_B_V002 (every other page).
   Inter for the nav, the search bars and the agent card only; the rest of the site keeps its fonts.
   Home page: header sits over the hero video, white logo and menu, turns into the normal white header once the page scrolls (site.js).
   Every other page (Option B): search bar right of the logo, only Meet the Team and Home Loans in the top bar, the rest in the hamburger menu. */
.hdr .wrap{max-width:none;padding:0 28px;gap:22px}
.hdr__logo{flex:none;display:flex;align-items:center}
.hdr__logo img{height:64px;width:auto}
.hdr__lw{display:none}
.hdr .nav>li>a{font:500 16px/1.2 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#111;padding:8px 9px;white-space:nowrap}
.hdr .nav>li>a:hover{opacity:.72}
/* down arrows only on menu items that have a dropdown */
.nav>li:has(>ul)>a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.nav>li:last-child>ul{left:auto;right:0}

/* search bar next to the logo */
.hsrch{display:flex;align-items:center;gap:8px;width:440px;flex:0 1 440px;min-width:0;background:#f4f4f4;border:1px solid #e3e3e3;border-radius:12px;padding:5px 5px 5px 16px}
.hsrch input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:400 15px Inter,system-ui,sans-serif;color:#222;padding:8px 0}
.hsrch input::placeholder{color:#777}
.hsrch>button{flex:none;width:40px;height:40px;border:0;border-radius:9px;background:#000;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hsrch:focus-within{border-color:#111;background:#fff}

/* home page: over the hero */
body.v-home .hdr{position:fixed;left:0;right:0;top:0;height:96px;background:transparent;border-bottom:1px solid transparent;transition:background .25s,height .25s,border-color .25s,box-shadow .25s}
body.v-home .hdr .hdr__logo img{height:56px}
body.v-home .hdr .nav>li>a{font-size:17px;padding:8px 12px}
body.v-home .hdr:not(.solid) .hdr__lw{display:block}
body.v-home .hdr:not(.solid) .hdr__lb{display:none}
body.v-home .hdr:not(.solid) .nav>li>a{color:#fff}
body.v-home .hdr:not(.solid) .burger span{background:#fff}
body.v-home .hdr:not(.solid) .acct__in{background:transparent;border-color:#fff;color:#fff}
body.v-home .hdr:not(.solid) .acct__in:hover{background:#fff;color:#111}
body.v-home .hdr:not(.solid) .acct__me{color:#fff}
body.v-home .hdr:not(.solid) .acct__me:hover{background:rgba(255,255,255,.14)}
body.v-home .hdr.solid{height:84px;background:#fff;border-bottom-color:#f0ece5;box-shadow:0 2px 14px rgba(0,0,0,.05)}

@media (max-width:1100px){
  .hdr__logo img,body.v-home .hdr .hdr__logo img{height:46px}
  .hsrch{flex:1 1 auto;width:auto;max-width:440px}
}
@media (max-width:760px){
  .hdr .wrap{padding:0 14px;gap:10px}
  body.v-home .hdr,body.v-home .hdr.solid{height:var(--hdr)}
  .hdr__logo img,body.v-home .hdr .hdr__logo img{height:38px}
  .hsrch{padding:3px 3px 3px 10px;border-radius:10px}
  .hsrch input{font-size:14px;padding:7px 0}
  .hsrch>button{width:34px;height:34px;border-radius:8px}
  .acct__in{padding:8px 12px}
}
@media (max-width:420px){.hdr__logo img{height:32px}}

/* search dropdown V001 (Jorge 2026-10-08, Zillow screenshot): opens when someone clicks into a search box (searchdrop.js) */
.hsearch__bar,.hsrch,.sx-q{position:relative}
.vhero--new{overflow:visible}
.sdrop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:90;background:#fff;border-radius:16px;box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.18);padding:6px 0;max-height:min(62vh,560px);overflow-y:auto;text-align:left;font-family:Inter,system-ui,sans-serif}
.sdrop[hidden]{display:none}
.sdrop__row{display:flex;align-items:center;gap:14px;width:100%;border:0;background:#fff;padding:12px 20px;text-align:left;font:400 16px/1.3 Inter,system-ui,sans-serif;color:#1d1d1d;cursor:pointer}
.sdrop__row svg{flex:none;color:#2a2a2a}
.sdrop__row:hover,.sdrop__row.on{background:#f2f5f8}
.sdrop__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdrop__t small{color:#777;font-size:13px;margin-left:4px}
.sdrop__h{background:#ececee;color:#4a4a52;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;padding:12px 20px;margin:4px 0}
.sdrop__note{padding:16px 20px;font:400 15px/1.4 Inter,system-ui,sans-serif;color:#333}
.hsrch .sdrop{left:-1px;right:auto;width:max(100%,460px)}
.sx-q .sdrop{top:46px;width:max(100%,420px)}
@media (max-width:760px){
  .hsrch .sdrop{position:fixed;left:8px;right:8px;width:auto;top:calc(var(--hdr) + 4px)}
  .sx-q .sdrop{width:100%}
  .sdrop__row{padding:12px 16px;font-size:15px}
  .sdrop__h{padding:11px 16px}
}