/* ==========================================================================
   Water Smart Community of Practice — wireframe stylesheet
   Design tokens lifted directly from the Greensign Webflow template
   (water-smart-community.webflow.io) so this maps 1:1 on rebuild.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     REVIEW PALETTE — GREYSCALE
     Presented in greyscale so the client reviews structure, hierarchy and
     layout without being swayed by colour.

     Each value is the tonal equivalent of the Greensign brand colour named
     beside it. Ordering of the section tints is preserved exactly; their
     spacing is widened slightly, because a true luminance conversion puts
     all four within five values of each other and the sections stop reading
     as distinct. Text is held a little darker than pure luminance for
     legibility at wireframe stage.

     TO RESTORE COLOUR: swap each value for the brand value in its comment.
     Nothing else in this stylesheet or in any page needs to change.
     ------------------------------------------------------------------------ */

  --green-900: #3D3D3D;   /* brand #105246 — headings, body text, dark bands */
  --green-700: #595959;   /* brand #156B56 — buttons, primary actions */
  --green-600: #4A4A4A;   /* brand #135E4E */
  --cream:     #F7F7F7;   /* brand #FAF6F0 — page background */
  --sand-200:  #F0F0F0;   /* brand #FFF0D4 — tinted section */
  --sand-100:  #EAEAEA;   /* brand #F3EEE6 — tinted section */
  --sage-100:  #E4E4E4;   /* brand #E7EBE0 — tinted section */
  --mint-100:  #DEDEDE;   /* brand #CEF0DE — tinted section, chips */
  --mint-400:  #D0D0D0;   /* brand #92F0BF — accent, buttons on dark */
  --amber:     #C6C6C6;   /* brand #FFD280 — accent */
  --blush:     #BBBBBB;   /* brand #EBAAB2 — accent */
  --white:     #FFFFFF;
  --line:      rgba(0, 0, 0, 0.16);   /* brand rgba(16, 82, 70, 0.2) */
  --muted:     rgba(0, 0, 0, 0.55);   /* brand rgba(16, 82, 70, 0.7) */

  /* Radii */
  --r-card: 24px;
  --r-pill: 100px;
  --r-sm:   8px;

  /* Rhythm */
  --section-y: 80px;
  --hero-top:  200px;
  --maxw:      1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--green-900);
  background: var(--cream);
}

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

/* --------------------------------------------------------------- Typography */

h1, h2, h3, h4, h5 {
  font-weight: 500;
  color: var(--green-900);
  margin: 0 0 0.4em;
}

h1 { font-size: 64px; line-height: 1.08; letter-spacing: -3px; }
h1.h1--detail { font-size: 56px; letter-spacing: -2.6px; }   /* report, article, measure pages */
h2 { font-size: 48px; line-height: 1.12; letter-spacing: -2.2px; }
h2.h2--sm { font-size: 40px; letter-spacing: -1.8px; }   /* secondary section headings */
h3 { font-size: 32px; line-height: 1.2;  letter-spacing: -1.5px; }
h4 { font-size: 24px; line-height: 1.25; letter-spacing: -1px; }
h5 { font-size: 20px; line-height: 1.3;  letter-spacing: -0.6px; }

p { margin: 0 0 1em; }
p.lead { font-size: 20px; line-height: 1.5; letter-spacing: -0.4px; }
p.small, .small { font-size: 14px; letter-spacing: -0.1px; }

a { color: inherit; }

.muted { color: var(--muted); }

/* Eyebrow label above a section heading */
.eyebrow {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--green-700);
  background: var(--mint-100);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------- Layout */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 32px;
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 56px; }

.bg-sand-100 { background: var(--sand-100); }
.bg-sand-200 { background: var(--sand-200); }
.bg-mint     { background: var(--mint-100); }
.bg-sage     { background: var(--sage-100); }
.bg-white    { background: var(--white); }
.bg-green    { background: var(--green-900); }

