/* Single note (blog article) — the reading page.
   Layout: breadcrumb, title and meta, the featured picture, the quick answer,
   then the article itself in one column, opening with its table of contents as
   a bordered box above the body. Nothing stands beside the text while it is
   being read: what a reader reaches for next stands after the body — the note
   search and the closest notes side by side, then the related solutions and the
   closing band, and last the inquiry panel, which closes the page above the
   footer so the question is asked once everything before it has been read.
   This sheet is enqueued site-wide (functions.php), so every rule is scoped to
   the classes this template alone renders: .single-post*, .post-toc*, .post-after*
   and .post-ask. The shared layer (style.css, pages.css, tokens.css) keeps the
   palette, the spacing and the form field styling. */

/* Breadcrumb */
.breadcrumbs{
  max-width:var(--content-max);
  margin:0 auto;
  padding:24px var(--gutter) 0;
  font-size:14px;
  color:var(--color-muted);
}
.breadcrumbs a{color:var(--color-muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--color-accent)}
.breadcrumbs__sep{margin:0 8px;color:var(--color-field-line)}
.breadcrumbs__current{color:var(--color-text)}

/* Header */
.single-post__header{padding:16px 0 8px}
.site-main--single .single-post{padding-bottom:var(--section-space)}
.single-post .entry__title{
  /* A note title is a sentence, not a slogan: it is set a step smaller than the
     site's display h1 and given a wider measure, so a long title holds three
     lines instead of five. */
  font-size:clamp(1.65rem,2.9vw,2.35rem);
  line-height:1.16;
  letter-spacing:-.02em;
  margin:0 0 12px;
  max-width:28ch;
  text-wrap:balance;
}
.entry__meta{
  margin:0 0 8px;
  font-size:14px;
  color:var(--color-muted);
}
.entry__meta a{color:var(--color-accent);text-decoration:none}
.entry__meta a:hover{text-decoration:underline}
.entry__meta-sep{margin:0 8px}

/* Featured picture */
.single-post__hero{
  margin:8px 0 24px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--color-pale);
}
.single-post__photo{display:block;width:100%;height:auto}

/* Quick answer */
.quick-answer{
  margin:0 0 32px;
  padding:20px 24px;
  background:var(--color-accent-pale);
  border-left:4px solid var(--color-accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  max-width:70ch;
}
.quick-answer__label{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-accent);
}
.quick-answer__text{margin:0;font-size:17px;color:var(--color-heading)}

/* Layout: the article in one column. The reading column keeps the page's own
   width and the body its own measure (.single-post__body), so a note is read at
   a line length that suits prose, with nothing in the margin competing for the
   eye. */
.single-post__layout{display:block}
.single-post__main{min-width:0}

/* After the note: the inquiry, then the search and the closest notes. The band
   opens with a hairline, so the article ends visibly and what follows reads as
   what comes after it rather than as part of it. */
.post-after{
  margin:56px 0 0;
  padding-top:40px;
  border-top:1px solid var(--color-line);
}

/* The inquiry closes the page: a panel below the closing band and above the
   footer, on the pale ground the site gives its own ask. */
.post-ask{padding-block:clamp(32px,5vw,64px)}

/* The inquiry: the question in the first column, the form in the second, on the
   pale ground the site gives its own ask. Below 900px the two stack, the
   question first. */
.post-after__ask{
  display:grid;
  gap:26px;
  padding:clamp(22px,3vw,36px);
  background:var(--color-pale);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  /* The form posts back to this page and lands on #contact, which is this
     block, so a jump to it clears the fixed header. */
  scroll-margin-top:110px;
}
.post-after__eyebrow{margin-bottom:14px}
.post-after__title{
  margin:0 0 10px;
  font-size:1.05rem;
  line-height:1.3;
  color:var(--color-heading);
}
.post-after__text{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.55;
  color:var(--color-muted);
}
/* The form is the site's one inquiry form. It is given the surface so it stands
   off the pale panel, and the two-up field grid the rest of the site uses is
   left alone, because this column is wide enough for it now. */
.post-after__form .form{padding:clamp(18px,2.4vw,26px);background:var(--color-surface)}
@media (min-width:900px){
  .post-after__ask{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:clamp(28px,4vw,56px);
    align-items:start;
  }
}

/* The search and the closest notes, side by side under the note: the search is
   a box, the notes are a list of titles with their dates. Below 900px they
   stack, the search first. */
.post-after__more{display:grid;gap:28px;margin-top:0}
.post-after__block--search{
  padding:20px 22px;
  background:var(--color-pale);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
}
@media (min-width:900px){
  .post-after__more{
    grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:clamp(28px,4vw,56px);
    align-items:start;
  }
}

/* The search: the block above owns the panel, so the shared component is
   stripped back to its fields and stacked. The variant class the template
   passes (notes-search--after) is part of every selector here, so these rules
   hold wherever the component's own sheet sits in the cascade. */
.post-after .notes-search--after{padding:0;background:none;border:0}
.post-after .notes-search--after .notes-search__label{
  display:block;
  margin:0 0 8px;
  font-size:12.5px;
  font-weight:600;
  color:var(--color-navy);
}
.post-after .notes-search--after .notes-search__row{display:grid;gap:10px}
.post-after .notes-search--after .notes-search__input{min-height:44px;font-size:14.5px}
.post-after .notes-search--after .notes-search__submit{width:100%}
.post-after .notes-search--after .notes-search__note{margin:10px 0 0;font-size:11.5px;color:var(--color-muted)}

