/* ==========================================================================
   lc-listings.css — Zillow-style split-screen map directory for /listings/
   Paired with lc-listings.js. Full-bleed shell CSS is injected by the
   mu-plugin (lc-listing-directory.php); this file styles the app itself.
   Clean/serif aesthetic — inherits the theme body font, serif price accents.
   ========================================================================== */

.lc-app {
  --lc-ink:      #1d2721;
  --lc-muted:    #6b7772;
  --lc-line:     #e3e6e3;
  --lc-bg:       #ffffff;
  --lc-bg-soft:  #f6f7f5;
  --lc-accent:   #2f6f57;   /* lowcountry green */
  --lc-gold:     #b8863b;   /* featured accent  */
  --lc-shadow:   0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --lc-bar-h:    64px;

  box-sizing: border-box;
  color: var(--lc-ink);
  background: var(--lc-bg);
  font-size: 15px;
  line-height: 1.4;
}
.lc-app *, .lc-app *::before, .lc-app *::after { box-sizing: border-box; }

/* ---- Filter / header bar ------------------------------------------------ */
.lc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: var(--lc-bar-h);
  padding: 10px 16px;
  background: var(--lc-bg);
  border-bottom: 1px solid var(--lc-line);
  position: relative;
  z-index: 500;
}
.lc-bar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-bar__spacer { flex: 1 1 auto; }

.lc-app input[type="text"],
.lc-app input[type="number"],
.lc-app select {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--lc-line);
  border-radius: 8px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.lc-app input[type="number"] { width: 104px; }
.lc-app input:focus, .lc-app select:focus { border-color: var(--lc-accent); }
.lc-search { min-width: 200px; flex: 1 1 220px; }

.lc-count {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  color: var(--lc-ink);
}

.lc-btn {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--lc-line);
  border-radius: 8px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lc-btn:hover { background: var(--lc-bg-soft); }
.lc-btn--primary { background: var(--lc-accent); border-color: var(--lc-accent); color: #fff; }

/* Filters toggle + mobile Map/List toggle — hidden on desktop */
.lc-filters-toggle,
.lc-viewtoggle { display: none; }

/* ---- Split panes -------------------------------------------------------- */
.lc-panes {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 220px);   /* JS overrides with a measured value */
  min-height: 480px;
}
.lc-list {
  width: 42%;
  min-width: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--lc-bg-soft);
  border-right: 1px solid var(--lc-line);
}
.lc-map {
  flex: 1 1 auto;
  width: 58%;
  min-height: 300px;
  background: #dfe4e2;
}

/* ---- Cards grid --------------------------------------------------------- */
.lc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}
@media (max-width: 1200px) { .lc-cards { grid-template-columns: 1fr; } }

.lc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lc-bg);
  border: 1px solid var(--lc-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lc-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.lc-card:hover,
.lc-card.is-active {
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  transform: translateY(-2px);
}
.lc-card.is-active { outline: 2px solid var(--lc-accent); outline-offset: -2px; }

.lc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #e7eae8;
  overflow: hidden;
}
.lc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lc-card__noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted);
  font-size: 13px;
  background: var(--lc-bg-soft);
}
.lc-card__ribbon {
  position: absolute;
  top: 10px; left: 0;
  background: var(--lc-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0 4px 4px 0;
  box-shadow: var(--lc-shadow);
}
.lc-card__body { padding: 10px 12px 12px; }
.lc-card__price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--lc-ink);
  line-height: 1.1;
}
.lc-card__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--lc-ink);
}
.lc-card__meta b { font-weight: 700; }
.lc-card__addr {
  margin-top: 6px;
  font-size: 13px;
  color: var(--lc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-card__sub {
  font-size: 12px;
  color: var(--lc-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: 2px;
}

/* ---- List states / footer ---------------------------------------------- */
.lc-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--lc-muted);
  font-size: 15px;
}
.lc-loadmore-wrap { padding: 4px 16px 20px; text-align: center; }
.lc-attr {
  padding: 14px 16px 22px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lc-muted);
  border-top: 1px solid var(--lc-line);
}
.lc-spinner { padding: 18px; text-align: center; color: var(--lc-muted); font-size: 13px; }

/* ---- Price-bubble markers (L.divIcon) ----------------------------------
   Leaflet transforms the wrapper element to position it, so the wrapper is
   given zero size and the visible pill is an inner span centered on the
   coordinate via its own translate(-50%,-50%). */
