/* ==========================================================================
   SPU Stainless - extensions.css
   Styles for states the approved design never showed.
   Enqueued AFTER style.css on singular, page, search and front-page views.

   THIS FILE NEVER DUPLICATES OR OVERRIDES A RULE FROM style.css.
   Everything is scoped under .spu-prose so it cannot reach an approved section.

   WHY IT EXISTS
   The approved design has no element-level typography at all: its only
   element selector is `a{color:#05213E}`. Every heading, paragraph and table
   in the design carries its own inline style attribute. the_content() cannot
   carry inline styles, so without this file an article body would emit bare
   h2/h3/p/ul/ol/blockquote/table/img with nothing applied.

   PROVENANCE - every value below is lifted from a named element of the
   approved design (scratchpad/index.clean.html). No new colour, font, radius,
   weight or spacing value is introduced anywhere in this file.

   SOURCE ELEMENTS, as referred to in the rule-by-rule notes:
   [A] Blog hero paragraph .... color:#C9D4DE; font-size:clamp(17px,1.5vw,19px);
                                max-width:34em
   [B] Blog hero h1 ........... Archivo; font-stretch:82%; font-weight:800;
                                font-size:clamp(44px,6vw,76px);
                                line-height:0.98; letter-spacing:-0.02em
   [C] Home section h2 ........ Archivo; font-stretch:85%; font-weight:800;
                                font-size:clamp(34px,4.2vw,54px);
                                line-height:1.02; letter-spacing:-0.015em;
                                color:#05213E
   [D] "How it works" h3 ...... Archivo; font-stretch:85%; font-weight:800;
                                font-size:clamp(28px,3vw,38px);
                                line-height:1.05
   [E] Blog card h3 ........... font-size:21px; line-height:1.3; color:#05213E
   [F] Application card h3 .... margin:0 0 6px; font-size:19px; color:#05213E
   [G] Body paragraph ......... color:#3A4A5A
   [H] Testimonial figure ..... margin:0; background:#F4F6F7;
                                border-radius:12px; padding:24px
   [I] Testimonial blockquote . margin:0; font-size:17px; color:#0E1A26
   [J] Testimonial figcaption . margin-top:14px; font-size:15px;
                                strong color:#05213E; span color:#4A5A6A
   [K] Spec pill .............. 'IBM Plex Mono'; font-size:13px;
                                padding:6px 10px; border-radius:4px;
                                background:#EEF1F3; color:#05213E
   [L] Comparison table shell . border:1px solid #D5DCE1;
                                border-radius:14px; overflow:hidden
   [M] Comparison table ....... width:100%; border-collapse:collapse;
                                font-size:16px
   [N] Comparison table th .... 'IBM Plex Mono'; font-size:12px;
                                letter-spacing:0.06em; text-transform:uppercase;
                                color:#4A5A6A; font-weight:500;
                                padding:14px 24px
   [O] Comparison table td .... padding:16px; row rule
                                border-top:1px solid #E4E9EC
   [P] Table caption .......... padding:20px 24px; font-weight:700;
                                color:#05213E; background:#F4F6F7;
                                border-bottom:1px solid #D5DCE1
   [Q] Featured article card .. border:1px solid #D5DCE1; border-radius:16px;
                                overflow:hidden
   [R] "How it works" step no.. 'IBM Plex Mono'; font-size:14px;
                                color:#D2DE3A
   [S] O-ring swatch .......... border:3px solid ... (3px border width)
   [T] Blog hero column ....... gap:20px (the design's own 20px rhythm)
   [U] "How it works" <li> .... padding:28px 24px 8px 0 (the 24px indent)
   [V] Blog card <article> .... gap:16px
   [W] Footer column stack .... gap:48px
   [X] Topic filter bar ....... border-bottom:1px solid #D5DCE1
   [Y] style.css (approved) ... a{color:#05213E} a:hover{color:#0B3F73}
   [Z] style.css (approved) ... .card-title:hover{text-decoration:underline}

   TWO DERIVED DECISIONS, both declared:
   1. The prose <h2> clamp is [D] and the article <h1> clamp is [C]. Both are
      verbatim design values; they are simply used one rung lower down the
      design's own heading ladder than the design used them, because the
      article title must not outweigh the blog landing page's own title.
   2. The blockquote accent rule combines two existing design values: the 3px
      border width from [S] and the accent colour #D2DE3A from [R]. No new
      value; only an existing width paired with an existing colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The prose column itself.
   Measure from [A] (max-width:34em - the only prose measure in the design).
   Colour and font are inherited from the design's typographic root div in
   header.php; nothing is restated here.
   -------------------------------------------------------------------------- */