/* Related notes: a compact list, not cards. */
.post-after__list{margin:0;padding:0;list-style:none}
.post-after__item{padding:12px 0;border-top:1px solid var(--color-line)}
.post-after__item:first-child{padding-top:0;border-top:0}
.post-after__link{
  display:block;
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--color-text);
  text-decoration:none;
}
.post-after__link:hover{color:var(--color-accent);text-decoration:underline}
.post-after__date{display:block;margin-top:4px;font-size:12px;color:var(--color-muted)}

/* Table of contents */
.post-toc{
  margin:0 0 32px;
  padding:18px 20px;
  background:var(--color-pale);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
}
.post-toc__label{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
}
/* Numbered, because the site numbers its sections elsewhere (01 / ARTICLES) and
   because a seventeen-entry list reads faster with leading zeros than with
   bullets. */
.post-toc__list{margin:0;padding:0;list-style:none;counter-reset:toc;font-size:14.5px}
.post-toc__list li{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:0 8px;
  counter-increment:toc;
  margin:0 0 9px;
}
.post-toc__list li::before{
  content:counter(toc,decimal-leading-zero);
  padding-top:3px;
  font-size:11.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--color-field-line);
}
.post-toc__list a{color:var(--color-text);text-decoration:none;line-height:1.4}
.post-toc__list a:hover{color:var(--color-accent);text-decoration:underline}
/* Two columns once the article column is wide enough for the list to read as
   one, so the box does not become a tall block above the body. */
@media (min-width:720px){
  .post-toc__list{columns:2;column-gap:32px}
  .post-toc__list li{break-inside:avoid}
}

/* Body: section targets clear the fixed header when jumped to */
/* The reading column: 66ch rather than the site's 70ch, because a note here is
   read in long runs, and every section heading opens with a hairline — that rule
   is what tells the eye where one answer ends and the next begins. */
.single-post__body{max-width:66ch}
.single-post__body p{margin:0 0 18px;line-height:var(--leading-body);text-wrap:pretty}
/* The opening paragraph is the note's own summary line: set a step larger and
   quieter, so the page opens with a lead instead of starting flat. */
.single-post__body > p:first-of-type{
  font-size:19px;
  line-height:1.55;
  color:var(--color-muted);
}
.single-post__body h2{
  scroll-margin-top:110px;
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  line-height:1.28;
  letter-spacing:-.01em;
  margin:48px 0 16px;
  padding-top:32px;
  border-top:1px solid var(--color-line);
  color:var(--color-heading);
  text-wrap:balance;
}
.single-post__body h3{
  scroll-margin-top:110px;
  font-size:1.1rem;
  line-height:1.35;
  letter-spacing:-.005em;
  margin:30px 0 10px;
  color:var(--color-heading);
}
/* The labels a note uses inside a section ("F-R — Real-Time Flow"). */
.single-post__body h4{
  margin:24px 0 8px;
  font-size:1rem;
  line-height:1.4;
  letter-spacing:.01em;
  color:var(--color-navy);
}
.single-post__body ul,.single-post__body ol{margin:0 0 20px;padding-left:20px;line-height:var(--leading-body)}
.single-post__body li{margin:0 0 8px;padding-left:2px}
.single-post__body li::marker{color:var(--color-accent)}
.single-post__body table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 24px;
  font-size:15px;
}
.single-post__body th,.single-post__body td{
  padding:10px 14px;
  border:1px solid var(--color-line);
  text-align:left;
  vertical-align:top;
}
.single-post__body th{background:var(--color-pale);color:var(--color-heading)}
.single-post__body .wp-block-table{margin:0 0 24px}

/* The pictures inside the note: the site's own field photographs, placed
   between sections by hober_note_figures() when the note carries no picture of
   its own. They run a little wider than the text measure so a photograph reads
   as a photograph rather than as an illustration in a column. */
.post-figure{
  margin:36px 0;
  max-width:84ch;
}
.post-figure__photo{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-md);
  background:var(--color-pale);
}
.post-figure__caption{
  margin:10px 0 0;
  max-width:66ch;
  font-size:13.5px;
  line-height:1.5;
  color:var(--color-muted);
}

/* The chains a note writes as a line of their own — "Pressure Sensor → 4–20mA
   Signal → Solar Pump Inverter → Pump Speed Adjustment" — carry this class from
   hober_note_flows() in functions.php, because as ordinary prose they read as a
   sentence that lost its punctuation. */
.single-post__body .post-flow{
  margin:28px 0;
  padding:16px 20px;
  background:var(--color-pale);
  border:1px solid var(--color-line);
  border-left:4px solid var(--color-accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:15px;
  line-height:1.7;
  color:var(--color-navy);
  font-variant-numeric:tabular-nums;
}

/* Mid-article call to action */
.post-cta{
  margin:32px 0;
  padding:24px 28px;
  background:var(--color-navy);
  border-radius:var(--radius-md);
  color:#fff;
}
.post-cta .eyebrow{color:var(--color-sun)}
.post-cta__lead{
  margin:0 0 8px;
  font-size:1.15rem;
  font-weight:700;
  line-height:1.3;
}
.post-cta__text{margin:0 0 18px;color:#d7e2ee}
.post-cta__actions{display:flex;flex-wrap:wrap;gap:12px}