/* ============================================================================
 * typography-polish.css — readable rhythm & spacing (loaded last, additive).
 * ----------------------------------------------------------------------------
 * Phase-0/owner audit found: prose line-height a tight 1.5, content headings
 * with ZERO top margin (so sections visually collide), cramped list items,
 * and prose running the full ~1108px width (~140 chars/line). This layer
 * fixes reading rhythm WITHOUT touching layout-critical UI:
 *   - heading top-margin + measure cap apply ONLY inside prose containers
 *     (tool "What is…" sections, educational content, FAQs) via :is() — never
 *     result-card titles, nav, dashboard, or the homepage IP table.
 *   - line-height / list spacing are universally safe (taller text only).
 * ========================================================================= */

/* Prose containers we treat as long-form reading. */
/* ---- Comfortable reading line-height (safe everywhere in content) --------- */
#content p,
#content li,
.entry-content p,
.educational-content p,
.educational-content li {
    line-height: 1.7;
}

/* ---- List breathing room -------------------------------------------------- */
#content ul,
#content ol {
    padding-left: 1.4rem;
}
#content li { margin-bottom: 0.5rem; }
/* don't loosen tight UI lists (nav, mega menu, dashboard, result chips) */
#mainNav li,
.result-actions li,
.recent-lookups__row li,
.dash-tabs li { margin-bottom: 0; }

/* ---- Section rhythm: headings need space ABOVE them ----------------------- *
 * Scoped to prose containers so result-card titles / hero headings / nav are
 * untouched. This is the single biggest "sections run together" fix. */
:is(main > section, .educational-content, .information-section, .faq-section,
    .tool-faqs--inline, .entry-content, .ua-explainer) h2 {
    margin-top: 2.25rem;
    margin-bottom: 0.85rem;
    line-height: 1.3;
}
:is(main > section, .educational-content, .information-section, .faq-section,
    .tool-faqs--inline, .entry-content, .ua-explainer) h3 {
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
:is(main > section, .educational-content, .information-section, .faq-section,
    .tool-faqs--inline, .entry-content, .ua-explainer) h4 {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}
/* The first heading in a prose block shouldn't push a big gap from what's
 * directly above it (e.g. a section's own opening h2). */
:is(main > section, .educational-content, .information-section, .faq-section,
    .tool-faqs--inline, .entry-content, .ua-explainer) > h2:first-child {
    margin-top: 0.5rem;
}

/* ---- Reading measure: cap long-form prose to a comfortable ~75ch ----------- *
 * OPT-IN by named prose class only. This used to also match bare
 * `main > section`, which squeezed tool UIs (forms, result areas, dashboards)
 * that happen to live in a generic <section> down to ~650px on desktop —
 * the measure is for reading text, not for tools. */
.educational-content,
.information-section,
.faq-section {
    max-width: 75ch;
}
/* …but never constrain things that legitimately need full width inside prose. */
:is(.educational-content, .information-section, .faq-section) :is(table, .table-responsive, pre, .result-card, .esc-grid, img) {
    max-width: 100%;
}

/* ---- Lead paragraph: a touch more air below the intro --------------------- */
#content .lead { margin-bottom: 1.75rem; line-height: 1.65; }

/* ---- Mobile: tighten the measure rules so nothing feels indented ---------- */
@media (max-width: 768px) {
    .educational-content,
    .information-section,
    .faq-section { max-width: 100%; }
    :is(main > section, .educational-content, .faq-section, .tool-faqs--inline) h2 { margin-top: 1.75rem; }
}

/* ---- Restore superscript/subscript rendering ------------------------------
 * The app bundle's CSS reset flattens sub/sup (font-size:100%;
 * vertical-align:baseline), so exponents like 10<sup>38</sup> rendered
 * inline as "1038". Standard sup/sub styling, line-height pinned so the
 * raised glyph doesn't stretch the line box. */
sup, sub {
    font-size: .75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup { top: -.5em; }
sub { bottom: -.25em; }