/**
 * Prospera 2026 redesign — design tokens + Property Listings page.
 *
 * Implements "Prospera Listings.dc.html" from the Claude Design project
 * "Listings page review". Token values are taken verbatim from the design's
 * token sheet (Prospera Design Notes, section 2).
 *
 * Loaded after style.css / theme.css (header.php prints those at line 43,
 * wp_head() runs at line 45), so these rules win on source order without
 * needing !important.
 *
 * Everything here is scoped under .pr26 so the 2014 theme's global rules —
 * 13px body, Bootstrap 3 grid — stay untouched on pages not yet redesigned.
 */

:root {
  /* ---- color (all pairs meet WCAG AA on their intended ground) ---- */
  --pr-primary:        #053060;  /* brand navy — 13.1:1 on white */
  --pr-primary-hover:  #0e4a8a;
  --pr-primary-tint:   #e7eef6;
  --pr-link:           #0b4d8f;  /* 8.5:1 on white */
  --pr-link-hover:     #053060;
  --pr-text:           #1d2733;  /* 14.9:1 */
  --pr-text-muted:     #5a6675;  /* 5.8:1 */
  --pr-text-faint:     #8a97a8;
  --pr-border:         #d7dee7;
  --pr-border-hover:   #aec5db;
  --pr-surface:        #f2f5f9;
  --pr-bg:             #ffffff;
  --pr-on-primary:     #ffffff;
  --pr-status:         #8f3021;  /* SOLD badge, white text — 8.0:1 */

  /* ---- type ----
     The design's token sheet is written in rem assuming a 16px root. This theme
     sets `html { font-size: 62.5% }` (theme.css), so 1rem = 10px here and every
     rem token would render at 62.5% of its intended size — 16px body arriving as
     10px, which is smaller than the 13px we are replacing.
     Expressed in px so the design's intent survives the theme's root override. */
  --pr-font: 'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pr-text-sm:   14px;   /* nothing smaller */
  --pr-text-base: 16px;   /* the floor */
  --pr-text-md:   17px;
  --pr-text-lg:   20px;
  --pr-text-xl:   24px;
  --pr-text-2xl:  28px;
  --pr-text-3xl:  clamp(28px, 19.2px + 2vw, 40px);
  --pr-leading-tight: 1.2;
  --pr-leading-body:  1.6;

  /* ---- space (4px base) ---- */
  --pr-space-1: 4px;  --pr-space-2: 8px;  --pr-space-3: 12px; --pr-space-4: 16px;
  --pr-space-5: 24px; --pr-space-6: 32px; --pr-space-7: 48px; --pr-space-8: 64px;

  /* ---- shape & elevation ---- */
  --pr-radius-sm: 4px;
  --pr-radius-md: 6px;
  --pr-radius-lg: 8px;
  --pr-shadow-md: 0 4px 16px rgba(5, 48, 96, 0.12);

  /* ---- layout ---- */
  --pr-container: 1200px;
}

/* ------------------------------------------------------------------ *
 * Page shell
 * ------------------------------------------------------------------ */

.pr26 {
  font-family: var(--pr-font);
  font-size: var(--pr-text-base);
  line-height: var(--pr-leading-body);
  color: var(--pr-text);
  background: var(--pr-bg);
}

/* The 2014 theme sets 13px on body. Setting an absolute rem size on the .pr26
   container re-establishes the 16px floor; descendants inherit from it.
   Do NOT add a blanket `.pr26 p, .pr26 span { font-size: inherit }` rule here —
   `.pr26 span` (0,1,1) outranks component classes like .pr26-card__price (0,1,0)
   and silently flattens the whole type scale back to one size. */

/* :where() keeps these at zero specificity. Written as `.pr26 a` they score
   (0,1,1) and beat every component class (0,1,0) — which rendered the navy
   "Pay Online" button's label in link-blue instead of white. This is the third
   time this trap bit in this file; default styles for bare tags inside .pr26
   must always go through :where(). */
.pr26 :where(a) { color: var(--pr-link); }
.pr26 :where(a:hover) { color: var(--pr-link-hover); }

.pr26 a:focus-visible,
.pr26 button:focus-visible,
.pr26 select:focus-visible,
.pr26 input:focus-visible {
  outline: 2px solid var(--pr-link);
  outline-offset: 2px;
}

.pr26__container {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding-left: var(--pr-space-5);
  padding-right: var(--pr-space-5);
}

/* ---- page header band ---- */

.pr26__band {
  background: var(--pr-surface);
  border-bottom: 1px solid var(--pr-border);
}

.pr26__band-inner {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: 40px var(--pr-space-5);
}

.pr26__title {
  margin: 0 0 var(--pr-space-2);
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: var(--pr-leading-tight);
  font-weight: 800;
  color: var(--pr-primary);
}

.pr26__lede {
  margin: 0;
  font-size: var(--pr-text-md);
  color: var(--pr-text-muted);
  max-width: 60ch;
  text-wrap: pretty;
}

.pr26__main {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: var(--pr-space-6) var(--pr-space-5) var(--pr-space-8);
}

/* ------------------------------------------------------------------ *
 * Filter bar — plain GET form, no JavaScript
 * ------------------------------------------------------------------ */

.pr26-filters {
  background: var(--pr-bg);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  padding: var(--pr-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-3);
  align-items: end;
}

.pr26-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-1);
  flex: 1;
  min-width: 150px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pr-text-muted);
}

.pr26-filters__field--wide { flex: 1.4; min-width: 170px; }

.pr26-filters__select {
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-md);
  font-size: var(--pr-text-base);
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--pr-text);
  background: var(--pr-bg);
}

/* Submit button, shown only when JS is unavailable to auto-apply. */
.pr26-filters__submit {
  height: 44px;
  padding: 0 20px;
  background: var(--pr-primary);
  color: var(--pr-on-primary);
  border: none;
  border-radius: var(--pr-radius-md);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.pr26-filters__submit:hover { background: var(--pr-primary-hover); }

/* ---- result count ---- */

.pr26-resultbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-2) var(--pr-space-5);
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 var(--pr-space-4);
}

.pr26-resultbar__count {
  margin: 0;
  font-size: 15px;
  color: var(--pr-text-muted);
}

/* ---- "on this page" jump list ---- *
 *
 * Only rendered on interior pages with four or more sections. New Construction
 * is 19,000 characters in one scroll; without this its five sections are only
 * reachable by scrolling past everything above them.
 */

.pr26-jump {
  margin: 0 0 var(--pr-space-6);
  padding: var(--pr-space-4) var(--pr-space-5);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
}

.pr26-jump h2 {
  margin: 0 0 var(--pr-space-3);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-text-muted);
}

.pr26-jump ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr26-jump a {
  display: block;
  padding: 8px 0;
  font-weight: 600;
  color: var(--pr-primary);
  text-decoration: none;
  text-wrap: pretty;
}

.pr26-jump a:hover { text-decoration: underline; }

