/* ══════════════════════════════════════════════════════════════════
   WAHL GROUP REAL ESTATE — shared stylesheet
   Palette + type from the client brand guide (Idaho Websites, 2026).
   Edit colors here once and every page updates.
   ══════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Cormorant"; font-weight: 300; font-display: swap; src: url("fonts/cormorant-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 400; font-display: swap; src: url("fonts/cormorant-400.woff2") format("woff2"); }

:root {
  /* ── brand colors (from the guide) ───────────────────────────── */
  --umber:      #2B2118;   /* primary dark: text on light, ground on dark bands */
  --umber-deep: #1B140E;   /* pressed/hover state for umber surfaces */
  --gold:       #987853;   /* accent ONLY: eyebrows, rules, small marks */
  --ivory:      #EEE8DB;   /* primary page ground */
  --white:      #FFFFFF;   /* card + panel surfaces */

  /* ── composed tones (warm, mixed from umber — NOT the guide's cool tints) ── */
  --ivory-deep: #E5DDCC;   /* alternate section ground */
  --muted:      #6E6052;   /* secondary text on light */
  --line:       #D9CFBC;   /* hairlines on light */
  --on-dark:    #CFC5B4;   /* secondary text on umber grounds */
  --line-dark:  #463A2C;   /* hairlines on umber grounds */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ivory);
  color: var(--umber);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;                       /* guide: body line-height 1.6 */
  -webkit-font-smoothing: antialiased;
}
/* height:auto MUST ship with the width/height attributes in the HTML.
   Without it the height attribute wins and every width-constrained
   image stretches. Do not remove one without removing the other. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--umber); }

/* Display face. Guide sets Caslon at letterspacing −50; Cormorant is the
   licensed-free stand-in, so the same −0.05em tracking carries over. */