.lc-marker-wrap { background: none !important; border: none !important; width: 0; height: 0; }
.lc-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: 3px 9px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.lc-marker--featured {
  background: var(--lc-gold);
  color: #fff;
  border-color: var(--lc-gold);
}
.lc-marker--active {
  transform: translate(-50%, -50%) scale(1.18);
  z-index: 1000 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  background: var(--lc-accent);
  color: #fff;
  border-color: var(--lc-accent);
}
/* ---- Zillow-style marker popup card ------------------------------------ */
.lc-pop .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.lc-pop .leaflet-popup-content {
  margin: 0;
  width: 212px !important;
  line-height: 1.35;
}
.lc-pop a.lc-pop__card,
.lc-pop__card {
  display: block;
  text-decoration: none;
  color: var(--lc-ink);
  cursor: pointer;
}
.lc-pop__media {
  width: 100%;
  height: 132px;
  background: var(--lc-bg-soft);
  overflow: hidden;
}
.lc-pop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-pop__media--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted); font-size: 12px;
}
.lc-pop__body { padding: 8px 11px 10px; }
.lc-pop__price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; font-weight: 700; line-height: 1.1;
  color: var(--lc-ink);
}
.lc-pop__meta { font-size: 12.5px; color: var(--lc-ink); margin-top: 3px; }
.lc-pop__meta b { font-weight: 700; }
.lc-pop__addr {
  font-size: 12px; color: var(--lc-muted); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lc-pop__cta {
  margin-top: 7px;
  font-size: 12px; font-weight: 700;
  color: var(--lc-accent);
  letter-spacing: .01em;
}
.lc-pop__card:hover .lc-pop__cta { text-decoration: underline; }
.lc-pop__state { padding: 20px 16px; text-align: center; color: var(--lc-muted); font-size: 13px; }
/* Legacy popup classes (unused now, harmless) */
.lc-pop-price { font-weight: 700; font-size: 15px; }
.lc-pop-meta { font-size: 13px; color: #555; margin-top: 2px; }

/* ---- Mobile: FIXED bottom action bar + single pane --------------------- */
@media (max-width: 960px) {
  .lc-app {
    --lc-bar-h: auto;
    /* Clearance for the site-wide mobile bottom nav that this app's bar sits directly ABOVE.

       The default is the home-indicator inset and nothing else, because the default is the
       case where NO BAR EXISTS: lc-mobile-nav.js adds html.lc-bottombar-on only once it has
       actually built one, so if that script fails or is blocked there is nothing to clear and
       reserving a bar's height would be dead space above an empty edge.

       The gated rule below is the same convention lc-mobile-nav.css uses for its own body
       padding, and it is used here rather than `var(--lc-bottombar-h, …)` for a reason worth
       stating: that variable is declared on :root as a static 56px, so it is ALWAYS defined
       and a var() fallback written against it is unreachable. Writing it that way silently
       dropped the env() inset and left an iPhone's app bar 34px too low until the measurement
       landed. */
    --lc-sitenav-h: env(safe-area-inset-bottom, 0px);
  }

  /* The measured height, which already includes the safe-area inset — so this must NOT add
     env() a second time. The copy that used to sit here said 56px and was wrong wherever a
     directory hands a control into the shared bar's tools row, which grows it: measured at
     414, the shared bar was 105px and a docked app bar sat 49px inside it, hiding the whole
     of its last wrapped line. A constant kept in sync by hand is a constant that will not
     be. */
  html.lc-bottombar-on .lc-app { --lc-sitenav-h: var(--lc-bottombar-h); }

  .lc-filters-toggle { display: inline-flex; align-items: center; flex: 0 0 auto; }
  .lc-viewtoggle {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--lc-line);
    border-radius: 8px;
    overflow: hidden;
  }
  .lc-viewtoggle button {
    border: 0;
    background: var(--lc-bg);
    color: var(--lc-ink);
    font: inherit; font-size: 14px;
    padding: 8px 16px;
    cursor: pointer;
  }
  .lc-viewtoggle button.is-on { background: var(--lc-accent); color: #fff; }

  /* ---- The bar, re-cast as an app-style fixed bottom action bar ---------
     Pinned to the bottom of the viewport, docked directly above the site's
     own mobile bottom nav (fixed at bottom:0). Two compact rows stacked in a
     column: [Filters · search] then [count · List/Map]. Nothing is pushed
     down from the top anymore — the map/list get the full height above. */
  .lc-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--lc-sitenav-h);
    z-index: 980;                       /* above the map, below site nav (985) */

    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 8px 12px;

    border-bottom: 0;
    border-top: 1px solid var(--lc-line);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  }

  /* Row 1: Filters button + search (search fills the rest). 16px font keeps
     iOS Safari from zooming the viewport on focus. */
  .lc-search { flex: 1 1 auto; min-width: 0; font-size: 16px; }

  /* Kill the desktop spacer inside the column layout. */
  .lc-bar__spacer { display: none; }

  /* Row 2 (last group): count on the left, List/Map toggle on the right. */
  .lc-bar > .lc-bar__group:last-child {
    width: 100%;
    justify-content: space-between;
  }
  .lc-count { font-size: 13px; }

  /* Filters expand UPWARD as an overlay panel off the bar's top edge. The bar
     is position:fixed, so it is this panel's containing block and bottom:100%
     lands exactly on the bar's top — the base bar height stays constant. */
  .lc-bar__group--filters {
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 12px;
    background: var(--lc-bg);
    border-top: 1px solid var(--lc-line);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, .12);
    display: none;
  }
  .lc-bar.is-open .lc-bar__group--filters { display: flex; }
  .lc-bar__group--filters select,
  .lc-bar__group--filters input[type="number"] { width: 100%; font-size: 16px; }

  /* ---- Panes: single view; height is set in px by sizePanes() -----------
     The calc() below is only a pre-JS fallback (≈ theme header + this bar +
     site nav). JS overrides it with a measured value and calls
     invalidateSize(), so the map always gets a correct height. */
  .lc-panes {
    display: block;
    height: calc(100vh - 220px);
    min-height: 0;
  }
  .lc-list, .lc-map {
    width: 100%;
    border-right: 0;
  }
  .lc-panes[data-view="list"] .lc-map  { display: none; }
  /* The list is NOT its own scroller on mobile — the cards flow and the PAGE scrolls.
     Same fix, same reasons, as lc-listings.css: a fixed-height pane under a screenful of
     heading crops the first card and reads as the end of the page, and a scroll gesture
     inside it either moves a hidden inner scrollbar or does nothing, with no way for the
     reader to tell which. sizePanes() clears the inline height to match. */
  .lc-panes[data-view="list"] {
    height: auto;
    min-height: 0;
  }
  .lc-panes[data-view="list"] .lc-list {
    display: block;
    height: auto;
    overflow: visible;
  }
  .lc-panes[data-view="map"]  .lc-list { display: none; }
  .lc-panes[data-view="map"]  .lc-map  { display: block; height: 100%; }

  .lc-cards { grid-template-columns: 1fr; }
}