/* So an anchored heading is not pinned under the sticky header. */
.pr26-prose-block h2[id] { scroll-margin-top: 96px; }

/* ---- sold / rented section ---- *
 *
 * Sold and rented listings are not hidden. Teresa re-lets them — "all I have to
 * do is change it back to active again" — and they are the site's record of
 * what the brokerage actually moves. They sit below what is available, in their
 * own section, paginated so they cannot swamp the page.
 */

.pr26-sold {
  margin-top: var(--pr-space-8);
  padding-top: var(--pr-space-6);
  border-top: 1px solid var(--pr-border);
}

.pr26-sold__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--pr-space-2);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pr-text);
}

.pr26-sold__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--pr-text-muted);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 999px;
  padding: 2px 10px;
}

.pr26-sold__note {
  margin: 0 0 var(--pr-space-5);
  font-size: 15px;
  color: var(--pr-text-muted);
  max-width: 60ch;
}

/* Sold and rented cards get NO visual de-emphasis: same photo treatment, same
 * card, same price weight as anything available.
 *
 * Teresa asked for this directly. Her reasoning is about how she is judged:
 * "people look at the quality of work I do and how my pictures are, and if
 * they think I put things up like that, they won't hire me." A faded photo
 * does not read as "this one is gone", it reads as a bad photo. The section
 * heading and the status badge carry the distinction instead. */

/* ------------------------------------------------------------------ *
 * Listing grid + cards
 * ------------------------------------------------------------------ */

.pr26-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--pr-space-5);
}

.pr26-card {
  display: flex;
  flex-direction: column;
  background: var(--pr-bg);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--pr-text);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.pr26-card:hover {
  box-shadow: var(--pr-shadow-md);
  border-color: var(--pr-border-hover);
  color: var(--pr-text);
  text-decoration: none;
}

.pr26-card__media {
  aspect-ratio: 16 / 10;
  position: relative;
  background: var(--pr-surface);
  overflow: hidden;
}

/* Real photos are any dimensions; crop them into the fixed ratio. */
.pr26-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.pr26-card__nophoto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pr-space-2);
  color: var(--pr-text-faint);
}

.pr26-card__nophoto span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pr26-card__badge {
  position: absolute;
  top: var(--pr-space-3);
  left: var(--pr-space-3);
  background: var(--pr-status);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: var(--pr-space-1) 10px;
  border-radius: var(--pr-radius-sm);
}

.pr26-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-2);
  padding: var(--pr-space-4);
  flex: 1;
}

.pr26-card__pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-space-2);
}

.pr26-card__price {
  font-size: var(--pr-text-lg);
  font-weight: 800;
  color: var(--pr-primary);
}

.pr26-card__price small {
  font-size: 14px;
  font-weight: 600;
  color: var(--pr-text-muted);
}

.pr26-card__type {
  background: var(--pr-primary-tint);
  color: var(--pr-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: var(--pr-space-1) var(--pr-space-2);
  border-radius: var(--pr-radius-sm);
  white-space: nowrap;
}

/* Addresses on this site are long and inconsistently formatted; clamp rather
   than let one 90-character address blow the card height out. */
.pr26-card__addr {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pr26-card__meta {
  font-size: 14px;
  color: var(--pr-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pr26-card__region {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--pr-text-faint);
}

/* ------------------------------------------------------------------ *
 * Empty state + pagination
 * ------------------------------------------------------------------ */

.pr26-empty {
  border: 1px dashed var(--pr-border);
  border-radius: var(--pr-radius-lg);
  padding: var(--pr-space-7) var(--pr-space-5);
  text-align: center;
}

.pr26-empty p {
  margin: 0 0 var(--pr-space-4);
  font-size: var(--pr-text-md);
  color: var(--pr-text-muted);
}

.pr26-empty__reset {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  padding: 0 20px;
  background: var(--pr-primary);
  color: var(--pr-on-primary);
  border-radius: var(--pr-radius-md);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.pr26-empty__reset:hover { background: var(--pr-primary-hover); color: var(--pr-on-primary); }

.pr26-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-2);
  justify-content: center;
  margin-top: 40px;
}

.pr26-pager a,
.pr26-pager span {
  min-width: 44px;
  height: 44px;
  line-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-md);
  background: var(--pr-bg);
  color: var(--pr-primary);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.pr26-pager a:hover { background: var(--pr-surface); }

.pr26-pager [aria-current="page"] {
  background: var(--pr-primary);
  border-color: var(--pr-primary);
  color: var(--pr-on-primary);
  font-weight: 700;
}

.pr26-pager .pr26-pager__disabled {
  color: var(--pr-text-faint);
  background: var(--pr-surface);
  cursor: default;
}

/* ------------------------------------------------------------------ *
 * Responsive — the grid handles 3 -> 2 -> 1 on its own via auto-fill.
 * At 390px this page is ~9 cards instead of the old 21,707px scroll.
 * ------------------------------------------------------------------ */

@media (max-width: 600px) {
  .pr26__band-inner { padding: var(--pr-space-6) var(--pr-space-4); }
  .pr26__main { padding: var(--pr-space-5) var(--pr-space-4) var(--pr-space-7); }
  .pr26-filters__field { min-width: 100%; }
  .pr26-filters__field--wide { min-width: 100%; }
  .pr26-resultbar { gap: var(--pr-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .pr26-card { transition: none; }
}

/* ================================================================== *
 * Shared shell — header, nav, mobile drawer, footer
 * Implements ProsperaHeader.dc.html / ProsperaFooter.dc.html
 * ================================================================== */

/* The 2014 theme styles bare tags (header, footer, nav) globally. Reset the
   handful that would otherwise bleed into the new shell. */
.pr26-body { margin: 0; }

/* Wrapped in :where() so the reset carries ZERO specificity. Written plainly as
   `.pr26 footer {…}` it scores (0,1,1) and outranks the component class
   `.pr26-footer` (0,1,0) — which silently reverted the navy footer to white and
   left light-blue link text on a white background. Same trap as the type scale. */
.pr26 :where(header, footer, nav) { background: none; border: 0; margin: 0; padding: 0; }

.pr26 img { max-width: 100%; height: auto; }

.pr26-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--pr-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--pr-radius-md) 0;
  font-weight: 700;
}
.pr26-skip:focus { left: 0; color: #fff; }

/* ---- utility bar ---- */

.pr26-utility {
  background: var(--pr-primary);
  color: #c9d9ec;
  font-size: var(--pr-text-sm);
}

.pr26-utility__inner {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: 6px var(--pr-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-2) var(--pr-space-5);
  align-items: center;
  justify-content: space-between;
}

.pr26-utility__group { display: flex; gap: 20px; align-items: center; }
.pr26-utility a { color: #c9d9ec; text-decoration: none; }
.pr26-utility a:hover { color: #fff; }
.pr26-utility__phone { color: #fff !important; font-weight: 600; }

/* ---- header ---- */

.pr26-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pr-bg);
  border-bottom: 1px solid var(--pr-border);
}

.pr26-header__inner {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: 0 var(--pr-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-space-4);
}

.pr26-logo { display: block; padding: 10px 0; flex-shrink: 0; }
.pr26-logo img { display: block; width: auto; height: 56px; }

.pr26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  background: var(--pr-primary);
  color: var(--pr-on-primary);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--pr-radius-md);
  white-space: nowrap;
}
.pr26-btn:hover { background: var(--pr-primary-hover); color: var(--pr-on-primary); }
.pr26-btn--block { display: flex; width: 100%; }

/* ---- desktop nav ---- */

.pr26-nav { display: flex; align-items: stretch; gap: 2px; flex: 1; justify-content: flex-end; }

.pr26-nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 20px 10px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pr-text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  list-style: none;
}
.pr26-nav__link::-webkit-details-marker { display: none; }
.pr26-nav__link:hover { color: var(--pr-primary); background: var(--pr-surface); }
.pr26-nav__link.is-current { border-bottom-color: var(--pr-primary); color: var(--pr-primary); }

.pr26-nav__item { position: relative; }

.pr26-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--pr-bg);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  box-shadow: 0 12px 32px rgba(5, 48, 96, 0.14);
  padding: var(--pr-space-2);
  z-index: 50;
}

