/*
 * Typography for long-form body copy.
 *
 * The site's global heading scale is a display scale: h2 runs to 2.7rem,
 * which is right for a landing-page section band announcing itself across
 * the full width of the screen. Inside an article it is wrong. A product
 * page now carries sixteen h2s, and at display size each one landed like a
 * headline, wrapped onto two lines, and left the reader unable to tell a
 * section heading from the page's own title.
 *
 * So prose headings get their own scale, set against the body text rather
 * than against the viewport: h2 about 1.4x the body size, h3 about 1.1x.
 * That is enough to read as a hierarchy at a glance and little enough to
 * stay inside the paragraph flow, which is what a heading in running text
 * is for.
 *
 * Shipped as a plain file rather than through the SCSS bundle because the
 * bundle needs a build step that cannot be run on the machine this site is
 * maintained from. The same rules are mirrored into resources/scss/app.scss
 * so a future rebuild does not undo them; this file loads after the bundle
 * and wins either way.
 */

.u-prose {
    /*
     * Measure.
     *
     * Running text at this size was being set across the full 870px column,
     * which is around 110 characters a line. The eye loses its place on the
     * return sweep well before that — the long-standing comfortable range is
     * 45 to 75. Capping the block keeps headings and paragraphs on the same
     * left edge and leaves the wide elements below to opt out.
     */
    max-width: 64ch;
}

/* Things that are not running text are not bound by the measure. */
.u-prose > table,
.u-prose > figure,
.u-prose > img,
.u-prose > .u-table-scroll,
.u-prose > .table-responsive {
    max-width: none;
}

.u-prose h2,
.u-prose .h2 {
    font-size: clamp(1.3rem, 1.16rem + 0.42vw, 1.58rem);
    line-height: 1.3;
    letter-spacing: -0.012em;
    font-weight: 650;
    margin: 2.45rem 0 0.6rem;
}

.u-prose h3,
.u-prose .h3 {
    font-size: clamp(1.06rem, 1.01rem + 0.18vw, 1.17rem);
    line-height: 1.4;
    letter-spacing: -0.004em;
    font-weight: 650;
    margin: 1.65rem 0 0.35rem;
}

.u-prose h4,
.u-prose .h4 {
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 650;
    margin: 1.3rem 0 0.3rem;
}

/*
 * A hairline above each section, so a reader scanning a three-thousand-word
 * page can see where one subject ends and the next begins without the
 * heading having to shout it. Not on the first heading, which needs no
 * separator from the top of the block, and not on an h2 that follows
 * another heading — two rules stacked a line apart read as a mistake.
 */
.u-prose h2:not(:first-child) {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(16, 42, 67, 0.09);
}

.u-prose h2 + h2,
.u-prose h3 + h2 {
    padding-top: 0;
    border-top: 0;
}

/* The first element never carries a top margin into the container. */
.u-prose > :first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/*
 * An h3 directly under its h2 belongs to it, so the usual gap between a
 * heading and the next one is too much: it reads as a gap between sections
 * rather than as a subheading of the one just opened.
 */
.u-prose h2 + h3 {
    margin-top: 0.9rem;
}

/* A paragraph after a heading sits closer to it than to the one before. */
.u-prose h2 + p,
.u-prose h3 + p,
.u-prose h4 + p,
.u-prose h2 + ul,
.u-prose h2 + ol,
.u-prose h3 + ul,
.u-prose h3 + ol {
    margin-top: 0;
}

/*
 * Lists inside long copy.
 *
 * These pages use lists for things a buyer compares — pack options, what
 * four trade terms mean, the steps of a first order — so the marker wants
 * to sit clear of the text rather than crowd it.
 */
.u-prose ul,
.u-prose ol {
    padding-left: 1.25rem;
}

.u-prose li {
    margin-bottom: 0.4rem;
    padding-left: 0.15rem;
}

.u-prose li::marker {
    color: rgba(16, 42, 67, 0.45);
}

.u-prose li > strong:first-child {
    color: var(--unos-navy, #102a43);
}

@media (max-width: 575.98px) {
    .u-prose {
        max-width: none;
    }

    .u-prose h2,
    .u-prose .h2 {
        margin-top: 2rem;
        padding-top: 1.2rem;
    }

    .u-prose h3,
    .u-prose .h3 {
        margin-top: 1.4rem;
    }
}