/* theme.css — visual design with a CSS variable contract.
   ─────────────────────────────────────────────────────────────────────────
   YAML → CSS variable mapping (the contract for the next editor):

     clients/{slug}.yaml             →  CSS variable
     ─────────────────────────────       ──────────────────────────────
     brand.primary                   →  --color-primary
     brand.secondary                 →  --color-secondary
     brand.accent                    →  --color-accent
     brand.text         (optional)   →  --color-text
     brand.muted        (optional)   →  --color-muted
     brand.bg           (optional)   →  --color-bg
     brand.surface      (optional)   →  --color-surface
     brand.border       (optional)   →  --color-border
     brand.font_heading              →  --font-heading
     brand.font_body                 →  --font-body

   build.py does not yet inject these — defaults below stand in until the
   yaml→:root override lands. To swap a brand, edit clients/{slug}.yaml
   and (eventually) re-build; nothing in this file or in any template
   should need to change.

   Default palette is intentionally placeholder-grade: deep navy primary,
   warm cream background, warm charcoal text, muted gold accent. The
   shape is real; the colors will be overridden when Dylan's brand lands.
   ───────────────────────────────────────────────────────────────────── */


html, body { overflow-x: hidden; max-width: 100%; }
:root {
  /* Brand palette — placeholder defaults */
  --color-primary:   #1f2a44;   /* deep navy */
  --color-secondary: #3a4660;   /* lighter navy for hover/secondary */
  --color-accent:    #b08a4a;   /* muted gold */

  /* Text + surfaces */
  --color-text:      #2a2622;   /* warm charcoal */
  --color-muted:     #6e6a64;
  --color-bg:        #faf6ef;   /* warm cream */
  --color-surface:   #ffffff;
  --color-border:    #e6dfd1;

  /* Status colors (form feedback) */
  --color-success-bg: #e9f3eb;
  --color-success-fg: #2f6a3a;
  --color-error-bg:   #f7e7e4;
  --color-error-fg:   #8a2a1f;

  /* Typography */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Layout tokens */
  --container-max: 1200px;
  --container-narrow: 760px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 6px 18px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 18px 40px rgba(20, 20, 20, 0.12);
}

/* ── Reset + base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--color-accent); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 var(--space-3); }

ul, ol { padding-left: 1.25rem; margin: 0 0 var(--space-3); }
li + li { margin-top: var(--space-1); }

/* ── Layout containers ───────────────────────────────────────────────── */
.site-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}
.page { max-width: var(--container-narrow); margin: 0 auto; }
.page > section { margin-bottom: var(--space-6); }