/* Keep the last dropdowns on screen. */
.pr26-nav__item:nth-last-child(-n+2) .pr26-nav__panel { left: auto; right: 0; }

.pr26-nav__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 2px 12px;
  border-radius: var(--pr-radius-md);
  font-size: 15px;
  color: var(--pr-text);
  text-decoration: none;
  box-sizing: border-box;
}
.pr26-nav__panel a:hover { background: var(--pr-surface); color: var(--pr-primary); }
.pr26-nav__sub { padding-left: 26px !important; font-size: 14px !important; color: var(--pr-text-muted) !important; }

.pr26-header__mobile { display: none; gap: var(--pr-space-2); align-items: center; }

.pr26-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-md);
  background: var(--pr-bg);
  color: var(--pr-primary);
  cursor: pointer;
}
.pr26-iconbtn:hover { background: var(--pr-surface); color: var(--pr-primary); }

/* ---- mobile drawer ---- */

.pr26-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--pr-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.pr26-drawer[hidden] { display: none; }

.pr26-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pr-space-2) var(--pr-space-4);
  border-bottom: 1px solid var(--pr-border);
}
.pr26-drawer__logo { height: 44px; width: auto; display: block; }

.pr26-drawer__nav { flex: 1; padding: var(--pr-space-2) var(--pr-space-4) var(--pr-space-5); }

.pr26-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-size: var(--pr-text-md);
  font-weight: 700;
  color: var(--pr-text);
  text-decoration: none;
  border-bottom: 1px solid #eef1f5;
  cursor: pointer;
  list-style: none;
}
.pr26-drawer__top::-webkit-details-marker { display: none; }

.pr26-drawer__sub { display: flex; flex-direction: column; padding: 0 0 var(--pr-space-2) var(--pr-space-3); }
.pr26-drawer__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--pr-text-base);
  color: var(--pr-text);
  text-decoration: none;
}

.pr26-drawer__foot {
  padding: 0 var(--pr-space-4) var(--pr-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-1);
  font-size: 15px;
}
.pr26-drawer__foot > .pr26-btn { margin-bottom: var(--pr-space-3); }
.pr26-drawer__phone { color: var(--pr-primary); font-weight: 700; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.pr26-drawer__foot a { min-height: 44px; display: flex; align-items: center; }

/* ---- footer ---- */

.pr26-footer { background: var(--pr-primary); color: #c9d9ec; }

.pr26-footer__inner {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: 56px var(--pr-space-5) var(--pr-space-6);
}

.pr26-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pr-space-6) var(--pr-space-5);
}

.pr26-footer__brand { min-width: 200px; }
/* Text wordmark, not the logo image: the PNG has an opaque white background,
   so inverting it onto navy produced a solid white rectangle. */
