/* ============================================================================
   RESB layout — measure and gutters.

   Loaded after abridge.css (see `stylesheets` in config.toml), so these win.
   Kept separate from resb.css, which is colour only.

   Abridge's entire width logic is one rule:

     @media (min-width: 1200px) {
       header, main, footer { min-width: 1200px; max-width: 70% }
     }

   Below that breakpoint the container is width:100% with only var(--s1)
   (0.5rem) of padding — full-bleed. Above it, 70% of a wide viewport gives a
   130-character measure. Neither is readable for a text-heavy site, so the
   measure is constrained at every width instead.

   min-width is reset to 0 because abridge's 1200px floor would otherwise
   override max-width on wide screens (min-width always wins).
   ============================================================================ */

header,
main,
footer {
  min-width: 0;
  max-width: 46rem;     /* ~75 characters */
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Content images: centred only — no scaling.

   Markdown wraps a standalone image in its own <p>, so `main p > img` targets
   images placed in body copy without touching the header logo.

   Images are sized at export, not here. The theme's global
   `img { max-width: 100%; height: auto }` still applies as an overflow guard on
   narrow screens; nothing in this rule changes an image's rendered size. */
main p > img {
  display: block;
  margin-inline: auto;
}

/* The rating box floats right so body copy wraps around it.

   Scoped by filename rather than a class, because the content is plain
   Markdown and `![](...)` has nowhere to hang a class. The trade-off: rename
   the file and this rule silently stops applying. */
main p > img[src$="resb-certified-box-v3.png"] {
  float: right;
  margin: 0.25rem 0 1rem 1.75rem;
}

/* Headings clear the float, so a new section never starts alongside the box.
   The box is 284px tall and the copy beside it is shorter, so without this the
   next H2 would sit in the gap. */
main h2,
main h3 {
  clear: both;
}

/* Below roughly 30rem there is not enough room left beside a 200px float for
   text to wrap sensibly, so it goes back to a centred block.

   NOTE: this is a VIEWPORT width, and browser zoom shrinks the viewport in CSS
   pixels — at 150% zoom a 960px window reports 640px. The threshold was 40rem
   (640px) when the image was 280px wide, which meant a zoomed-in window could
   silently drop the float. 30rem (480px) suits the smaller image. */
@media (max-width: 30rem) {
  main p > img[src$="resb-certified-box-v3.png"] {
    float: none;
    margin: 0 auto 1rem;
  }
}

/* Header breathing room.

   Abridge sets `header, main { padding-top: 0; padding-bottom: 0 }`, so header
   height is content height and nothing else. There is no config option for it.

   This targets `header` alone — padding the group above would move `main` and
   the footer too. Specificity ties with the theme's rule, so it wins on source
   order only: resb-layout.css must stay last in `stylesheets`. */
header {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}