/* Article prose layer: body typography for new-format single posts.
   Enqueued by enttec_post_prose_enqueue_assets() (../inc/prose.php) only on
   is_singular('post') when that post is new-format, so this sheet never loads
   on an archive, a page, or an old Kadence-authored post.

   EVERY rule is scoped under .enttec-post-prose, the body class added by the
   same file (ENTTEC_POST_PROSE_BODY_CLASS). That scoping is the safety
   mechanism, not a style choice: each region carries roughly 50 hand-authored
   Kadence posts, and an unscoped `article p` rule would restyle all of them.

   Consumes the site-wide tokens (var(--enttec-*), var(--eds-*)) registered by
   enttec-design-system.php, declared as a wp_enqueue_style() dependency. Every
   var() carries a literal fallback so the block never renders unstyled if this
   somehow loads without the token sheet. */

/* ---------------------------------------------------------------------------
   PROSE TOKENS. These three values are the design.

   Deliberately NOT --eds-text-body (16.5px): that token sizes UI text, which
   is a different job to sustained reading. Current readability guidance puts
   long-form body copy at 18-20px and the measure at 45-75 characters.

   WHY PX, when rem or ch look like the obvious choices here. Both were tried
   and both were wrong, for different reasons:

   - ch resolves against the ELEMENT'S OWN font. A single `64ch` rule computed
     to about 608px on the article (19px text) and about 512px on the
     breadcrumb banner (inherited 16px), so the two blocks disagreed about
     where the column was and the banner looked indented.

   - rem resolves against the root, and this theme does not keep the root
     still. main-style.scss sets `html { font-size: 62.5% }`, so the root is
     10px, not 16px, which turned a 38rem measure into 380px and 1.1875rem
     body text into 11.875px. Worse, the root is changed again per breakpoint
     (8px at max-width 768px, 10px at max-width 575px), so rem body text would
     have silently dropped to 15.2px on a tablet.

   px is therefore the only unit that means the same thing in this stylesheet
   and in the theme's banner rules, at every viewport. The cost is that a
   text-only browser resize will not scale the article; full-page browser zoom
   still does, which is what almost every reader actually uses.

   WHY THE MEASURE IS WIDER THAN THE 45-75 CHARACTER GUIDANCE (2026-08-03).
   608px read as a narrow strip on a desktop window: our posts are not pure
   prose, they are product announcements carrying UI screenshots, and a 568px
   screenshot of an application window is too small to read, which defeats the
   point of including it. So the column moved to 780px and media breaks out
   further again to --prose-wide (see the figure rules below). 780px keeps the
   text side of the trade honest: it is the widest the column can go before the
   eye starts losing its place returning to the next line.
   --------------------------------------------------------------------------- */
.enttec-post-prose {
	--prose-measure: 780px;   /* about 86 characters per line at the size below */
	--prose-wide: 1120px;     /* media band: screenshots/tables break out to this */
	--prose-size: 19px;
	--prose-lh: 1.65;
}

/* ---------------------------------------------------------------------------
   THE BANNER IS NOT STYLED HERE, DELIBERATELY.

   The page's H1 lives in the theme's .title_breadcrumb banner (header.php)
   while ENTTEC_POST_CHROME_INJECT is off. An earlier revision of this file
   tried to align that banner to the prose column from here and silently lost
   every declaration: the theme styles it as

     body.noBannerApplied #wrapper>header .header-inner .title_breadcrumb

   which is one ID, three classes and two types, against the two plain classes
   available in this sheet. Escalating specificity from a mu-plugin stylesheet
   to out-shout a theme component is the wrong shape of fix, and the banner is
   a theme component shared with other page types.

   So the banner overrides live in the theme's own stylesheet, next to the
   rules they override and scoped by the same .enttec-post-prose body class
   this file uses. Search main-style.scss for "enttec-post-prose".
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   THE ARTICLE BODY
   --------------------------------------------------------------------------- */
body.enttec-post-prose article {
	max-width: var(--prose-measure);
	margin: 0 auto clamp(48px, 8vw, 96px);
	padding: 0 20px;
	font-family: var(--enttec-font-body, inherit);
	font-size: var(--prose-size);
	line-height: var(--prose-lh);
	color: var(--enttec-ink, #2f2f2f);
}

/* line-height is repeated here rather than left to inherit from `article`.
   wp-admin/css/common.min.css is enqueued on the FRONT END of this site and
   sets `p { line-height: 1.5 }`. A direct rule on the element always beats an
   inherited value regardless of specificity, so inheriting from `article` gave
   1.5 (28.5px) instead of 1.65 (31.35px). */
body.enttec-post-prose article p {
	margin: 0 0 1.15em;
	line-height: var(--prose-lh);
}

/* Lead paragraph. Set at the SAME size and line-height as the body, so the
   article reads at one consistent size throughout. An earlier draft made it
   larger (clamp(20px, 2vw, 22px)) as a standfirst; the size change was the part
   that read as inconsistent rather than deliberate, so only the muted tone
   distinguishes it now. Drop the color line too if it should be identical. */
body.enttec-post-prose article > p:first-child {
	font-size: var(--prose-size);
	line-height: var(--prose-lh);
	color: var(--enttec-muted, #5b6573);
	margin-bottom: 1.5em;
}

/* Headings: the layer-cake rule. NN/g eye-tracking shows readers scan
   subheadings rather than prose, and asymmetric space is what binds a heading
   to the section it introduces. Roughly 4:1 above vs below. This ratio does
   most of the work of making the page scannable. */
body.enttec-post-prose article h2 {
	font-family: var(--enttec-font-display, inherit);
	font-size: var(--eds-h2, clamp(24px, 2.4vw, 30px));
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--enttec-ink, #2f2f2f);
	margin: 2.1em 0 .55em;
	text-wrap: balance;
}

body.enttec-post-prose article h3 {
	font-family: var(--enttec-font-display, inherit);
	font-size: var(--eds-h3, clamp(20px, 2vw, 24px));
	font-weight: 600;
	line-height: 1.25;
	margin: 1.7em 0 .45em;
}

body.enttec-post-prose article h2:first-child,
body.enttec-post-prose article h3:first-child {
	margin-top: 0;
}

/* Links. The underline is the primary affordance, not the colour: colour alone
   fails WCAG 1.4.1 for a reader who cannot distinguish the blue from the ink. */
body.enttec-post-prose article a {
	color: var(--enttec-blue, #0ea5df);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--eds-dur, .3s) var(--eds-ease, ease),
	            text-decoration-thickness var(--eds-dur, .3s) var(--eds-ease, ease);
}

body.enttec-post-prose article a:hover {
	color: var(--enttec-blue-hover, #0b87b8);
	text-decoration-thickness: 2px;
}

body.enttec-post-prose article a:focus-visible {
	outline: 3px solid var(--enttec-blue, #0ea5df);
	outline-offset: 3px;
	border-radius: 3px;
}

body.enttec-post-prose article strong {
	font-weight: 700;
	color: var(--enttec-ink, #2f2f2f);
}

/* Lists. Markers sit in the gutter so the text keeps one clean left edge with
   the paragraphs above.

   list-style-type is set EXPLICITLY, not left to the browser default. This site
   enqueues wp-admin/css/common.min.css on the front end, which sets
   `ul { list-style: none }`, so relying on the default silently shipped
   bulletless lists. Do not remove these two declarations. */
body.enttec-post-prose article ul,
body.enttec-post-prose article ol {
	margin: 0 0 1.3em;
	padding-left: 1.35em;
}

body.enttec-post-prose article ul {
	list-style-type: disc;
}

body.enttec-post-prose article ol {
	list-style-type: decimal;
}

body.enttec-post-prose article ul ul {
	list-style-type: circle;
}

body.enttec-post-prose article li {
	margin: 0 0 .55em;
	padding-left: .15em;
}

body.enttec-post-prose article li::marker {
	color: var(--enttec-blue, #0ea5df);
}

body.enttec-post-prose article ol > li::marker {
	font-weight: 700;
	color: var(--enttec-blue, #0ea5df);
}

body.enttec-post-prose article ul ul,
body.enttec-post-prose article ol ol {
	margin-top: .5em;
	margin-bottom: 0;
}

/* Figures. Wider than the text column, centred on it (2026-08-03). This
   reverses the earlier "one left edge for everything" decision recorded here,
   for the reason in the token block at the top of the file: a screenshot of an
   application UI at reading width cannot be read.

   The breakout is done WITHOUT negative margins, which is what made the first
   attempt fragile inside the theme's wrappers. `margin-left: 50%` puts the
   element's left edge at the centre of the text column (percentages resolve
   against the containing block, i.e. the article), then translateX(-50%) pulls
   it back by half its OWN width. Net effect: centred on the column, at any
   width, without this sheet needing to know the column's or the theme
   wrapper's dimensions. That pair of lines is the whole mechanism.

   min(..., 100vw - 48px) is the safety rail: it keeps the band inside the
   viewport on a laptop window narrower than --prose-wide. Below 900px the
   breakout is switched off entirely (see the media query at the end) because
   there is no room left to break out into.

   width:max-content, so the figure hugs its image rather than always filling
   the band. This is what keeps the CAPTION aligned: a caption is a child of the
   figure, so a figure permanently 1120px wide left its caption starting at the
   band's left edge, well outside the image above it and outside the body text.
   Hugging the image means the caption's left edge IS the image's left edge.

   max-content, NOT fit-content, and the difference matters here: fit-content
   clamps to the space AVAILABLE, and margin-left:50% has already consumed half
   of it, so fit-content collapsed the figure to exactly half the column (370px,
   measured). max-content is sized purely from the contents and ignores the
   margin, then max-width does the clamping. */
body.enttec-post-prose article figure {
	margin: 2em 0;
	width: max-content;
	max-width: min(var(--prose-wide, 1120px), calc(100vw - 48px));
	margin-left: 50%;
	transform: translateX(-50%);
}

/* width:auto + max-width:100%, NOT width:100%. The band is a ceiling, not a
   target: an image bigger than the band shrinks to fit it, a smaller one keeps
   its natural size instead of being upscaled and blurred. It is also this
   declaration that lets the figure's fit-content above resolve to the image's
   own width, which a width:100% image cannot do (it has no intrinsic width to
   report, and the figure collapsed to half the column when it was tried). */
body.enttec-post-prose article figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: var(--eds-radius-lg, 20px);
	box-shadow: var(--eds-shadow-card, 0 1px 2px rgba(0, 0, 0, .05));
}

/* width:0 + min-width:100% is deliberate and is load-bearing, not a typo. The
   figure above sizes itself to its widest child, and a caption longer than the
   image would otherwise be that child, pushing the figure back out to the full
   band and un-aligning the caption again. A definite width (0) contributes
   nothing to that calculation, and min-width:100% then expands the caption back
   to the figure's resolved width so the text wraps normally. */
body.enttec-post-prose article figcaption {
	width: 0;
	min-width: 100%;
	margin-top: 12px;
	padding-left: 4px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--enttec-muted, #5b6573);
}

/* An image the renderer emitted without a <figure> wrapper. Same breakout as a
   figure, so a post reads the same whether or not the source wrapped its
   images. */
body.enttec-post-prose article > p > img,
body.enttec-post-prose article > img {
	display: block;
	width: auto;   /* never upscale: the cap is a ceiling, not a target */
	max-width: min(var(--prose-wide, 1120px), calc(100vw - 48px));
	height: auto;
	margin-left: 50%;
	transform: translateX(-50%);
	border-radius: var(--eds-radius-lg, 20px);
}

/* Blockquote, for the contract's "quote" body block. */
body.enttec-post-prose article blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--enttec-blue, #0ea5df);
	font-size: clamp(20px, 2vw, 22px);
	line-height: 1.45;
	color: var(--enttec-ink, #2f2f2f);
}

body.enttec-post-prose article blockquote p {
	margin: 0 0 .5em;
}

body.enttec-post-prose article blockquote cite {
	display: block;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	color: var(--enttec-muted, #5b6573);
}

/* Tables, for the contract's "spec_table" body block. */
body.enttec-post-prose article table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: 16.5px;
}

body.enttec-post-prose article table th,
body.enttec-post-prose article table td {
	text-align: left;
	padding: 11px 14px;
	border-bottom: 1px solid var(--enttec-line, rgba(0, 0, 0, .08));
}

body.enttec-post-prose article table th {
	font-family: var(--enttec-font-display, inherit);
	font-weight: 600;
	background: var(--enttec-panel, #F6F8FB);
}

body.enttec-post-prose article table tr:last-child td {
	border-bottom: none;
}

/* A wide spec table scrolls inside its own box rather than making the whole
   page scroll sideways on a phone. */
body.enttec-post-prose article .wp-block-table,
body.enttec-post-prose article .epost-table {
	overflow-x: auto;
	margin: 2em 0;
}

/* Inline code, for firmware versions and protocol names. */
body.enttec-post-prose article code {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: .88em;
	background: var(--enttec-panel, #F6F8FB);
	border: 1px solid var(--enttec-line, rgba(0, 0, 0, .08));
	border-radius: 6px;
	padding: .12em .38em;
}

body.enttec-post-prose article hr {
	border: 0;
	border-top: 1px solid var(--enttec-line, rgba(0, 0, 0, .08));
	margin: 2.4em 0;
}

/* Tablet and below: switch the media breakout OFF. Under about 900px the text
   column is already most of the viewport, so there is nothing to break out
   into, and the transform would just push media past the theme's insets. */
@media (max-width: 900px) {
	body.enttec-post-prose article figure {
		max-width: 100%;
		margin-left: 0;
		transform: none;
	}

	/* width stays auto here so a small image is not upscaled on a phone. */
	body.enttec-post-prose article > p > img,
	body.enttec-post-prose article > img {
		max-width: 100%;
		margin-left: 0;
		transform: none;
	}
}

/* Narrow viewports. 18px floors above the 12px minimum for customer-facing
   text and keeps the measure comfortable on a phone. */
@media (max-width: 640px) {
	.enttec-post-prose {
		--prose-size: 18px;
	}

	/* Drop this sheet's own horizontal padding on small screens. The theme
	   already insets the article twice over (main has 20px padding, its child
	   section adds a 20px margin), so keeping a third 20px here left only 255px
	   of text on a 375px viewport, about 30 characters per line. Removing it
	   returns 40px and takes the line to roughly 34 characters, which is as
	   wide as a phone allows. */
	body.enttec-post-prose article {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Every transition in this sheet is decorative, so the reduce fallback simply
   removes them. Nothing here communicates state through motion alone. */
@media (prefers-reduced-motion: reduce) {
	.enttec-post-prose article a {
		transition: none;
	}
}