.spu-prose {
	max-width: 34em;
	/* Centred inside the design's .wrap. The 34em measure is from the design;
	   the centring is layout only and introduces no new value. Left-aligned it
	   left the whole right half of a wide screen empty, which read as a fault
	   rather than as a reading measure. */
	margin-left: auto;
	margin-right: auto;
	/* Containment only - long words and wide embeds must not push the column
	   out of the design's .wrap. No design value involved. */
	overflow-wrap: break-word;
}

/* First and last child margins collapsed so the column sits flush inside the
   section padding the template already supplies. No new spacing value. */
.spu-prose > *:first-child {
	margin-top: 0;
}

.spu-prose > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Headings.
   h2 is [D] exactly. h3 is [E] exactly. h4 is [F] exactly.
   The step from h2 to h3 is a change of typeface, not only of size: this is
   how the approved design itself separates a section heading (Archivo, 800,
   condensed) from a card heading (DM Sans, bold). Top margins come from the
   design's 48px / 20px / 16px rhythm - [W], [T], [V].
   -------------------------------------------------------------------------- */
.spu-prose h2 {
	margin: 48px 0 20px;
	font-family: 'Archivo', sans-serif;
	font-stretch: 85%;
	font-weight: 800;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.05;
	color: #05213E;
}

.spu-prose h3 {
	margin: 32px 0 16px;
	font-size: 21px;
	line-height: 1.3;
	color: #05213E;
}

.spu-prose h4 {
	margin: 24px 0 6px;
	font-size: 19px;
	color: #05213E;
}

/* --------------------------------------------------------------------------
   Paragraphs. Colour from [G]; bottom margin 20px from [T].
   -------------------------------------------------------------------------- */
.spu-prose p {
	margin: 0 0 20px;
	color: #3A4A5A;
}

/* --------------------------------------------------------------------------
   Lists. Indent 24px from [U]; item spacing 12px is the design's own
   within-item gap on that same list. Marker colour #D2DE3A from [R], where
   the design numbers its own steps in the accent.
   -------------------------------------------------------------------------- */
.spu-prose ul,
.spu-prose ol {
	margin: 0 0 20px;
	padding-left: 24px;
	color: #3A4A5A;
}

.spu-prose li {
	margin-bottom: 12px;
}

.spu-prose li:last-child {
	margin-bottom: 0;
}

.spu-prose li > ul,
.spu-prose li > ol {
	margin-top: 12px;
	margin-bottom: 0;
}

/* The accent is too light to read as a bullet glyph on white, so the disc
   itself stays the design's body colour [G] and only the ordered-list
   numbers take the accent - exactly as the design's own numbered steps do. */
.spu-prose ul li::marker {
	color: #3A4A5A;
}

.spu-prose ol li::marker {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 14px;
	color: #D2DE3A;
}

/* --------------------------------------------------------------------------
   Blockquote. Panel from [H], type from [I], caption from [J].
   The 3px accent left border is the derived rule declared above:
   3px width from [S], #D2DE3A from [R].
   -------------------------------------------------------------------------- */
.spu-prose blockquote {
	margin: 0 0 20px;
	background: #F4F6F7;
	border-radius: 12px;
	border-left: 3px solid #D2DE3A;
	padding: 24px;
	font-size: 17px;
	color: #0E1A26;
}

