/* Less scrolling: spacing on the --sp scale, the FAQ accordion, the
   collapsible sections of the legal pages, and the
   two-column contact and request pages. Loaded after base.css so these
   rules win without editing the older per-page rules in place. */

/* ---- spacing ------------------------------------------------------------ */
/* The old clamp reached --sp-6 above and below every page, which with the
   footer margin left a ~180px empty band before the footer. */
.section{ padding-block:clamp(var(--sp-4), 4.5vw, var(--sp-5)); }
.section + .section{ padding-top:0; }
.hero{ padding-block:clamp(var(--sp-4), 4vw, var(--sp-5)) var(--sp-3); }
.site-footer{ margin-top:0; }
.section-head{ margin-bottom:var(--sp-3); }

/* ---- FAQ accordion ------------------------------------------------------ */
.faq-list{ margin-top:var(--sp-4); border-top:var(--hair) solid var(--line); }
.faq-item{ border-bottom:var(--hair) solid var(--line); }
.faq-item > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); min-height:44px; padding:var(--sp-2) 0;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary .faq-q{ margin:0; font-family:var(--serif); font-size:var(--step-2); line-height:1.25; font-weight:600; color:var(--ink); }
/* A plus that turns into a minus: a shape cue, never colour alone. */
.faq-item > summary::after, .page-sec > summary::after{
  content:""; flex:0 0 auto; width:.8rem; height:.8rem;
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  color:var(--ink-soft); transition:transform .2s ease, background-size .2s ease;
}
.faq-item[open] > summary::after, .page-sec[open] > summary::after{
  background-size:100% 2px, 2px 0; transform:rotate(180deg);
}
.faq-item > summary:hover .faq-q{ color:var(--leaf, var(--forest)); }
.faq-item > summary:focus-visible, .page-sec > summary:focus-visible{
  outline:2px solid var(--leaf, var(--forest)); outline-offset:2px; border-radius:3px;
}
.faq-a{ padding:0 0 var(--sp-3); }
.faq-a p{ margin:0; }
/* A linked question scrolls clear of the sticky header. */
.faq-item, .page-sec{ scroll-margin-top:calc(var(--header-h) + var(--sp-2)); }
.faq-item:target > summary .faq-q{ color:var(--leaf, var(--forest)); }
/* The phone header stacks the search under the logo, so it is taller. */
@media (max-width:43.6875em){ .faq-item, .page-sec{ scroll-margin-top:calc(var(--header-h) + 3.5rem); } }

/* Smooth open where the browser can animate to auto height; the global
   reduced-motion rule in base.css switches the transition off. */
@supports (interpolate-size:allow-keywords){
  .faq-item, .page-sec{ interpolate-size:allow-keywords; }
  .faq-item::details-content, .page-sec::details-content{
    height:0; overflow:clip;
    transition:height .25s ease, content-visibility .25s allow-discrete;
  }
  .faq-item[open]::details-content, .page-sec[open]::details-content{ height:auto; }
}
@media (prefers-reduced-motion:reduce){
  .faq-item::details-content, .page-sec::details-content{ transition:none; }
}

/* ---- legal pages: sections (plain headings on desktop, fold on phones) - */
.page-sec > summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.page-sec > summary::-webkit-details-marker{ display:none; }
.page-sec > summary h2{ margin:var(--sp-4) 0 .8rem; }
/* Flex summary margins do not collapse into the paragraph above, so the
   section's last paragraph gives up its bottom margin instead. */
.page-sec > :last-child{ margin-bottom:0; }
/* Desktop reads the sections as plain headings: no toggle cue, no pointer.
   reading.js stops the toggle there too. */
@media (min-width:43.75em){
  .page-sec > summary{ cursor:default; pointer-events:none; }
  .page-sec > summary::after{ display:none; }
}
@media (max-width:43.6875em){
  .page-sec{ border-bottom:var(--hair) solid var(--line); }
  .page-sec > summary{ cursor:pointer; min-height:44px; }
  .page-sec > summary h2{ margin:var(--sp-2) 0; font-size:var(--step-2); }
  .page-sec[open] > :last-child{ margin-bottom:var(--sp-3); }
}

/* ---- two columns: details beside the form ------------------------------- */
/* Contact and Request a plant widen from their single column to the
   reading column and set help text left, form right; phones stack. */
.col-split{ max-width:var(--col-read); margin-inline:auto; }
@media (min-width:60em){
  /* The narrow column never drops under 300px: it takes that much and the
     wide column gives way, instead of both shrinking by ratio. */
  .col-split{ display:grid; grid-template-columns:minmax(min(100%, 18.75rem), 2fr) minmax(0,3fr); gap:var(--sp-3) var(--sp-5); align-items:start; }
  .col-split > .split-aside{ position:sticky; top:calc(var(--header-h) + var(--sp-3)); }
  .col-split .split-aside > :first-child{ margin-top:0; }
  .col-split .split-main > :first-child{ margin-top:0; }
  .col-split .spec{ margin-top:0; }
  .col-split > .split-head{ grid-column:1 / -1; }
  /* Contact has no form: the details list is the main read, so it takes
     the wider column and the privacy note sits beside it. */
  .col-split--details{ grid-template-columns:minmax(0,3fr) minmax(min(100%, 18.75rem), 2fr); }
  .col-split--details > .split-aside{ position:static; }
  .col-split--details .split-main h2{ margin-top:0; font-size:var(--step-3); }
}
@media (max-width:59.9375em){
  .col-split > .split-main{ margin-top:var(--sp-3); }
}

/* The divider above "You might like" stacked an 80px margin on a 54px
   padding; the rule itself already marks the break. */
.section-head--divided{ padding-top:var(--sp-4); }
.section-head--divided.stack-6{ margin-top:var(--sp-5); }