/* ---- Mobile filters relocated into the site bottom bar's funnel reveal ----
   The bottom bar (lc-mobile-nav.js) exposes a funnel "Filters" reveal; its
   addReveal MOVES the .lc-bar__group--filters node into its docked
   .lc-bottombar__panel on mobile and returns it to its home (.lc-bar) on
   desktop. lc-listings.js adds .lc-has-bottombar to the app root only after
   that handover succeeds. Two things follow, both gated so the inline
   .lc-bar.is-open fallback is untouched when the bar/addReveal is absent:

   1. Hide the old inline "Filters" text toggle — the funnel replaces it.
   2. The panel lives at <body> level, OUTSIDE .lc-app, so the app's --lc-*
      tokens and its `.lc-app select/input` skin no longer reach the moved
      group. Undo the group's inline-overlay positioning (it is a plain stacked
      column inside the panel) and re-declare the tokens, box-sizing, and the
      full select/number-input skin. DESKTOP (>=960px) is untouched. */
@media (max-width: 959px) {
  .lc-has-bottombar .lc-filters-toggle { display: none; }

  .lc-bottombar__panel .lc-bar__group--filters {
    --lc-ink:     #1d2721;
    --lc-muted:   #6b7772;
    --lc-line:    #e3e6e3;
    --lc-bg:      #ffffff;
    --lc-bg-soft: #f6f7f5;
    --lc-accent:  #2f6f57;
    --lc-gold:    #b8863b;

    /* Undo the inline overlay (position:absolute; bottom:100%; shadow…) the
       group carries inside .lc-app — in the reveal panel it is just a column.
       Higher specificity than the base `.lc-bar__group--filters{display:none}`
       so the moved group stays visible. */
    position: static;
    top: auto; right: auto; bottom: auto; left: auto;
    margin: 0;
    padding: 12px;
    background: none;
    border-top: 0;
    box-shadow: none;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .lc-bottombar__panel .lc-bar__group--filters,
  .lc-bottombar__panel .lc-bar__group--filters *,
  .lc-bottombar__panel .lc-bar__group--filters *::before,
  .lc-bottombar__panel .lc-bar__group--filters *::after { box-sizing: border-box; }

  .lc-bottombar__panel .lc-bar__group--filters select,
  .lc-bottombar__panel .lc-bar__group--filters input[type="number"] {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--lc-line);
    border-radius: 8px;
    background: var(--lc-bg);
    color: var(--lc-ink);
    font: inherit;
    font-size: 16px;              /* keeps iOS Safari from zooming on focus */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .lc-bottombar__panel .lc-bar__group--filters select:focus,
  .lc-bottombar__panel .lc-bar__group--filters input[type="number"]:focus {
    border-color: var(--lc-accent);
  }
}

/* Small phones: let cards breathe */
@media (max-width: 420px) {
  .lc-search { min-width: 140px; }
  .lc-app input[type="number"] { width: 84px; }
}

/* ---- wedding map: distinguish venue vs vendor pins ---------------------- */
.lc-marker--venue  { background: var(--lc-accent); color: #fff; border-color: var(--lc-accent); }
.lc-marker--vendor { background: #fff; color: var(--lc-ink); border-color: var(--lc-line); }
.lc-marker--vendor.lc-marker--active,
.lc-marker--venue.lc-marker--active { box-shadow: 0 3px 12px rgba(0,0,0,.4); }
/* name (not price) is the card headline here — normal weight, not the big $ size */
.lc-app .lc-card__price, .lc-app .lc-pop__price { font-size: 15px; font-weight: 700; line-height: 1.25; }
.lc-app .lc-card__sub { color: var(--lc-muted); font-size: 12.5px; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }