/**
 * Listing Single — compiled CSS
 *
 * Hand-compiled, literal-value equivalent of:
 *   src/assets/scss/components/_listing-mast.scss
 *   src/assets/scss/components/_listing-header.scss
 *   src/assets/scss/components/_listing-single.scss
 *
 * Those three files are the source of truth and the ones to edit going
 * forward — this file exists only so the listing template looks right
 * today without needing the theme's Gulp/node-sass build (which needs
 * `npm install` against a very old toolchain) to run first. The next time
 * anyone runs the real build, app.min.css will include the compiled output
 * of the three SCSS files directly and this file can be dropped from the
 * enqueue in inc/app/setup.php.
 *
 * REBUILT 2026-08-24, third pass: mast/header from the previous pass are
 * unchanged below; the utils row (Inquire/Share/Print), the top stat row,
 * both facts grids, and the broker cards are new — all against the live
 * page's own confirmed DOM structure and compiled CSS (read via the
 * browser's CSSOM and direct DOM walks against
 * staging-kiddermathews.kinsta.cloud), not approximated. See the three SCSS
 * files above for the specific reasoning on each piece, especially why the
 * facts grid uses listing-facts__grid/__stat rather than this theme's own
 * .stats/.stat (name collision with an unrelated existing component) and
 * why brokers reuse .card-pro directly (same component, already real).
 *
 * Enqueued only on `is_singular('listing')` — see inc/app/setup.php.
 */

/* ---- Listing Mast ---- */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.listing-mast {
  position: relative;
  display: block;
  height: 13em;
  background-color: #363537;
  overflow: hidden;
}

@media (min-width: 59em) {
  .listing-mast {
    height: 27em;
  }
}

.listing-mast__figure {
  z-index: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: fade-in 2s ease 0.5s 1 normal both;
}

.listing-mast__img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- "View Photos" trigger (real _property-mast.scss values) ---- */

/* .property-mast__grid declares width:76em, but the element also carries
   .grid-lg, which is declared LATER in the Node source and wins at equal
   specificity — so live is 82% (1050px @1280), not 76em. Ours loads after
   app.min.css so our copy won instead and measured 1313px, pushing the
   View Photos button further right than live's. Declared explicitly here
   rather than relying on source order. */
.listing-mast__grid {
  position: relative;
  height: 100%;
  width: 92%;
  max-width: 76em;
  margin: 0 auto;
}

@media (min-width: 59em) {
  .listing-mast__grid { width: 82%; }
}

.listing-mast__trigger {
  position: absolute;
  bottom: 2em;
  right: 0;
}

@media (min-width: 59em) {
  .listing-mast__trigger {
    width: 30%;
    padding: 0 4em;
  }
}

@media (min-width: 78em) {
  .listing-mast__trigger {
    width: 25%;
  }
}

/* .btn.is-sm is an EMPTY ruleset in this theme, and this theme's .btn.is-white
   differs from the Node app's. Both re-stated scoped to this one button
   rather than changed globally — see _listing-mast.scss.

   CORRECTED: border-color was set to match the fill color in both states
   (#fff on white, #E04403 on hover-orange), making the border invisible —
   that's why live shows an orange outline around this button and dev
   didn't. Node's .btn.is-white never overrides border-color at all, so it
   falls through to the base .btn's border-color ($color-alpha, #E04403)
   normally, and to the base .btn:hover's border-color ($color-grey-dark,
   #363537) on hover — neither of which matches the fill in either state. */
.listing-mast__trigger .btn {
  display: inline-block;
  padding: 1rem 1.75rem 0.9rem;
  color: #E04403;
  background-color: #fff;
  border-color: #E04403;
}

.listing-mast__trigger .btn:hover,
.listing-mast__trigger .btn:focus {
  color: #fff;
  background-color: #E04403;
  border-color: #363537;
}

/* Node's base .btn gives every icon+label button `i { padding-right: 1em }`;
   this theme's .btn has no equivalent, so the View Photos icon sits flush
   against the label without it. Restated scoped to this button, same
   reasoning as above — see _buttons.scss for the real fix, pending a build. */
.listing-mast__trigger .btn i {
  padding-right: 1em;
}

/* ---- Gallery lightbox (sits on this theme's own .popup) ---- */

.listing-gallery__track {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.listing-gallery__track::-webkit-scrollbar {
  display: none;
}

.listing-gallery__item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 2em;
}

.listing-gallery__img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  object-fit: contain;
}

.listing-gallery__close {
  position: absolute;
  top: 2em;
  right: 2em;
  z-index: 2;
  padding: 0 0.35em 0.15em;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2.5em;
  line-height: 1;
  cursor: pointer;
}

.listing-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  padding: 0 0.4em 0.15em;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 3em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s;
}

.listing-gallery__nav:hover {
  background: #E04403;
}

.listing-gallery__nav.is-prev { left: 1em; }
.listing-gallery__nav.is-next { right: 1em; }

/* ---- Listing Header ---- */

.listing-header {
  padding: 3em 0 0;
}

.listing-header__pretitle {
  display: block;
  margin-bottom: 1em;
  font-family: "avenir-next", times;
  font-size: 0.815em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Header grid — real .property-header__grid / __main / __utils. Same
   hand-rolled-flex mistake as .listing-single__cols; it survived that fix
   because the pass only covered the body grid. Measured: title/address
   835px vs live 761px, utils 180px vs live 288px. */
.listing-header__main,
.listing-header__utils {
  width: 100%;
}

@media (min-width: 32em) {
  .listing-header__grid {
    display: flex;
    flex-wrap: wrap;
  }
  .listing-header__main {
    flex-basis: 70%;
    width: 70%;
    max-width: 70%;
  }
  .listing-header__utils {
    flex-basis: 25%;
    width: 25%;
    max-width: 25%;
  }
}

@media (min-width: 59em) {
  .listing-header__grid {
    margin-left: -3em;
    margin-right: -3em;
  }
  .listing-header__grid > * {
    padding-left: 3em;
    padding-right: 3em;
  }
}

@media (min-width: 78em) {
  .listing-header__main {
    flex-basis: 75%;
    width: 75%;
    max-width: 75%;
  }
}

.listing-header__title {
  font-size: 1.75em;
  line-height: 1;
  margin-bottom: 0.5em;
}

@media (min-width: 59em) {
  .listing-header__title {
    font-size: 1.9em;
  }
}

/* Real .property-header__address carries its bottom margin only below
   59em; ours applied it at every width — 35px of dead space on desktop. */
.listing-header__address {
  margin: 0;
}

@media (max-width: 59em) {
  .listing-header__address { margin-bottom: 2em; }
}

.listing-header__utils {
  display: flex;
  align-items: flex-end;
}

/* Live's Inquire button is .btn.is-default. Confirmed against the live
   CSSOM directly: .is-default's own base rule (color:white;
   background:#E04403, no pseudo-class) sits after this theme's base
   .btn:hover,:focus rule at EQUAL specificity, so it overrides even a
   genuinely-:focus'd button (clicking Inquire on the real page leaves it
   focused with the modal open, measured rgb(224,68,3)/white, not the dark
   fill). Needs color/background set unconditionally here too, or the base
   .btn:focus dark fill has nothing overriding it once merely focused
   rather than actively hovered. */
.listing-header__inquire.btn {
  margin-right: 2em;
  padding: 1em 1.5em;
  color: #fff;
  background-color: #E04403;
}

/* .is-default:hover overrides the base .btn:hover's dark grey fill with
   an inverse look (white bg, dark text/border). This theme has no
   .is-default modifier, so plain .btn was hovering with the wrong state.

   :hover only, no :focus — Node's real rule has no :focus paired with it.
   Adding :focus (tried first) left the "hover" look stuck after a tap:
   tapping opens the Inquire modal but leaves the button focused, so the
   inverse-color state never cleared on its own. */
.listing-header__inquire.btn:hover {
  background-color: #fff;
  color: #363537;
  border-color: #363537;
}

/* Share / Print icon buttons. This carried the theme's btn-theme mixin,
   which brings button typography — uppercase, 600, 0.675em, 0.1em tracking.
   The real .property-header__util has NO type styling: a bare <button> on
   the global reset, inheriting 13px/400/none. Invisible in itself (the
   button holds only an icon) but it was sizing that icon: the real `i` is
   2.5em, ours was 1.6em, so Share and Print rendered smaller than live. */
.listing-header__util {
  padding-right: 1em;
  color: #E04403;
  transition: color 0.5s ease;
}

.listing-header__util i {
  font-size: 2.5em;
}

.listing-header__util:hover,
.listing-header__util:hover i {
  color: #363537;
}

/* Divider under the header — <hr class="sep listing-header__sep">.
   This theme's own .sep (utils/_decor.scss) is a different component:
   8em wide, #363537, 3em margins. The live listing page's divider is
   full-width #e2e3e4 with 2em margins. Scoped override so the theme's
   global .sep keeps working everywhere else it is used. */
.listing-header__sep {
  width: 100%;
  background-color: #e2e3e4;
  margin: 2em 0;
}

/* ---- Listing Single: layout ---- */

/* Content container width. `.grid-lg` is a DIFFERENT component in the two
   codebases — measured at a 1024px viewport, the WP theme's is 88% (901px)
   and the Node app's is 82% capped at 76em (840px). Same class name, ~7%
   different width, which is why listing pages sat wider than live even
   though the 70/30 column ratio was already correct.

   Scoped to the listing page's own content wrappers, NOT global: the WP
   .grid-lg is used site-wide, and the app header/footer intentionally keep
   the WP width so this page's chrome still lines up with every other page.
   .listing-mast__grid is excluded — it carries .grid-lg but sets its own
   explicit 76em width, matching .property-mast__grid. */
/* App header height — LISTING PAGES ONLY.

   Root cause is a site-wide variable, not a listing rule: _config.scss
   differs between the two codebases —

                        WP theme    Node app
     $header-height-lg    8em         6em
     $header-height-sm    5em         4em

   which compiles to .app-header{height:8em} and
   .has-header-offset{padding-top:8em} above 59em on the WordPress side,
   against 6em on the properties app. Measured at 1024px: header 136px vs
   live's 102px, offset 136px vs 102px.

   TRADE-OFF, recorded deliberately: scoped to .single-listing on explicit
   instruction, to match the live properties app. The consequence is that a
   listing page's header is now 2em shorter than every OTHER page on the
   WordPress site, so navigating from a listing to a news post will visibly
   jump. The alternative — changing $header-height-lg globally — reshapes
   the whole site's header and is Kidder's decision. If they later say
   "6em everywhere", delete this block and change the variable, rather than
   leaving both in place.

   Only the >= 59em branch needs overriding; below that both themes already
   resolve to 4em. `header-is-pinned` is set on <body> by _HeaderState.js,
   alongside `single-listing`, hence the compound selector. */
@media (min-width: 59em) {
  .single-listing .app-header {
    height: 6em;
  }

  .single-listing.header-is-pinned .app-header {
    height: 4em;
  }

  .single-listing .has-header-offset {
    padding-top: 6em;
  }
}

.listing-single > .grid-lg,
.listing-single__body > .grid-lg {
  width: 92%;
  max-width: 76em;
}

@media (min-width: 59em) {
  .listing-single > .grid-lg,
  .listing-single__body > .grid-lg {
    width: 82%;
  }
}

/* Body wrapper — equivalent of .property-content. Replaces the theme's
   `.pad` utility (4em top AND bottom); the real component has
   padding-bottom only, and that extra top padding was the visible gap
   between the header divider and the first stat row. */
.listing-single__body {
  position: relative;
  padding-bottom: 4em;
}

/* Two-column grid — equivalent of .property-content__grid / __main /
   __sidebar. The previous hand-rolled version used `gap: 6em` plus
   min-widths of 32em and 18em, which need ~954px; .grid-lg at a 1024px
   viewport is only ~840px, so the sidebar wrapped below the content while
   the live page kept it alongside. The real layout is a straight
   percentage split with negative-margin gutters and no min-widths, so it
   cannot wrap. Flex and the gutters apply only from 59em up; below that
   the columns are block-level and stack on their own. */
.listing-single__main,
.listing-single__aside {
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 59em) {
  .listing-single__cols {
    display: flex;
    flex-wrap: wrap;
    margin-left: -3em;
    margin-right: -3em;
  }

  .listing-single__cols > * {
    padding-left: 3em;
    padding-right: 3em;
  }

  .listing-single__main {
    flex-basis: 70%;
    width: 70%;
    max-width: 70%;
  }

  .listing-single__aside {
    flex-basis: 30%;
    width: 30%;
    max-width: 30%;
  }
}

@media (min-width: 78em) {
  .listing-single__main {
    flex-basis: 75%;
    width: 75%;
    max-width: 75%;
  }

  .listing-single__aside {
    flex-basis: 25%;
    width: 25%;
    max-width: 25%;
  }
}

/* .property-content__main > section */
.listing-single__main > section {
  padding: 1em 0;
}

/* .property-content__sidebar article, section */
.listing-single__aside article,
.listing-single__aside section {
  margin-bottom: 1.5em;
}

.listing-single__description {
  margin-top: 6em;
}

/* Property Location map — real .property-map__map values from the Node app's
   components/_property-map.scss (height 30em, grey-light bg). The background
   is what shows while the Maps JS API loads, so the section keeps its height
   instead of collapsing mid-load. Replaces the old iframe rule. */
.property-map {
  /* no margin — it now sits inside .listing-single__main, which supplies
     `> section { padding: 1em 0 }`, exactly as .property-content__main does */
}

.property-map__map {
  height: 30em;
  background-color: #EBEEEF;
}

/* ---- Top stat row (Available SF / Price) ---- */

.listing-facts__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1em;
  color: #363537;
}

.listing-facts__header-label {
  position: relative;
  display: inline-block;
  margin-right: 2em;
  font-weight: 600;
}

.listing-facts__header-value {
  font-weight: 600;
}

.listing-facts__header-spacer {
  margin-left: 1em;
  margin-right: 1em;
  font-weight: 400;
}

/* ---- Listing / Property Information grids ---- */

/* The top stat row sits at the very top of the main column on live, with no
   padding above it: .property-overview carries `no-pad` (padding:0 !important),
   which beats the generic .property-content__main > section {padding:1em 0}.
   Ours is one .listing-facts section holding both the stat row and Listing
   Information, so it picked up that 1em and started 17px low. Zeroing it here
   and moving the equivalent 1em onto the stats block reproduces live's
   rhythm. */
/* Specificity: .listing-single__main > section is (0,1,1), so a bare
   .listing-facts (0,1,0) loses to it. Live solves this with no-pad's
   !important; a more specific selector does the same without one. */
.listing-single__main > .listing-facts {
  padding-top: 0;
}

.listing-facts__stats {
  margin-top: 4em;
}

.listing-facts__header + .listing-facts__stats {
  margin-top: 0;
  padding-top: 1em;
}

.listing-facts__stats--boxed {
  padding: 2em;
  background-color: #EBEEEF;
}

