/* ==========================================================================
   waldenlake.info — shared stylesheet
   One file, six pages. No page may add its own <style> block.
   ==========================================================================

   COMPONENT CONTRACT — read this before writing markup.
   Every class below is expected to wrap exactly this shape of HTML.
   Anything not listed here is a plain semantic element with no class.

   SHELL (identical on all six pages)
   -----------------------------------------------------------------------
   header.site-header
     .header-inner (shell)
       a.wordmark > img                         — links to /
       nav.site-nav[aria-label]
         ul > li > a  (current page: aria-current="page")

   footer.site-footer
     .footer-inner (shell, 3-up grid)
       .footer-about   > p.footer-org (bold) + p
       .footer-contact > ul > li > a[href^="mailto:"] / a[href^="tel:"]
       nav.footer-nav[aria-label] > ul > li > a
     .footer-legal (full width, above hairline)
       > p (x2, small)

   CONTAINERS / UTILITIES
   -----------------------------------------------------------------------
   .shell            — 1180px wide container (header, footer, bands, grids)
   .prose            — 68ch measure container (body copy)
   .scroll-x         — wraps any wide table/figure that must not blow out
                        the page: <div class="scroll-x"><table>...
   .visually-hidden  — screen-reader-only text (also used pre-focus on
                        .skip-link and for the honeypot field)
   .skip-link        — first focusable element in <body>, href="#main"

   BUTTONS
   -----------------------------------------------------------------------
   a.btn / button.btn            — base
   .btn.btn-primary               — solid green-deep
   .btn.btn-secondary              — outline
   .btn.btn-block                 — full width (form submit on narrow screens)

   HERO (index.html only)
   -----------------------------------------------------------------------
   .hero
     .hero-media > img                — full-bleed photo, object-fit: cover
     .hero-scrim                      — empty div, dark gradient overlay
     .hero-content (shell)
       p.eyebrow (optional)
       h1
       p.standfirst
       .hero-actions > a.btn (x2)

   STAT BAND (index.html — "the ask in four numbers")
   -----------------------------------------------------------------------
   .stat-band                        — grid, auto-fit minmax(220px,1fr)
     .stat
       .stat-num  > span.unit (optional, wraps the unit inside the number)
       .stat-label
       .stat-badge (optional)        — small pill, e.g. "committed minimum"

   BENEFIT LIST (index.html — eight community benefits)
   -----------------------------------------------------------------------
   ul.benefit-list                  — two-column, each item rests on a
     li                                 green-leaf top rule

   BAND / CTA (image-led band and the closing call-to-action)
   -----------------------------------------------------------------------
   .feature-band                    — image + text, row on wide screens,
     .feature-band-media > a > img      stacked under 720px
     .feature-band-content > h2, p, a.btn

   .cta-band                        — solid green-deep band, centred text
     .cta-band-inner (shell/prose)  > p.eyebrow?, h2, p, a.btn

   .section--tint                   — modifier on <section>: paper-warm bg,
                                        hairline top rule (for banding)

   CARDS
   -----------------------------------------------------------------------
   .card-grid                       — grid, auto-fit minmax(260px,1fr)
     .card > h3, p, (a.btn optional)

   FIGURES (plan boards, patch map, home renderings)
   -----------------------------------------------------------------------
   figure.figure
     img
     figcaption.figure-caption
     a.figure-download (optional)   — "Download the PDF (4.2 MB)" etc.

   .figure-grid                     — grid, auto-fit minmax(260px,1fr), for
     figure.figure (x N)                grouped renderings
   p.figure-grid-note               — small line under a .figure-grid,
                                        e.g. "Conceptual elevations by
                                        Sharp. Subject to change."

   DATA TABLE (unit mix, pods, golf holes)
   -----------------------------------------------------------------------
   div.scroll-x > table.data-table
     caption (optional)
     thead > tr > th
     tbody > tr > td
     tfoot > tr > th/td (optional — totals row, e.g. Par 36 / 3,235 yds)

   TIMELINE (get-involved.html — schedule)
   -----------------------------------------------------------------------
   ol.timeline
     li.timeline-item (add .is-past / .is-scheduled / .is-statutory)
       p.timeline-date
       p.timeline-event
       p.timeline-note (optional, small)

   ACCORDION (questions.html — native details/summary, no JS)
   -----------------------------------------------------------------------
   .accordion-group                 — sits under an <h2>, one per topic
     details.accordion-item
       summary.accordion-trigger
       div.accordion-panel > p (etc.)

   DOCUMENT LIST (questions.html — downloads)
   -----------------------------------------------------------------------
   ul.doc-list
     li.doc-item
       a.doc-link > span.doc-title
       p.doc-desc
       p.doc-meta                   — "PDF · 4.2 MB"

   FORM (get-involved.html markup / api/contact.js handler)
   -----------------------------------------------------------------------
   .contact-layout                  — grid: form col + fallback col,
     .contact-form-col                 stacks under 720px
     .contact-fallback-col

   p.form-privacy                   — the privacy line, above the form

   form.form
     .form-field                    — wraps one label+input+hint+error
       label
       input / textarea
       p.form-hint                  — id target of aria-describedby
       p.form-error                 — id target of aria-describedby,
                                        empty until JS/browser fills it
     fieldset.form-field > legend + .form-choice-option (x3)
       .form-choice-option > input[type=checkbox] + label
     .form-honeypot.visually-hidden — the trap field's wrapper
     .form-turnstile                — Cloudflare Turnstile widget mount
     .form-actions > button.btn[type=submit]
     .form-success                  — success panel, hidden until shown

   .contact-fallback-card            — box next to the form with the
     h2/h3, p, a[href^="mailto:"], a[href^="tel:"]     published email/phone

   NEED PLACEHOLDER (blocked facts — must be loud)
   -----------------------------------------------------------------------
   div.need[data-need="facts.json path"]
     p (first child)                — the literal "[NEED: ...]" text
     p.need-note                    — "This placeholder must be replaced
                                        before the site is published."
   ========================================================================== */


