/* BLX NAV 26 v4 — THE LEDGER on white (approved over the earlier masthead;
   preview: public/mockup-nav-preview.html, record: outputs/design-mockup-nav.html).
   One line, white always: Fraunces wordmark left, links (condos pair open),
   right cluster = search icon + quiet EN/ES + Sign In outline pill. Signature:
   the double hairline under the bar. This file RESKINS the existing #nav
   markup; blx-nav26.js arranges the row. Dropdowns / burger / language wiring
   untouched. Breakpoint 960px matches the site's nav breakpoint. */

#nav.nav{
  background:#FAF7F1 !important;
  background-image:none !important;
  border-bottom:1px solid rgba(26,58,74,.13);
  /* the ledger: a second, fainter rule 4px below the bar */
  box-shadow:0 5px 0 -4px rgba(26,58,74,.09);
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding:0 34px !important;
  transition:box-shadow .3s;
}
#nav.nav.scrolled{box-shadow:0 5px 0 -4px rgba(26,58,74,.09),0 14px 30px -22px rgba(12,30,42,.45)}

/* ---------- wordmark ---------- */
#nav .nav-brand{
  font-family:'Fraunces',Georgia,serif !important;
  color:#0C1E2A !important;text-shadow:none !important;
  font-size:19px !important;letter-spacing:.34em !important;font-weight:500 !important;
  padding:20px 0 16px;
}
#nav .nav-brand::after{content:'.';color:#B0895A}
#nav .nav-brand:hover{color:#0C1E2A !important}

/* ---------- desktop links ---------- */
@media(min-width:961px){
  #nav .nav-links{gap:22px !important}
  #nav .nav-links>li>a{
    color:rgba(26,58,74,.85) !important;text-shadow:none !important;
    font-size:11.5px !important;letter-spacing:.13em !important;font-weight:500 !important;
  }
  #nav .nav-links>li>a:hover{color:#0C1E2A !important}
  #nav .nav-links a::after{background:#B0895A}
  #nav .nav-dropdown-arrow{color:rgba(26,58,74,.55) !important}
  /* the right cluster carries search + language + sign in */
  #nav li.blx-signin,#nav li.blx-searchli{display:none !important}
  #nav .nav-right>.lang-switch{display:none !important}
  #nav .nav-right{display:flex;align-items:center}
  /* condos: the glass box becomes two plain row items */
  #nav .nav-condos-stack{
    flex-direction:row !important;gap:22px !important;
    border:0 !important;background:none !important;box-shadow:none !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    border-radius:0 !important;overflow:visible !important;
  }
  #nav .nav-condos-stack>a{
    padding:0 !important;font-size:11.5px !important;letter-spacing:.13em !important;
    border:0 !important;background:none !important;position:relative;
  }
  #nav .nav-condos-stack>a+a{border-top:0 !important}
  #nav .nav-condos-stack>a::after{
    display:block;content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
    background:#B0895A;transition:width .3s ease;
  }
  #nav .nav-condos-stack>a:hover{background:none !important;color:#0C1E2A !important}
  #nav .nav-condos-stack>a:hover::after{width:100%}
}

/* ---------- the right cluster (inserted by blx-nav26.js) ---------- */
#nav .blx-right{display:flex;align-items:center;gap:18px;margin-left:22px}
#nav .blx-right .blx-sicon{display:flex;align-items:center;color:#1A3A4A;opacity:.8;transition:opacity .2s,color .2s}
#nav .blx-right .blx-sicon:hover{opacity:1;color:#B0895A}
#nav .blx-right .lang-switch-top{
  display:flex !important;gap:9px;background:none !important;border:0 !important;
  border-radius:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important;
}
#nav .blx-right .lang-switch-top button{
  background:none !important;border:0 !important;border-radius:0 !important;
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:10.5px !important;letter-spacing:.18em !important;
  color:rgba(26,58,74,.45) !important;cursor:pointer;padding:0 0 3px !important;
}
#nav .blx-right .lang-switch-top button.active{
  color:#B0895A !important;border-bottom:1px solid #B0895A !important;
}
#nav .blx-ghost{
  font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:11px 18px;border-radius:999px;border:1px solid rgba(26,58,74,.3);color:#1A3A4A;
  text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s;
}
#nav .blx-ghost:hover{background:rgba(26,58,74,.05);border-color:rgba(26,58,74,.5)}

