/* Rent With Firefly — public site styles
   Warm, light, residential — deliberately distinct from the Firefly AI OS / PM dashboards. */

:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --text: #2a2420;
  --text-muted: #6b6259;
  --border: #e8e0d3;
  --brand: #d97706;
  --brand-dark: #b45309;
  --brand-soft: #fdf1dd;
  --ink: #26221f;
  --available: #15803d;
  --available-soft: #e7f5ea;
  --unavailable: #9a3412;
  --radius: 12px;
  --shadow: 0 4px 16px rgba(38, 34, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(38, 34, 31, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Small firefly symbol cropped directly from the existing full logo
   (assets/images/fireflylogo.png) — same artwork, no redrawing. Used only in
   the footer brand mark, replacing the former plain CSS circle (.brand-glow). */
.footer-firefly-icon {
  height: 18px;
  width: auto;
  flex-shrink: 0;
}

.site-logo {
  width: 190px;
  height: auto;
  max-width: 55vw;
  object-fit: contain;
  display: block;
}

.main-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .95rem;
  font-weight: 600;
}

.main-nav a {
  color: var(--text);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover {
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
}

.main-nav a.placeholder {
  color: var(--text-muted);
  cursor: default;
}

.main-nav a.placeholder:hover {
  color: var(--text-muted);
  border-bottom-color: transparent;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover { background: var(--brand-dark); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
}

.btn-secondary:hover { border-color: var(--brand); color: var(--brand-dark); }

.btn-block { width: 100%; text-align: center; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  background: radial-gradient(ellipse at top left, var(--brand-soft) 0%, var(--bg) 60%);
  padding: 2.5rem 0 2rem;
  text-align: center;
}

.hero h1 {
  font-size: 2.6rem;
  margin: 0 0 .6rem;
  color: var(--ink);
  letter-spacing: -.01em;
}

.hero p {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

/* ── Section headings ─────────────────────────────────────────────────── */

.section {
  padding: 3.5rem 0;
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.section-heading h2 {
  font-size: 1.7rem;
  margin: 0;
  color: var(--ink);
}

.section-heading .sub {
  color: var(--text-muted);
  font-size: .95rem;
}

.page-title {
  padding: 2.75rem 0 0.5rem;
}

.page-title h1 {
  font-size: 2.1rem;
  margin: 0 0 .5rem;
  color: var(--ink);
}

.page-title p {
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* ── Trust strip (home page) ─────────────────────────────────────────── */

/* Compact/supporting treatment — this strip now sits below Available Homes
   rather than dominating the top of the page, so it reads as secondary. */
.trust-section { padding-top: 0.5rem; }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.trust-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  text-align: center;
}

.icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .6rem;
}
.icon-badge svg { width: 20px; height: 20px; }
.trust-card h3 { margin: .2rem 0 .3rem; font-size: .95rem; color: var(--ink); }
.trust-card p { margin: 0; font-size: .85rem; color: var(--text-muted); }

/* ── Rental cards ─────────────────────────────────────────────────────── */

.rental-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem;
}

.rental-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}

.rental-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.rental-card .photo-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--brand-soft);
}

.rental-card .photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .65rem;
  border-radius: 999px;
  letter-spacing: .02em;
}

.badge-available { background: var(--available-soft); color: var(--available); }
.badge-pending { background: #fdf1dd; color: var(--brand-dark); }

.rental-card .badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
}

.rental-card .body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}

.rental-card .location {
  font-size: .85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.rental-card .body h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink);
}

.rental-card .rent {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}

.rental-card .rent span {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.stat-row {
  display: flex;
  gap: 1rem;
  font-size: .88rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.stat-row strong { color: var(--ink); }

.rental-card .avail-line {
  font-size: .85rem;
  color: var(--text-muted);
}

.rental-card .btn {
  margin-top: .35rem;
}

/* ── Featured listing (homepage "Available Homes") ───────────────────────
   Wider, more prominent than .rental-card — used when there are few enough
   listings that each one deserves the full container width. Driven by the
   same property object as .rental-card; nothing here is specific to any one
   property. Multiple listings stack as separate full-width rows via
   .featured-list rather than competing for space in a multi-column grid. */

.featured-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.featured-listing {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.featured-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--brand-soft);
  overflow: hidden;
}

/* object-fit: cover, landscape 4/3 box — same ratio already used by
   .rental-card .photo-wrap elsewhere on the site. The real photo is portrait,
   so this crops some sky/driveway at a moderate, centered amount (verified:
   the house, both windows, the door, and the address number all stay fully
   visible) in exchange for a much shorter homepage card. The full, uncropped
   photo is still shown on the property detail page (.detail-hero-photo, which
   keeps object-fit: contain) — this cropped treatment is homepage-only. */
.featured-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-listing .badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
}

.featured-body {
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
}

.featured-body .location {
  font-size: .85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.featured-body h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--ink);
}

.featured-body .rent {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
}

.featured-body .rent span {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.featured-body .avail-line {
  font-size: .9rem;
  color: var(--text-muted);
}

.featured-body .btn {
  margin-top: .5rem;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .featured-listing { grid-template-columns: 1fr; }
  .featured-body .btn { align-self: stretch; text-align: center; }
}

/* ── Empty state ──────────────────────────────────────────────────────── */

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

/* ── Property detail page ────────────────────────────────────────────── */

/* detail-hero holds everything a renter needs immediately (photo, headline,
   price, key facts, Apply Now) so it's visible without scrolling. Full
   description/amenities/additional photos live in .detail-secondary below. */
.detail-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 2rem;
}

