/* ═══════════════════════════════════════════════════════════════════════════
   Foothill Goods — brand retune of the Organic tokens + page layout.
   Load AFTER css/organic.css.
   Two brand voices: forest green (primary) and copper brown (second voice),
   taken from the logo. Ramps regenerated on Organic's shared lightness scale.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --color-accent: #35663f;
  --color-accent-100: #e9f3e9;
  --color-accent-200: #cfe4d0;
  --color-accent-300: #a8cbac;
  --color-accent-400: #79ab81;
  --color-accent-500: #4d8a58;
  --color-accent-600: #2b5634;
  --color-accent-700: #1f4227;
  --color-accent-800: #16301c;
  --color-accent-900: #0e2012;

  --color-accent-2: #a4652c;
  --color-accent-2-100: #f9f0e3;
  --color-accent-2-200: #f2e0c6;
  --color-accent-2-300: #e5c69c;
  --color-accent-2-400: #cfa068;
  --color-accent-2-500: #b5813f;
  --color-accent-2-600: #8a5320;
  --color-accent-2-700: #6b3f19;
  --color-accent-2-800: #4d2d12;
  --color-accent-2-900: #321d0b;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --panel-radius: calc(2 * var(--radius-lg));
}

html { scroll-behavior: smooth; }
body { overflow-x: clip; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 6vw, 76px); }
.section-tight { padding-block: clamp(32px, 4vw, 48px); }
.kicker {
  display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent-700); margin-bottom: 12px;
}
.lede { font-size: 17px; line-height: 1.65; max-width: 58ch; }
.body-copy { font-size: 15.5px; line-height: 1.65; }
.dim { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
[id] { scroll-margin-top: 88px; }

.panel { border-radius: var(--panel-radius); padding: clamp(32px, 5vw, 64px); }
.panel-copper { background: var(--color-accent-2-200); }
.panel-green { background: var(--color-accent-100); }
.panel-sand { background: var(--color-accent-2-100); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 18px; border-radius: 999px;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 12px; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.site-header .nav {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  gap: var(--space-4); flex-wrap: wrap;
}
.site-header .nav-brand { display: flex; align-items: center; margin-right: auto; }
.site-header .nav-brand img { height: 42px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.nav-links a { color: inherit; text-decoration: none; font-size: 14px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-accent-700); }
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .site-header .nav { padding-block: var(--space-2); }
  .site-header .nav-brand img { height: 34px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--color-divider);
    border-radius: 999px; cursor: pointer; color: var(--color-text);
  }
  .nav-links {
    flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; display: none; padding-bottom: var(--space-2);
  }
  .nav-links[data-open="true"], .nav-links--static { display: flex; }
  .nav-links--static { flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .nav-links--static a { border-bottom: none; padding: 0; }
  .nav-links--static .btn { margin-top: 0; }
  .nav-links a {
    padding: 14px 4px; font-size: 16px;
    border-bottom: 1px solid var(--color-divider);
  }
  .nav-links .btn { margin-top: var(--space-3); border-bottom: none; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: clip; }
.hero-blob {
  position: absolute; right: -140px; top: -200px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--color-accent-2-100); pointer-events: none; z-index: 0;
}
.hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 44px clamp(32px, 5vw, 80px);
  padding-block: clamp(44px, 7vw, 96px) clamp(36px, 4vw, 56px);
}
.hero-copy { flex: 1.15 1 340px; min-width: 0; }
.hero h1 {
  font-size: clamp(40px, 5.6vw, 74px); line-height: 1.08;
  margin: 0 0 26px; margin-left: -0.028em;
}
.hero h1 span { display: block; }
.hero h1 .accent { color: var(--color-accent-2-600); }
/* Facebook's tagline runs three sentences. The first two carry the hero
   headline; this is the third, sized to read as a continuation of it. */
.hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.3vw, 28px);
  line-height: 1.25;
  color: var(--color-accent-700);
  margin: -14px 0 22px;
  max-width: 30ch;
}

.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.btn { white-space: nowrap; flex-shrink: 0; }
.btn-primary { color: var(--color-bg); }

/* The nav's `a { color: inherit }` rules are specificity 0,1,1 and outrank
   `.btn-primary` at 0,1,0, so a button inside the nav inherits body ink over
   its green fill (2.47:1). These selectors are 0,2,1 and win back both states. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:active { color: var(--color-bg); }
.nav-links a.btn-primary:hover { background: var(--color-accent-600); }
.nav-links a.btn-primary:active { background: var(--color-accent-700); }
.nav-links a.btn-secondary:hover { color: var(--color-text); }
.btn-lg { font-size: 15px; padding: 12px 24px; }
.meta-line { margin: 26px 0 0; font-size: 15px; }

/* Brand panel — stands in for hero imagery until real photos exist.
   To use a photo instead, replace the .brand-panel block with:
   <figure class="washed hero-figure"><img src="assets/your-photo.jpg" alt="..."></figure> */
.hero-aside { flex: 0.85 1 290px; max-width: 430px; }
.brand-panel {
  aspect-ratio: 1 / 1.06; border-radius: var(--panel-radius);
  background: var(--color-accent-2-200);
  display: grid; place-content: center; gap: var(--space-3);
  text-align: center; padding: clamp(24px, 4vw, 44px);
}
.brand-panel img { width: clamp(84px, 14vw, 128px); height: auto; margin: 0 auto; }
.brand-panel p {
  margin: 0; font-family: var(--font-heading); font-size: 17px; line-height: 1.35;
  color: var(--color-accent-2-800);
}
.hero-figure { border-radius: var(--panel-radius); overflow: hidden; }
.hero-figure img { width: 100%; height: auto; }