/* ---- 1. Custom properties -------------------------------------------- */

:root {
  color-scheme: light; /* force light form controls/scrollbars even when
                           the visitor's OS is set to dark — this site
                           commits to one light theme and must never
                           render on a dark, unreadable ground. */

  /* brand — cited from facts.json > brand. Nothing outside this block
     may hold a raw hex value. */
  --green-deep:  #184F33;
  --green-leaf:  #3AAD2A;
  --blue-water:  #1D75BD;
  --blue-sky:    #27AAE2;
  --yellow-sun:  #FFDE17;
  --charcoal:    #414143;

  /* derived tints — computed from the six brand colours above, never
     restated as their own hex values */
  --paper:       color-mix(in srgb, var(--yellow-sun) 4%, white);
  --paper-warm:  color-mix(in srgb, var(--yellow-sun) 9%, white);
  --line:        color-mix(in srgb, var(--green-deep) 16%, white);
  --green-wash:  color-mix(in srgb, var(--green-leaf) 10%, white);
  --need-bg:     color-mix(in srgb, var(--yellow-sun) 14%, white);
  --need-border: color-mix(in srgb, var(--yellow-sun) 60%, var(--charcoal) 10%);
  --footer-text: color-mix(in srgb, white 90%, var(--green-deep) 10%);
  --footer-line: color-mix(in srgb, white 22%, var(--green-deep) 78%);
  --shadow-card: 0 1px 2px rgba(20, 30, 25, .06), 0 6px 16px rgba(20, 30, 25, .07);

  --focus-ring:  var(--blue-sky);
  --focus-ring-on-dark: var(--yellow-sun);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", ui-serif, serif;

  --measure: 78ch;
  --shell-width: 1180px;
  --frame-width: 1120px;
}

/* ---- 2. Reset ----------------------------------------------------------*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: clamp(17px, 1rem + 0.28vw, 19px);
  line-height: 1.55;
  overflow-x: hidden; /* belt-and-suspenders: the page body itself never
                         scrolls sideways; wide content gets .scroll-x */
}

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

h1, h2, h3, h4 { color: var(--green-deep); line-height: 1.2; font-weight: 700; }
h1, h2 { font-family: var(--font-serif); }
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.1rem); margin: 0 0 .5rem; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); margin: 1.9rem 0 .7rem; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); margin: 1.5rem 0 .5rem; }
h4 { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); margin: 1.5rem 0 .5rem; }