.pr26-footer__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  margin-bottom: var(--pr-space-3);
  text-decoration: none;
}
.pr26-footer__wordmark-name {
  font-size: 21px; font-weight: 800; letter-spacing: 0.06em; color: #fff;
}
.pr26-footer__wordmark-sub {
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  color: #9fb3ca; text-transform: uppercase;
}
.pr26-footer__wordmark:hover .pr26-footer__wordmark-name { text-decoration: underline; }
.pr26-footer__brand p { margin: 0 0 var(--pr-space-4); font-size: 15px; color: #c9d9ec; max-width: 32ch; }

.pr26-footer__contact { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.pr26-footer__phone { color: #fff !important; font-weight: 700; }
.pr26-footer__contact span { color: #9fb3ca; }

.pr26-footer__col h2 {
  margin: 0 0 var(--pr-space-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb3ca;
}
.pr26-footer__col a { display: block; padding: 6px 0; font-size: 15px; }

.pr26-footer a { color: #c9d9ec; text-decoration: none; }
.pr26-footer a:hover { color: #fff; text-decoration: underline; }

.pr26-footer__legal {
  margin-top: 40px;
  padding-top: var(--pr-space-5);
  border-top: 1px solid rgba(201, 217, 236, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-4) var(--pr-space-6);
  align-items: center;
  justify-content: space-between;
}
.pr26-footer__eho { display: flex; gap: var(--pr-space-3); align-items: center; font-size: 14px; color: #9fb3ca; }
.pr26-footer__eho span { max-width: 52ch; }
.pr26-footer__copy { font-size: 14px; color: #9fb3ca; }

/* ---- breakpoint: below 1100px the nav becomes the drawer ---- */

@media (max-width: 1099px) {
  .pr26-nav,
  .pr26-header__cta,
  .pr26-utility { display: none; }
  .pr26-header__mobile { display: flex; }
  .pr26-header__inner { padding: var(--pr-space-2) var(--pr-space-4); }
  .pr26-logo img { height: 44px; }
}

@media (min-width: 1100px) {
  .pr26-drawer { display: none !important; }
}

/* Safety net: even with shortened labels, never let the nav push the CTA off
   screen. Measured at 1200px container the nav needs ~840px; allow it to shrink
   and tighten padding before that ever becomes an overflow. */
.pr26-nav { min-width: 0; flex-shrink: 1; }
.pr26-nav__link { padding-left: 9px; padding-right: 9px; }

@media (max-width: 1280px) {
  .pr26-nav__link { padding-left: 6px; padding-right: 6px; font-size: 14px; }
}

/* ================================================================== *
 * Homepage — implements Prospera Home.dc.html
 * ================================================================== */

.pr26-eyebrow {
  margin: 0 0 var(--pr-space-3);
  font-size: var(--pr-text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9cc3ec;
}

.pr26-h2 {
  margin: 0 0 var(--pr-space-2);
  font-size: clamp(24px, 3vw, 30px);
  line-height: var(--pr-leading-tight);
  font-weight: 800;
  color: var(--pr-primary);
}

.pr26-section {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--pr-space-5);
}
.pr26-section--bordered { border-top: 1px solid var(--pr-border); max-width: none; }
.pr26-section--bordered > .pr26-split { max-width: var(--pr-container); margin: 0 auto; }

.pr26-section__lede { margin: 0 0 var(--pr-space-6); font-size: var(--pr-text-md); color: var(--pr-text-muted); max-width: 60ch; }

.pr26-section__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-2) var(--pr-space-5);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}

.pr26-link-strong {
  font-size: var(--pr-text-base);
  font-weight: 700;
  color: var(--pr-link);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pr26-link-strong:hover { color: var(--pr-primary); text-decoration: underline; }

/* ---- hero ---- */

.pr26-hero {
  background: linear-gradient(150deg, #053060 0%, #0e4a8a 62%, #2d6db3 100%);
  color: #fff;
}

.pr26-hero__inner {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--pr-space-5) clamp(40px, 6vw, 72px);
}

.pr26-hero__title {
  margin: 0 0 var(--pr-space-3);
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.15;
  font-weight: 800;
  max-width: 20ch;
  color: #fff;
  text-wrap: pretty;
}

.pr26-hero__lede {
  margin: 0 0 var(--pr-space-6);
  font-size: clamp(17px, 1.6vw, 19px);
  color: #d5e2f1;
  max-width: 52ch;
  text-wrap: pretty;
}

.pr26-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-2) 28px;
  margin-top: 20px;
  font-size: 15px;
}
.pr26-hero__links a {
  color: #d5e2f1;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pr26-hero__links a:hover { color: #fff; }

/*
 * With the search form gone these links carry the hero's call to action, so
 * they are rendered as buttons rather than underlined text.
 */
.pr26-hero__links--primary {
  gap: var(--pr-space-3);
  margin-top: var(--pr-space-6);
  font-size: var(--pr-text-base);
}

.pr26-hero__links--primary a {
  padding: 0 24px;
  border-radius: var(--pr-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}

.pr26-hero__links--primary a:first-child {
  background: var(--pr-primary);
  border-color: var(--pr-primary);
  box-shadow: 0 10px 26px rgba(2, 20, 42, 0.32);
}

.pr26-hero__links--primary a:first-child:hover { background: var(--pr-primary-hover); border-color: var(--pr-primary-hover); }
.pr26-hero__links--primary a:hover { background: rgba(255, 255, 255, 0.14); }

/* ---- four services ---- */

.pr26-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.pr26-service {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-3);
  padding: var(--pr-space-5);
  background: var(--pr-bg);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  text-decoration: none;
  color: var(--pr-text);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.pr26-service:hover { box-shadow: var(--pr-shadow-md); border-color: var(--pr-border-hover); color: var(--pr-text); }

.pr26-service__icon {
  width: 44px; height: 44px;
  border-radius: var(--pr-radius-lg);
  background: var(--pr-primary-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pr-primary);
}
.pr26-service__title { font-size: 18px; font-weight: 700; }
.pr26-service__desc { font-size: 15px; color: var(--pr-text-muted); }
.pr26-service__cta { font-size: 15px; font-weight: 700; color: var(--pr-link); margin-top: auto; }

/* ---- navy band (military) ---- */

.pr26-band-navy { background: var(--pr-primary); color: #fff; }

.pr26-band-navy__inner {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--pr-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-6);
  align-items: center;
  justify-content: space-between;
}
.pr26-band-navy__copy { flex: 2 1 420px; min-width: 280px; }
.pr26-band-navy__copy h2 {
  margin: 0 0 var(--pr-space-3);
  font-size: clamp(24px, 3vw, 32px);
  line-height: var(--pr-leading-tight);
  font-weight: 800;
  color: #fff;
  max-width: 24ch;
  text-wrap: pretty;
}
.pr26-band-navy__copy p { margin: 0; font-size: var(--pr-text-md); color: #c9d9ec; max-width: 58ch; text-wrap: pretty; }
.pr26-band-navy__actions { display: flex; flex-wrap: wrap; gap: var(--pr-space-3); }

.pr26-btn--lg { height: 48px; font-size: var(--pr-text-md); gap: 10px; }
.pr26-btn--onNavy { background: #fff; color: var(--pr-primary); }
.pr26-btn--onNavy:hover { background: var(--pr-primary-tint); color: var(--pr-primary); }
.pr26-btn--ghost { background: transparent; border: 2px solid #9cc3ec; color: #fff; }
.pr26-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
.pr26-btn--outline { background: #fff; border: 2px solid var(--pr-primary); color: var(--pr-primary); }
.pr26-btn--outline:hover { background: var(--pr-primary-tint); color: var(--pr-primary); }

/* ---- company + testimonial ---- */

.pr26-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: start;
  padding: clamp(48px, 6vw, 80px) var(--pr-space-5);
}
.pr26-section--bordered > .pr26-split { padding-left: var(--pr-space-5); padding-right: var(--pr-space-5); }

.pr26-prose { margin: 0 0 var(--pr-space-4); font-size: var(--pr-text-md); color: var(--pr-text); max-width: 62ch; text-wrap: pretty; }

.pr26-quote {
  margin: 0;
  background: var(--pr-surface);
  border-radius: var(--pr-radius-lg);
  padding: 28px;
}
.pr26-quote blockquote { margin: 0 0 var(--pr-space-4); font-size: 18px; line-height: 1.55; color: var(--pr-text); text-wrap: pretty; }
.pr26-quote figcaption { font-size: 15px; font-weight: 600; color: var(--pr-text-muted); }

/* ---- contact CTA ---- */

.pr26-cta { background: var(--pr-surface); border-top: 1px solid var(--pr-border); }
.pr26-cta__inner {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--pr-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
}
.pr26-cta h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; color: var(--pr-primary); }
.pr26-cta p { margin: 0; font-size: var(--pr-text-md); color: var(--pr-text-muted); }
.pr26-cta__actions { display: flex; flex-wrap: wrap; gap: var(--pr-space-3); }

/* ================================================================== *
 * Property detail — implements Prospera Property Detail.dc.html
 * ================================================================== */

.pr26-detail {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: var(--pr-space-5) var(--pr-space-5) var(--pr-space-8);
}

.pr26-crumbs {
  font-size: var(--pr-text-sm);
  color: var(--pr-text-muted);
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pr26-crumbs a { color: var(--pr-link); text-decoration: none; }
.pr26-crumbs a:hover { text-decoration: underline; }

.pr26-detail__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-6);
  align-items: flex-start;
}
.pr26-detail__main { flex: 2 1 560px; min-width: 0; }
.pr26-detail__aside { flex: 1 1 300px; position: sticky; top: 96px; }

.pr26-detail__tags { display: flex; flex-wrap: wrap; gap: var(--pr-space-2); margin-bottom: var(--pr-space-3); }
.pr26-detail__tag-muted,
.pr26-detail__tag-sold {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--pr-radius-sm);
}
.pr26-detail__tag-muted { background: var(--pr-surface); color: var(--pr-text-muted); }
.pr26-detail__tag-sold { background: var(--pr-status); color: #fff; }

.pr26-detail__title {
  margin: 0 0 var(--pr-space-2);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  font-weight: 800;
  color: var(--pr-text);
  text-wrap: pretty;
}

.pr26-detail__price {
  margin: 0 0 var(--pr-space-5);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 800;
  color: var(--pr-primary);
}
.pr26-detail__price small { font-size: 18px; font-weight: 600; color: var(--pr-text-muted); }

/* Fixed 16:9 per the design. Without it a portrait listing photo (683x1024 is
   real in this library) is upscaled to 1100px tall and dominates the page. */
.pr26-detail__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  margin-bottom: var(--pr-space-6);
  background: var(--pr-surface);
}
.pr26-detail__media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }

/* Seven listings have a description typed into the editor, one with 28 images
   and inline `float:right; width:45%` styles. Contain it rather than drop it —
   it is the only real prose those listings have. */
.pr26-detail__body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--pr-radius-md);
}
.pr26-detail__body > div[style*="float"] { max-width: 50% !important; }

/* Long descriptions are collapsed by default — see the note in
   single-property.php. Styled as a plain disclosure, no JavaScript. */
.pr26-detail__more { margin-bottom: 28px; border-top: 1px solid #eef1f5; }
.pr26-detail__more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-space-2);
  min-height: 48px;
  font-size: var(--pr-text-base);
  font-weight: 700;
  color: var(--pr-link);
  cursor: pointer;
  list-style: none;
}
.pr26-detail__more > summary::-webkit-details-marker { display: none; }
.pr26-detail__more > summary:hover { color: var(--pr-primary); }
.pr26-detail__more[open] > summary svg { transform: rotate(180deg); }
.pr26-detail__more .pr26-detail__body { padding-top: var(--pr-space-3); }

.pr26-detail__h2 { margin: 0 0 var(--pr-space-3); font-size: 22px; font-weight: 800; color: var(--pr-primary); }

.pr26-detail__amenities {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  columns: 2 240px;
  column-gap: var(--pr-space-6);
}
.pr26-detail__amenities li {
  break-inside: avoid;
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: var(--pr-space-2) 0;
  border-bottom: 1px solid #eef1f5;
  font-size: var(--pr-text-base);
}
.pr26-detail__amenities li span { color: var(--pr-primary); font-weight: 800; }

.pr26-detail__body { margin-bottom: 28px; }
.pr26-detail__back { margin-top: 40px; }

.pr26-askbox {
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  padding: var(--pr-space-5);
}
.pr26-askbox h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--pr-primary); }
.pr26-askbox p { margin: 0 0 20px; font-size: 15px; color: var(--pr-text-muted); }
.pr26-askbox .pr26-btn { margin-bottom: 10px; }
.pr26-askbox__sig { margin: var(--pr-space-4) 0 0 !important; font-size: var(--pr-text-sm); }

@media (max-width: 919px) {
  .pr26-detail__aside { position: static; }
}

/* ================================================================== *
 * Interior pages — implements the layout from
 * Prospera Property Management.dc.html, applied to every page.php
 * ================================================================== */

.pr26-page {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) var(--pr-space-5) var(--pr-space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-7);
  align-items: flex-start;
}
.pr26-page__main { flex: 2 1 560px; min-width: 0; max-width: 70ch; }
.pr26-page--full .pr26-page__main { max-width: none; flex-basis: 100%; }
.pr26-page__aside { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--pr-space-5); }

