/* cs-simple-pages.css — gap fixes for the simple content/message pages. HAND-AUTHORED
   plain CSS (no SCSS source); loaded from each template's manifest, cache-busted by
   countryside:timestamp.
     pages/static (/custom-made-dining-furniture, /sitemap_html)  cs-article shell (blog.css)
     pages/default, pages/thanks, pages/subscribe-thanks,
     reviews/already-reviewed, reviews/error, reviews/thank-you   cs-form-page (form-pages.css) */

/* The shared header has no side padding on phones, so long titles ("Thanks For Your Review!")
   ran to the screen edge. Match .cs-form-wrap's 16px gutter. */
main.cs-form-page > .product-head { padding-left: 16px; padding-right: 16px; }

/* Form-page card with no .cs-form-intro above it: give it the same breathing room under
   the header colour bar that account.css gives main.cs-account (contact gets it from the intro). */
main.cs-form-page .cs-form-wrap > .cs-form-single:first-child { padding-top: 28px; }
@media (min-width: 768px) {
  main.cs-form-page .cs-form-wrap > .cs-form-single:first-child { padding-top: 36px; }
}

/* RTE images keep the editor's inline `style="width:800px; height:600px"` (countryside_image:
   rich_text passes it through). cs-prose caps the width at 100%, but the inline height stayed
   fixed, so on phones the image stretched (350x600). Let the height follow the aspect ratio. */
main.cs-article .cs-prose img,
main.cs-form-page .cs-prose img { height: auto !important; }

/* main.css `#main { padding: 0 }` (id) beats blog.css `.cs-article { padding: 0 0 64px }`,
   so the article body sat flush on the footer. */
main#main.cs-article { padding-bottom: 64px; }

/* Link index (/sitemap_html): ~300 links under section headings. Widen the reading
   column and flow each section list into as many ~220px columns as fit (1 on phones,
   up to 3 on desktop) so the page isn't one 14,000px column. */
.cs-article-body--index .cs-article-content { max-width: 1040px; }
.cs-article-body--index .cs-prose ul {
  columns: 3 220px;
  column-gap: 40px;
}
.cs-article-body--index .cs-prose li { break-inside: avoid; }

/* reviews/thank-you: the Google review button (main.css .review-thanks .btn-google-review)
   leads the success card; the site links follow below a hairline. */
.review-thanks .btn-google-review { margin-top: 0; }
.review-thanks .cs-form-done__actions + .cs-form-done__actions {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}