p { margin: 0 0 .85rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
small { font-size: .875em; }

a { color: var(--blue-water); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ---- 3. Accessibility primitives --------------------------------------*/

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

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 1000;
  background: var(--green-deep);
  color: white;
  padding: .6rem 1rem;
  border-radius: 0 0 .35rem .35rem;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.site-footer :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.btn-primary:focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

/* ---- 4. Layout containers ---------------------------------------------*/

.shell {
  max-width: var(--shell-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

/* Alignment frame: wide blocks inside main are capped well short of the
   header/footer shell so that a 68ch text column and a figure grid read as
   one column of content rather than two unrelated widths. */
main .shell { max-width: var(--frame-width); }

main .prose,
main > section > .prose {
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.scroll-x {
  overflow-x: auto;
  margin: 1.25rem 0;
  -webkit-overflow-scrolling: touch;
}
.scroll-x:has(table) { border: 1px solid var(--line); border-radius: .5rem; }

main > section {
  padding-block: clamp(1.6rem, 2.6vw, 2.75rem);
}
main > section.section--tint {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---- 5. Buttons ---------------------------------------------------------*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: .4rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--green-deep);
  color: white;
  border-color: var(--green-deep);
}
.btn-primary:hover { background: color-mix(in srgb, var(--green-deep) 85%, black); }

.btn-secondary {
  background: transparent;
  color: var(--green-deep);
  border-color: var(--green-deep);
}
.btn-secondary:hover { background: var(--green-wash); }

.hero .btn-secondary,
.cta-band .btn-secondary {
  color: white;
  border-color: white;
}
.hero .btn-secondary:hover,
.cta-band .btn-secondary:hover {
  background: rgba(255, 255, 255, .12);
}

.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---- 6. Header / nav ----------------------------------------------------*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* On a phone the wordmark plus a two-row nav is ~143px — a sixth of the
   viewport, held permanently. A static header is worth more than a sticky one
   at that size; the footer carries the same six links. */
@media (max-width: 719px) {
  .site-header { position: static; }
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding-block: .75rem;
}

.wordmark { display: inline-flex; flex-shrink: 0; }
.wordmark img { width: 200px; height: auto; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: .25rem 1.25rem;
}

.site-nav a {
  display: inline-block;
  padding: .35rem .1rem;
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--green-deep); }
.site-nav a[aria-current="page"] {
  color: var(--green-deep);
  border-bottom-color: var(--green-leaf);
}

@media (max-width: 720px) {
  .site-nav ul { gap: .35rem .9rem; }
  .site-nav a { font-size: .9rem; }
}

/* ---- 7. Footer -----------------------------------------------------------*/

.site-footer {
  background: var(--green-deep);
  color: var(--footer-text);
  margin-top: 3rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding-block: 3rem 2rem;
}

.footer-inner a { color: white; }

.footer-about .footer-org {
  color: white;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .4rem;
}

.footer-contact ul,
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.footer-nav[aria-label] { font-weight: 600; }

.footer-legal {
  border-top: 1px solid var(--footer-line);
  padding-block: 1.25rem 2rem;
}
.footer-legal p {
  margin: 0 0 .4rem;
  font-size: .8rem;
  color: color-mix(in srgb, white 75%, var(--green-deep) 25%);
}
.footer-legal p:last-child { margin-bottom: 0; }

/* ---- 8. Hero (index.html) -------------------------------------------------*/

.hero {
  position: relative;
  overflow: hidden;
  /* The hero photograph is 2.33:1. `object-fit: cover` crops whatever the box
     does not match, so a height fixed at 640px turned a 2560px-wide monitor
     into a 4:1 box and cut the runners off at the waist. Tying the height to
     viewport WIDTH holds the box near the photograph's own proportions at
     every size, so the crop is horizontal — losing path and trees — rather
     than vertical, which loses people. 44vw is the same ~78% of the fold the
     original 78vh was aiming at. */
  min-height: min(max(44vw, 480px), 88vh);
  display: flex;
  align-items: flex-end;
  color: white;
}

.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The box is now always narrower than the photograph, so the crop is
     horizontal only and the vertical anchor no longer matters. */
  object-position: center center;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 15, .15) 0%, rgba(8, 18, 12, .78) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 10vw, 6rem);
  width: 100%;
}

.hero-content h1 { color: white; }
.hero-content .eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .85rem;
  color: color-mix(in srgb, white 85%, var(--green-leaf) 15%);
}
.hero-content .standfirst {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  max-width: 46ch;
  color: color-mix(in srgb, white 94%, transparent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ---- 9. Stat band --------------------------------------------------------*/

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat { text-align: center; }

.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.7rem + 1.8vw, 3rem);
  color: var(--green-deep);
  line-height: 1.05;
}
.stat-num .unit {
  display: block;
  font-size: .38em;
  font-weight: 600;
  margin-top: .15em;
  letter-spacing: .01em;
}

.stat-label {
  margin-top: .35rem;
  font-size: .95rem;
  color: var(--charcoal);
}

.stat-badge {
  display: inline-block;
  margin-top: .5rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--green-wash);
  color: var(--green-deep);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- 10. Benefit list -----------------------------------------------------*/

.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem 2.5rem;
}
.benefit-list li {
  padding-top: .9rem;
  border-top: 3px solid var(--green-leaf);
  font-size: 1.05rem;
}