/* CMS-authored content. Kept deliberately plain so editor markup and Beaver
   Builder rows both render predictably. */
.pr26-prose-block { font-size: var(--pr-text-md); }
.pr26-prose-block p { margin: 0 0 20px; text-wrap: pretty; }
.pr26-prose-block h2 { margin: var(--pr-space-6) 0 var(--pr-space-3); font-size: var(--pr-text-xl); font-weight: 800; color: var(--pr-primary); }
.pr26-prose-block h3 { margin: var(--pr-space-5) 0 var(--pr-space-2); font-size: 19px; font-weight: 700; color: var(--pr-primary); }
.pr26-prose-block ul,
.pr26-prose-block ol { margin: 0 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: var(--pr-space-2); }
.pr26-prose-block li { font-size: var(--pr-text-md); }
.pr26-prose-block img { max-width: 100%; height: auto; border-radius: var(--pr-radius-md); }
.pr26-prose-block table { max-width: 100%; }
.pr26-prose-block a { color: var(--pr-link); }

/* Contact Form 7 fields, used on several interior pages. */
.pr26-prose-block input[type="text"],
.pr26-prose-block input[type="email"],
.pr26-prose-block input[type="tel"],
.pr26-prose-block input[type="date"],
.pr26-prose-block select,
.pr26-prose-block textarea {
  width: 100%;
  max-width: 460px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-md);
  font-size: var(--pr-text-base);
  font-family: inherit;
  color: var(--pr-text);
  background: var(--pr-bg);
  box-sizing: border-box;
}
.pr26-prose-block textarea { min-height: 140px; }
.pr26-prose-block input[type="submit"] {
  min-height: 44px;
  padding: 0 22px;
  background: var(--pr-primary);
  color: #fff;
  border: none;
  border-radius: var(--pr-radius-md);
  font-size: var(--pr-text-base);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.pr26-prose-block input[type="submit"]:hover { background: var(--pr-primary-hover); }

/* ---- sidebar ---- */

.pr26-sectionnav {
  background: var(--pr-bg);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  padding: var(--pr-space-2);
}
.pr26-sectionnav h2 {
  margin: var(--pr-space-2) var(--pr-space-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pr-text-muted);
}
.pr26-sectionnav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 2px var(--pr-space-3);
  border-radius: var(--pr-radius-md);
  font-size: var(--pr-text-base);
  color: var(--pr-text);
  text-decoration: none;
}
.pr26-sectionnav a:hover { background: var(--pr-surface); color: var(--pr-primary); }
.pr26-sectionnav a[aria-current="page"] { background: var(--pr-primary-tint); color: var(--pr-primary); font-weight: 700; }

