/* Condos of LA - shared stylesheet for the Buy and Rent pages.
   Loaded by buy.html and rent.html after assets/site.css.
   Behaviour lives in assets/idx.js. */
:root{--ink:#171514;--paper:#ffffff;--greige:#f4f1ec;--muted:#6b665a;--line:#e4e0d8;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--hh:76px;--th:66px;}
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.5;}
  a{text-decoration:none;color:inherit;}
  header{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--line);height:var(--hh);}
  header .bar{max-width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:var(--hh);gap:20px;}
  header nav{display:flex;align-items:center;gap:28px;}
  header nav a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;transition:opacity .2s;}
  header nav a:hover{opacity:.55;}
  header nav a.active{border-bottom:1px solid var(--ink);padding-bottom:3px;}
  .logo{display:flex;align-items:center;gap:9px;color:var(--ink);}
  .logo .emblem{width:30px;height:30px;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:15px;}
  .logo .word{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1;}
  .logo .word .of{font-style:italic;font-weight:500;}
  .hdr-right{display:flex;align-items:center;gap:24px;}
  .btn-contact{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;padding:9px 20px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;transition:all .25s;cursor:pointer;font-family:var(--sans);}
  .btn-contact:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

  .toolbar{position:sticky;top:var(--hh);z-index:80;background:var(--ink);color:#fff;height:var(--th);display:flex;align-items:center;gap:12px;padding:0 30px;overflow-x:auto;}
  .toolbar .seg{display:inline-flex;background:rgba(255,255,255,.1);border-radius:999px;padding:4px;gap:3px;flex-shrink:0;}
  .toolbar .seg a{text-decoration:none;display:inline-block;border:none;background:none;color:rgba(255,255,255,.6);font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:8px 18px;border-radius:999px;cursor:pointer;transition:all .2s;}
  /* Inactive pill brightens on hover. The active pill is a white pill with
     ink text, so it must not be caught by this rule. */
  .toolbar .seg a:not(.on):hover{color:#fff;}
  .toolbar .seg a.on{background:#fff;color:var(--ink);}
  .toolbar select{flex-shrink:0;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;font-family:var(--sans);font-weight:300;font-size:13.5px;padding:10px 30px 10px 13px;outline:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
  .toolbar select option{color:#171514;}
  .toolbar .priceinp{flex-shrink:0;width:104px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;font-family:var(--sans);font-weight:300;font-size:13.5px;padding:10px 13px;outline:none;}
  .toolbar .priceinp::placeholder{color:rgba(255,255,255,.55);}
  .toolbar .priceinp:focus{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);}
  .toolbar .spacer{flex:1;}
  .toolbar .count{flex-shrink:0;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.75);white-space:nowrap;}
  .toolbar .status{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;}
  .toolbar .status .dot{width:7px;height:7px;border-radius:50%;background:#d8b26a;animation:pulse 1.8s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
  .maptoggle{display:none;}

  /* Controls that only mean something once a real feed is behind them.
     body.idx-pending hides them; they return automatically when IDX goes live. */
  body.idx-pending .toolbar .filter{display:none;}
  /* assets/site.js upgrades <select data-msel> by WRAPPING it in a new
     div.msel, and that wrapper does not carry the .filter class. Hide it too
     or an inert dropdown stays on screen in the placeholder state. */
  body.idx-pending .toolbar .msel{display:none;}
  body.idx-pending .toolbar .count{display:none;}
  body:not(.idx-pending) .toolbar .status{display:none;}

  .split{display:flex;align-items:flex-start;}
  .list{flex:1 1 58%;padding:24px 30px 60px;min-width:0;}
  .list .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
  .card{display:block;cursor:pointer;}
  .card .ph{position:relative;height:210px;background:#e7e3db center/cover no-repeat;overflow:hidden;}
  .card .ph .tag{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);color:var(--ink);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;}
  .card:hover .ph{filter:brightness(.95);}
  .card .info{padding:14px 2px 0;}
  .card .price{font-family:var(--serif);font-weight:600;font-size:23px;margin-bottom:4px;}
  .card .specs{font-size:13px;color:var(--ink);margin-bottom:6px;}
  .card .addr{font-size:13px;color:var(--muted);}
  .card .bldg{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
  .empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0;}

  /* ── Placeholder state ─────────────────────────────────────────── */
  .notice{border:1px solid var(--line);background:var(--greige);padding:18px 22px;margin-bottom:26px;font-size:14px;color:var(--muted);line-height:1.65;}
  /* h1 AND h2. The notice used to carry its own <h1>, which meant buy and
     rent shipped two h1 elements — the notice's and the live grid's .idx-h1 —
     with CSS hiding whichever state was not current. Both were in the DOM
     either way, and a page with two h1s saying the same thing is a page a
     crawler has to guess about. The notice's is an h2 now; the selector keeps
     both so the styling holds whichever it is. */
  .notice h1,.notice .notice-h{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.01em;line-height:1.2;}
.notice p{margin-bottom:0;}
.notice p + p{margin-top:9px;}
  .notice a{border-bottom:1px solid var(--muted);}
  .notice a:hover{color:var(--ink);border-color:var(--ink);}
  @keyframes shimmer{0%{background-position:-420px 0;}100%{background-position:420px 0;}}
  .sk{cursor:default;pointer-events:none;}
  .sk .ph,.sk .ln{background-color:#eceae5;background-image:linear-gradient(90deg,#eceae5 0%,#f7f5f1 42%,#eceae5 84%);background-size:420px 100%;background-repeat:no-repeat;animation:shimmer 1.4s linear infinite;}
  .sk .ln{height:12px;margin-bottom:9px;border-radius:2px;}
  .sk .ln.t{height:23px;width:42%;margin-bottom:12px;}
  .sk .ln.a{width:72%;}
  .sk .ln.b{width:88%;}
  .sk .ln.c{width:54%;margin-bottom:0;}
  .map-pending{width:100%;height:100%;background:var(--greige);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 34px;gap:14px;}
  .map-pending .emblem{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:22px;color:var(--muted);background:var(--paper);}
  .map-pending p{font-size:13.5px;color:var(--muted);max-width:280px;line-height:1.6;}

  /* THE COLUMN, not the map. It runs the full height of the results and only
     holds the padding; .mapstick below is what actually sticks.

     Previously .mapcol was itself the sticky element, and that made both ends
     wrong. Its top padding travelled with it, so the only way to push the map
     down to meet the first listing photo was to push it down under the toolbar
     for the whole scroll as well. And its travel ended at .split's bottom edge,
     which is .list's 60px tail — so the map ran on past the last listing and
     the MLS disclaimer into the empty space below.

     Stretched to the column, the padding does the work at both ends: top
     aligns the map with the first photo, bottom stops it level with the last
     line of the listings. padding-right is the same 30px gutter the header and
     toolbar use. The top value here is a starting guess; assets/idx.js
     overwrites it once the frame reports where its first photo actually is. */
  .mapcol{flex:0 0 42%;align-self:stretch;box-sizing:border-box;
          padding:112px 30px 60px 0;}
  /* Placeholder and outage states have no results frame, so nothing ever
     reports a first photo to line up with and the 112px would just drop the
     map below the notice for no reason. Back to the plain 24px gutter. */
  body.idx-pending .mapcol{padding-top:24px;}
  /* max-height:100% is the short-results case: two listings make a column
     shorter than the viewport, and without the clamp a fixed-height map hangs
     out of the bottom of it. Clamped, the map simply matches however much
     there is to show — which is the behaviour being asked for anyway. The
     min-height keeps it usable when a filter matches almost nothing. */
  .mapstick{position:sticky;top:calc(var(--hh) + var(--th) + 24px);
            height:calc(100vh - var(--hh) - var(--th) - 48px);
            max-height:100%;min-height:340px;}
  #map{width:100%;height:100%;background:#e9e5dd;}
  .price-pin span{display:inline-block;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:500;font-size:12px;padding:5px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3);border:1px solid #fff;}
  .price-pin.active span{background:#fff;color:var(--ink);border-color:var(--ink);}
  .leaflet-popup-content{font-family:var(--sans);font-weight:300;margin:12px 14px;}
  .leaflet-popup-content .pp{width:190px;}

  /* IDX BROKER DOES NOT INJECT ITS MARKUP HERE, whatever the comment that
     used to sit at this spot said. #idx-mount holds exactly two things, both
     built by idx.js: the cross-origin <iframe class="idx-frame">, and the
     .idx-down notice shown when the MLS cannot be reached. No IDX element is
     ever a descendant of it.
     Two font rules lived here and have been removed:
       #idx-mount,#idx-mount *      {font-family:var(--sans)!important}
       #idx-mount .IDX-resultsPrice,
       #idx-mount .IDX-panel-title  {font-family:var(--serif)!important}
     They were copied from the .idx-embed block when /search was split into
     /buy and /rent (47d5e1b05). On building pages .idx-embed really does hold
     inline IDX markup and the pair is correct; here the markup is behind an
     iframe boundary, so the second rule could never match anything.
     THE FIRST RULE WAS WORSE THAN DEAD. Its only living target was the
     .idx-down notice, and !important beats a plain declaration regardless of
     specificity - so it silently overrode .idx-down-h's own
     font-family:var(--serif) and rendered the "Listings are temporarily
     unavailable" heading in sans. Removing it restores the serif that rule
     always asked for.
     To style what is INSIDE the frame, edit assets/idx-broker-custom.css and
     paste it into IDX Broker's control panel. Nothing in this file can reach
     across the frame boundary. */
  #idx-mount{display:none;}
  body.idx-live #idx-mount{display:block;}
  body.idx-live .grid{display:none;}
  body.idx-live .notice{display:none;}

  @media (max-width:980px){
    .list{flex-basis:100%;}
    .list .grid{grid-template-columns:1fr 1fr;}
    /* Full screen under the header, so neither the column padding nor the
       sticky offset applies — the map IS the view here. */
    .mapcol{display:none;position:fixed;inset:var(--hh) 0 0 0;height:auto;z-index:85;flex-basis:auto;padding:0;align-self:auto;}
    .mapstick{position:static;height:100%;max-height:none;min-height:0;}
    body.showmap .mapcol{display:block;}
    body.showmap .list{display:none;}
      .maptoggle{display:inline-flex;position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:95;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:13px 24px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.3);}
    /* The map overlay is fixed to the viewport and the list is hidden behind
       it, so the page collapses to almost nothing and the footer ends up
       sitting under a full-screen map, reachable by a scroll that looks like
       a bug. It comes back with the list. */
    body.showmap footer{display:none;}
  }

  /* .wrap is defined in building.css and neighborhood.css, and buy and rent
     load neither — they were the only two pages on the site with no container
     rule at all, which did not matter until they had a footer to put in one.
     Same numbers as the original so the footer lines up with every other
     page's. */
  .wrap{max-width:1280px;margin:0 auto;padding:0 40px;}
  /* The burger. Buy and rent were the only two pages on the site without one:
     they had no .menu-toggle in their markup and no rule to reveal it, so the
     560px rule below simply hid the nav and left nothing in its place. The
     way out of the page was Sign in, Contact and a heart — three things that
     open modals, and no route to Buildings, Neighborhoods or Sell.

     960px, not 980 or 560, because that is where every other page hands over,
     and the point is that these two stop being the odd ones out. .hdr-right
     goes with the nav: site.js inserts the favourites heart INTO .hdr-right,
     so hiding that one box takes the heart, Sign in and Contact together, and
     all three reappear inside the drawer, which site.js already builds and
     wires up on every page. */
  .menu-toggle{display:none;background:none;border:none;color:inherit;cursor:pointer;}
  @media (max-width:960px){
    header nav,.hdr-right{display:none;}
    .menu-toggle{display:inline-flex;}
  }
  /* On a narrow toolbar the status text used to clip mid-word
     ("FOR SALE - MLS FEED CO..."). Drop the mode prefix instead. */
  @media (max-width:560px){.list .grid{grid-template-columns:1fr;}.toolbar{gap:8px;}.toolbar .status{font-size:10px;letter-spacing:.09em;}.toolbar .status-mode{display:none;}}

/* ── Live IDX frame + map pins ──────────────────────────────────────────────
   Added when /buy and /rent moved from placeholder to a filtered IDX results
   frame. The frame reports its own height, so nothing here sets one. */
body.idx-live .idx-h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px; font-weight: 600; color: #171514;
  margin: 0 0 18px; letter-spacing: -.005em;
}
body.idx-pending .idx-h1 { display: none; }   /* the notice carries its own */

/* Price pins. A label rather than a teardrop: on a listings map the number is
   the thing being compared, and a pin you have to click to price is a pin you
   have to click twice. */
.idx-pin span {
  display: inline-block;
  background: #171514; color: #fff;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0,0,0,.3);
  transform: translate(-50%, -100%);
  cursor: pointer;
}
.idx-pin span:hover { background: #4a4336; }

/* "Search this area" — appears over the map once the visitor has moved it.
   A button rather than an automatic reload on drag: every search is a full
   frame reload, and a map that reloads while you are still moving it cannot
   be used. */
.idx-searcharea {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  z-index: 500;
  background: #171514; color: #fff; border: 0; cursor: pointer;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.idx-searcharea:hover { background: #4a4336; }
.idx-searcharea[hidden] { display: none; }
/* NO position here. The button is appended alongside #map, inside .mapstick,
   which is position:sticky — and sticky already establishes a containing
   block, so the button positions against it without help. Adding
   position:relative to the sticky box would override it and the map would
   start scrolling away with the list. */

/* The centred logo is out of flow, so the nav groups slide under it before
   the 960px breakpoint rescues them: measured, they collide from 1010px down.
   Same header treatment as mobile, started early enough to prevent it. */
@media (min-width:961px) and (max-width:1080px){header nav,.hdr-right{display:none;}.menu-toggle{display:inline-flex;}}

/* Shown in place of the listings frame when IDX does not answer. Styled like
   the rest of the page rather than as an error box: it is usually a brief
   outage at their end, and a red alarm overstates it. */
.idx-down{display:none;padding:64px 30px;text-align:center;max-width:520px;margin:0 auto;}
.idx-down-h{font-family:var(--serif),Georgia,serif;font-size:22px;color:var(--ink);margin:0 0 10px;}
.idx-down-p{font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.65;color:var(--muted);margin:0 0 22px;}
.idx-down-a{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;align-items:center;margin:0;}
.idx-down-a a,.idx-retry{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.idx-retry{background:var(--ink);color:#fff;border:0;border-radius:999px;padding:11px 22px;cursor:pointer;}
.idx-down-a a{border-bottom:1px solid var(--line);padding-bottom:2px;text-decoration:none;}