/* ---- 11. Feature band + CTA band ------------------------------------------*/

.feature-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 720px) {
  .feature-band { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
}

.feature-band-media img {
  width: 100%;
  border-radius: .5rem;
  box-shadow: var(--shadow-card);
}
.feature-band-media a { display: block; }

.feature-band-content h2 { margin-top: 0; }

/* ---- Pull quote: the City's own words, quoted verbatim -------------------- */

.offsite-link {
  margin: 0 0 1.25rem;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-leaf);
  border-radius: 0 .375rem .375rem 0;
  background: white;
}
.offsite-link a { font-weight: 600; }
.offsite-link span {
  font-size: .9rem;
  color: color-mix(in srgb, var(--charcoal) 78%, white 22%);
}

.pullquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--green-leaf);
  background: var(--green-wash);
  border-radius: 0 .375rem .375rem 0;
}
.pullquote > p { margin: 0; }
.pullquote > p + p { margin-top: .75rem; }

.cta-band {
  background: var(--green-deep);
  color: white;
}
.cta-band-inner {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.cta-band h2 { color: white; }
.cta-band p { color: color-mix(in srgb, white 92%, transparent); }

/* ---- 12. Card grid --------------------------------------------------------*/

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.card h3 { margin-top: 0; }
.card :last-child { margin-bottom: 0; }

/* ---- 13. Figures ----------------------------------------------------------*/

.figure {
  margin: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: .5rem;
  overflow: hidden;
}
.figure img { width: 100%; height: auto; }

/* Must come AFTER `.figure { margin: 0 }`. It used to sit above it, where the
   equal-specificity `margin: 0` silently cancelled `margin-inline: auto` and
   left the course routing shoved against the left edge of the page. */
.figure--tall { max-width: 620px; margin-inline: auto; }

/* A standalone mark or logo inside prose — centred, and never wider than it
   was drawn. */
.prose p.figure-centred { text-align: center; }
.prose p.figure-centred img { display: inline-block; }
.figure-caption {
  padding: .85rem 1rem;
  font-size: .9rem;
  color: var(--charcoal);
  border-top: 1px solid var(--line);
}
.figure-download {
  display: inline-block;
  margin-top: .4rem;
  font-weight: 600;
  font-size: .9rem;
}

/* Third-party copyright notice under a figure. Smaller and quieter than the
   caption it follows — it is a legal credit, not part of the explanation. */
.figure-credit {
  display: inline-block;
  margin-top: .45rem;
  font-size: .78rem;
  color: color-mix(in srgb, var(--charcoal) 68%, white);
}

.figure-grid .figure { display: flex; flex-direction: column; }
.figure-grid .figure > figcaption,
.figure-grid .figure > .figure-caption { margin-top: auto; }

.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.figure-grid-note {
  font-size: .85rem;
  color: color-mix(in srgb, var(--charcoal) 80%, white 20%);
  font-style: italic;
  margin-top: -.5rem;
}

/* ---- 14. Data tables -------------------------------------------------------*/

.data-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: .95rem;
}
.data-table caption {
  text-align: left;
  font-weight: 700;
  color: var(--green-deep);
  padding: .75rem 1rem;
}
.data-table th, .data-table td {
  padding: .65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  background: var(--green-wash);
  color: var(--green-deep);
  font-weight: 700;
  white-space: nowrap;
}
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-warm) 60%, white); }
.data-table tfoot th, .data-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--green-leaf);
  border-bottom: none;
}
.data-table td[data-numeric], .data-table th[data-numeric] { text-align: right; }

/* ---- 15. Timeline ----------------------------------------------------------*/

.timeline {
  max-width: var(--measure);
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
  border-left: 3px solid var(--green-wash);
}

.timeline-item {
  position: relative;
  padding: 0 0 2rem 1.25rem;
}
/* The rule above leaves 2rem of bare connector hanging below the final marker.
   It read as an unfinished list even with five items; with two it reads as a
   missing third. Drop the trailing gap on the last item only. */
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 3px + -6px);
  top: .3rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--green-leaf);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--green-leaf);
}
.timeline-item.is-statutory::before { background: var(--charcoal); box-shadow: 0 0 0 2px var(--charcoal); }
.timeline-item.is-past { opacity: .75; }

.timeline-date {
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: .15rem;
}
.timeline-event { margin-bottom: .15rem; }
.timeline-note { font-size: .85rem; color: var(--charcoal); }

/* ---- 16. Accordion (details/summary) ---------------------------------------*/