.pr26-contactcard {
  background: var(--pr-primary);
  border-radius: var(--pr-radius-lg);
  padding: var(--pr-space-5);
  color: #fff;
}
.pr26-contactcard h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #fff; }
.pr26-contactcard p { margin: 0 0 var(--pr-space-4); font-size: 15px; color: #c9d9ec; }
.pr26-contactcard .pr26-btn { margin-bottom: 10px; }

/* ---- hero slider ----------------------------------------------------
   The MetaSlider slideshow sits behind the hero copy rather than above it,
   so the homepage keeps its photography without stacking two full-width
   visual blocks. A navy scrim keeps the white headline and search readable
   over whichever slide is showing.
   MetaSlider hardcodes max-width:1100px inline; override to go full-bleed. */

.pr26-hero--slider { position: relative; isolation: isolate; overflow: hidden; }

.pr26-hero__slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Nivo sizes itself from the image's natural ratio, leaving a gap under the
   hero. Force every layer — wrapper, slider, and the visible .nivo-main-image
   Nivo swaps in — to fill the hero box. */
.pr26-hero__slider .metaslider,
.pr26-hero__slider .metaslider .nivoSlider,
.pr26-hero__slider .metaslider .slides,
.pr26-hero__slider .nivoSlider,
.pr26-hero__slider .flexslider,
.pr26-hero__slider .flex-viewport,
.pr26-hero__slider .slides li {
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.pr26-hero__slider img,
.pr26-hero__slider .nivo-main-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 40%;
  max-width: none !important;
}
/* MetaSlider's own nav/captions would sit under the scrim; hide them. */
.pr26-hero__slider .nivo-directionNav,
.pr26-hero__slider .nivo-controlNav,
.pr26-hero__slider .nivo-caption,
.pr26-hero__slider .flex-direction-nav,
.pr26-hero__slider .flex-control-nav { display: none !important; }

.pr26-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Lighter than a flat wash so the photography still reads, but heavy enough
     on the left — where the headline and search sit — to hold white text. */
  background:
    linear-gradient(105deg, rgba(5,48,96,0.92) 0%, rgba(5,48,96,0.80) 42%, rgba(9,58,112,0.55) 100%);
}

.pr26-hero--slider .pr26-hero__inner { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .pr26-hero__slider .nivoSlider img { animation: none !important; transition: none !important; }
}

/* MetaSlider nests two unstyled wrappers between .metaslider and .nivoSlider
   (an anonymous div, then .slider-wrapper). height:100% only chains through
   elements that have a definite height, so both need it too or the slider
   stops ~90px short of the hero. */
.pr26-hero__slider > div,
.pr26-hero__slider > div > div,
.pr26-hero__slider .slider-wrapper,
.pr26-hero__slider .theme-default {
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ *
 * Blog list + single post
 *
 * /news/ and single posts still render home.php / single.php — 2014 markup
 * inside the 2026 shell. The old theme.css that used to style them is no
 * longer enqueued, so until those templates are rebuilt the markup here is
 * styled directly: .posts / .post-loop / .post-single / .post-title /
 * .post-thumbnail / .post-content.
 *
 * This became visible when /news/ started showing real articles instead of
 * six-word listing stubs: every featured image rendered at its full 1,500px
 * and the page ran to 6,155px.
 * ------------------------------------------------------------------ */

.page-default .container {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: var(--pr-space-6) var(--pr-space-5) var(--pr-space-8);
}

.page-default .row { display: block; }

.posts {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-6);
  width: 100%;
}

/* ---- list view ---- */

.post-loop {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--pr-space-5);
  align-items: start;
  padding-bottom: var(--pr-space-6);
  border-bottom: 1px solid var(--pr-border);
}

.post-loop .post-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 var(--pr-space-2);
  font-size: var(--pr-text-xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Something upstream centres and upper-cases headings — both are inherited
   properties, so they arrive from an ancestor rather than a rule on .post-title.
   Titles read as written, left-aligned, like everywhere else in the design. */
.post-loop .post-title,
.post-single .post-title,
.post-loop .post-content,
.post-single .post-content {
  text-align: left;
  text-transform: none;
}

.post-loop .post-title a { color: var(--pr-primary); text-decoration: none; }
.post-loop .post-title a:hover { text-decoration: underline; }

.post-loop .post-thumbnail {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--pr-radius-lg);
  display: block;
}

.post-loop .post-content {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--pr-text-md);
  color: var(--pr-text-muted);
}

.post-loop .post-content p { margin: 0 0 12px; text-wrap: pretty; }

/* A post with no featured image should not leave a 300px hole. */
.post-loop:not(:has(.post-thumbnail)) { grid-template-columns: 1fr; }
.post-loop:not(:has(.post-thumbnail)) .post-title,
.post-loop:not(:has(.post-thumbnail)) .post-content { grid-column: 1; }

/* ---- single post ---- */

.post-single {
  max-width: 75ch;
  margin: 0 auto;
  font-size: var(--pr-text-md);
}

.post-single .post-title {
  margin: 0 0 var(--pr-space-5);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pr-primary);
  text-wrap: balance;
}

.post-single .post-thumbnail {
  width: 100%;
  height: auto;
  margin: 0 0 var(--pr-space-6);
  border-radius: var(--pr-radius-lg);
  display: block;
}

.post-single .post-content p { margin: 0 0 20px; text-wrap: pretty; }
.post-single .post-content h2 { margin: var(--pr-space-6) 0 var(--pr-space-3); font-size: var(--pr-text-xl); font-weight: 800; color: var(--pr-primary); }
.post-single .post-content h3 { margin: var(--pr-space-5) 0 var(--pr-space-2); font-size: 19px; font-weight: 700; color: var(--pr-primary); }
.post-single .post-content img { max-width: 100%; height: auto; border-radius: var(--pr-radius-md); }
.post-single .post-content ul,
.post-single .post-content ol { margin: 0 0 20px; padding-left: 22px; }

@media (max-width: 720px) {
  .page-default .container { padding: var(--pr-space-5) var(--pr-space-4) var(--pr-space-7); }
  .post-loop { grid-template-columns: 1fr; gap: var(--pr-space-3); }
  .post-loop .post-title { grid-column: 1; grid-row: 2; }
  .post-loop .post-thumbnail { grid-column: 1; grid-row: 1; height: 190px; }
  .post-loop .post-content { grid-column: 1; grid-row: 3; }
}

/* ------------------------------------------------------------------ *
 * Property photo gallery
 *
 * Teresa: "the additional pictures need to be much larger, not small on the
 * left-hand side. The reason for clicking on the additional pictures is to
 * see more about the property."
 *
 * They were small because the images were written as alignleft with
 * width="100%" and rendered inline inside the 586px description column. The
 * gallery sits outside that column and gets the full page width, so each
 * photo is roughly 3x the area it had.
 * ------------------------------------------------------------------ */

.pr26-gallery {
  margin-top: var(--pr-space-8);
  padding-top: var(--pr-space-6);
  border-top: 1px solid var(--pr-border);
}

.pr26-gallery__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--pr-space-5);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pr-primary);
}

.pr26-gallery__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--pr-text-muted);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 999px;
  padding: 2px 10px;
}

.pr26-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--pr-space-4);
}

.pr26-gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--pr-radius-lg);
  border: 1px solid var(--pr-border);
  background: var(--pr-surface);
}

.pr26-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  transition: transform 0.25s;
}

