/*
Theme Name: Real Estate Brokerage Theme
Author: Custom
Description: Custom theme for a Hamptons & East End, NY real estate brokerage. Built to match the visual identity of the site's MLS search and CRM tools. The site name shown to visitors comes from WordPress's own Settings -> General -> Site Title, not this file, so the same theme works unchanged across brand domains.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Unlicensed, private use only
Text Domain: hampton-homes
*/

:root {
  --ink: #0E2A3A;
  --ink-soft: #1B4257;
  --brass: #A87B2D;
  --brass-dark: #8A6320;
  --bg: #F6F8F9;
  --card: #FFFFFF;
  --line: #DFE7EB;
  --text: #33454F;
  --muted: #6B7E88;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(14, 42, 58, 0.08), 0 8px 24px rgba(14, 42, 58, 0.07);
  --display: "Fraunces", Georgia, serif;
  --body: "Public Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--ink-soft); }
img { max-width: 100%; height: auto; display: block; }

.hh-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.hh-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--ink);
  color: #fff;
  flex-wrap: wrap;
}
.hh-brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  color: #fff;
  text-decoration: none;
}
.hh-brand em { font-style: italic; color: #D9C089; }
.hh-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.hh-nav a {
  color: #D9E3E9;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
}
.hh-nav a:hover, .hh-nav a.hh-nav-current { background: rgba(255,255,255,0.1); color: #fff; }

/* ---------- Hero ---------- */
.hh-hero {
  padding: 56px 24px 40px;
  text-align: center;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: #fff;
}
.hh-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin: 0 0 12px;
  text-wrap: balance;
}
.hh-hero p { font-size: 1.1rem; color: #C7D6DE; max-width: 60ch; margin: 0 auto; }
.hh-hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.hh-btn {
  display: inline-block;
  font: 600 0.95rem var(--body);
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}
.hh-btn-primary { background: #E3B54B; color: #1B2A33; font-weight: 700; }
.hh-btn-primary:hover { background: #EFC868; }
.hh-btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.7); }
.hh-btn-ghost:hover { background: rgba(255,255,255,0.22); border-color: #fff; }

/* ---------- Hero: real listing photography ---------- */
.hh-hero-photo {
  position: relative;
  overflow: hidden;
  padding: 54px 24px 42px;
  background: var(--ink); /* shows immediately if photos are still loading/absent */
}
.hh-hero-slides { position: absolute; inset: 0; }
.hh-hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hh-hero-fade 30s infinite;
}
@keyframes hh-hero-fade {
  0% { opacity: 0; }
  4% { opacity: 1; }
  20% { opacity: 1; }
  24% { opacity: 0; }
  100% { opacity: 0; }
}
.hh-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,42,58,0.40) 0%, rgba(14,42,58,0.24) 45%, rgba(14,42,58,0.52) 100%);
}
.hh-hero-content { position: relative; z-index: 1; text-align: center; }
.hh-hero-photo h1 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.hh-hero-photo p { color: #F1F5F7; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hh-hero-h1-multiline { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 12px; }
.hh-hero-line-1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.1; }
.hh-hero-line-2 { font-size: clamp(1rem, 1.6vw, 1.3rem); font-style: italic; color: #D9C089; line-height: 1.2; }
.hh-hero-line-3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; }
@media (prefers-reduced-motion: reduce) {
  .hh-hero-slide { animation: none; opacity: 0; }
  .hh-hero-slide:first-child { opacity: 1; }
}

/* ---------- Currently on the Market strip ---------- */
.hh-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
.hh-market-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.hh-market-photo {
  display: block;
  height: 170px;
  background-size: cover;
  background-position: center;
  background-color: var(--line);
}
.hh-market-info { display: block; padding: 12px 14px 16px; }
.hh-market-price { display: block; font-family: var(--display); color: var(--ink); font-weight: 600; font-size: 1.1rem; }
.hh-market-addr { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 2px; }

/* ---------- Lifestyle / editorial section ---------- */
.hh-lifestyle-blocks { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.hh-lifestyle-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.hh-lifestyle-reverse .hh-lifestyle-photo { order: 2; }
.hh-lifestyle-photo {
  display: block;
  height: 280px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  background-color: var(--line);
  box-shadow: var(--shadow);
}
.hh-lifestyle-copy h3 { font-family: var(--display); color: var(--ink); font-size: 1.5rem; margin: 0 0 12px; }
.hh-lifestyle-copy p { color: var(--text); margin: 0; }
@media (max-width: 720px) {
  .hh-lifestyle-block, .hh-lifestyle-reverse .hh-lifestyle-photo { grid-template-columns: 1fr; order: initial; }
  .hh-lifestyle-block { grid-template-columns: 1fr; }
  .hh-lifestyle-photo { height: 200px; }
  .hh-hero-photo { padding: 44px 20px 34px; }
}

/* ---------- Listings embed ---------- */
/* Deliberately flat — no card border/shadow/rounding, no negative-margin
   overlap onto the hero. Other homepage sections (.hh-section,
   .hh-rentals-band) are plain full-width bands with no card treatment;
   this should read as one more section of the page, not a floating widget. */
.hh-listings-embed {
  max-width: 1080px;
  margin: 0 auto 48px;
  padding: 0 24px;
  border-top: 1px solid var(--line);
}
.hh-listings-embed iframe {
  width: 100%;
  height: 780px;
  border: none;
  background: var(--card);
}

/* ---------- Content sections ---------- */
.hh-section { padding: 48px 24px; }
.hh-section h2 {
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--ink);
  text-align: center;
  margin: 0 0 8px;
}
.hh-section-sub { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto 32px; }

.hh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; }
.hh-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.hh-card h3 { font-family: var(--display); color: var(--ink); margin: 0 0 8px; font-size: 1.15rem; }
.hh-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.hh-card a { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }

/* ---------- Generic page content ---------- */
.hh-page { max-width: 760px; margin: 0 auto; padding: 48px 24px 64px; }
.hh-page h1 { font-family: var(--display); color: var(--ink); font-size: 2.1rem; margin: 0 0 20px; }
.hh-page h2 { font-family: var(--display); color: var(--ink); font-size: 1.4rem; margin: 32px 0 10px; }
.hh-page p { margin: 0 0 16px; }
.hh-page ul, .hh-page ol { margin: 0 0 16px; padding-left: 22px; }

/* ---------- Rentals callout ---------- */
.hh-rentals-band {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 24px;
  text-align: center;
}
.hh-rentals-band h2 { font-family: var(--display); color: var(--ink); margin: 0 0 8px; }
.hh-rentals-band p { color: var(--muted); max-width: 56ch; margin: 0 auto 20px; }

/* ---------- Footer ---------- */
.hh-footer {
  background: var(--ink);
  color: #8FA6B2;
  padding: 40px 24px 24px;
  font-size: 0.85rem;
}
.hh-footer-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.hh-footer h4 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; }
.hh-footer a { color: #8FA6B2; text-decoration: none; display: block; margin-bottom: 6px; }
.hh-footer a:hover { color: #fff; }
.hh-footer-legal { max-width: 1080px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.75rem; color: #6E8895; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .hh-topbar { flex-direction: column; align-items: flex-start; }
  /* Tall enough for the search app's phone layout to actually fit: filter
     bar, a usable map, and three rows of listings under it. At the old
     520px the map alone consumed the whole frame and the listings were
     cropped off entirely, which is why the homepage looked nothing like
     the standalone /listings page. */
  .hh-listings-embed iframe { height: 1180px; }
  .hh-listings-embed { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}