h1, h2, h3 {
  font-family: "Cormorant", Georgia, "Times New Roman", serif;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3 { font-weight: 400; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 44px; }
.wrap.narrow { max-width: 860px; }
@media (max-width: 700px) { .wrap { padding: 0 22px; } }

/* Guide: Helvetica Bold, ALL CAPS for accent headings and labels. */
.eyebrow {
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
}
.on-umber .eyebrow { color: #C0A078; }   /* gold lifted for contrast on dark */

/* ── Header — transparent, floats over the hero ─────────────────── */
header.site {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: 26px 0;
}
header.site.solid {                       /* interior pages: no hero photo behind */
  position: static; background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }

/* Lockup runs 36–44px tall. Below ~30px the "REAL ESTATE" line collapses. */
.lockup { display: block; flex: none; }
.lockup img { height: 40px; width: auto; }
@media (max-width: 700px) { .lockup img { height: 32px; } }

nav.main { display: flex; align-items: center; gap: 34px; }
nav.main a {
  color: var(--ivory); text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
nav.main a:hover, nav.main a:focus-visible { border-bottom-color: currentColor; }
nav.main a[aria-current="page"] { border-bottom-color: currentColor; }
header.site.solid nav.main a { color: var(--umber); }
@media (max-width: 900px) { nav.main { display: none; } }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2;                       /* inline-block would sit the label low */
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 16px 32px; text-decoration: none;
  border: 1px solid var(--umber); background: var(--umber); color: var(--ivory);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { background: var(--umber-deep); border-color: var(--umber-deep); }
.btn.ghost { background: transparent; color: var(--umber); }
.btn.ghost:hover { background: var(--umber); color: var(--ivory); }
.btn.on-photo { background: transparent; border-color: rgba(238,232,219,0.55); color: var(--ivory); }
.btn.on-photo:hover { background: var(--ivory); border-color: var(--ivory); color: var(--umber); }
/* a .btn inside the nav must beat `nav.main a` on specificity */
nav.main a.btn { color: var(--ivory); padding-bottom: 16px; border: 1px solid rgba(238,232,219,0.55); }
nav.main a.btn:hover { border-color: var(--ivory); background: var(--ivory); color: var(--umber); }
header.site.solid nav.main a.btn { color: var(--ivory); background: var(--umber); border-color: var(--umber); }

/* ── Hero ───────────────────────────────────────────────────────────
   Solid umber panel left, photograph right, gradient seam between them
   so the join is soft. Sized to sit tight — the photo is pre-cropped
   close on Mitch and Kellie, so the section does not need to be tall.
   NOTE: the shoot is portrait (116 of 122 frames are EXIF-rotated), so
   the photo lives in its own column. Swap it and keep it portrait-ish,
   cropped tight, or the fade will cover them.
   ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 0;                 /* beats the generic `section` padding — that
                                 208px is what left umber above and below
                                 the photo and stretched the section */
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-height: 580px;
  background: var(--umber);
  overflow: hidden;
}
.hero-photo { position: relative; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
/* the soft seam: umber dissolves into the photo */
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    #2B2118 0%,
    rgba(43,33,24,0.80) 8%,
    rgba(43,33,24,0.34) 18%,
    rgba(43,33,24,0.08) 26%,
    rgba(43,33,24,0.00) 34%);
}
/* separate top scrim so the ivory nav reads over the photo without the
   header needing a background of its own */
.hero-photo::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px; z-index: 1;
  background: linear-gradient(to bottom, rgba(27,20,14,0.55) 0%, rgba(27,20,14,0.00) 100%);
}
.hero-panel { display: flex; align-items: center; }
.hero-panel .inner { margin-left: auto; width: 100%; padding: 116px 52px 56px 0; }
.hero-copy { color: var(--ivory); }
.hero h1 { font-size: clamp(40px, 4.2vw, 60px); margin: 18px 0 0; }
.hero .lede { margin: 20px 0 0; max-width: 36ch; color: rgba(238,232,219,0.80); font-size: 16.5px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* line the panel copy up with the page gutter used by every section below */
@media (min-width: 901px) {
  .hero-panel .inner { padding-left: 44px; max-width: calc((1240px / 2) + 56px); }
}

/* Stacked below the split threshold. Photo first, copy under it, so
   nothing ever sits over them. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-photo { grid-row: 1; aspect-ratio: 5 / 4; }
  .hero-photo img { object-position: 55% 46%; }
  .hero-photo::before {
    background: linear-gradient(to bottom,
      rgba(43,33,24,0.00) 55%,
      rgba(43,33,24,0.45) 82%,
      #2B2118 100%);
  }
  .hero-photo::after { height: 150px; }
  .hero-panel { grid-row: 2; }
  .hero-panel .inner { padding: 32px 22px 60px; margin-left: 0; max-width: none; }
  .hero .lede { max-width: none; color: rgba(238,232,219,0.86); }
}

/* ── Sections ───────────────────────────────────────────────────── */
section { padding: 104px 0; }
section.tight { padding: 68px 0; }
.on-deep  { background: var(--ivory-deep); }
.on-umber { background: var(--umber); color: var(--ivory); }
.on-umber h1, .on-umber h2, .on-umber h3 { color: var(--ivory); }
.on-umber p { color: var(--on-dark); }
.on-umber a { color: var(--ivory); }

.section-head { max-width: 660px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(32px, 4vw, 46px); margin: 16px 0 18px; }
.section-head p { color: var(--muted); }
.on-umber .section-head p { color: var(--on-dark); }

/* ── Split band: copy beside a photo ────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.wide-photo { grid-template-columns: 1.15fr 1fr; }
.split .copy h2 { font-size: clamp(30px, 3.6vw, 42px); margin: 16px 0 20px; }
.split .copy p + p { margin-top: 16px; }
.split .copy p { color: var(--muted); }
.on-umber .split .copy p { color: var(--on-dark); }
@media (max-width: 900px) { .split, .split.wide-photo { grid-template-columns: 1fr; gap: 40px; } }

/* ── Cards & grids ──────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card { background: var(--white); border: 1px solid var(--line); overflow: hidden;
        display: flex; flex-direction: column; }
.card .body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
/* pins the CTA to the bottom of the card so buttons align across a row
   even when the paragraphs above are different lengths */
.card .body .cta { margin-top: auto; padding-top: 22px; }
.grid-2, .grid-3 { align-items: stretch; }
.card h3 { font-size: 25px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15.5px; }

/* Property card: photo + spec sheet */
.prop img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.prop dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin-top: 16px; font-size: 14.5px; }
.prop dt { font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.prop dd { font-variant-numeric: tabular-nums; }
.prop .status {
  display: inline-flex; align-items: center; line-height: 1.2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--gold); color: var(--gold); margin-bottom: 14px;
}

