/* A listing's full description: the roles ListingText produces, drawn from the
 * --lt-* variables that Design -> Listing text sets (see App\Core\ListingText::STYLE).
 *
 * One file, linked by the public layout AND the admin layout, so the Preview button on
 * the listing form and the sample on the Design screen are these rules, not a copy.
 *
 * Heading is <h3> and Subheading <h4>: they sit under the page's <h2>Description</h2>.
 *
 * Every selector is doubled (.listing-text.listing-text) on purpose. In the admin the
 * preview sits inside .panel-box, whose heading rules have the same specificity as a single
 * class plus element and would otherwise win or lose on link order alone -- the same
 * trap that left the Leaflet zoom buttons unstyled after a deploy. The fallbacks after
 * each var() are the look before any choice is saved.
 */

/* No font-family and no width here: the description inherits the page's own body font
   stack and column, exactly as the plain text did. Setting font-family: var(--font-body)
   alone dropped the fallbacks site.css carries and rendered in serif; a max-width
   narrowed a column nobody asked to change. Both were caught comparing screenshots. */
.listing-text.listing-text {
  color: var(--color-text);
  font-size: var(--lt-body-size, 1rem);
  line-height: var(--lt-line, 1.6);
}

.listing-text.listing-text > :first-child { margin-top: 0; }
.listing-text.listing-text > :last-child  { margin-bottom: 0; }

.listing-text.listing-text p,
.listing-text.listing-text ul,
.listing-text.listing-text ol {
  margin: 0 0 var(--lt-gap, 0.9em);
}

.listing-text.listing-text h3 {
  font-family: var(--lt-head-font, var(--font-heading)), system-ui, sans-serif;
  font-size: var(--lt-head-size, 1.2rem);
  color: var(--lt-head-color, var(--color-text));
  text-transform: var(--lt-head-case, none);
  letter-spacing: var(--lt-head-track, normal);
  line-height: 1.25;
  font-weight: 700;
  margin: 1.6em 0 0.5em;
  padding: 0;
  border: 0;
}

.listing-text.listing-text h4 {
  font-family: var(--lt-head-font, var(--font-heading)), system-ui, sans-serif;
  font-size: var(--lt-sub-size, 1.05rem);
  color: var(--lt-sub-color, var(--color-text));
  line-height: 1.3;
  font-weight: 700;
  margin: 1.3em 0 0.4em;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
}

.listing-text.listing-text strong { font-weight: 700; }
.listing-text.listing-text em     { font-style: italic; }

.listing-text.listing-text ul {
  list-style: none;
  padding: 0;
}

.listing-text.listing-text ul > li {
  position: relative;
  padding-left: 1.4em;
  margin: 0 0 0.3em;
}

.listing-text.listing-text ul > li::before {
  content: var(--lt-bullet, "•");
  position: absolute;
  left: 0.2em;
  color: var(--lt-bullet-color, var(--color-primary));
  font-weight: 700;
}

.listing-text.listing-text ol {
  padding-left: 1.6em;
}

.listing-text.listing-text ol > li {
  margin: 0 0 0.3em;
  padding-left: 0.2em;
}

.listing-text.listing-text ol > li::marker {
  color: var(--lt-bullet-color, var(--color-primary));
  font-weight: 700;
}

.listing-text.listing-text .lt-highlight {
  background: var(--lt-hl-bg, var(--color-surface));
  border-left: 4px solid var(--lt-hl-edge, var(--color-primary));
  border-radius: var(--radius, 6px);
  padding: 0.8em 1em;
}