/* Wildleaf Nursery & Landscaping — shared styles
   Design language: "Collector's potting bench" — clay-paper ground, soil-brown ink,
   terracotta action colour, one sage highlight. Dark mode is soil-black.
   Palette & bug rules from research/design-language.md §2. */

/* ---------- Tokens ---------- */
:root {
  --ground: #FBF6EF;        /* page background */
  --surface: #FFFFFF;       /* cards */
  --ink: #2A1E1A;           /* body text */
  --muted: #5E4C44;         /* secondary text */
  --brand: #9A3F22;         /* CTA fill */
  --brand-text: #9A3F22;    /* brand as small text */
  --sage: #A9C7A0;          /* highlight fill */
  --ink-on-fill: #2A1E1A;   /* text on sage fill — fixed both themes */
  --sage-text: #3E6B3A;     /* sage as small text */
  --on-brand: #FFFFFF;      /* text on brand/dark bands — fixed */
  --accent-on-dark: #A9C7A0;/* highlight on always-dark bands — fixed */
  --band: #2B1D17;          /* always-dark header/hero/footer/CTA/plant-brief */

  /* Decorative icon/star tone: darker in light mode for >=3:1 (bug #11) */
  --star: #94500F;        /* terracotta-brown, passes >=3:1 on ground/surface */

  --border: rgba(42,30,26,0.14);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(42,30,26,0.06), 0 6px 20px rgba(42,30,26,0.07);
  --maxw: 1080px;

  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
}

[data-theme="dark"] {
  --ground: #16100D;
  --surface: #241A15;
  --ink: #F5ECE4;
  --muted: #C2AEA2;
  --brand: #B85030;         /* dark-mode CTA fill — white text >=4.5:1 (measured 4.97) */
  --brand-text: #F0A98F;
  --sage: #A9C7A0;
  --ink-on-fill: #2A1E1A;   /* dark ink on sage — never white (bug #6) */
  --sage-text: #A9C7A0;
  --on-brand: #FFFFFF;
  --accent-on-dark: #A9C7A0;
  --band: #0C0806;
  --star: #E0A96D;          /* brighter star tone in dark mode (bug #11) */
  --border: rgba(245,236,228,0.16);
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.45);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--ground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand-text); }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-left: 20px; padding-right: 20px; }
/* Bug #4: never `padding: X 0` on an element that is also .container — vertical
   spacing lives on section wrappers (.section), horizontal padding only here. */
.section { padding-top: 56px; padding-bottom: 56px; }
.section--tight { padding-top: 36px; padding-bottom: 36px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: .7rem 1.2rem; border-radius: var(--radius-sm);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  line-height: 1.2; transition: filter .15s ease, background .15s ease, color .15s ease;
  max-width: 100%;
}
.btn:hover { filter: brightness(1.06); }
.btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--primary:hover { color: var(--on-brand); }
.btn--outline { background: transparent; color: var(--brand-text); border-color: var(--brand); }
.btn--sage { background: var(--sage); color: var(--ink-on-fill); border-color: var(--sage); }
.btn--sage:hover { color: var(--ink-on-fill); }
.btn--block { width: 100%; }
/* Bug #3: wrap long phone text / big buttons */
.btn { white-space: normal; word-break: break-word; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; line-height: 1.3;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(169,199,160,0.28); color: var(--sage-text);
  border: 1px solid rgba(62,107,58,0.3);
}
.chip--confirm { background: rgba(154,63,34,0.1); color: var(--brand-text); border-color: rgba(154,63,34,0.3); }
.chip--star { background: transparent; border-color: var(--border); color: var(--ink); }

/* ---------- Header / nav ---------- */
.site-header { background: var(--band); color: var(--on-brand); position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--on-brand); min-width: 0; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--on-brand); white-space: normal; } /* bug #3: wrap at spaces */
.brand__sub { font-size: .78rem; color: var(--accent-on-dark); font-weight: 600; }
.header-spacer { flex: 1 1 auto; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a { color: var(--on-brand); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45rem .7rem; border-radius: 8px; }
.site-nav a:hover { background: rgba(255,255,255,0.12); color: var(--on-brand); }
.site-nav a[aria-current="page"] { background: rgba(169,199,160,0.22); color: var(--on-brand); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: var(--on-brand);
  border: 1px solid rgba(255,255,255,0.22); cursor: pointer; font-size: 1.1rem;
}
.theme-toggle:hover { background: rgba(255,255,255,0.18); }
.header-cta { } /* hidden <=480px via media query */

/* ---------- Hero / bands (always dark) ---------- */
.hero, .band { background: var(--band); color: var(--on-brand); }
.hero { position: relative; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 64px; }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--radius); }
.img-note, .demo-note { } /* styled per-context below */

