/**
 * Article content — the ONE place the long-form body style lives.
 *
 * Add the class "article-content" to a post-content widget and it inherits the
 * house article typography: headings, lists, links, figures, the pull-quote and
 * the data table. Used by the Technical Article, Article, News and Press
 * Release singles — edit HERE and all of them follow, instead of copying custom
 * CSS onto each template (which is how they drift apart).
 *
 * Registered + enqueued from includes/article-content.php, which also handles
 * the two things CSS cannot do: wrapping body images for the lightbox and
 * dropping the empty paragraphs the imported content is full of.
 */

/* The class is REPEATED in every selector on purpose: Elementor's Kit styles
   headings and body text at the same specificity as a single class and its
   stylesheet loads after this one, so a single .article-content would lose the
   cascade by order alone. Doubling it wins on specificity instead of relying on
   enqueue order. */

.article-content.article-content{color:#21272A;font-size:16px;line-height:1.7}

/* Headings. The top margin separates a heading from the section BEFORE it; the
   bottom margin ties it to its own text. A heading that directly follows a
   bigger one is part of the same block, so it drops most of its top margin
   rather than opening a second gap. */
.article-content.article-content h2{font-family:"Titillium Web",sans-serif;color:#21272A;font-size:32px;font-weight:500;line-height:1.2em;margin:64px 0 24px}
.article-content.article-content h3{font-family:"Titillium Web",sans-serif;color:#21272A;font-size:28px;font-weight:400;line-height:1.2em;margin:40px 0 18px}
.article-content.article-content h4{font-family:"Titillium Web",sans-serif;color:#21272A;font-size:24px;font-weight:400;line-height:1.4em;margin:32px 0 12px}
.article-content.article-content h2:first-child,.article-content.article-content h3:first-child,.article-content.article-content h4:first-child{margin-top:0}
.article-content.article-content h2+h3{margin-top:20px}
.article-content.article-content h3+h4{margin-top:16px}

.article-content.article-content p{color:#21272A;font-size:16px;line-height:1.7;margin:0 0 18px}
/* A paragraph introducing a list belongs to it — close the gap between them. */
.article-content.article-content p:has(+ul),.article-content.article-content p:has(+ol){margin-bottom:10px}

.article-content.article-content ul,.article-content.article-content ol{margin:0 0 18px;padding-left:28px}
.article-content.article-content li{margin:0 0 10px;padding-left:6px;line-height:1.7}

.article-content.article-content a{color:#1D4F91;text-decoration:none;transition:color .25s ease}
.article-content.article-content a:hover,.article-content.article-content a:focus-visible{color:#0071B9}

/* max-height keeps a portrait scan from filling the whole screen; width/height
   auto with both maxes lets the browser scale it down in proportion. */
.article-content.article-content img{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:6px}
.article-content.article-content figure{margin:40px 0}
.article-content.article-content figure.alignleft,.article-content.article-content figure.alignright{max-width:50%}
.article-content.article-content figcaption{color:#1D4F91;font-size:14px;line-height:1.5;margin-top:12px;text-align:left}
/* A body image is a link only so the lightbox can catch it — it must not pick
   up the link colour or the hover transition. */
.article-content.article-content a.article-lightbox{display:block;color:inherit}

/* Pull-quote: the mark sits ABOVE the quote, so it is part of the stack rather
   than a hanging ornament, and both rules are the same blue. */
.article-content.article-content blockquote{position:relative;margin:48px 0;padding:40px 64px;border:0;border-top:1px solid #1D4F91;border-bottom:1px solid #1D4F91;background:none}
/* The mark is placed by its INK, not by its font metrics. Georgia draws “ at
   26% of the em (so 135px gives the 35px of glyph the design asks for) but
   sets it 101px above the baseline, far outside a short line box — which is
   why a small line-height printed the mark ABOVE its own element. The 108px
   line-height drops the baseline until the ink starts exactly at the top of
   the box; height + overflow then trim the empty em below it, so the element
   is the mark and margin-bottom is the real gap to the quote. The height is
   38 rather than 35 because the glyph inks 36px at this size — cut it to the
   nominal 35 and the bottom row of the mark is shaved off. */
.article-content.article-content blockquote::before{content:'“';display:block;position:static;font-size:135px;line-height:108px;height:38px;overflow:hidden;margin:0 0 22px;color:#1D4F91;font-family:Georgia,serif}
.article-content.article-content blockquote p{color:#1D4F91;font-size:27px;line-height:1.55;font-weight:400;margin:0 0 12px}
.article-content.article-content blockquote cite{display:block;margin-top:20px;color:#1D4F91;font-size:15px;font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:.5px}
.article-content.article-content blockquote cite span{display:block;font-weight:400;font-size:14px;text-transform:uppercase}

.article-content.article-content table{width:100%;border-collapse:separate;border-spacing:3px;margin:32px 0}
.article-content.article-content th,.article-content.article-content td{background:#EDEBE8;color:#21272A;border:0;padding:18px 24px;font-size:24px;font-weight:400;text-align:left}
.article-content.article-content thead th{font-weight:600}

/* Elementor's lightbox, opened from the body images above. Its close button is a
   SIBLING of the slideshow header rather than part of it, so the header's own
   controls (fullscreen, zoom, share) run underneath it in the same corner and
   the last one falls off the right edge. Reserving the corner puts them in a
   usable row again. */
.elementor-lightbox .elementor-slideshow__header{padding-right:58px;box-sizing:border-box}
.elementor-lightbox .dialog-close-button{z-index:2}

/* Mobile (node 4514-24097). Sizes are derived from the mock by measuring cap
   heights against each font's real cap ratio — Titillium .70, Open Sans .71 —
   rather than eyeballed: body cap 10px → 14px, quote cap 11px → 16px, cite cap
   9px → 13px, heading cap 13px → ~19px. The heading ladder is compressed rather
   than flattened so h2/h3/h4 keep their order.
   The pull-quote centres on mobile: mark, text and attribution all, with the
   rules still running the full content width. */
@media (max-width:767px){
	.article-content.article-content{font-size:14px;line-height:1.45}
	.article-content.article-content p{font-size:14px;line-height:1.45}
	.article-content.article-content li{font-size:14px;line-height:1.45}
	.article-content.article-content h2{font-size:20px;margin:40px 0 16px}
	.article-content.article-content h3{font-size:18px;margin:28px 0 12px}
	.article-content.article-content h4{font-size:16px;margin:24px 0 10px}
	.article-content.article-content h2+h3{margin-top:16px}
	.article-content.article-content h3+h4{margin-top:12px}
	.article-content.article-content blockquote{text-align:center;padding:32px 24px}
	.article-content.article-content blockquote p{font-size:16px;line-height:1.375}
	.article-content.article-content blockquote cite{font-size:13px}
	.article-content.article-content blockquote cite span{font-size:12px}
	.article-content.article-content figure{margin:28px 0}
}