/* ============================================================================
   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 on the homepage so body copy wraps around it.

   Scoped by POSITION, not filename: an image in the paragraph immediately
   after the page's H1. The same image file is also used on the viewers page,
   where it sits under an H2 and is followed by an explainer table that should
   not wrap around it - so a filename-based rule would float it there too.

   Plain Markdown `![](...)` has nowhere to hang a class, which is why this
   keys on structure. */
main > div > h1 + p > img {
  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 > div > h1 + p > img {
    float: none;
    margin: 0 auto 1rem;
  }
}

/* Menu wrapping. Abridge's nav list is a flex row with wrap; on narrow screens
   the Contact button drops to a second line and sits flush against the row
   above. row-gap (not gap) adds space between wrapped rows only, so the
   single-row desktop layout is unaffected. */
header nav ul {
  row-gap: 0.6rem;
}

/* 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;
}