/* Fixed height (not aspect-ratio) — keeps the hero compact regardless of the
   photo's own orientation. object-fit: cover fills this wide, short box
   without the letterboxing contain produced here; verified the crop still
   keeps the house, both windows, the door, and the address number clearly
   visible. The full, uncropped photo is still shown via the Photos thumbnails
   below (clicking either one swaps this same image, unchanged behavior) and
   nothing here alters the actual image file. */
.detail-hero-photo {
  height: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-soft);
  border: 1px solid var(--border);
}

.detail-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.detail-hero-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.detail-hero-info h1 {
  font-size: 1.6rem;
  margin: 0 0 .2rem;
  color: var(--ink);
}

.detail-hero-info .location {
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: .5rem;
}

.detail-hero-info .rent {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--ink);
}

.detail-hero-info .rent span {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-muted);
}

.detail-hero-info .stat-row {
  margin: .5rem 0 .15rem;
  font-size: .95rem;
}

/* Scoped to this card only — .summary-row itself stays untouched so
   contact.html's phone/email rows are unaffected. */
.detail-hero-info .summary-row { padding: .4rem 0; }

.detail-hero-info .btn { margin-top: .85rem; }

@media (max-width: 860px) {
  .detail-hero { grid-template-columns: 1fr; }
  .detail-hero-photo { height: 300px; }
}

.detail-secondary h2 {
  font-size: 1.2rem;
  margin: 0 0 .6rem;
  color: var(--ink);
}

.detail-secondary h2:not(:first-child) { margin-top: 1.75rem; }

.detail-secondary p { color: var(--text); }

.amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}

.amenity-list li {
  background: var(--brand-soft);
  border-radius: 8px;
  padding: .55rem .8rem;
  font-size: .9rem;
  color: var(--ink);
}

.amenity-list li::before { content: "✓ "; color: var(--brand-dark); font-weight: 700; }

.gallery-thumbs {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.gallery-thumbs img {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .8;
}

.gallery-thumbs img:hover { opacity: 1; }
.gallery-thumbs img.active { border-color: var(--brand); opacity: 1; }

/* Shared summary-row value fix (item 4) — reusable for ANY long value
   (long email addresses, phone numbers, future data), not special-cased to
   the current contact email. Allows wrapping at any character as a last
   resort and lets the flex item actually shrink instead of forcing overflow. */
.summary-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  padding: .55rem 0;
  border-top: 1px solid var(--border);
  font-size: .92rem;
}

.summary-row .label { color: var(--text-muted); flex-shrink: 0; }
.summary-row .value {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
  text-align: right;
}

.back-link {
  display: inline-block;
  margin: 1.5rem 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.back-link:hover { color: var(--brand-dark); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink);
  color: #d9d0c4;
  margin-top: 3rem;
}

.site-footer .container {
  padding: 2.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .85rem;
}

.site-footer .brand {
  color: #fff;
  font-size: 1.05rem;
}

.site-footer nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.site-footer nav a { color: #d9d0c4; }
.site-footer nav a:hover { color: var(--brand); }

.site-footer .legal {
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
  margin-top: .5rem;
  color: #a99d8c;
  font-size: .78rem;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .trust-strip { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 2rem; }
  .site-header .container { justify-content: center; text-align: center; }
  .main-nav { justify-content: center; gap: 1rem 1.25rem; }
  .amenity-list { grid-template-columns: 1fr; }
  .section { padding: 2.5rem 0; }
  .site-logo { width: 135px; max-width: 60vw; }
}

/* ── Generic info card (Rental Criteria / How to Apply / Contact) ───────── */

.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.info-card h2 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--ink);
}

.info-card p { color: var(--text); }
.info-card p:last-child { margin-bottom: 0; }

/* ── Rental Criteria ──────────────────────────────────────────────────── */
/* Scoped overrides (.criteria-page-title / .criteria-list .info-card) so this
   page's compaction never touches the shared .page-title/.info-card rules
   used by Contact and How to Apply, which stay exactly as they were. */

.criteria-page-title { padding: 1.5rem 0 .4rem; }

.criteria-list {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.criteria-list .info-card { padding: 1.05rem 1.5rem; }
.criteria-list .info-card h2 { margin-bottom: .3rem; }
.criteria-list .info-card p { margin: 0; }

.needs-input {
  margin-top: 1rem;
  background: var(--brand-soft);
  border: 1px dashed var(--brand);
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .88rem;
  color: var(--brand-dark);
}

.needs-input strong { color: var(--ink); }

/* ── How to Apply — step tracker ─────────────────────────────────────── */

.step-tracker {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step h3 { margin: .1rem 0 .3rem; font-size: 1.05rem; color: var(--ink); }
.step p { margin: 0; color: var(--text-muted); font-size: .92rem; }

@media (min-width: 960px) {
  .step-tracker { flex-direction: row; gap: 0; }
  .step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 .75rem;
  }
  .step-num { margin-bottom: .75rem; position: relative; z-index: 2; }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--border);
    z-index: 1;
  }
}

/* ── Contact page ─────────────────────────────────────────────────────── */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* ── Fair Housing footer line ─────────────────────────────────────────── */

.eho-line {
  display: block;
  margin-top: .5rem;
}