/* /what-are-your-needs/ — screen and print.

   Kept out of style.css deliberately. The print rules here are aggressive
   (they hide the chrome and re-letter the page), and style.css is loaded by
   every page on the site. A mistake in a print block is invisible on screen,
   so the blast radius is worth limiting to the one page that needs it.

   The central trick: a single <textarea> serves both audiences. On screen it
   is an ordinary box to type into. On paper it keeps its ruled background, so
   someone who prints the blank page has lines to write on, and someone who
   types first gets their answer printed over those lines. One element, no
   duplicated content, nothing to keep in sync. */

/* ---------- screen ---------- */

.needs-intro { max-width: 46rem; }

/* The form fills the wrap now: three columns need the width. The reading
   measure is preserved per column instead of on the form as a whole. */
.needs-form { max-width: none; }

/* ---------- the three columns ----------
   Prompts | answers | how to reach you. align-items:start keeps each column
   its natural height instead of stretching all three to the tallest. */
.needs-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.col-examples,
.col-needs,
.col-send { min-width: 0; }

@media (max-width: 1040px) {
  .needs-cols { grid-template-columns: 1fr 1fr; }
  .col-examples { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .needs-cols { grid-template-columns: 1fr; gap: 2rem; }
  .col-examples { grid-column: auto; }
}

/* Numbered questions. The counter is on the list so the numbers survive a
   question being added or moved. */
/* Three columns, not a stack. The question asks for a ranked top three, and
   setting them side by side says "three short answers" where a vertical run of
   boxes says "three essays". Collapses to one column under ~46rem, because
   three usable text areas do not fit on a phone. */
/* Stacked within the middle column, so each answer gets the column's full
   width. The three-across arrangement lives at the page level now. */
.questions {
  counter-reset: q;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Examples. Four groups rather than one long list: the grouping shows the
   range of what Meadowlark covers, which people consistently underestimate. */
.examples {
  background: var(--blush, #FFF5F3);
  border: 1px solid var(--border, #EEDFD9);
  border-radius: var(--radius-lg, 10px);
  padding: 1.4rem 1.5rem 1rem;
  margin-bottom: 0;
}

.examples-head {
  font-size: .98rem;
  margin: 0 0 1.1rem;
  color: var(--text, #4A4442);
}

/* Inside its own column the four groups read best stacked. On the widest
   breakpoint the panel spans two columns, so allow it to split there. */
.examples-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

@media (max-width: 1040px) {
  .examples-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.1rem 1.6rem; }
}

.examples-grid h3 {
  font-family: var(--sans, Helvetica), sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--taupe, #A47355);
  margin: 0 0 .5rem;
}

.examples-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.examples-grid li {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text, #4A4442);
  padding-left: .85rem;
  position: relative;
}

.examples-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--taupe-soft, #F0E1D8);
}

/* The li is a flex row so the counter badge, the label and the field can sit
   on two lines: badge + label, then the field across the full column. */
.questions > li {
  counter-increment: q;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0;
  /* Grid items are min-width:auto by default, so a track cannot shrink below
     its content's intrinsic width. A textarea's intrinsic width is its `cols`
     attribute - about 20 characters - which is wider than the 13.5rem track I
     asked for, so the grid silently dropped to two columns. */
  min-width: 0;
}

.questions > li::before {
  content: counter(q);
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--taupe, #A47355);
  color: #fff;
  font-family: var(--serif, Marcellus, serif);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.questions .q {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--serif, Marcellus, serif);
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0;
  color: var(--ink, #141212);
}

.questions .q-hint {
  display: block;
  font-size: .95rem;
  margin: 0 0 .9rem;
  opacity: .78;
}

/* The ruling. Transparent on screen so it reads as a plain field; the same
   gradient is made visible for print below. line-height must equal the
   gradient period or typed text drifts off the rules. */
.answer {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 8.5rem;
  line-height: 2rem;
  padding: .55rem .9rem;
  resize: vertical;
}

/* Name / email / phone on one row, echoing the three columns above so the
   form reads as two deliberate rows rather than a stack that changes its mind.
   `display:contents` on the inner .field-row lets its two fields become grid
   items of this grid, so all three sit on one track line. */
/* Right-hand column: one field per line. `display:contents` on the inner
   .field-row drops its wrapper so email and phone stack with the name field
   instead of sitting side by side in a column that is already narrow. */
.needs-contact { margin-top: 0; }
.needs-contact > .field-row { display: contents; }

.needs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
  margin-top: 2.2rem;
}

.needs-actions .btn { flex: 1 1 100%; }

.btn-print {
  background: none;
  border: 1px solid currentColor;
  cursor: pointer;
}

/* Only meaningful on paper. */
.print-only { display: none; }

/* ---------- print ---------- */

@media print {
  @page { margin: 0.6in 0.65in; }

  /* Everything that is navigation, decoration or interaction. A printed form
     with a "Send to Andrea" button on it is just confusing. */
  .utility, .site-header, .site-footer, .skip-link,
  .deco, .page-figure, .needs-actions, .cf-turnstile,
  .form-out, .form-note, .quote-panel { display: none !important; }

  .print-only { display: block; }

  /* Print keeps its own layout, which is tuned to fit one sheet: the column
     grid is a screen arrangement only. */
  .needs-cols { display: block !important; }
  .col-examples, .col-needs, .col-send { display: block !important; }
  .examples { margin-bottom: 9pt !important; }
  .examples-grid { grid-template-columns: none !important; }

  /* The page-head's blush ground prints as a pink slab that stops in the
     middle of the sheet. On paper the page is white. */
  html, body, .page-head, .section, .section--white { background: none !important; }

  body {
    font-size: 10.5pt;
    line-height: 1.35;
    color: #000;
  }

  .section, .page-head { padding: 0 !important; }
  .wrap, .wrap-narrow { max-width: none; padding: 0; }

  /* Masthead for the printed sheet, since the site header is gone. */
  .print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1.5pt solid #A47355;
    padding-bottom: 6pt;
    margin-bottom: 9pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .print-head img { width: 180pt; height: auto; }
  .print-head .print-contact {
    text-align: right;
    font-size: 8.5pt;
    line-height: 1.45;
    margin: 0;
  }

  h1 { font-size: 19pt; margin: 0 0 5pt; }
  .lede { font-size: 9.5pt; line-height: 1.3; margin: 0 0 7pt; max-width: none; }
  .needs-intro .print-only { margin: 0 0 8pt; font-size: 8.5pt; }
  .eyebrow { font-size: 8pt; letter-spacing: .12em; margin: 0 0 3pt; }

  .questions {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 9pt 0;
    margin-left: -9pt;
    margin-right: -9pt;
  }
  .questions > li {
    display: table-cell;
    width: 33.33%;
    vertical-align: top;
    margin-bottom: 0;
    padding-left: 0;
    break-inside: avoid;
  }
  .questions > li::before {
    display: inline-block;
    width: 15pt; height: 15pt;
    line-height: 15pt;
    text-align: center;
    font-size: 9pt;
    margin-right: 5pt;
    vertical-align: middle;
    background: #A47355 !important;
    color: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .questions .q {
    display: inline;
    font-size: 10.5pt;
    line-height: 15pt;
  }

  /* The examples collapse from a four-column panel to one compact run of
     text. They are genuinely useful to someone filling this in by hand, but
     at full size they cost the second half of the sheet. */
  .examples {
    border: none !important;
    border-top: 0.6pt solid #B9A89C !important;
    border-bottom: 0.6pt solid #B9A89C !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 4pt 0;
    margin-bottom: 9pt;
  }
  .examples-head { font-size: 8.5pt; margin-bottom: 3pt; }
  .examples-grid { display: block; }
  .examples-grid > div { display: inline; }
  .examples-grid h3 {
    display: inline;
    font-size: 8pt;
    margin: 0;
  }
  .examples-grid h3::after { content: ": "; }
  .examples-grid ul { display: inline; }
  .examples-grid li {
    display: inline;
    font-size: 8.5pt;
    padding: 0;
  }
  .examples-grid li::before { display: none; }
  .examples-grid li::after { content: ", "; }
  .examples-grid li:last-child::after { content: ".  "; }

  /* Ruled writing space. 0.30in rules are comfortable for an adult hand;
     tighter than that and handwriting collides. */
  .answer {
    border: none !important;
    border-radius: 0 !important;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(0.30in - 0.6pt),
      #B9A89C calc(0.30in - 0.6pt),
      #B9A89C 0.30in
    ) !important;
    background-color: transparent !important;
    background-size: 100% 0.30in;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    line-height: 0.30in;
    /* Two rules, an exact multiple of the gradient period so the box ends flush
       on a rule rather than halfway through one. The question asks people to
       name three needs, not to describe a situation, so two lines each is the
       right invitation - and it is what keeps the whole form on one sheet,
       which matters more, because a one-page form comes back filled in. */
    height: 1.20in;   /* four rules; the columns are narrow, so depth replaces width */
    margin-top: 5pt;
    min-height: 0;
    padding: 0;
    font-size: 10.5pt;
    overflow: hidden;
    resize: none;   /* the grab handle otherwise prints as a corner smudge */
  }

  /* Name / email / phone become ruled lines to hand-write on, and sit on a
     single row. Stacked they cost about a third of an inch more than the sheet
     had left, which is what was pushing the whole block onto page two. */
  .needs-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14pt;
    align-items: flex-end;
    margin-top: 7pt;
    break-inside: avoid;
  }
  .needs-contact > p { flex: 1 1 100%; margin-bottom: 4pt !important; }
  .needs-contact > .field { flex: 1 1 28%; }
  .needs-contact > .field-row { flex: 2 1 60%; display: flex; gap: 14pt; }
  .needs-contact > .field-row > .field { flex: 1; }
  .needs-contact .field { margin-bottom: 0; }
  .needs-contact label { font-size: 9pt; }
  .needs-contact input {
    border: none !important;
    border-bottom: 0.6pt solid #B9A89C !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 2pt 0;
    height: 20pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Where to send the filled-in sheet. Only appears on paper, because on
     screen the Send button is right there. */
  .print-return {
    margin-top: 6pt;
    padding-top: 5pt;
    border-top: 0.6pt solid #B9A89C;
    font-size: 9pt;
    line-height: 1.5;
    break-inside: avoid;
  }

  a { text-decoration: none; color: #000; }
}