/**
 * Article body — one look for the text of every article, on all 15 themes.
 *
 * Loaded only on single posts, after the child theme's stylesheet, and scoped
 * to `body.single .hsb-content` so it outranks the themes' `.hstNN-prose`
 * rules without !important. Colours come from three custom properties each
 * theme sets in its own :root:
 *
 *   --hsb-a1      dark brand colour (headings, table header, list numbers)
 *   --hsb-a2      accent (bullets, rules, links on hover)
 *   --hsb-a-soft  light tint (heading and box backgrounds, zebra rows)
 *
 * Inline colours, fonts and alignment pasted into old articles are removed
 * before the text is printed (hsb_clean_article_styles), so these rules are
 * what the reader actually sees.
 *
 * @package HS_Base
 */

body.single .hsb-content {
	--hsb-art-a1: var(--hsb-a1, #1f2937);
	--hsb-art-a2: var(--hsb-a2, #2563eb);
	--hsb-art-soft: var(--hsb-a-soft, #f3f6fb);
	--hsb-art-ink: #1f2328;
	--hsb-art-line: color-mix(in srgb, var(--hsb-art-a1) 12%, #e6e8eb);
	--hsb-art-card: #fdfdfd;
	--hsb-art-radius: 0.875rem;

	color: var(--hsb-art-ink);
	font-family: var(--hsb-font-body);
	font-size: 1.0625rem;
	line-height: 2;
}

/* One font for everything inside the article, whatever was pasted in. */
body.single .hsb-content :where(*:not(code, pre, kbd, samp)) {
	font-family: inherit;
}

/* ------------------------------------------------------------ paragraphs */

body.single .hsb-content > p {
	margin-block: 0 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hsb-art-line);
	border-radius: var(--hsb-art-radius);
	background: var(--hsb-art-card);
	box-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 4px 14px rgb(16 24 40 / 4%);
}

body.single .hsb-content > p:empty {
	display: none;
}

/* A paragraph that only holds a photo is a photo, not a text card. */
body.single .hsb-content > p:has(> img:only-child),
body.single .hsb-content > p:has(> a:only-child > img) {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

body.single .hsb-content strong,
body.single .hsb-content b {
	color: var(--hsb-art-a1);
	font-weight: 700;
}

body.single .hsb-content a {
	color: var(--hsb-art-a1);
	text-decoration: underline;
	text-decoration-color: var(--hsb-art-a2);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

body.single .hsb-content a:hover,
body.single .hsb-content a:focus-visible {
	color: var(--hsb-art-a2);
}

/* ------------------------------------------------------------ headings */

body.single .hsb-content :is(h2, h3, h4, h5, h6) {
	position: relative;
	margin-block: 2rem 1rem;
	padding: 0.625rem 1.125rem;
	border-inline-start: 4px solid var(--hsb-art-a1);
	border-radius: 0.5rem;
	background: var(--hsb-art-soft);
	color: var(--hsb-art-a1);
	font-weight: 800;
	line-height: 1.6;
}

body.single .hsb-content h2 {
	font-size: 1.5rem;
	background: color-mix(in srgb, var(--hsb-art-a1) 9%, #fff);
	border-inline-start-width: 6px;
}

body.single .hsb-content h3 {
	font-size: 1.25rem;
	border-inline-start-color: var(--hsb-art-a2);
}

body.single .hsb-content :is(h4, h5, h6) {
	font-size: 1.0625rem;
	border-inline-start-color: var(--hsb-art-a2);
	background: color-mix(in srgb, var(--hsb-art-a2) 7%, #fff);
}

/* Headings pasted as bold/colored spans keep the heading colour. */
body.single .hsb-content :is(h2, h3, h4, h5, h6) :is(strong, b, span) {
	color: inherit;
}

/* ------------------------------------------------------------ lists */

body.single .hsb-content :is(ul, ol) {
	margin-block: 0 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hsb-art-line);
	border-radius: var(--hsb-art-radius);
	background: var(--hsb-art-card);
	list-style: none;
}

body.single .hsb-content li {
	position: relative;
	margin-block: 0.375rem;
	padding-inline-start: 1.75rem;
}

body.single .hsb-content ul > li::before {
	position: absolute;
	inset-block-start: 0.8em;
	inset-inline-start: 0.25rem;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--hsb-art-a2);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hsb-art-a2) 22%, transparent);
	content: "";
}

body.single .hsb-content ol {
	counter-reset: hsb-ol;
}

body.single .hsb-content ol > li {
	padding-inline-start: 2.5rem;
	counter-increment: hsb-ol;
}

body.single .hsb-content ol > li::before {
	position: absolute;
	inset-block-start: 0.35em;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 0.5rem;
	background: var(--hsb-art-a1);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	content: counter(hsb-ol);
}

/* A list inside a list is not a second box. */
body.single .hsb-content li :is(ul, ol) {
	margin-block: 0.5rem 0;
	padding: 0;
	border: 0;
	background: none;
}

/* ------------------------------------------------------------ boxes */

body.single .hsb-content blockquote {
	margin: 1.5rem 0;
	padding: 1.125rem 1.5rem;
	border: 0;
	border-inline-start: 5px solid var(--hsb-art-a2);
	border-radius: var(--hsb-art-radius);
	background: var(--hsb-art-soft);
	color: var(--hsb-art-a1);
	font-style: normal;
}

body.single .hsb-content blockquote > :last-child {
	margin-block-end: 0;
}

/* Tables of contents (Rank Math block, Easy TOC, LuckyWP). */
body.single .hsb-content :is(.wp-block-rank-math-toc-block, #ez-toc-container, .ez-toc-container, .lwptoc) {
	display: block;
	float: none;
	inline-size: auto;
	max-inline-size: none;
	margin: 1.5rem 0;
	padding: 1.125rem 1.5rem;
	border: 1px solid var(--hsb-art-line);
	border-radius: var(--hsb-art-radius);
	background: var(--hsb-art-soft);
	box-shadow: none;
}

body.single .hsb-content :is(.wp-block-rank-math-toc-block, #ez-toc-container, .ez-toc-container, .lwptoc) :is(ul, ol) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Inside a table of contents the plugin numbers the items itself: no bullets,
   no number badges, just its own indented list. */
body.single .hsb-content :is(.wp-block-rank-math-toc-block, #ez-toc-container, .ez-toc-container, .lwptoc) li {
	margin-block: 0.25rem;
	padding-inline-start: 0;
}

body.single .hsb-content :is(.wp-block-rank-math-toc-block, #ez-toc-container, .ez-toc-container, .lwptoc) li::before {
	content: none;
}

body.single .hsb-content :is(.wp-block-rank-math-toc-block, #ez-toc-container, .ez-toc-container, .lwptoc) li :is(ul, ol) {
	padding-inline-start: 1.25rem;
}

body.single .hsb-content :is(figure, .wp-caption) {
	max-inline-size: 100%;
	margin: 1.5rem auto;
}

body.single .hsb-content img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--hsb-art-radius);
}

body.single .hsb-content :is(figcaption, .wp-caption-text) {
	margin-block-start: 0.5rem;
	padding: 0.375rem 0.875rem;
	border-radius: 0.5rem;
	background: var(--hsb-art-soft);
	color: var(--hsb-art-a1);
	font-size: 0.875rem;
	line-height: 1.7;
	text-align: center;
}

body.single .hsb-content hr {
	margin-block: 2rem;
	border: 0;
	border-block-start: 2px dashed color-mix(in srgb, var(--hsb-art-a2) 40%, transparent);
}

/* ------------------------------------------------------------ tables */

body.single .hsb-content :is(figure.wp-block-table, .hsb-table-scroll) {
	overflow-x: auto;
}

body.single .hsb-content table {
	inline-size: 100%;
	margin: 1.5rem 0;
	border: 1px solid var(--hsb-art-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--hsb-art-radius);
	overflow: hidden;
	background: #fff;
	font-size: 0.9375rem;
	line-height: 1.8;
}

body.single .hsb-content :is(th, td) {
	padding: 0.625rem 0.875rem;
	border: 0;
	border-block-end: 1px solid var(--hsb-art-line);
	text-align: start;
	vertical-align: top;
}

/* Ordered by specificity: header cells, last row, zebra rows, then the first
   row of a table written without a header, which must beat the zebra. */
body.single .hsb-content th,
body.single .hsb-content thead td {
	background: var(--hsb-art-a1);
	color: #fff;
	font-weight: 700;
}

body.single .hsb-content tr:last-child > td {
	border-block-end: 0;
}

body.single .hsb-content tbody tr:nth-child(even) > td {
	background: var(--hsb-art-soft);
}

body.single .hsb-content table:not(:has(thead, th)) tr:first-child > td {
	background: var(--hsb-art-a1);
	color: #fff;
	font-weight: 700;
}

body.single .hsb-content :is(th, thead td, table:not(:has(thead, th)) tr:first-child > td) :is(strong, b, span, a) {
	color: inherit;
}

@media (width <= 700px) {
	body.single .hsb-content {
		font-size: 1rem;
	}

	body.single .hsb-content > p {
		padding: 0.875rem 1rem;
	}

	body.single .hsb-content h2 {
		font-size: 1.3125rem;
	}

	body.single .hsb-content h3 {
		font-size: 1.125rem;
	}

	/* Wide tables scroll sideways inside the column, never the page. */
	body.single .hsb-content table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------ featured image */

/* Shown whole, so the logo stamped in its corner is never cropped away. */
body.single [class*="-article__thumb"] img,
body.single .hsb-single__thumb img {
	max-block-size: none;
	block-size: auto;
	object-fit: contain;
}

/* ------------------------------------------------------------ call box */

/* The call box in the middle of every article (hsb_insert_mid_cta): the
   site's accent as a soft gradient, the headline in its dark colour, call in
   the colour the site uses for calls (never red or orange — themes override
   --hsb-cta-call where their floating colour does not fit), WhatsApp green
   unless the theme says otherwise. */
body.single .hsb-content .hsb-midcta {
	--midcta-call: var(--hsb-cta-call, var(--hsc-main, var(--hsb-art-a1)));
	--midcta-call-ink: var(--hsb-cta-call-ink, var(--hsc-main-ink, #fff));
	--midcta-wa: var(--hsb-cta-wa, #128c4a);

	position: relative;
	overflow: hidden;
	margin: 2.25rem 0;
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.75rem);
	border-radius: 20px;
	background: linear-gradient(120deg, var(--hsb-art-soft) 0%, color-mix(in srgb, var(--hsb-art-a2) 38%, #fff) 100%);
	box-shadow: 0 18px 40px rgb(16 24 40 / 10%);
}

/* A soft ring in the corner, like the reference card's glow. */
body.single .hsb-content .hsb-midcta::after {
	position: absolute;
	inset-block-start: -3rem;
	inset-inline-end: -3rem;
	inline-size: 10rem;
	block-size: 10rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hsb-art-a2) 30%, transparent);
	content: "";
	pointer-events: none;
}

body.single .hsb-content .hsb-midcta > * {
	position: relative;
	z-index: 1;
}

body.single .hsb-content .hsb-midcta__title {
	margin: 0 0 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--hsb-art-a1);
	font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
	font-weight: 800;
	line-height: 1.45;
}

body.single .hsb-content .hsb-midcta__text {
	margin: 0 0 1.4rem;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #2b2f36;
	font-size: 1.0625rem;
	line-height: 1.8;
}

body.single .hsb-content .hsb-midcta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

body.single .hsb-content .hsb-midcta a.hsb-midcta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-inline-size: 12rem;
	padding: 0.8rem 1.6rem;
	border: 2px solid rgb(255 255 255 / 70%);
	border-radius: 14px;
	box-shadow: 0 12px 24px rgb(16 24 40 / 18%);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
}

body.single .hsb-content .hsb-midcta a.hsb-midcta__btn:hover,
body.single .hsb-content .hsb-midcta a.hsb-midcta__btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgb(16 24 40 / 24%);
}

body.single .hsb-content .hsb-midcta a.hsb-midcta__btn--call,
body.single .hsb-content .hsb-midcta a.hsb-midcta__btn--call:hover {
	background: var(--midcta-call);
	color: var(--midcta-call-ink);
}

body.single .hsb-content .hsb-midcta a.hsb-midcta__btn--whatsapp,
body.single .hsb-content .hsb-midcta a.hsb-midcta__btn--whatsapp:hover {
	background: var(--midcta-wa);
	color: #fff;
}

body.single .hsb-content .hsb-midcta a.hsb-midcta__btn svg {
	flex: none;
	inline-size: 1.3rem;
	block-size: 1.3rem;
}

@media (width <= 560px) {
	body.single .hsb-content .hsb-midcta a.hsb-midcta__btn {
		flex: 1 1 100%;
	}
}