/* ── listings ───────────────────────────────────────────────────────────── */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 40px; flex-wrap: wrap; margin-bottom: 34px;
}
.listing-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: var(--space-4);
}
.listing-card { padding: var(--space-3); }
.listing-photo {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--color-accent-2-100);
  display: grid; place-items: center;
}
.listing-photo img { width: 100%; height: 100%; object-fit: cover; }
.listing-photo .pending { width: 46px; height: auto; opacity: 0.5; }
.listing-price {
  margin: 0; font-family: var(--font-heading); font-size: 18px;
  color: var(--color-accent-700);
}
.listing-card .card-title { font-size: 18px; }
.listing-card .card-body { font-size: 13.5px; }
.empty-state {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2);
}
.empty-state img { width: 58px; height: auto; }

/* ── promise ────────────────────────────────────────────────────────────── */
.promise-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
.promise-grid h3 { margin: 0 0 8px; font-size: 22px; }
.promise-grid p { margin: 0; font-size: 15px; line-height: 1.65; }
.dot-mark {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent); margin-bottom: 14px;
}

/* ── about ──────────────────────────────────────────────────────────────── */
.about-inner {
  display: flex; flex-wrap: wrap-reverse; align-items: center;
  gap: 36px clamp(32px, 5vw, 80px);
}
.about-copy { flex: 1.25 1 340px; min-width: 0; }
.about-quote {
  flex: 0.75 1 280px; max-width: 400px;
  border-radius: var(--panel-radius); background: var(--color-accent-200);
  padding: clamp(30px, 4vw, 48px);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.about-quote blockquote {
  margin: 0; font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 32px); line-height: 1.28;
  color: var(--color-accent-800); text-indent: -0.559em;
}
.about-quote img { width: 46px; height: auto; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-inner {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 36px clamp(32px, 5vw, 80px);
}
.faq-intro { flex: 0.7 1 270px; min-width: 0; }
.faq-list { flex: 1.3 1 340px; min-width: 0; display: grid; gap: var(--space-3); }
.faq-item { padding: var(--space-4) var(--space-6); gap: 0; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 4px 0; background: none; border: none; cursor: pointer;
  text-align: left; color: var(--color-text);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px;
}
.faq-q .sym {
  font-family: var(--font-body); font-size: 22px; line-height: 1;
  color: var(--color-accent); flex-shrink: 0;
}
.faq-a {
  margin: 10px 0 4px; padding-right: 32px;
  font-size: 14.5px; line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.faq-a a { color: var(--color-accent-700); }
.faq-a[hidden] { display: none; }

/* ── contact form ───────────────────────────────────────────────────────── */
.contact-inner {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 36px clamp(32px, 5vw, 72px);
}
.contact-copy { flex: 0.85 1 300px; min-width: 0; }
.contact-form { flex: 1.15 1 340px; min-width: 0; display: grid; gap: var(--space-3); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.field > label { font-size: 12.5px; }
.form-note { margin: 0; font-size: 12.5px; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-status {
  margin: 0; padding: 12px 18px; border-radius: 25px;
  font-size: 14px; line-height: 1.5;
}
.form-status[data-state="ok"] { background: var(--color-accent-200); color: var(--color-accent-800); }
.form-status[data-state="error"] { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.form-status a { color: inherit; font-weight: 700; }

/* Placeholders were falling through to the browser's neutral grey — 3.44:1 on
   the input fill, and a cold grey on a warm ground. Same token as .text-muted.
   opacity: 1 because Firefox dims placeholders by default. */
.input::placeholder,
textarea.input::placeholder { color: var(--color-neutral-700); opacity: 1; }

/* The design system makes every .input a pill. On a single-line 36px field that
   clamps to a tidy 18px, but on a 90px-tall textarea it clamps to 45px and the
   corners eat the first and last lines of text. Multi-line fields get a real
   radius and room to breathe instead. */
textarea.input {
  border-radius: 25px;
  padding: 12px 18px;
  min-height: 116px;
  line-height: 1.55;
}

/* ── legal / doc pages ──────────────────────────────────────────────────── */
.doc { max-width: 74ch; margin-inline: 0; }
.doc-center { margin-inline: auto; }
.doc h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 8px; }
.doc h2 { font-size: clamp(22px, 2.6vw, 27px); margin: 40px 0 10px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.7; }
.doc ul { padding-left: 22px; margin: 0 0 var(--space-3); }
.doc li { margin-bottom: 8px; }
.doc .updated { font-size: 13.5px; margin-bottom: 32px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer { padding-block: 8px clamp(36px, 4vw, 56px); }
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 40px; flex-wrap: wrap; margin-bottom: 20px;
}
.footer-top img { height: 38px; width: auto; }
.footer-links { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 14px; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--color-accent-700); text-decoration: underline; }
.footer-fine { margin: 0; font-size: 13px; }

/* ── admin page ─────────────────────────────────────────────────────────── */
.admin-grid {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 32px clamp(28px, 4vw, 56px);
}
.admin-form { flex: 1 1 340px; min-width: 0; display: grid; gap: var(--space-3); }
.admin-out { flex: 1.1 1 360px; min-width: 0; }
.admin-out pre {
  margin: 0; max-height: 380px; overflow: auto;
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-neutral-900); color: var(--color-neutral-100);
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.admin-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: 999px; background: var(--color-surface); font-size: 13.5px;
}
.admin-item button {
  background: none; border: none; cursor: pointer;
  color: var(--color-accent-2-700); font-weight: 700; font-size: 13px;
}

/* ── accessibility override ──────────────────────────────────────────────
   The design system's .text-muted (55% ink) lands at 3.57:1 on this ground —
   below AA for paragraph text. A deep neutral ramp step gives ~5.9:1, which is
   what the Organic guide asks for at body sizes. Loaded after organic.css. */
.text-muted { color: var(--color-neutral-700); }