.bg-green,
.bg-green h1, .bg-green h2, .bg-green h3, .bg-green h4, .bg-green h5 { color: var(--mint-100); }
.bg-green .muted { color: rgba(255, 255, 255, 0.7); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head--center { margin-inline: auto; text-align: center; }

.row-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.btn--primary { background: var(--green-700); color: var(--white); }
.btn--primary:hover { background: var(--green-900); }

.btn--ghost { background: transparent; color: var(--green-700); border-color: var(--line); }
.btn--ghost:hover { background: var(--green-700); color: var(--white); border-color: var(--green-700); }

.btn--onDark { background: var(--mint-400); color: var(--green-900); }
.btn--onDark:hover { background: var(--white); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--green-700);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: var(--green-700); }

/* --------------------------------------------------------------- Navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: -0.6px;
  line-height: 1.15;
}

.logo__mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--mint-400);
  display: grid; place-items: center;
  font-size: 13px;
  flex: none;
}

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { text-decoration: none; font-size: 15px; }
.nav__links a:hover { color: var(--green-700); text-decoration: underline; text-underline-offset: 4px; }

.nav__toggle { display: none; }

/* --------------------------------------------------------------- Hero */

.hero { padding-top: 120px; padding-bottom: var(--section-y); }
.hero--inner { padding-top: 88px; padding-bottom: 56px; }
.hero__inner { max-width: 900px; }
.hero--center .hero__inner { margin-inline: auto; text-align: center; }
.hero p.lead { max-width: 640px; }
.hero--center p.lead { margin-inline: auto; }

/* Placeholder blocks standing in for photography / film */
.placeholder {
  border-radius: var(--r-card);
  background: var(--sand-100);
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 24px;
  min-height: 220px;
}
.placeholder--hero { min-height: 420px; margin-top: 56px; }
.placeholder--wide { min-height: 320px; }
.placeholder--tall { min-height: 100%; }

/* --------------------------------------------------------------- Cards */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .10); }

.card--flat { background: transparent; }
.card--mint { background: var(--mint-100); border-color: transparent; }
.card--sand { background: var(--sand-100); border-color: transparent; }

.card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--mint-100);
  display: grid; place-items: center;
  margin-bottom: 8px;
  font-size: 18px;
  flex: none;
}

.card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

.card__title { margin: 0; }
.card__body { margin: 0; color: var(--muted); }
.card__foot { margin-top: auto; padding-top: 8px; }

/* Numbered finding cards */
.finding {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
.finding__num { font-size: 32px; letter-spacing: -1.5px; color: var(--green-700); }
.finding p { margin: 0; }

/* Tags / chips */
.tag {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--mint-100);
  color: var(--green-900);
}
.tag--sand  { background: var(--sand-200); }
.tag--sage  { background: var(--sage-100); }
.tag--amber { background: var(--amber); }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Stat blocks */
.stat { padding: 28px 0; }
.stat__num { font-size: 56px; line-height: 1; letter-spacing: -3px; color: var(--green-700); }
.stat__label { margin-top: 10px; }

/* --------------------------------------------------------------- Pillars

   Three-across concept row. Kept out of a nested grid so each card gets the
   full container width to divide, not half of it. */

.definition-head { margin-bottom: 64px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pillar { flex-direction: row; gap: 20px; align-items: flex-start; }
.pillar .card__icon { margin-bottom: 0; }
.pillar .card__title { margin-bottom: 6px; }
.pillar .card__body { margin: 0; }

@media (max-width: 1024px) {
  .definition-head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
}

@media (max-width: 680px) {
  .pillars { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- Filters */

.filters {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin-bottom: 40px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; color: var(--muted); }

.field select,
.field input {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--green-900);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  min-width: 200px;
}
.field input { min-width: 260px; }
.field select:focus, .field input:focus { outline: 2px solid var(--green-700); outline-offset: 1px; }

.filters__count { margin-left: auto; font-size: 14px; color: var(--muted); }

.is-hidden { display: none !important; }

.empty-state {
  padding: 64px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
}

/* --------------------------------------------------------------- Data table */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 900px;
}

table.data th,
table.data td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.data thead th {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--muted);
  background: var(--sand-100);
  position: sticky;
  top: 0;
}

table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--cream); }
table.data td a { color: var(--green-700); }

/* --------------------------------------------------------------- Article */