.spu-prose blockquote p {
	margin: 0;
	color: #0E1A26;
}

.spu-prose blockquote p + p {
	margin-top: 20px;
}

.spu-prose blockquote cite {
	display: block;
	margin-top: 14px;
	font-size: 15px;
	font-style: normal;
	color: #4A5A6A;
}

/* --------------------------------------------------------------------------
   Code. Family from the design's mono label stack. Inline code reuses the
   spec pill [K] verbatim: #EEF1F3, 4px radius, 6px 10px, 13px, #05213E.
   The block reuses the table shell's 14px radius [L] and the caption's
   20px 24px padding [P].
   -------------------------------------------------------------------------- */
.spu-prose code {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	padding: 6px 10px;
	border-radius: 4px;
	background: #EEF1F3;
	color: #05213E;
}

.spu-prose pre {
	margin: 0 0 20px;
	padding: 20px 24px;
	border-radius: 14px;
	background: #EEF1F3;
	color: #05213E;
	overflow-x: auto;
}

.spu-prose pre code {
	padding: 0;
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Images and figures. Radius and border from the featured article card [Q]:
   16px radius, 1px solid #D5DCE1. Figure panel and caption from [H] and [J].
   -------------------------------------------------------------------------- */
.spu-prose img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	border: 1px solid #D5DCE1;
}

.spu-prose figure {
	margin: 0 0 20px;
}

.spu-prose figcaption {
	margin-top: 14px;
	font-size: 15px;
	color: #4A5A6A;
}

.spu-prose figure > img {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Tables. Shell from [L], table from [M], head from [N] on the spec-pill
   surface #EEF1F3 [K], body cells and row rules from [O], caption from [P].
   The shell is applied to the table itself because the_content() emits no
   wrapper div to carry it.
   -------------------------------------------------------------------------- */
.spu-prose table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	border: 1px solid #D5DCE1;
	border-radius: 14px;
	overflow: hidden;
	font-size: 16px;
}

.spu-prose caption {
	text-align: left;
	padding: 20px 24px;
	font-weight: 700;
	color: #05213E;
	background: #F4F6F7;
	border-bottom: 1px solid #D5DCE1;
}

.spu-prose thead th {
	text-align: left;
	padding: 14px 24px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #4A5A6A;
	font-weight: 500;
	background: #EEF1F3;
}

.spu-prose tbody th {
	text-align: left;
	padding: 16px 24px;
	font-weight: 600;
	color: #05213E;
}

.spu-prose tbody td {
	padding: 16px;
	color: #3A4A5A;
}

.spu-prose tbody tr + tr > th,
.spu-prose tbody tr + tr > td {
	border-top: 1px solid #E4E9EC;
}

/* --------------------------------------------------------------------------
   Horizontal rule. The design's only 1px divider colour on white is #D5DCE1
   [X]. Vertical rhythm 48px from [W].
   -------------------------------------------------------------------------- */
.spu-prose hr {
	margin: 48px 0;
	border: 0;
	border-top: 1px solid #D5DCE1;
}

/* --------------------------------------------------------------------------
   Emphasis. strong takes the design's heading navy, as it does inside the
   testimonial caption [J]. em is left to the browser: the design never
   restyled italics.
   -------------------------------------------------------------------------- */
.spu-prose strong,
.spu-prose b {
	font-weight: 700;
	color: #05213E;
}

/* --------------------------------------------------------------------------
   Links. Colour and hover colour are the approved rule in style.css [Y] and
   are NOT restated - only the underline is added here, because prose has no
   other affordance. The design's own card titles underline to announce a
   link [Z]; prose links do it permanently since they sit inside running text.
   -------------------------------------------------------------------------- */
.spu-prose a {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Embeds. Radius from the featured article card [Q]; max-width is
   containment only.
   -------------------------------------------------------------------------- */
.spu-prose iframe,
.spu-prose video,
.spu-prose embed,
.spu-prose object {
	max-width: 100%;
	border-radius: 16px;
}