/* ── Header / nav ────────────────────────────────────────────────────── */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
}
.brand img { max-height: 44px; width: auto; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.site-nav a {
  color: var(--color-text);
  font-size: 0.95rem;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.site-nav a:hover { color: var(--color-primary); border-bottom-color: var(--color-accent); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-bg); }
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary); color: var(--color-bg); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  background-color: var(--color-secondary); /* fallback if hero.jpg missing */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: var(--space-7) var(--space-4);
  margin-bottom: var(--space-6);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,42,68,0.55), rgba(31,42,68,0.75));
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-narrow);
}
.hero h1 { color: #fff; margin-bottom: var(--space-3); }
.hero-tagline {
  font-size: 1.1rem;
  opacity: 0.92;
  margin-bottom: var(--space-4);
}
.hero-cta {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.hero .btn-secondary { color: #fff; border-color: #fff; }
.hero .btn-secondary:hover { background: #fff; color: var(--color-primary); }

/* ── Page header (about / buyers / sellers / contact / blog / listings) ─ */
.page-header {
  text-align: center;
  padding: var(--space-5) 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}
.page-header h1 { margin-bottom: var(--space-2); }
.page-header .lede {
  color: var(--color-muted);
  font-size: 1.1rem;
  margin: 0;
}

/* ── Services teaser (home) ──────────────────────────────────────────── */
.services-teaser, .about-teaser, .contact-cta, .featured-listings {
  max-width: var(--container-max);
  margin: 0 auto var(--space-6);
}
.services-teaser h2, .about-teaser h2, .contact-cta h2, .featured-listings h2 {
  text-align: center;
  margin-bottom: var(--space-5);
}
.services-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card h3 { margin-top: 0; }
.service-card a {
  font-weight: 500;
  border-bottom: 1px solid var(--color-accent);
}

/* ── Listings grid + cards ───────────────────────────────────────────── */
.listings-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-4);
}
.listing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.listing-card__image {
  aspect-ratio: 4 / 3;
  background: var(--color-border) center/cover no-repeat;
}
.listing-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.listing-card__title { font-size: 1.05rem; margin: 0 0 var(--space-1); color: var(--color-primary); }
.listing-card__price { font-weight: 600; color: var(--color-accent); margin: 0 0 var(--space-2); }
.listing-card__meta {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0 0 var(--space-1);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.listing-card__location { font-size: 0.85rem; color: var(--color-muted); }

.placeholder, .posts-coming-soon {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-muted);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* ── Contact form ────────────────────────────────────────────────────── */
.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.contact-form h2 { margin-top: 0; }
.form-row { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.form-row label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}
.form-row input,
.form-row select,
.form-row textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(176, 138, 74, 0.18);
}
.form-row textarea { resize: vertical; min-height: 6rem; }
.contact-form .btn { margin-top: var(--space-2); }
.form-success, .form-error {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}
.form-success { background: var(--color-success-bg); color: var(--color-success-fg); }
.form-error   { background: var(--color-error-bg);   color: var(--color-error-fg); }

.contact-info p { font-size: 1.05rem; margin-bottom: var(--space-2); }

/* Honeypot — off-screen but not display:none so bots fill it. */
.honeypot { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }

/* ── Blog ─────────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.blog-post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.post {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.post-header { text-align: center; margin-bottom: var(--space-5); }
.post-cat {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.post-title { margin-bottom: var(--space-2); }
.post-meta { color: var(--color-muted); font-size: 0.9rem; }
.post-body { font-size: 1.05rem; }
.post-body p { margin-bottom: var(--space-4); }
.post-footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

/* ── Listing detail ──────────────────────────────────────────────────── */
.listing { max-width: var(--container-max); margin: 0 auto; }
.listing-header {
  text-align: center;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.listing-address { margin-bottom: var(--space-2); }
.listing-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.listing-meta { color: var(--color-muted); }
.listing-gallery {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}
.listing-gallery img { border-radius: var(--radius-md); }
.listing-details dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.listing-details dt { color: var(--color-muted); }
.listing-details dd { margin: 0; font-weight: 500; }
.listing-cta { text-align: center; margin-top: var(--space-5); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-primary);
  color: var(--color-bg);
  padding: var(--space-6) var(--space-4) var(--space-4);
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  text-align: center;
}
.site-footer p { margin: 0 0 var(--space-1); }
.site-footer a { color: var(--color-bg); border-bottom: 1px solid transparent; }
.site-footer a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.footer-name { font-family: var(--font-heading); font-size: 1.15rem; }
.footer-brokerage { color: var(--color-bg); opacity: 0.85; }
.footer-license { color: var(--color-bg); opacity: 0.7; font-size: 0.9rem; }
.footer-social { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.footer-copyright {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.7;
  font-size: 0.85rem;
}

/* ── Misc helpers used by the templates ──────────────────────────────── */
.cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.about-bio p, .about-credentials li { font-size: 1.05rem; }

/* ── Responsive: single 768px breakpoint ─────────────────────────────── */
@media (min-width: 768px) {
  .site-main { padding: var(--space-6) var(--space-5); }

  .services-grid { grid-template-columns: repeat(3, 1fr); }

  /* Featured listings: 3-col on desktop */
  .listings-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  /* Full listings page: 4-col on desktop */
  .listings-grid--full { grid-template-columns: repeat(4, 1fr); }

  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  .listing-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
  .site-footer .footer-social { justify-content: flex-start; }
  .site-footer .footer-copyright { text-align: center; }
}


/* ─────────────────────────────────────────────────────────────────────────
   IDX listing styles — Phase 2.
   Theme-aware via brand variables. Mobile-first.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Status badges ─────────────────────────────────────────────────── */
.listing-status {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
}
.listing-status--active       { background: #d1fae5; color: #065f46; }
.listing-status--pending      { background: #fef3c7; color: #92400e; }
.listing-status--coming-soon  { background: #dbeafe; color: #1e40af; }
.listing-status--sold         { background: #f3f4f6; color: #6b7280; }

/* ─── Listings grid (browse + featured + search results) ────────────── */
.listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0 0 var(--space-6);
}
@media (min-width: 640px) {
  .listings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .listings-grid { grid-template-columns: repeat(3, 1fr); }
}

.listing-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.listing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.listing-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg);
  overflow: hidden;
}
.listing-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.listing-card-photo .listing-status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}
.listing-card-body {
  padding: 1rem 1.1rem 1.2rem;
}
.listing-card-price {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 0.25rem;
}
.listing-card-address {
  font-weight: 600;
  margin: 0 0 0.1rem;
  color: var(--color-text);
}
.listing-card-city {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}
.listing-card-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0;
}

/* ─── Listings index page ───────────────────────────────────────────── */
.listings-index .page-header {
  margin-bottom: var(--space-5);
}
.listings-compliance {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* ─── Listing detail page ───────────────────────────────────────────── */
.listing-detail {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.listing-detail-header {
  margin-bottom: var(--space-5);
}
.listing-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.listing-mls {
  font-size: 0.8rem;
  color: var(--color-muted);
}
.listing-detail-address {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin: 0 0 0.25rem;
  color: var(--color-text);
}
.listing-detail-city {
  color: var(--color-muted);
  margin: 0 0 0.75rem;
}
.listing-detail-price {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

/* Gallery + lightbox */
.listing-gallery {
  margin-bottom: var(--space-5);
}
.listing-gallery-main {
  background: var(--color-bg);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.75rem;
}
.listing-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.listing-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.listing-gallery-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  aspect-ratio: 1 / 1;
  transition: border-color 0.15s ease;
}
.listing-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.listing-gallery-thumb.is-active {
  border-color: var(--color-primary);
}
.listing-gallery-thumb:hover {
  border-color: var(--color-secondary);
}

/* Key facts strip */
.listing-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--space-5);
}
@media (min-width: 640px) {
  .listing-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
.listing-fact {
  background: var(--color-surface);
  padding: 1rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.listing-fact-value {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
}
.listing-fact-label {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.listing-description,
.listing-details-grid,
.listing-agent,
.listing-cta {
  margin-bottom: var(--space-5);
}
.listing-description p {
  max-width: 65ch;
  line-height: 1.7;
}
.listing-details-grid dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.listing-details-grid dt {
  font-weight: 600;
  color: var(--color-muted);
}
.listing-details-grid dd {
  margin: 0;
  color: var(--color-text);
}
.listing-agent-name {
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.listing-agent-office {
  color: var(--color-muted);
  margin: 0;
  font-size: 0.9rem;
}
.listing-cta {
  background: var(--color-bg);
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
}
.listing-cta h2 { margin-top: 0; }
.listing-compliance {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-muted);
  text-align: center;
}

/* ─── Search page ───────────────────────────────────────────────────── */
.search-filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 640px) {
  .search-filters { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .search-filters { grid-template-columns: repeat(3, 1fr); }
}
.search-filter label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.search-filter input,
.search-filter select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
}
.search-filter input:focus,
.search-filter select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.search-filter--range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.search-filter--range > div { display: contents; }

.search-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-muted);
}
.search-clear {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.search-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--color-muted);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}

/* ─── Featured listings (home page) ─────────────────────────────────── */
.featured-listings { margin: var(--space-6) 0; }
.featured-listings h2 { margin-bottom: var(--space-3); }
.featured-listings-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--color-primary);
}

/* Hamburger nav toggle — hidden on desktop, mobile reveals it and stacks the
   nav vertically. Toggle handler in src/js/site.js. */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  margin: 4px 0;
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .site-header { flex-wrap: wrap; }
  .site-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    order: 3;
    padding: 0.5rem 0;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}

/* Hero fallback gradient when no brand.hero image is set — uses the brand
   primary/secondary so it looks deliberate, not broken. */
.hero.hero--no-image {
  background:
    linear-gradient(135deg,
      var(--color-primary) 0%,
      var(--color-secondary) 100%);
  color: #fff;
}
.hero.hero--no-image .hero-tagline { color: rgba(255, 255, 255, 0.85); }