/* Node renders this card's title as .stats__header, not the plain .heading
   used for "Listing Information" above it — .stats__header carries a
   border-bottom the plain .heading doesn't. Restated scoped to this card. */
.listing-facts__stats--boxed .heading {
  padding-bottom: 2em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ---- Additional Space Available ----
   Node's own .sep is 8em wide / dark grey / 3em margins (global default);
   the divider above this section on the live page is full-width, lighter,
   2em margins — same override pattern as .listing-header__sep. */
.listing-facts__sep {
  width: 100%;
  background-color: #e2e3e4;
  margin: 2em 0;
}

/* Equivalent of Node's .stats__bg.stats__related — not .stats/.stat here
   either, same collision reasons as the grids above. */
.listing-facts__related {
  padding: 2em;
  background-color: #fff;
  border: 1px solid #EBEEEF;
}

.listing-facts__related + .listing-facts__related {
  margin-top: 2em;
}

.listing-facts__related-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 2em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.listing-facts__related-title {
  position: relative;
  display: inline-block;
  margin-right: 2em;
  font-weight: 600;
  color: #363537;
}

.listing-facts__related-btns a {
  margin-left: 2em;
}

/* Real .stats__grid is `padding: 0 0 $pad-xxs` and gives every child a
   $pad-xs bottom margin — both were missing, costing ~9px under the grid
   and ~17px between wrapped rows. */
.listing-facts__grid {
  display: flex;
  flex-flow: wrap;
  margin-left: -1em;
  margin-right: -1em;
  padding: 0 0 0.5em;
  list-style: none;
}

.listing-facts__grid > * {
  margin-bottom: 1em;
}

.listing-facts__stat {
  padding: 1em;
  flex-basis: 50%;
  max-width: 50%;
}

/* Node's real grid is flex-grid(2, 3, 4, ...) — three column tiers (2 at
   base, 3 at $mq-sm/32em, 4 at $mq-med/59em). This only ever had the base
   and 59em tiers, skipping the 3-column step entirely — so anything
   rendered between 32em and 59em (a typical print page width included)
   showed 2 columns where the live page shows 3, needing extra rows for the
   same facts and reading as "more spaced out" than it should. */
@media (min-width: 32em) {
  .listing-facts__stat {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
}

@media (min-width: 59em) {
  .listing-facts__stat {
    flex-basis: 25%;
    max-width: 25%;
  }
}

.listing-facts__label {
  display: block;
  margin-bottom: 1em;
  color: #5F5D5E;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.listing-facts__value {
  display: block;
  font-family: mort, Helvetica, sans-serif;
  font-size: 1.3em;
  font-style: italic;
  color: #E04403;
}

.listing-facts__status {
  margin-top: 2em;
  color: #c43a31;
}

/* ---- Sidebar section headings (Downloads & Links / Contact) ----
   CORRECTED 2026-08-24, second pass, against real source (components/
   _links-box.scss, components/_property-content.scss): both real classes
   carry only a margin-bottom — no font-size/weight/color/letter-spacing of
   their own. The look comes from the theme's existing global `h5` rule,
   which the markup now actually uses. Two real, separately-named rules
   replace the old single guessed rule. */

.links-box__title,
.property-content__sidebar-title {
  font-family: avenir-next, times;
  font-weight: 600;
  font-size: 0.815em;
}

.links-box__title {
  margin-bottom: 0.5em;
}

.property-content__sidebar-title {
  margin-bottom: 1em;
}

/* ---- Downloads & Links list (real .links-box / .links-box__item) ---- */

.links-box__item {
  display: block;
  margin-bottom: 0.1em;
}

/* ---- Brokers (mostly .card-pro, already real) ---- */

/* .card-pro is a DIFFERENT component in the two codebases — the third
   same-name-different-values case here, after .sep and .grid-lg:

                    live (Node)         this theme
     __position     14px / 400 / none   11px / 500 / UPPERCASE + .15em
     __tel/__email  0.815em (14px)      0.675em (12px)
     __title        max-width: 90%      (none)
     __footer       padding-top: 0      2px

   __position is the visible one: this theme runs it through a font-label
   mixin, so broker job titles rendered as small uppercase tracking rather
   than normal sentence case. Scoped to this sidebar so the theme's own
   .card-pro keeps working on professional, team and search pages.

   margin-bottom is deliberately unset — the real card takes 1.5em from
   `.property-content__sidebar article`, which .listing-single__aside now
   reproduces. */
.listing-brokers .card-pro__title {
  max-width: 90%;
  font-size: 1.2em;
  margin-bottom: 0.2em;
}

/* The theme runs .card-pro__position through text-overflow(80%) —
   overflow:hidden, text-overflow:ellipsis, white-space:nowrap, max-width:80%
   — clipping long job titles to one line ("Senior Vice President | Sha…").
   The live card wraps instead. Resetting max-width alone wasn't enough. */
.listing-brokers .card-pro__position {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: 0.815em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.6;
  margin-bottom: 0;
}

/* .card-pro__city-state is grouped with __position in the theme's own rule,
   so it needs the same reset to match live's plain sentence-case line. */
.listing-brokers .card-pro__city-state {
  font-size: 0.815em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.6;
  margin-bottom: 0;
}

.listing-brokers .card-pro__tel,
.listing-brokers .card-pro__email {
  font-size: 0.815em;
  line-height: 1.6;
}

/* Broker card wrapper — real .property-content__sidebar-brokers: a flex
   grid, 2-up narrow and 1-up from 59em. We had no equivalent element, so
   the cards were missing flex-basis:100% and 1em of horizontal padding.
   At desktop the negative margin cancels the child padding, so the visible
   change is the 2-up behaviour below 59em. */
.property-content__sidebar-brokers {
  display: flex;
  flex-flow: wrap;
  margin-left: -1em;
  margin-right: -1em;
}

.property-content__sidebar-brokers > * {
  padding-left: 1em;
  padding-right: 1em;
  flex-basis: 50%;
  max-width: 50%;
}

@media (min-width: 59em) {
  .property-content__sidebar-brokers > * {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* License number — not present anywhere in this WP theme's existing
   .card-pro port before now; added alongside professional_license_no. */
.card-pro__licno {
  font-weight: 500;
  font-size: 0.675em;
  margin-top: 5px;
}

/* ---- Comments (folded into the bottom of the Listing Information card) ----
   CORRECTED 2026-08-24, second pass, against real source (components/
   _stats.scss .stat__footer/.stat__label/.stat__text): the label uses the
   SAME uppercase/letter-spaced style as every other grid-item label
   (literal values identical to .listing-facts__label above), not a
   separate plain sentence-case style. .stat__text carries only a font-size
   and margin-bottom in the real source — color/font-weight/line-height
   overrides removed. */

.listing-facts__comments {
  padding-top: 1em;
}

.listing-facts__comments-label {
  display: block;
  margin-bottom: 1em;
  color: #5F5D5E;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.listing-facts__text {
  margin: 0;
  margin-bottom: 0;
  font-size: 0.815em;
}

/* ---- Listing Inquiry ("Inquire" lead-capture modal) ----
   Direct port of _property-header.scss's .property-header__form-* rules
   (Node's #cta-popup), renamed to listing-inquiry__*. Sits on this theme's
   own .popup (see _popups.scss) like the photo gallery does, but overrides
   its dark overlay/white text — Node's modal is a light overlay with a
   white card, not a full-bleed dark viewer. See _listing-single.scss for
   the real source. */

.listing-inquiry {
  background: rgba(235, 238, 239, 0.5);
}

.listing-inquiry__container {
  position: relative;
  height: 525px;
  width: 1000px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  padding: 1.5em 1em 1em 1.5em;
  background-color: #fff;
  color: #5F5D5E;
  border: 1px solid #5F5D5E;
}

.listing-inquiry__close {
  position: absolute;
  top: 20px;
  right: 10px;
}

.listing-inquiry__close-x {
  z-index: 11;
  position: relative;
  display: block;
  height: 2.5em;
  width: 2em;
}

.listing-inquiry__close-x:after,
.listing-inquiry__close-x:before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0px !important;
  right: 0px;
  width: 20px;
  height: 1px;
  display: block;
  background: #363537;
}

.listing-inquiry__close-x:after  { transform: rotate(45deg); }
.listing-inquiry__close-x:before { transform: rotate(-45deg); }
.listing-inquiry__close-x:hover  { cursor: pointer; }

.listing-inquiry__details {
  position: relative;
  padding-right: 1em;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.listing-inquiry__property {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.listing-inquiry__eyebrow {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.55em;
}

.listing-inquiry__name {
  padding-top: 0.25em;
  margin: 0;
  font-size: 1.5em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0 !important;
  /* This theme's global `h1,h2,h3,h4{color:#363537}` reset otherwise wins —
     this is an <h3>, and Node's real element (an <h1>) isn't caught by an
     equivalent rule there, so it inherits the popup's own #5F5D5E instead.
     Restated explicitly rather than relying on inheritance surviving. */
  color: #5F5D5E;
}

.listing-inquiry__address {
  font-size: 0.65em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Node applies this ONLY to the div — the <a> inside just inherits the
   computed size. Applying it to both (as this used to) compounds the 0.55em
   twice: the anchor's own 0.55em was computing against the div's ALREADY
   -reduced font-size instead of the ancestor's, landing at roughly a third
   of the intended size rather than matching the div. */
.listing-inquiry__brochure {
  color: #E04403;
  font-family: "avenir-next", times;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.55em;
  margin-top: 25px;
}

.listing-inquiry__contacts {
  background-color: #EBEEEF;
  padding: 1em;
  padding-top: 0.25em;
  overflow-y: auto;
  width: 100%;
  margin-top: 3em;
}

.listing-inquiry__contact-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.listing-inquiry__contact-card {
  display: flex;
  flex-direction: column;
  padding: 10px 0 10px;
  width: 50%;
}

.listing-inquiry__contact-name {
  font-size: 0.815em;
  font-weight: 300;
  font-family: "mort", Helvetica, sans-serif;
  margin-bottom: 0;
}

.listing-inquiry__contact-phone {
  display: block;
  font-size: small;
  font-weight: 500;
  color: #5F5D5E;
}

/* Node's markup gives phone and email the SAME class with no color of its
   own — the phone (a <span>) inherits the popup's grey, but the email (an
   <a>) picks up the global `a{color:#E04403}` orange instead, since anchors
   aren't grey by default. This theme's version had explicitly hardcoded
   grey on the email too, flattening that distinction. */
.listing-inquiry__contact-email {
  display: block;
  font-size: small;
  font-weight: 500;
  color: #E04403;
}

.listing-inquiry__contact-t {
  color: #E04403;
  padding-right: 8px;
}

.listing-inquiry__signup {
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  width: 50%;
  padding-left: 5%;
}

.listing-inquiry__field {
  white-space: nowrap;
  color: #363537;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #EBEEEF;
}

.listing-inquiry__field label {
  display: flex;
  font-size: small;
  align-items: center;
  min-width: 75px;
}

.listing-inquiry__field input,
.listing-inquiry__field select {
  border: none;
  font-family: "avenir-next", times;
  padding: 5px;
  color: #5F5D5E;
  background: transparent;
  width: 100%;
}

.listing-inquiry__field select { font-size: 0.8em; }

.listing-inquiry__field input:-webkit-autofill,
.listing-inquiry__field input:-webkit-autofill:hover,
.listing-inquiry__field input:-webkit-autofill:focus,
.listing-inquiry__field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}

.listing-inquiry__field--message {
  flex-direction: column;
}

.listing-inquiry__field--message textarea {
  resize: none;
  border: none;
  font-family: "avenir-next", times;
  padding: 0;
  color: #5F5D5E;
  width: 100%;
}

.listing-inquiry__submit {
  width: 125px;
  font-size: small;
  padding-left: 0;
  padding-right: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-top: 25px;
  font-weight: 600;
}

.listing-inquiry__policy {
  font-size: x-small;
  padding-top: 20px;
}

/* ---- Print ----
   This theme's own src/assets/scss/utils/_print.scss already carries a
   @media print block that looks like a straight copy of Node's — same
   selectors (#single-property-view, .property-header__pretitle, .stats__bg,
   .property-mast, button/i {display:none}) — but keyed to Node's OLD class
   names, which don't exist anywhere on this page. None of it ever matches,
   so the listing page prints as the raw, undesigned HTML: the mast photo,
   the View Photos/Inquire controls, all of it. Restated here under the real
   listing-* class names, same rules Node's shorter/listing-specific pass
   applies (kidder-nodejs/src/assets/scss/utils/_print.scss). */
@media print {
  .listing-mast,
  .listing-header__inquire,
  button,
  i {
    display: none !important;
  }

  .listing-single {
    margin: 0 auto;
    padding: 0;
    max-width: 90%;
  }

  .grid-lg {
    max-width: 80%;
  }

  .listing-header {
    padding: 1em 0;
  }

  h2.listing-header__title {
    font-size: 23pt !important;
  }

  .listing-header__pretitle,
  .listing-facts__label {
    font-size: 7pt !important;
  }

  .listing-facts__stats--boxed,
  .listing-facts__related {
    padding: 0 !important;
  }
}

/* This theme's global _print.scss sets `@page { margin: 10px; }` — Node has
   no @page rule at all, so it prints at whatever margin the print dialog
   itself specifies. 10px leaves no room for the browser's own print
   header/footer (date, page title, URL, page number), so Chrome silently
   drops it — that's the date/title line staging shows and dev doesn't.
   Overridden here for listing pages only; loads after app.min.css, so it
   wins without touching the global rule other pages may rely on. */
@page {
  margin: 2cm;
}

/* T2.6 — internal links back to the search app, bottom of the page. */
.listing-single__browse-more {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding: 2em 0;
}