/* Bug #1: full text rules for every always-dark surface */
.hero, .hero *, .band, .band *,
.site-header, .site-footer, .plant-brief, .plant-brief * {
  /* base inherit; specific overrides below */
}
.hero h1, .hero h2, .hero h3, .hero h4,
.band h1, .band h2, .band h3, .band h4,
.plant-brief h1, .plant-brief h2, .plant-brief h3, .plant-brief h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: var(--on-brand); }
.hero p, .hero li, .band p, .band li,
.plant-brief p, .plant-brief li,
.site-footer p, .site-footer li { color: var(--on-brand); }
.hero .muted, .band .muted, .plant-brief .muted, .site-footer .muted { color: #D8C8BC; }
.hero a, .band a, .plant-brief a, .site-footer a { color: var(--accent-on-dark); }
.hero a:hover, .band a:hover, .plant-brief a:hover, .site-footer a:hover { color: #C6E0BE; }
.hero a.btn--primary, .band a.btn--primary, .plant-brief a.btn--primary, .site-footer a.btn--primary,
.hero a.btn--primary:hover, .band a.btn--primary:hover, .plant-brief a.btn--primary:hover, .site-footer a.btn--primary:hover { color: var(--on-brand); }
.hero a.btn--sage, .band a.btn--sage, .plant-brief a.btn--sage, .site-footer a.btn--sage,
.hero a.btn--sage:hover, .band a.btn--sage:hover, .plant-brief a.btn--sage:hover, .site-footer a.btn--sage:hover { color: var(--ink-on-fill); }
.hero dl.nap, .hero dl.nap *, .band dl.nap, .band dl.nap *,
.site-footer dl.nap, .site-footer dl.nap * { color: var(--on-brand); }
.hero dl.nap dt, .band dl.nap dt, .site-footer dl.nap dt { color: var(--accent-on-dark); }
/* chips on dark bands */
.hero .chip, .band .chip, .plant-brief .chip, .site-footer .chip {
  background: rgba(169,199,160,0.2); color: var(--accent-on-dark); border-color: rgba(169,199,160,0.4);
}
.hero .chip--confirm, .band .chip--confirm, .site-footer .chip--confirm {
  background: rgba(240,169,143,0.15); color: #F0A98F; border-color: rgba(240,169,143,0.45);
}
/* ghost buttons on dark bands */
.hero .btn--outline, .band .btn--outline, .plant-brief .btn--outline, .site-footer .btn--outline {
  color: var(--on-brand); border-color: rgba(255,255,255,0.6);
}
.hero .btn--outline:hover, .band .btn--outline:hover,
.plant-brief .btn--outline:hover, .site-footer .btn--outline:hover {
  color: var(--on-brand); background: rgba(255,255,255,0.1);
}
/* notes + img-note on dark bands */
.hero .img-note, .band .img-note, .plant-brief .img-note, .site-footer .img-note,
.hero .note, .band .note, .plant-brief .note, .site-footer .note { color: #D8C8BC; }

/* img-note (stock-photo label) generic */
.img-note {
  font-size: .78rem; color: var(--muted); margin-top: .4rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.note { font-size: .88rem; color: var(--muted); }

/* demo-note strip — solid dark background (bug #1) */
.demo-note {
  background: var(--band); color: #E8DACE; text-align: center;
  font-size: .8rem; padding-top: .55rem; padding-bottom: .55rem;
}
.demo-note a { color: var(--accent-on-dark); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid > * { min-width: 0; } /* bug #3 */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card img { border-radius: var(--radius-sm); margin-bottom: 14px; }
/* Bug #2: no light cards inside dark bands — dark bands use .band-panel instead */
.band-panel {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius); padding: 22px;
}

/* proof strip */
.proof { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.proof__item { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.stars { color: var(--star); letter-spacing: 1px; } /* decorative, darker in light (bug #11) */

.eyebrow { font-family: var(--font-head); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; color: var(--sage-text); }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--band); color: var(--on-brand); }
.site-footer .container { padding-top: 40px; padding-bottom: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.footer-grid > * { min-width: 0; }
.site-footer a { text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 24px; padding-top: 16px; font-size: .85rem; color: #D8C8BC; }

/* ---------- Plant Match ---------- */
.matcher { display: grid; gap: 24px; }
.matcher__step legend { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin-bottom: .2rem; color: var(--ink); }
.matcher__step .help { font-size: .9rem; color: var(--muted); margin: 0 0 .9rem; } /* helper text readable both themes (bug #8) */
.matcher__step { border: 0; padding: 0; margin: 0; }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .6rem 1rem; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 2px solid var(--border);
  transition: background .12s, border-color .12s, color .12s;
}
.opt:hover { border-color: var(--brand); }
.opt[aria-pressed="true"] {
  background: var(--sage); color: var(--ink-on-fill); border-color: var(--sage);
}
/* selected-option helper text readable in both themes (bug #8) */
.opt-selected-note { font-size: .85rem; color: var(--sage-text); font-weight: 700; }

/* plant-brief panel — always dark (bug #1) */
.plant-brief {
  background: var(--band); color: var(--on-brand);
  border-radius: var(--radius); padding: 26px;
}
.plant-brief .summary { font-size: 1.1rem; font-weight: 700; color: var(--on-brand); }
.plant-brief .care-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-on-dark); font-weight: 700; margin-top: 1.2rem; }
.plant-brief .care-note { color: var(--on-brand); }
.plant-brief .have-ready { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 1.2rem; }
.plant-brief .have-ready li { color: var(--on-brand); }
.plant-brief .msg-preview {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 1rem;
  font-family: var(--font-body); color: #F0E7DE; white-space: pre-wrap;
}

/* needs-content placeholder */
.needs-content {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 40px 24px; text-align: center; color: var(--muted);
  background: rgba(169,199,160,0.08);
}

/* ---------- Reduced motion / contrast measuring ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Responsive (bug #3) ---------- */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  /* nav on its own row */
  .site-header .container { flex-wrap: wrap; }
  .header-spacer { display: none; }
  .site-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
@media (max-width: 620px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; }
}
@media (max-width: 480px) {
  /* hide header CTA + subtitle (bug #3) */
  .header-cta, .brand__sub { display: none; }
  .section { padding-top: 40px; padding-bottom: 40px; }
  .hero__inner { padding-top: 44px; padding-bottom: 44px; }
}
@media (max-width: 360px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .site-nav a { padding: .4rem .55rem; font-size: .9rem; }
}