.pr26-gallery__item:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .pr26-gallery__item img { transition: none; }
  .pr26-gallery__item:hover img { transform: none; }
}

@media (max-width: 720px) {
  .pr26-gallery__grid { grid-template-columns: 1fr; gap: var(--pr-space-3); }
}


/* ------------------------------------------------------------------ *
 * Team bio pages
 *
 * Teresa: "the page should be laid out different so people don't have to
 * scroll down so far to read about me. right now it's just too long one
 * column."
 *
 * Her page already carries two-column markup, and style.css (still enqueued)
 * already makes .flex-box a flex row. What it also does is:
 *
 *   .flex-box     { text-align: center; margin-left: 100px; margin-right: 100px }
 *   .flex-content { margin-left: 25px }
 *   ul.flex-social li { display: block; margin-bottom: 15px }
 *
 * Fixed 100px side margins squeeze the bio on desktop and overflow the
 * viewport on a phone, where they eat 200px of a 342px column. The social
 * links are explicitly stacked. Everything below overrides those, so the
 * selectors are prefixed with .pr26-prose-block to outrank `ul.flex-social`.
 * ------------------------------------------------------------------ */

.pr26-prose-block .flex-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-6);
  align-items: flex-start;
  text-align: left;
  margin: 0 0 var(--pr-space-6);
  width: 100%;
}

/* The inline width:50% the editor wrote overflows once a gap exists, so the
   flex basis governs instead. This is the one place !important is warranted:
   it is beating an inline style attribute. */
.pr26-prose-block .flex-box > .flex-item { width: auto !important; min-width: 0; }
/* These bases have to fit inside the ~740px main column, because a team page
   also carries the section-nav aside. Anything larger and the photo wraps
   below the bio, which is the stacked layout she was complaining about. */
.pr26-prose-block .flex-box > .flex-item:first-child { flex: 1 1 340px; }

/* Photo first, and narrower than it was. She wrote the photo column second, so
   this reorders rather than asking her to rearrange her own page:
   "on the regular site ... my picture is over on the left here" and "my picture
   doesn't have to be a huge either". */
.pr26-prose-block .flex-box > .flex-item:last-child {
  order: -1;
  flex: 0 1 260px;
}

.pr26-prose-block .flex-box img {
  width: 100%;
  height: auto;
  border-radius: var(--pr-radius-lg);
  display: block;
  margin: 0;
}

/* ---- the link block under her photo ---- */

.pr26-prose-block .flex-content {
  margin: var(--pr-space-5) 0 0;
  padding: var(--pr-space-5);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  text-align: left;
}

.pr26-prose-block .flex-content h2 {
  margin: 0 0 var(--pr-space-2);
  font-size: var(--pr-text-lg);
  font-weight: 700;
}

.pr26-prose-block .flex-content h2 a { text-decoration: none; }
.pr26-prose-block .flex-content h2 a:hover { text-decoration: underline; }

.pr26-prose-block .flex-content h4 {
  margin: var(--pr-space-4) 0 0;
  font-size: var(--pr-text-base);
  font-weight: 400;
  line-height: var(--pr-leading-body);
  text-wrap: pretty;
}

.pr26-prose-block ul.flex-social {
  display: flex;
  flex-flow: row wrap;
  gap: var(--pr-space-2) var(--pr-space-4);
  align-items: center;
  margin: var(--pr-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.pr26-prose-block ul.flex-social li {
  display: inline-flex;
  margin: 0;
}

.pr26-prose-block ul.flex-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.pr26-prose-block ul.flex-social a:hover { text-decoration: underline; }
.pr26-prose-block ul.flex-social img { width: 22px; height: 22px; display: block; margin: 0; border-radius: 0; }

/* ---- testimonials ---- *
 *
 * Ten quotes written as twenty bare full-width paragraphs, which is most of
 * why the page reads as one long column. prospera_group_testimonials() pairs
 * each quote with its attribution so they can sit in a grid.
 */

.pr26-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--pr-space-4);
  margin: var(--pr-space-5) 0 var(--pr-space-6);
}

.pr26-quote-card {
  margin: 0;
  padding: var(--pr-space-5);
  background: var(--pr-bg);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  break-inside: avoid;
}

.pr26-quote-card p {
  margin: 0 0 var(--pr-space-3);
  font-size: var(--pr-text-base);
  line-height: var(--pr-leading-body);
  text-wrap: pretty;
}

.pr26-quote-card cite {
  display: block;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--pr-text-muted);
}

/* White text written for a dark background that no longer exists. On her page
   it made the heading above the testimonials invisible. */
.pr26-prose-block [style*="color: #ffffff"],
.pr26-prose-block [style*="color:#ffffff"],
.pr26-prose-block [style*="color: #fff"],
.pr26-prose-block [style*="color:#fff"] { color: inherit !important; }

/* Bootstrap 3 gives every bare <blockquote> a 5px #eee left border, which shows
   up as a long grey rule down the side of any quoted block the editor wrote.
   The cards carry their own frame, so this only clears the unstyled ones. */
.pr26-prose-block blockquote:not(.pr26-quote-card),
.pr26-prose blockquote:not(.pr26-quote-card) {
  border-left: 0;
  padding-left: 0;
}

/* ---- the testimonials disclosure ---- *
 *
 * Reuses .pr26-detail__more, the toggle already built for long listing
 * descriptions. One collapsible on the site, not two.
 */

.pr26-quotes__more { margin-top: 0; }
.pr26-quotes__more > .pr26-quotes { margin-top: var(--pr-space-4); }

@media (max-width: 860px) {
  .pr26-prose-block .flex-box { gap: var(--pr-space-5); }
  /* Stacked, order:-1 already puts the photo above the bio, which is the
     reading order she has on production. */
  .pr26-prose-block .flex-box > .flex-item:last-child { flex: 1 1 100%; max-width: 420px; }
}

/* ------------------------------------------------------------------ *
 * New Construction — development cards
 *
 * Teresa: "can we have all the new construction look like this. just the photo
 * of the property and then click on it." Built from the page's own headings by
 * prospera_development_cards(), so the write-ups below stay as she wrote them
 * and the grid is simply the way in.
 * ------------------------------------------------------------------ */

.pr26-devgrid {
  display: grid;
  /* 210px so three fit across the ~740px main column, matching the reference
     Teresa sent. This page carries the contact aside, so the grid does not get
     the full container width. */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--pr-space-4);
  margin: 0 0 var(--pr-space-8);
}

.pr26-devgrid--done { margin-top: var(--pr-space-5); }

.pr26-devcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  background: var(--pr-bg);
  text-decoration: none;
  color: var(--pr-text);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.pr26-devcard:hover {
  box-shadow: var(--pr-shadow-md);
  border-color: var(--pr-border-hover);
  text-decoration: none;
}

.pr26-devcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--pr-surface);
  overflow: hidden;
}

.pr26-devcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}

.pr26-devcard__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pr-space-4);
}