.article { max-width: 760px; }
.article h2 { font-size: 40px; letter-spacing: -2px; margin-top: 1.4em; }
.article h3 { font-size: 26px; letter-spacing: -1px; margin-top: 1.4em; }
.article p, .article li { font-size: 18px; line-height: 1.6; letter-spacing: -0.2px; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin-bottom: 10px; }

.article blockquote {
  margin: 32px 0;
  padding: 28px 32px;
  background: var(--mint-100);
  border-radius: var(--r-card);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.8px;
}

.definition {
  padding: 32px;
  background: var(--sand-200);
  border-radius: var(--r-card);
  margin-bottom: 40px;
}
.definition p:last-child { margin-bottom: 0; }

/* Two-column split: sticky sidebar + body */
.split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}
.sidebar { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 24px; }

/* --------------------------------------------------------------- Accordion (FAQ) */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 0;
  font-size: 20px;
  letter-spacing: -0.6px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 24px; color: var(--green-700); flex: none; }
.accordion details[open] summary::after { content: "–"; }
.accordion details p { margin: 0 0 24px; color: var(--muted); max-width: 780px; }

/* --------------------------------------------------------------- Breadcrumb */

.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Logos */

.logo-strip {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.logo-strip__item {
  padding: 14px 28px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 14px;
}

/* --------------------------------------------------------------- Newsletter */

.newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 480px; }
.newsletter-form input {
  flex: 1 1 240px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--green-900);
}

/* --------------------------------------------------------------- CTA band */

.cta {
  background: var(--green-900);
  border-radius: var(--r-card);
  padding: 72px 64px;
  text-align: center;
}
.cta h2 { color: var(--mint-100); }
.cta p { color: rgba(255, 255, 255, 0.7); max-width: 560px; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: 32px; }

/* --------------------------------------------------------------- Footer */

.footer { border-top: 1px solid var(--line); padding-block: var(--section-y) 40px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; }
.footer h5 { font-size: 15px; letter-spacing: -0.2px; margin-bottom: 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer a { text-decoration: none; font-size: 15px; color: var(--muted); }
.footer a:hover { color: var(--green-900); }
.footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}

/* --------------------------------------------------------------- Wireframe banner */

.wf-note {
  background: var(--green-900);
  color: var(--mint-100);
  font-size: 13px;
  letter-spacing: 0;
  padding: 10px 0;
  text-align: center;
}
.wf-note strong { color: var(--mint-400); font-weight: 500; }

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
  h1 { font-size: 48px; letter-spacing: -2.4px; }
  h1.h1--detail { font-size: 44px; letter-spacing: -2.2px; }
  h2 { font-size: 40px; letter-spacing: -1.8px; }
  h2.h2--sm { font-size: 34px; letter-spacing: -1.5px; }
  .article h2 { font-size: 34px; letter-spacing: -1.5px; }
  .article h3 { font-size: 24px; letter-spacing: -0.9px; }
  h3 { font-size: 28px; letter-spacing: -1.2px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .sidebar { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-flex;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 10px 18px;
    font: inherit;
    font-size: 14px;
    color: var(--green-900);
    cursor: pointer;
  }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    padding: 8px 0 24px;
  }
  .nav.is-open .nav__inner { flex-wrap: wrap; }
}

@media (max-width: 680px) {
  :root { --section-y: 56px; }
  h1 { font-size: 36px; letter-spacing: -1.6px; }
  h1.h1--detail { font-size: 34px; letter-spacing: -1.5px; }
  h2 { font-size: 30px; letter-spacing: -1.4px; }
  h2.h2--sm { font-size: 28px; letter-spacing: -1.2px; }
  .article h2 { font-size: 28px; letter-spacing: -1.2px; }
  .article h3 { font-size: 22px; letter-spacing: -0.8px; }
  .article p, .article li { font-size: 17px; }
  .stat__num { font-size: 44px; letter-spacing: -2px; }
  h3 { font-size: 24px; letter-spacing: -1px; }
  p.lead { font-size: 18px; }
  .container { padding-inline: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .cta { padding: 48px 24px; }
  .card { padding: 24px; }
  .finding { grid-template-columns: 1fr; gap: 8px; }
  .filters { flex-direction: column; align-items: stretch; }
  .field select, .field input { min-width: 0; width: 100%; }
  .filters__count { margin-left: 0; }
}