/* ==========================================================================
   Iguazu Noticias — Article body

   The reading typography for editor-written content: the FAQ answer and the
   Resources article. Both designs ask for the same measure, so this is one
   component rather than two page rules that happen to match today.

   Deliberately not .ig-prose: that lives in base.css at 16px/1.6 and serves the
   plain page template on every page, designed or not. This is the larger
   reading size the article designs specify.

   Typography only. The gap between the body and whatever sits above it is page
   composition, so each page sheet sets that on its own container class.

   WHY EVERY RULE USES THE DIRECT-CHILD COMBINATOR
   -----------------------------------------------
   The rule: this scope styles the editor's TOP-LEVEL BLOCKS and nothing deeper.
   An embedded component's internals are the component's business.

   That matters because content can now contain components — [iguazu_flight_finder]
   renders a whole card inside an FAQ answer. Written as descendant selectors,
   `.ig-article-body ul` reached inside that card and put bullets and a 22px
   indent on its flight rows, and `.ig-article-body h3` pushed the card's title
   down by 26px.

   Specificity cannot fix that, and it is worth recording why, because it is the
   obvious thing to reach for: the card does not DECLARE list-style or padding
   at all. It inherits them from the element-level reset in base.css, which sits
   at (0,0,1) and loses to any class-scoped rule no matter how the sheets are
   ordered. There is nothing to win the cascade with. Scoping is the only lever.

   Gutenberg emits every top-level block as a direct child of this wrapper, so
   `>` covers all real prose while stopping at the boundary of anything nested.
   Nested lists are handled explicitly below, since base.css strips their
   markers and they are no longer reached by the top-level rule.

   `img` is the one deliberate descendant: Gutenberg wraps images in
   <figure class="wp-block-image">, so a direct-child rule would never match it.
   The exposure is a border-radius on an image inside an embedded component,
   which is cosmetic and which no component here has.
   ========================================================================== */

.ig-article-body > * + * {
    margin-top: 18px;
}

.ig-article-body > p {
    font-size: 16.5px;
    line-height: 1.75;
}

.ig-article-body > h2 {
    font-size: 25px;
    margin-top: 30px;
}

.ig-article-body > h3 {
    font-size: var(--text-xl);
    margin-top: 26px;
}

.ig-article-body > ul,
.ig-article-body > ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.6;
    list-style: revert;
}

/* A quoted source. base.css gives blockquote nothing but margin: 0, so until
   now a verbatim quote rendered identical to the article's own prose, and a
   reader had no way to tell where someone else's words started and ended. On a
   page that reproduces an official statement that distinction is the whole
   point, so the block gets a visible edge and a tinted ground. */
.ig-article-body > blockquote {
    margin-top: 26px;
    padding: 18px 22px;
    background: var(--surface-tint);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
}

/* The quote's own paragraphs are nested, so the `> p` rule above never reaches
   them and they would otherwise fall back to unstyled 16px. Slightly smaller
   than body copy, which is the other half of reading as a quotation. */
.ig-article-body > blockquote p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
}

.ig-article-body > blockquote p + p {
    margin-top: 14px;
}

.ig-article-body > blockquote cite {
    display: block;
    margin-top: 14px;
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--text-muted);
}

/* Nested lists: the top-level rule stops at the first level, and base.css has
   already stripped the markers, so put them back here. */
.ig-article-body > ul ul,
.ig-article-body > ul ol,
.ig-article-body > ol ul,
.ig-article-body > ol ol {
    padding-left: 22px;
    list-style: revert;
}

.ig-article-body img {
    border-radius: var(--radius-lg);
}

/* The attribution under a quoted source. It sits outside the blockquote on
   purpose: it is our line about the document, not a line of the document, and
   inside it put our date format directly under the source's own. */
.ig-article-body > .ig-article-body__source {
    margin-top: 10px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}