/* ---------------------------------------------------------------------------
   Hand-maintained overrides. Loaded after the Webflow exports so it wins.
   Keep additions here rather than in the generated .webflow.css files, which
   are overwritten whenever the site is re-exported from Webflow.
   --------------------------------------------------------------------------- */

/* Blog post body (CMS rich text) -------------------------------------------

   `body.body` sets `text-align: center` for the whole site, and
   `.uui-text-rich-text` only resets p / h4 / h5 back to left. Everything else
   the CMS can emit - headings, lists, tables - inherits that centering, which
   strands list bullets far to the left of their own text. Reset the subtree. */

.uui-text-rich-text,
.uui-text-rich-text h1,
.uui-text-rich-text h2,
.uui-text-rich-text h3,
.uui-text-rich-text h4,
.uui-text-rich-text h5,
.uui-text-rich-text h6,
.uui-text-rich-text p,
.uui-text-rich-text ul,
.uui-text-rich-text ol,
.uui-text-rich-text li,
.uui-text-rich-text blockquote,
.uui-text-rich-text figcaption,
.uui-text-rich-text table,
.uui-text-rich-text th,
.uui-text-rich-text td {
  text-align: left;
}

/* The container falls back to system-ui while `p` and `h5` are already set to
   Outfit. Bring the remaining headings and list copy in line with the body. */

.uui-text-rich-text h1,
.uui-text-rich-text h2,
.uui-text-rich-text h3,
.uui-text-rich-text h4,
.uui-text-rich-text h6,
.uui-text-rich-text li,
.uui-text-rich-text th,
.uui-text-rich-text td {
  font-family: Outfit, sans-serif;
}

/* The post column is a grid item, and grid items default to `min-width: auto`.
   A child wider than the column - the comparison table - therefore stretches
   the column instead of scrolling inside its own wrapper, which drags the
   whole page sideways on narrow screens. Let the columns shrink. */

.uui-blogpost04_content-wrapper > *,
.uui-blogpost04_content,
.uui-text-rich-text {
  min-width: 0;
}

/* Global `h1`-`h6` rules zero out all heading margins, which suits the Webflow
   components (they space themselves with grid/flex gaps) but leaves headings
   colliding with their neighbours inside a flowing article. */

.uui-text-rich-text h2,
.uui-text-rich-text h3,
.uui-text-rich-text h4 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.uui-text-rich-text h3,
.uui-text-rich-text h4 {
  margin-top: 2rem;
}

/* Lists: 40px of browser-default indent is more than this measure needs. */

.uui-text-rich-text ul,
.uui-text-rich-text ol {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

/* List items are body copy, so they should read at the same size as the
   paragraphs around them rather than inheriting the smaller `.body` size.
   (Table cells stay a step smaller on purpose - they are a dense grid.) */

.uui-text-rich-text li {
  margin-bottom: 0.5rem;
  font-size: 18px;
  line-height: 1.6;
}

.uui-text-rich-text li:last-child {
  margin-bottom: 0;
}