.accordion-group {
  display: grid;
  gap: .75rem;
  margin: 1rem 0 2rem;
}

.accordion-item {
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: white;
  overflow: hidden;
}

.accordion-trigger {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-weight: 700;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--green-leaf);
  flex-shrink: 0;
}
.accordion-item[open] .accordion-trigger::after { content: "\2212"; }
.accordion-item[open] .accordion-trigger { border-bottom: 1px solid var(--line); }

.accordion-panel {
  padding: 0 1.25rem 1.25rem;
}
.accordion-panel :last-child { margin-bottom: 0; }

/* ---- 17. Document list ------------------------------------------------------*/

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.doc-item {
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  background: white;
}
.doc-link { font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.doc-link .doc-title { text-decoration: underline; }
.doc-desc { margin: .35rem 0; }
.doc-meta { margin: 0; font-size: .85rem; color: color-mix(in srgb, var(--charcoal) 80%, white 20%); }

/* ---- 18. Contact layout + form ------------------------------------------------*/

.form-privacy {
  background: var(--green-wash);
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  font-size: .95rem;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 720px) {
  .contact-layout { grid-template-columns: 1.6fr 1fr; }
}

.contact-fallback-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.contact-fallback-card a { display: inline-block; font-weight: 700; margin-top: .35rem; }

.form { display: grid; gap: 1.5rem; }

.form-field { display: grid; gap: .35rem; }
.form-field label { font-weight: 700; }
.form-field .optional-tag {
  font-weight: 400;
  color: color-mix(in srgb, var(--charcoal) 75%, white 25%);
  font-size: .85rem;
}

input, textarea, select {
  font: inherit;
  color: var(--charcoal);
  background: white;
  border: 1px solid color-mix(in srgb, var(--charcoal) 45%, white 55%);
  border-radius: .4rem;
  padding: .65rem .8rem;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--blue-water);
}
textarea { min-height: 8rem; resize: vertical; }

.form-hint {
  margin: 0;
  font-size: .85rem;
  color: color-mix(in srgb, var(--charcoal) 80%, white 20%);
}

.form-error {
  margin: 0;
  font-size: .85rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--charcoal) 55%, black 15%);
  min-height: 1.2em;
}
.form-error:empty { display: none; }
.form-field.has-error input,
.form-field.has-error textarea {
  border-color: var(--charcoal);
  border-width: 2px;
}

fieldset.form-field {
  border: none;
  padding: 0;
  margin: 0;
}
fieldset.form-field legend {
  font-weight: 700;
  padding: 0 0 .35rem;
}
.form-choice-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  margin-bottom: .4rem;
}
.form-choice-option input { width: auto; }
.form-choice-option label { font-weight: 400; }

/* "(select all that apply)" — present but quieter than the question. */
.legend-hint {
  font-weight: 400;
  color: color-mix(in srgb, var(--charcoal) 70%, white);
}

.form-honeypot { position: absolute !important; left: -9999px !important; top: auto; }

.form-turnstile { margin-block: .25rem; }

.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.form-success {
  border: 2px solid var(--green-leaf);
  background: var(--green-wash);
  color: var(--green-deep);
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
}

/* ---- 19. Need placeholder — must be loud ------------------------------------*/

.need {
  position: relative;
  background: var(--need-bg);
  border: 1px solid var(--need-border);
  border-left: 8px solid var(--yellow-sun);
  border-radius: .35rem;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 10px rgba(65, 65, 67, .12);
}
.need::before {
  content: "Needs input before publishing";
  display: inline-block;
  background: var(--yellow-sun);
  color: var(--charcoal);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .55rem;
  border-radius: .25rem;
  margin-bottom: .6rem;
}
.need p:first-of-type {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--charcoal);
  margin-bottom: .4rem;
}
.need .need-note {
  font-size: .85rem;
  font-weight: 400;
  font-style: italic;
  margin: 0;
  color: color-mix(in srgb, var(--charcoal) 85%, white 15%);
}
@media (prefers-reduced-motion: no-preference) {
  .need { animation: need-pulse 2.6s ease-in-out infinite; }
}
@keyframes need-pulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(65, 65, 67, .12); }
  50% { box-shadow: 0 2px 18px rgba(255, 222, 23, .55); }
}

/* ---- 20. Print --------------------------------------------------------------*/

@media print {
  .site-header, .site-nav, .skip-link, .hero-actions,
  .btn, .form-actions, .form-turnstile, .cta-band { display: none !important; }
  .site-header { position: static !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .figure, .card, .accordion-item, .doc-item { break-inside: avoid; border-color: gray; }
  .need { animation: none; box-shadow: none; }
}