/* ---------- mobile (<=960): white bar, wordmark centered ---------- */
@media(max-width:960px){
  #nav.nav{padding:0 18px !important;gap:0 !important;justify-content:flex-start !important}
  #nav .nav-brand{
    position:absolute;left:50%;transform:translateX(-50%);
    font-size:16px !important;letter-spacing:.3em !important;padding:0;
    top:50%;transform:translate(-50%,-50%);
  }
  #nav .nav-toggle{order:0;margin:18px 0}
  #nav .nav-toggle span{background:#1A3A4A !important}
  #nav .nav-toggle.open span{background:#B0895A !important}
  #nav .blx-right{margin-left:auto;gap:14px}
  #nav .blx-ghost{display:none}
  body:has(.nav-right.open) #nav .nav-brand{color:#0C1E2A !important;text-shadow:none !important}
}

/* ---------- /search page: the sticky filter bar sits below the ledger bar
   instead of hiding behind the fixed nav ---------- */
.sx-bar{top:68px !important}
@media(min-width:1101px){.sx-mapcol{top:135px !important;height:calc(100dvh - 135px) !important}}
@media(max-width:960px){.sx-bar{top:58px !important}}

/* ---------- v5: the two Condos entries as pills (approved option B) ----------
   Sale is the filled brass pill (the money action), Rent the outline beside it.
   These rules sit at the end of the file on purpose: they share specificity with
   the plain-row rules above, so source order is what makes them win.
   Sign In is flattened to text here, otherwise the bar carries three competing
   pills and the least important one (Sign In) reads as loud as the primary. */
@media(min-width:961px){
  #nav .nav-condos-stack{gap:10px !important;align-items:center}
  #nav .nav-condos-stack>a{
    padding:9px 16px !important;border-radius:999px;
    font-weight:600 !important;letter-spacing:.12em !important;
    transition:background .2s,color .2s,border-color .2s;
  }
  #nav .nav-condos-stack>a::after{display:none !important} /* pills, so no underline */
  #nav .nav-condos-stack>a:first-child{
    background:#B0895A !important;color:#FFF9F0 !important;border:1px solid #B0895A !important;
  }
  #nav .nav-condos-stack>a:last-child{
    background:none !important;border:1px solid #B0895A !important;color:#96703F !important;
  }
  #nav .nav-condos-stack>a:first-child:hover{
    background:#0C1E2A !important;border-color:#0C1E2A !important;color:#F5F1E8 !important;
  }
  #nav .nav-condos-stack>a:last-child:hover{
    background:#B0895A !important;border-color:#B0895A !important;color:#FFF9F0 !important;
  }
  #nav .blx-ghost{border:0 !important;padding:11px 0 !important;border-radius:0 !important}
  #nav .blx-ghost:hover{background:none !important;color:#B0895A !important}
}

/* ---------- v6: Search becomes a labelled outline pill (approved option C) ----------
   Outline, not brass fill, on purpose: the two condos pills already own the
   brass in this bar, and a third solid element would flatten that hierarchy.
   On phones there is no room for the word, so it drops back to a bare icon. */
#nav .blx-right .blx-sicon{
  gap:8px;opacity:1;padding:9px 16px;
  border:1px solid rgba(26,58,74,.28);border-radius:999px;
  font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  transition:color .2s,border-color .2s;
}
#nav .blx-right .blx-sicon svg{width:15px;height:15px;flex:0 0 auto}
#nav .blx-right .blx-sicon:hover{color:#B0895A;border-color:#B0895A;background:none}
@media(max-width:960px){
  #nav .blx-right .blx-sicon{border:0;padding:0;gap:0}
  #nav .blx-right .blx-sicon span[data-lang]{display:none !important}
}