/* 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:var(--blx-panel-4) !important;
  background-image:none !important;
  border-bottom:1px solid rgb(var(--blx-ink-rgb) / .13);
  /* the ledger: a second, fainter rule 4px below the bar */
  box-shadow:0 5px 0 -4px rgb(var(--blx-ink-rgb) / .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 rgb(var(--blx-ink-rgb) / .09),0 14px 30px -22px rgba(12,30,42,.45)}

/* ---------- wordmark ---------- */
#nav .nav-brand{
  font-family:'Libre Caslon Display',Georgia,serif !important;
  color:var(--blx-ink-night) !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:var(--blx-accent)}
#nav .nav-brand:hover{color:var(--blx-ink-night) !important}

/* ---------- desktop links ---------- */
@media(min-width:961px){
  #nav .nav-links{gap:22px !important}
  #nav .nav-links>li>a{
    color:rgb(var(--blx-ink-rgb) / .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:var(--blx-ink-night) !important}
  #nav .nav-links a::after{background:var(--blx-accent)}
  #nav .nav-dropdown-arrow{color:rgb(var(--blx-ink-rgb) / .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:var(--blx-accent);transition:width .3s ease;
  }
  #nav .nav-condos-stack>a:hover{background:none !important;color:var(--blx-ink-night) !important}
  #nav .nav-condos-stack>a:hover::after{width:100%}
}

/* ---------- the right cluster (inserted by blx-nav26.js) ---------- */
/* NO margin-left HERE. The bar is `justify-content:space-between` over three
   children, so the free space is already split into two equal gaps. A margin on
   the right cluster is added on top of its share, which pushed the whole
   imbalance into one place: measured at 1512px the gap after the wordmark was
   85px and the gap before SEARCH was 107px, and the difference was exactly this
   22px. Removing it makes both 96px, so the link block sits centred between the
   wordmark and the right cluster. */
#nav .blx-right{display:flex;align-items:center;gap:18px}
#nav .blx-right .blx-sicon{display:flex;align-items:center;color:var(--blx-ink);opacity:.8;transition:opacity .2s,color .2s}
#nav .blx-right .blx-sicon:hover{opacity:1;color:var(--blx-accent)}
#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:'Manrope',ui-monospace,monospace !important;
  font-size:10.5px !important;letter-spacing:.18em !important;
  color:rgb(var(--blx-ink-rgb) / .45) !important;cursor:pointer;padding:0 0 3px !important;
}
#nav .blx-right .lang-switch-top button.active{
  color:var(--blx-accent) !important;border-bottom:1px solid var(--blx-accent) !important;
}
#nav .blx-ghost{
  font-family:'Manrope',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 rgb(var(--blx-ink-rgb) / .3);color:var(--blx-ink);
  text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s;
}
#nav .blx-ghost:hover{background:rgb(var(--blx-ink-rgb) / .05);border-color:rgb(var(--blx-ink-rgb) / .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%);
  }
  /* MENU BUTTON ON THE RIGHT (Naor, 2026-07-27).
     It sat on the left, which is the old desktop habit. On a phone the right
     edge is where the thumb already is, and it is what Apple does: measured on
     apple.com in a 390px frame, their menu trigger sits 0px from the right edge
     and the logo 0px from the left. `order` puts it after .blx-right, which
     keeps its margin-left:auto doing the pushing for the whole cluster. */
  /* margin-left:auto lives HERE, on the burger, not on the language switch:
     the base .lang-switch-top rule sets margin:0 !important, so an auto margin
     declared on it is silently dropped. */
  #nav .nav-toggle{order:9;margin:18px 0 18px auto}
  #nav .nav-toggle span{background:var(--blx-ink) !important}
  #nav .nav-toggle.open span{background:var(--blx-accent) !important}
  /* With the burger on the right, keeping search + EN/ES there too crowded the
     centered wordmark: measured at a 316px viewport the cluster started at
     x=185 while the wordmark still ran to x=223, a 38px overlap. `display:
     contents` dissolves the cluster so the search icon can take the left edge
     the burger just vacated, which is also how Apple splits the bar. */
  #nav .blx-right{display:contents !important}
  #nav .blx-right .blx-sicon{order:-2}
  /* EN/ES joins the search icon on the left rather than sitting beside the
     burger: on the phone it read as part of the menu control (Naor, 2026-07-27).
     Right edge is now the burger alone, left edge is search + language. */
  #nav .blx-right .lang-switch-top{order:-1;margin-left:16px !important}
  /* Below ~334px the wordmark and EN/ES would still meet. Those phones drop the
     pair from the bar; the burger menu carries its own language switch. */
  @media(max-width:345px){#nav .blx-right .lang-switch-top{display:none !important}}
  #nav .blx-ghost{display:none}
  body:has(.nav-right.open) #nav .nav-brand{color:var(--blx-ink-night) !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:var(--blx-accent) !important;color:var(--blx-warm-white) !important;border:1px solid var(--blx-accent) !important;
  }
  #nav .nav-condos-stack>a:last-child{
    background:none !important;border:1px solid var(--blx-accent) !important;color:var(--blx-accent-deep) !important;
  }
  #nav .nav-condos-stack>a:first-child:hover{
    background:var(--blx-ink-night) !important;border-color:var(--blx-ink-night) !important;color:var(--blx-cream) !important;
  }
  #nav .nav-condos-stack>a:last-child:hover{
    background:var(--blx-accent) !important;border-color:var(--blx-accent) !important;color:var(--blx-warm-white) !important;
  }
  #nav .blx-ghost{border:0 !important;padding:11px 0 !important;border-radius:0 !important}
  #nav .blx-ghost:hover{background:none !important;color:var(--blx-accent) !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 rgb(var(--blx-ink-rgb) / .28);border-radius:999px;
  font-family:'Manrope',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:var(--blx-accent);border-color:var(--blx-accent);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}
}