/* ── Photo helpers ──────────────────────────────────────────────── */
.ph { width: 100%; height: 100%; object-fit: cover; }
.photo-4x5 img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.photo-3x2 img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }

/* ── Pull quote ─────────────────────────────────────────────────────
   Umber ground with the brand pattern behind it. The guide says use the
   pattern sparingly as texture, never as the focal point, so it sits at
   low opacity behind the type. */
.pullquote { position: relative; overflow: hidden; background: var(--umber); }
.pullquote::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("logo/pattern.svg");
  background-repeat: repeat;
  background-size: 190px auto;
  opacity: 0.22;
}
.pullquote::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(43,33,24,0.82) 0%, rgba(43,33,24,0.42) 55%, rgba(43,33,24,0.82) 100%);
}
.pullquote .wrap { position: relative; z-index: 2; }
/* hairline rule above the quote, gold, short — a mark rather than a box */
.pullquote .rule { width: 54px; height: 1px; background: var(--gold); margin-bottom: 30px; }
.pullquote blockquote {
  font-family: "Cormorant", Georgia, serif; font-weight: 300;
  font-size: clamp(27px, 3.6vw, 44px); line-height: 1.22; letter-spacing: -0.02em;
  color: var(--ivory); max-width: 24ch; text-wrap: balance;
}
.pullquote cite {
  display: block; margin-top: 30px; font-style: normal;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(238,232,219,0.66);
}

/* ── Conversion band ────────────────────────────────────────────── */
.band { background: var(--ivory-deep); color: var(--umber); padding: 96px 0; text-align: center; }
.band h2 { font-size: clamp(32px, 4.4vw, 50px); color: var(--umber); }
.band p { color: var(--muted); max-width: 50ch; margin: 20px auto 34px; }
.band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer.site { background: var(--umber); color: var(--on-dark); padding: 78px 0 40px; font-size: 15.5px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1.3fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; gap: 44px; } }
footer.site img.f-logo { height: 40px; width: auto; margin-bottom: 22px; }
.foot-brand p { max-width: 30ch; color: var(--on-dark); }
footer.site .f-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: #A98F6C; margin-bottom: 18px;
}
footer.site ul { list-style: none; }
footer.site li { margin-bottom: 11px; }
footer.site a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid transparent; }
footer.site a:hover { border-bottom-color: var(--gold); }

/* label/value pairs so the address and email read as information rather
   than as a row of links with "Email" standing in for the address */
.nap { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin-bottom: 26px; }
.nap dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8E7B62; padding-top: 4px;
}
.nap dd { color: var(--ivory); overflow-wrap: anywhere; }
footer.site address { font-style: normal; color: var(--on-dark); line-height: 1.7; }
footer.site .legal {
  color: #8A7A66; font-size: 13px; margin-top: 56px; padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

/* ── Interior page hero (no photo) ──────────────────────────────── */
.page-hero { padding: 86px 0 64px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(40px, 6vw, 68px); margin: 18px 0 22px; }
.page-hero .lede { max-width: 60ch; color: var(--muted); font-size: 18.5px; }

/* ── Focus ──────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Reserved slot for the interactive Treasure Valley map ──────────
   Replace .map-slot in index.html / boise.html with the real embed
   when it is ready. This placeholder holds the space and the ratio. */
.map-slot {
  aspect-ratio: 21 / 9;
  border: 1px dashed var(--line-dark);
  background: rgba(238, 232, 219, 0.03);
  display: flex; align-items: center; justify-content: center;
  color: #A08A6E;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
@media (max-width: 700px) { .map-slot { aspect-ratio: 4 / 3; } }

/* ── Full-bleed feature photo (interior pages) ───────────────────── */
.feature-photo { margin: 0; }
.feature-photo img { width: 100%; height: clamp(300px, 46vw, 560px); object-fit: cover; object-position: 50% 32%; }

/* ── Person cards (About) ───────────────────────────────────────── */
.person { display: flex; flex-direction: column; }
.person .person-body { padding-top: 26px; }
.person h3 { font-size: 30px; margin-bottom: 4px; }
.person .role {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.person p { color: var(--muted); }
.person p + p { margin-top: 14px; }