.pr26-devcard__name {
  font-size: var(--pr-text-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pr-primary);
  text-wrap: pretty;
}

.pr26-devcard__place {
  font-size: 14px;
  color: var(--pr-text-muted);
  text-wrap: pretty;
}

/* Anchored write-ups sit below the grid; keep them clear of the sticky header. */
.pr26-prose-block h3[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------------ *
 * Team bio layout
 *
 * Nasir's reference, rebuilt on this theme's own tokens rather than its
 * palette: hero with the portrait beside the name and the calls to action, a
 * main column of sections, a sidebar of ways to get in touch, and the
 * testimonials in a band of their own.
 *
 * The shape comes from her content. See prospera_bio_parts().
 * ------------------------------------------------------------------ */

.pr26-bio__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--pr-space-7);
  align-items: start;
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: 40px var(--pr-space-5) var(--pr-space-6);
}

.pr26-bio__role {
  display: inline-block;
  margin: 0 0 var(--pr-space-3);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--pr-primary-tint, var(--pr-surface));
  color: var(--pr-primary);
  font-size: var(--pr-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pr26-bio__name {
  margin: 0 0 var(--pr-space-4);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pr-primary);
}

.pr26-bio__lede {
  margin: 0 0 var(--pr-space-5);
  font-size: var(--pr-text-md);
  line-height: var(--pr-leading-body);
  color: var(--pr-text-muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* The portrait is round, so a square crop keeps faces centred whatever the
   uploaded aspect ratio happens to be.
   The tint and the ring are not decoration: her portrait is cut out on white,
   so on a white page a circular crop has no visible edge at all and the whole
   thing reads as a rectangle. */
.pr26-bio__portrait {
  border-radius: 50%;
  background: var(--pr-surface);
  box-shadow: inset 0 0 0 1px var(--pr-border);
}

.pr26-bio__portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 50%;
  display: block;
}

/* ---- body and sidebar ---- */

.pr26-bio__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--pr-space-7);
  align-items: start;
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: 0 var(--pr-space-5) var(--pr-space-8);
}

.pr26-bio__main > *:first-child { margin-top: 0; }
.pr26-bio__main p { max-width: 68ch; text-wrap: pretty; }

.pr26-bio__section { margin: var(--pr-space-6) 0 0; }

.pr26-bio__h1 {
  margin: 0 0 var(--pr-space-5);
  letter-spacing: 0.01em;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: var(--pr-leading-tight);
  font-weight: 800;
  color: var(--pr-primary);
}

.pr26-bio__h2 {
  margin: 0 0 var(--pr-space-4);
  font-size: 24px;
  font-weight: 800;
  color: var(--pr-primary);
}

.pr26-bio__eyebrow {
  margin: 0 0 var(--pr-space-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pr-text-muted);
}

/* ---- short items read as tags ---- */

.pr26-bio__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr26-bio__pills li {
  margin: 0;
  padding: 9px 16px;
  border: 1px solid var(--pr-border);
  border-radius: 999px;
  background: var(--pr-bg);
  font-size: 15px;
  color: var(--pr-text);
}

/* ---- a named thing with a subtitle gets a panel ---- */

.pr26-bio__panel {
  margin: var(--pr-space-6) 0 0;
  padding: var(--pr-space-6);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
}

.pr26-bio__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pr-space-4) var(--pr-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr26-bio__checks li {
  display: flex;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  line-height: var(--pr-leading-body);
  text-wrap: pretty;
}

.pr26-bio__checks svg { flex: none; margin-top: 3px; color: var(--pr-primary); }

/* ---- everything else keeps a list, with a mark of its own ---- */

.pr26-bio__dots { margin: 0; padding: 0; list-style: none; }

.pr26-bio__dots li {
  position: relative;
  margin: 0 0 var(--pr-space-3);
  padding-left: 22px;
  line-height: var(--pr-leading-body);
  text-wrap: pretty;
  max-width: 68ch;
}

.pr26-bio__dots li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pr-primary);
}

/* ---- sidebar ---- */

.pr26-bio__aside { display: grid; gap: var(--pr-space-5); position: sticky; top: var(--pr-space-5); }

.pr26-bio__card {
  padding: var(--pr-space-5);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
}

.pr26-bio__card p { margin: 0 0 var(--pr-space-4); font-size: 15px; line-height: var(--pr-leading-body); color: var(--pr-text-muted); }
.pr26-bio__card .pr26-bio__eyebrow { color: var(--pr-text-muted); }

.pr26-bio__links { margin: 0; padding: 0; list-style: none; }
.pr26-bio__links li { margin: 0 0 10px; }

.pr26-bio__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.pr26-bio__links a:hover { text-decoration: underline; }

.pr26-bio__card ul.flex-social {
  display: flex;
  flex-flow: row wrap;
  gap: var(--pr-space-3);
  align-items: center;
  margin: var(--pr-space-4) 0 0;
  padding: var(--pr-space-4) 0 0;
  border-top: 1px solid var(--pr-border);
  list-style: none;
}

.pr26-bio__card ul.flex-social li { display: inline-flex; margin: 0; }
/* Icon only in the sidebar: the label is the image's own alt text. */
.pr26-bio__card ul.flex-social a { font-size: 0; }
.pr26-bio__card ul.flex-social img { width: 24px; height: 24px; display: block; margin: 0; border-radius: 0; }

/* ---- testimonials band ---- */

.pr26-bio__quotes {
  background: var(--pr-surface);
  border-top: 1px solid var(--pr-border);
}

.pr26-bio__quotes-inner {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding: var(--pr-space-8) var(--pr-space-5);
}

/* Columns rather than grid rows: the quotes vary from two lines to a dozen,
   and a grid leaves a ragged hole under every short one. */
.pr26-bio__quotes .pr26-quotes {
  display: block;
  columns: 2;
  column-gap: var(--pr-space-5);
  margin: 0;
}

.pr26-bio__quotes .pr26-quote-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--pr-space-5);
}

.pr26-bio__quotes .pr26-quote-card::before {
  content: "\201C";
  display: block;
  margin-bottom: 4px;
  font-size: 42px;
  line-height: 0.7;
  color: var(--pr-primary);
}

@media (max-width: 980px) {
  .pr26-bio__hero,
  .pr26-bio__cols { grid-template-columns: minmax(0, 1fr); gap: var(--pr-space-6); }
  .pr26-bio__hero { padding-bottom: var(--pr-space-5); }
  .pr26-bio__portrait { max-width: 260px; }
  .pr26-bio__aside { position: static; }
  .pr26-bio__quotes .pr26-quotes { columns: 1; }
}

@media (max-width: 620px) {
  .pr26-bio__hero,
  .pr26-bio__cols { padding-left: var(--pr-space-4); padding-right: var(--pr-space-4); }
  .pr26-bio__quotes-inner { padding: var(--pr-space-7) var(--pr-space-4); }
  .pr26-bio__panel { padding: var(--pr-space-5); }
}