/*============================================================================
  styles.css -- Follow The Logic website house style.

  Was a two-line placeholder ("add rules as needed"), so the site was plain
  cosmo and looked unrelated to the decks. It now wears the SAME furniture as
  the MH pitch and the crop decks: green headings over a hairline, accent bold,
  accent list markers, muted secondary text.

  EVERY COLOUR HERE IS A var(--ftl-*) -- no hex codes. Those custom properties
  come from pubs/brand/ftl_brand.scss, loaded as a theme layer in _quarto.yml
  (`theme: [cosmo, ../brand/ftl_brand.scss]`), which is the same file the decks
  load. That is the whole point: change the green once, and the decks and the
  site move together. If a colour appears here as a literal, it has escaped the
  system -- put it in the brand file instead.

  Two rules of thumb kept from the decks:
    - a border is paid for out of an adjacent margin, so adding house furniture
      does not reflow the page;
    - the ONE contrast colour is --ftl-warm. Nothing else gets to be loud.
============================================================================*/

/* --- Headings: house green over a hairline, as on every slide title. ------ */
main.content h2 {
  color: var(--ftl-accent-deep);
  border-bottom: 3px solid var(--ftl-accent-30);
  padding-bottom: 0.12em;
  /* the border + padding are paid for here, so the rhythm is unchanged */
  margin-bottom: 0.6rem;
}

main.content h3,
main.content h4 {
  color: var(--ftl-accent-deep);
}

/* Bold carries the accent, so a paragraph reads as a shape before it reads as
   words. Deeper than the heading green or it competes with it. */
main.content strong {
  color: var(--ftl-accent-deep);
}

/* Accent markers. ::marker takes colour without touching metrics. */
main.content ul li::marker { color: var(--ftl-accent-45); }
main.content ol li::marker { color: var(--ftl-accent); font-weight: 700; }

main.content a {
  color: var(--ftl-accent);
  text-decoration-color: var(--ftl-accent-45);
}
main.content a:hover { color: var(--ftl-accent-deep); }

/* --- Title block ---------------------------------------------------------- */
.quarto-title .title {
  color: var(--ftl-accent-deep);
  border-bottom: 4px solid var(--ftl-accent-30);
  padding-bottom: 0.14em;
}
.quarto-title .subtitle {
  color: var(--ftl-ink-soft);
  font-weight: 400;
}

/* --- Navbar and footer: quiet scaffolding, not decoration. ---------------- */
.navbar {
  border-bottom: 3px solid var(--ftl-accent-30);
}
.nav-footer {
  border-top: 1px solid var(--ftl-hair);
  color: var(--ftl-mute);
  font-size: 0.9rem;
}
.nav-footer a { color: var(--ftl-mute); }
.nav-footer a:hover { color: var(--ftl-accent); }

/* Callouts: match the decks' pull-quote spine rather than cosmo's blue bar. */
main.content div.callout-note.callout-style-simple {
  border-left: 5px solid var(--ftl-accent-45);
  background: var(--ftl-accent-08);
}

/*============================================================================
  FRONT-PAGE CROP FIGURE

  The tomato skeleton lifted out of the live cropsimulator app
  (images/crop_skeleton.svg, regenerated by tests/work_website_crop_svg.R).
  It sits in a faint-green panel in a 3-of-12 column beside the opening prose.

  THE GREEN IS WEBSITE-ONLY, by request. It exists here and nowhere else: the
  app draws the same skeleton on its own warm ground, and the decks put it on
  paper. --ftl-green-faint is $ftl-accent at 5.5% flattened to an opaque value,
  so the panel can also sit on a tinted parent without the tint compounding.

  WHY THE SVG AND NOT A SCREENSHOT: the asset is ~28 KB of plain
  <line>/<circle>/<rect> with no background of its own, so the panel colour
  shows through and the plant stays crisp at any column width. A PNG would
  bring the app's own #faf9f6 ground with it and cut a hard rectangle out of
  the wash.
============================================================================*/

/* The opening block is two short paragraphs beside a tall plant, so the grid
   row is set by the FIGURE, not the prose. Centring the columns splits the
   leftover height above and below the text instead of leaving it all as a hole
   under it -- the difference between an airy hero and a hole. */
.ftl-hero { align-items: center; }

/* ...but only once the two are actually side by side. Stacked on a phone,
   `center` would do nothing useful and the grid gap is enough. */
@media (max-width: 767px) {
  .ftl-hero { align-items: stretch; }
}

.ftl-crop-panel {
  background: var(--ftl-green-faint);
  border: 1px solid var(--ftl-accent-30);
  border-radius: 8px;
  padding: 1.1rem 0.9rem 0.8rem;
  /* The skeleton is drawn tall (viewBox aspect ~0.45 w/h). Centre it and let
     the column width drive the size -- no fixed px, so the same block works at
     3 columns on desktop and full width on a phone. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ftl-crop-panel img {
  display: block;
  width: 100%;
  /* Cap the height so the panel cannot tower over the prose beside it. Measured
     against the opening block: at 380px the row was 527px tall against ~130px
     of text, which is too big a hole even centred. */
  max-height: 300px;
  height: auto;
}

/* Quarto wraps a lone image in <figure>; strip its default margins so the
   caption below sits tight under the plant. */
.ftl-crop-panel figure { margin: 0; }

.ftl-crop-caption {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  color: var(--ftl-mute);
}
.ftl-crop-caption strong {
  display: block;
  color: var(--ftl-accent-deep);
  font-size: 0.86rem;
  margin-bottom: 0.15rem;
}

/* On a phone the grid collapses to one column; the panel then reads as an
   interruption unless it is given some air and a narrower measure. */
@media (max-width: 767px) {
  .ftl-crop-panel {
    margin: 1.2rem auto;
    max-width: 260px;
  }
}